1 files changed, 51 insertions, 4 deletions
diff --git a/lib/approval-template/table/create-approval-template-sheet.tsx b/lib/approval-template/table/create-approval-template-sheet.tsx
index 7e899175..b8e7eafb 100644
--- a/lib/approval-template/table/create-approval-template-sheet.tsx
+++ b/lib/approval-template/table/create-approval-template-sheet.tsx
@@ -20,6 +20,7 @@ import {
   FormDescription,
 } from "@/components/ui/form"
 import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
 import {
   Sheet,
   SheetClose,
@@ -31,6 +32,7 @@ import {
 } from "@/components/ui/sheet"
 
 import { createApprovalTemplate } from "../service"
+import { getActiveApprovalTemplateCategories, type ApprovalTemplateCategory } from "../category-service"
 
 const createSchema = z.object({
   name: z.string().min(1, "이름은 필수입니다").max(100, "100자 이하"),
@@ -47,6 +49,8 @@ export function CreateApprovalTemplateSheet({ ...props }: CreateApprovalTemplate
   const [isPending, startTransition] = React.useTransition()
   const router = useRouter()
   const { data: session } = useSession()
+  const [categories, setCategories] = React.useState<ApprovalTemplateCategory[]>([])
+  const [isLoadingCategories, setIsLoadingCategories] = React.useState(false)
 
   const form = useForm<CreateSchema>({
     resolver: zodResolver(createSchema),
@@ -58,6 +62,30 @@ export function CreateApprovalTemplateSheet({ ...props }: CreateApprovalTemplate
     },
   })
 
+  // 카테고리 목록 로드
+  React.useEffect(() => {
+    let active = true
+    const loadCategories = async () => {
+      if (!props.open) return
+
+      setIsLoadingCategories(true)
+      try {
+        const data = await getActiveApprovalTemplateCategories()
+        if (active) {
+          setCategories(data)
+        }
+      } catch (error) {
+        console.error('카테고리 로드 실패:', error)
+      } finally {
+        if (active) setIsLoadingCategories(false)
+      }
+    }
+    loadCategories()
+    return () => {
+      active = false
+    }
+  }, [props.open])
+
   function onSubmit(values: CreateSchema) {
     startTransition(async () => {
       if (!session?.user?.id) {
@@ -132,10 +160,29 @@ export function CreateApprovalTemplateSheet({ ...props }: CreateApprovalTemplate
               render={({ field }) => (
                 <FormItem>
                   <FormLabel>카테고리 (선택)</FormLabel>
-                  <FormControl>
-                    <Input placeholder="카테고리" {...field} />
-                  </FormControl>
-                  <FormDescription>카테고리를 입력하지 않으면 미분류로 저장됩니다.</FormDescription>
+                  <Select
+                    value={field.value || "none"}
+                    onValueChange={(value) => field.onChange(value === "none" ? undefined : value)}
+                    disabled={isLoadingCategories}
+                  >
+                    <SelectTrigger>
+                      <SelectValue placeholder={isLoadingCategories ? "카테고리 로드 중..." : "카테고리를 선택하세요"} />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="none">선택 안함</SelectItem>
+                      {categories
+                        .sort((a, b) => a.sortOrder - b.sortOrder)
+                        .map((category) => (
+                          <SelectItem key={category.id} value={category.name}>
+                            {category.name}
+                            {category.description && (
+                              <span className="text-muted-foreground ml-2">({category.description})</span>
+                            )}
+                          </SelectItem>
+                        ))}
+                    </SelectContent>
+                  </Select>
+                  <FormDescription>카테고리를 선택하지 않으면 미분류로 저장됩니다.</FormDescription>
                   <FormMessage />
                 </FormItem>
               )}