공통코드 수정중

frontend/components/admin/SortableCodeItem.tsx

@@ -5,7 +5,7 @@ import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
-import { Edit, Trash2 } from "lucide-react";
+import { Edit, Trash2, ChevronRight } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { useUpdateCode } from "@/hooks/queries/useCodes";
 import type { CodeInfo } from "@/types/commonCode";
@@ -61,20 +61,32 @@ export function SortableCodeItem({
     }
   };
 
+  // 계층 깊이 계산 (들여쓰기용)
+  const depth = code.depth || 1;
+  const indentPx = (depth - 1) * 20; // 깊이당 20px 들여쓰기
+
   return (
     <div
       ref={setNodeRef}
-      style={style}
+      style={{
+        ...style,
+        marginLeft: `${indentPx}px`,
+      }}
       {...attributes}
       {...listeners}
       className={cn(
         "group cursor-grab rounded-lg border bg-card p-4 shadow-sm transition-all hover:shadow-md",
         isDragging && "cursor-grabbing opacity-50",
+        depth > 1 && "border-l-2 border-l-primary/30",
       )}
     >
       <div className="flex items-start justify-between gap-2">
         <div className="min-w-0 flex-1">
           <div className="flex items-center gap-2">
+            {/* 계층 표시 아이콘 */}
+            {depth > 1 && (
+              <ChevronRight className="h-3 w-3 text-muted-foreground" />
+            )}
             <h4 className="text-sm font-semibold">{code.codeName || code.code_name}</h4>
             <Badge
               variant={code.isActive === "Y" || code.is_active === "Y" ? "default" : "secondary"}
@@ -96,7 +108,14 @@ export function SortableCodeItem({
               {code.isActive === "Y" || code.is_active === "Y" ? "활성" : "비활성"}
             </Badge>
           </div>
-          <p className="mt-1 text-xs text-muted-foreground">{code.codeValue || code.code_value}</p>
+          <p className="mt-1 text-xs text-muted-foreground">
+            {code.codeValue || code.code_value}
+            {code.parentCodeValue || code.parent_code_value ? (
+              <span className="ml-2 text-primary/70">
+                (부모: {code.parentCodeValue || code.parent_code_value})
+              </span>
+            ) : null}
+          </p>
           {code.description && <p className="mt-1 text-xs text-muted-foreground">{code.description}</p>}
         </div>