1 files changed, 49 insertions, 3 deletions
diff --git a/lib/approval-line/table/create-approval-line-sheet.tsx b/lib/approval-line/table/create-approval-line-sheet.tsx
index c19d11ab..b7878f71 100644
--- a/lib/approval-line/table/create-approval-line-sheet.tsx
+++ b/lib/approval-line/table/create-approval-line-sheet.tsx
@@ -30,6 +30,7 @@ import { type ApprovalLineFormData, ApprovalLineSchema } from "../validations"
 import { ApprovalLineSelector } from "@/components/knox/approval/ApprovalLineSelector"
 import { OrganizationManagerSelector, type OrganizationManagerItem } from "@/components/common/organization/organization-manager-selector"
 import { useSession } from "next-auth/react"
+import { getActiveApprovalTemplateCategories, type ApprovalTemplateCategory } from "@/lib/approval-template/category-service"
 
 interface CreateApprovalLineSheetProps {
   open: boolean
@@ -39,6 +40,8 @@ interface CreateApprovalLineSheetProps {
 export function CreateApprovalLineSheet({ open, onOpenChange }: CreateApprovalLineSheetProps) {
   const { data: session } = useSession();
   const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const [categories, setCategories] = React.useState<ApprovalTemplateCategory[]>([]);
+  const [isLoadingCategories, setIsLoadingCategories] = React.useState(false);
 
   // 고유 ID 생성 함수 (조직 관리자 추가 시 사용)
   const generateUniqueId = () => `apln-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`;
@@ -68,6 +71,30 @@ export function CreateApprovalLineSheet({ open, onOpenChange }: CreateApprovalLi
 
   const aplns = form.watch("aplns");
 
+  // 카테고리 목록 로드
+  React.useEffect(() => {
+    let active = true;
+    const loadCategories = async () => {
+      if (!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;
+    };
+  }, [open]);
+
   // 조직 관리자 추가 (공용 선택기 외 보조 입력 경로)
   const addOrganizationManagers = (managers: OrganizationManagerItem[]) => {
     const next = [...aplns];
@@ -157,9 +184,28 @@ export function CreateApprovalLineSheet({ open, onOpenChange }: CreateApprovalLi
                   render={({ field }) => (
                     <FormItem>
                       <FormLabel>카테고리</FormLabel>
-                      <FormControl>
-                        <Input placeholder="카테고리를 입력하세요" {...field} />
-                      </FormControl>
+                      <Select
+                        value={field.value || "none"}
+                        onValueChange={(value) => field.onChange(value === "none" ? "" : 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-${category.id}`} value={category.name}>
+                                {category.name}
+                                {category.description && (
+                                  <span className="text-muted-foreground ml-2">({category.description})</span>
+                                )}
+                              </SelectItem>
+                            ))}
+                        </SelectContent>
+                      </Select>
                       <FormMessage />
                     </FormItem>
                   )}