2 files changed, 68 insertions, 4 deletions

diff --git a/lib/approval-line/table/approval-line-table-toolbar-actions.tsx b/lib/approval-line/table/approval-line-table-toolbar-actions.tsx
index 6b6600fe..53798e5f 100644
--- a/lib/approval-line/table/approval-line-table-toolbar-actions.tsx
+++ b/lib/approval-line/table/approval-line-table-toolbar-actions.tsx
@@ -5,8 +5,9 @@ import { type Table } from "@tanstack/react-table"
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { DataTableViewOptions } from "@/components/data-table/data-table-view-options"
-import { Plus, Download, Upload } from "lucide-react"
+import { Plus, Download, Upload, Settings } from "lucide-react"
 import { type ApprovalLine } from "../service"
+import { CategoryManagementDialog } from "@/lib/approval-template/table/category-management-dialog"
 
 interface ApprovalLineTableToolbarActionsProps {
   table: Table<ApprovalLine>
@@ -17,6 +18,7 @@ export function ApprovalLineTableToolbarActions({
   table,
   onCreateLine,
 }: ApprovalLineTableToolbarActionsProps) {
+  const [showCategoryDialog, setShowCategoryDialog] = React.useState(false)
   const isFiltered = table.getState().columnFilters.length > 0
 
   return (
@@ -41,6 +43,22 @@ export function ApprovalLineTableToolbarActions({
         )}
       </div>
       <div className="flex items-center space-x-2">
+        {/* 카테고리 관리 버튼 */}
+        <CategoryManagementDialog
+          open={showCategoryDialog}
+          onOpenChange={setShowCategoryDialog}
+          showTrigger={false}
+        />
+
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => setShowCategoryDialog(true)}
+        >
+          <Settings className="mr-2 h-4 w-4" />
+          카테고리 관리
+        </Button>
+
         <Button
           variant="outline"
           size="sm"
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>
                   )}