공통코드 계층구조 구현

frontend/components/admin/CodeDetailPanel.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import { useState, useMemo } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Badge } from "@/components/ui/badge";
@@ -45,15 +45,124 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
   const reorderCodesMutation = useReorderCodes();
 
   // 드래그앤드롭을 위해 필터링된 코드 목록 사용
-  const { filteredItems: filteredCodes } = useSearchAndFilter(codes, {
+  const { filteredItems: filteredCodesRaw } = useSearchAndFilter(codes, {
     searchFields: ["code_name", "code_value"],
   });
 
+  // 계층 구조로 정렬 (부모 → 자식 순서)
+  const filteredCodes = useMemo(() => {
+    if (!filteredCodesRaw || filteredCodesRaw.length === 0) return [];
+
+    // 코드를 계층 순서로 정렬하는 함수
+    const sortHierarchically = (codes: CodeInfo[]): CodeInfo[] => {
+      const result: CodeInfo[] = [];
+      const codeMap = new Map<string, CodeInfo>();
+      const childrenMap = new Map<string, CodeInfo[]>();
+
+      // 코드 맵 생성
+      codes.forEach((code) => {
+        const codeValue = code.codeValue || code.code_value || "";
+        const parentValue = code.parentCodeValue || code.parent_code_value;
+        codeMap.set(codeValue, code);
+
+        if (parentValue) {
+          if (!childrenMap.has(parentValue)) {
+            childrenMap.set(parentValue, []);
+          }
+          childrenMap.get(parentValue)!.push(code);
+        }
+      });
+
+      // 재귀적으로 트리 구조 순회
+      const traverse = (parentValue: string | null, depth: number) => {
+        const children = parentValue
+          ? childrenMap.get(parentValue) || []
+          : codes.filter((c) => !c.parentCodeValue && !c.parent_code_value);
+
+        // 정렬 순서로 정렬
+        children
+          .sort((a, b) => (a.sortOrder || a.sort_order || 0) - (b.sortOrder || b.sort_order || 0))
+          .forEach((code) => {
+            result.push(code);
+            const codeValue = code.codeValue || code.code_value || "";
+            traverse(codeValue, depth + 1);
+          });
+      };
+
+      traverse(null, 1);
+
+      // 트리에 포함되지 않은 코드들도 추가 (orphan 코드)
+      codes.forEach((code) => {
+        if (!result.includes(code)) {
+          result.push(code);
+        }
+      });
+
+      return result;
+    };
+
+    return sortHierarchically(filteredCodesRaw);
+  }, [filteredCodesRaw]);
+
   // 모달 상태
   const [showFormModal, setShowFormModal] = useState(false);
   const [editingCode, setEditingCode] = useState<CodeInfo | null>(null);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [deletingCode, setDeletingCode] = useState<CodeInfo | null>(null);
+  const [defaultParentCode, setDefaultParentCode] = useState<string | undefined>(undefined);
+
+  // 트리 접기/펼치기 상태 (코드값 Set)
+  const [collapsedCodes, setCollapsedCodes] = useState<Set<string>>(new Set());
+
+  // 자식 정보 계산
+  const childrenMap = useMemo(() => {
+    const map = new Map<string, CodeInfo[]>();
+    codes.forEach((code) => {
+      const parentValue = code.parentCodeValue || code.parent_code_value;
+      if (parentValue) {
+        if (!map.has(parentValue)) {
+          map.set(parentValue, []);
+        }
+        map.get(parentValue)!.push(code);
+      }
+    });
+    return map;
+  }, [codes]);
+
+  // 접기/펼치기 토글
+  const toggleExpand = (codeValue: string) => {
+    setCollapsedCodes((prev) => {
+      const newSet = new Set(prev);
+      if (newSet.has(codeValue)) {
+        newSet.delete(codeValue);
+      } else {
+        newSet.add(codeValue);
+      }
+      return newSet;
+    });
+  };
+
+  // 특정 코드가 표시되어야 하는지 확인 (부모가 접혀있으면 숨김)
+  const isCodeVisible = (code: CodeInfo): boolean => {
+    const parentValue = code.parentCodeValue || code.parent_code_value;
+    if (!parentValue) return true; // 최상위 코드는 항상 표시
+
+    // 부모가 접혀있으면 숨김
+    if (collapsedCodes.has(parentValue)) return false;
+
+    // 부모의 부모도 확인 (재귀적으로)
+    const parentCode = codes.find((c) => (c.codeValue || c.code_value) === parentValue);
+    if (parentCode) {
+      return isCodeVisible(parentCode);
+    }
+
+    return true;
+  };
+
+  // 표시할 코드 목록 (접힌 상태 반영)
+  const visibleCodes = useMemo(() => {
+    return filteredCodes.filter(isCodeVisible);
+  }, [filteredCodes, collapsedCodes, codes]);
 
   // 드래그 앤 드롭 훅 사용
   const dragAndDrop = useDragAndDrop<CodeInfo>({
@@ -73,12 +182,21 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
   // 새 코드 생성
   const handleNewCode = () => {
     setEditingCode(null);
+    setDefaultParentCode(undefined);
     setShowFormModal(true);
   };
 
   // 코드 수정
   const handleEditCode = (code: CodeInfo) => {
     setEditingCode(code);
+    setDefaultParentCode(undefined);
+    setShowFormModal(true);
+  };
+
+  // 하위 코드 추가
+  const handleAddChild = (parentCode: CodeInfo) => {
+    setEditingCode(null);
+    setDefaultParentCode(parentCode.codeValue || parentCode.code_value || "");
     setShowFormModal(true);
   };
 
@@ -110,7 +228,7 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
   if (!categoryCode) {
     return (
       <div className="flex h-96 items-center justify-center">
-        <p className="text-sm text-muted-foreground">카테고리를 선택하세요</p>
+        <p className="text-muted-foreground text-sm">카테고리를 선택하세요</p>
       </div>
     );
   }
@@ -119,7 +237,7 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
     return (
       <div className="flex h-96 items-center justify-center">
         <div className="text-center">
-          <p className="text-sm font-semibold text-destructive">코드를 불러오는 중 오류가 발생했습니다.</p>
+          <p className="text-destructive text-sm font-semibold">코드를 불러오는 중 오류가 발생했습니다.</p>
           <Button variant="outline" onClick={() => window.location.reload()} className="mt-4 h-10 text-sm font-medium">
             다시 시도
           </Button>
@@ -135,7 +253,7 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
         {/* 검색 + 버튼 */}
         <div className="flex items-center gap-2">
           <div className="relative w-full sm:w-[300px]">
-            <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+            <Search className="text-muted-foreground absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2" />
             <Input
               placeholder="코드 검색..."
               value={searchTerm}
@@ -156,9 +274,9 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
             id="activeOnlyCodes"
             checked={showActiveOnly}
             onChange={(e) => setShowActiveOnly(e.target.checked)}
-            className="h-4 w-4 rounded border-input"
+            className="border-input h-4 w-4 rounded"
           />
-          <label htmlFor="activeOnlyCodes" className="text-sm text-muted-foreground">
+          <label htmlFor="activeOnlyCodes" className="text-muted-foreground text-sm">
             활성만 표시
           </label>
         </div>
@@ -170,9 +288,9 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
           <div className="flex h-32 items-center justify-center">
             <LoadingSpinner />
           </div>
-        ) : filteredCodes.length === 0 ? (
+        ) : visibleCodes.length === 0 ? (
           <div className="flex h-32 items-center justify-center">
-            <p className="text-sm text-muted-foreground">
+            <p className="text-muted-foreground text-sm">
               {codes.length === 0 ? "코드가 없습니다." : "검색 결과가 없습니다."}
             </p>
           </div>
@@ -180,23 +298,35 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
           <>
             <DndContext {...dragAndDrop.dndContextProps}>
               <SortableContext
-                items={filteredCodes.map((code) => code.codeValue || code.code_value)}
+                items={visibleCodes.map((code) => code.codeValue || code.code_value)}
                 strategy={verticalListSortingStrategy}
               >
-                {filteredCodes.map((code, index) => (
-                  <SortableCodeItem
-                    key={`${code.codeValue || code.code_value}-${index}`}
-                    code={code}
-                    categoryCode={categoryCode}
-                    onEdit={() => handleEditCode(code)}
-                    onDelete={() => handleDeleteCode(code)}
-                  />
-                ))}
+                {visibleCodes.map((code, index) => {
+                  const codeValue = code.codeValue || code.code_value || "";
+                  const children = childrenMap.get(codeValue) || [];
+                  const hasChildren = children.length > 0;
+                  const isExpanded = !collapsedCodes.has(codeValue);
+
+                  return (
+                    <SortableCodeItem
+                      key={`${codeValue}-${index}`}
+                      code={code}
+                      categoryCode={categoryCode}
+                      onEdit={() => handleEditCode(code)}
+                      onDelete={() => handleDeleteCode(code)}
+                      onAddChild={() => handleAddChild(code)}
+                      hasChildren={hasChildren}
+                      childCount={children.length}
+                      isExpanded={isExpanded}
+                      onToggleExpand={() => toggleExpand(codeValue)}
+                    />
+                  );
+                })}
               </SortableContext>
 
               <DragOverlay dropAnimation={null}>
                 {dragAndDrop.activeItem ? (
-                  <div className="cursor-grabbing rounded-lg border bg-card p-4 shadow-lg">
+                  <div className="bg-card cursor-grabbing rounded-lg border p-4 shadow-lg">
                     {(() => {
                       const activeCode = dragAndDrop.activeItem;
                       if (!activeCode) return null;
@@ -204,24 +334,20 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
                         <div className="flex items-start justify-between">
                           <div className="min-w-0 flex-1">
                             <div className="flex items-center gap-2">
-                              <h4 className="text-sm font-semibold">
-                                {activeCode.codeName || activeCode.code_name}
-                              </h4>
+                              <h4 className="text-sm font-semibold">{activeCode.codeName || activeCode.code_name}</h4>
                               <Badge
                                 variant={
-                                  activeCode.isActive === "Y" || activeCode.is_active === "Y"
-                                    ? "default"
-                                    : "secondary"
+                                  activeCode.isActive === "Y" || activeCode.is_active === "Y" ? "default" : "secondary"
                                 }
                               >
                                 {activeCode.isActive === "Y" || activeCode.is_active === "Y" ? "활성" : "비활성"}
                               </Badge>
                             </div>
-                            <p className="mt-1 text-xs text-muted-foreground">
+                            <p className="text-muted-foreground mt-1 text-xs">
                               {activeCode.codeValue || activeCode.code_value}
                             </p>
                             {activeCode.description && (
-                              <p className="mt-1 text-xs text-muted-foreground">{activeCode.description}</p>
+                              <p className="text-muted-foreground mt-1 text-xs">{activeCode.description}</p>
                             )}
                           </div>
                         </div>
@@ -236,13 +362,13 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
             {isFetchingNextPage && (
               <div className="flex items-center justify-center py-4">
                 <LoadingSpinner size="sm" />
-                <span className="ml-2 text-sm text-muted-foreground">코드를 더 불러오는 중...</span>
+                <span className="text-muted-foreground ml-2 text-sm">코드를 더 불러오는 중...</span>
               </div>
             )}
 
             {/* 모든 코드 로드 완료 메시지 */}
             {!hasNextPage && codes.length > 0 && (
-              <div className="py-4 text-center text-sm text-muted-foreground">모든 코드를 불러왔습니다.</div>
+              <div className="text-muted-foreground py-4 text-center text-sm">모든 코드를 불러왔습니다.</div>
             )}
           </>
         )}
@@ -255,10 +381,12 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
           onClose={() => {
             setShowFormModal(false);
             setEditingCode(null);
+            setDefaultParentCode(undefined);
           }}
           categoryCode={categoryCode}
           editingCode={editingCode}
           codes={codes}
+          defaultParentCode={defaultParentCode}
         />
       )}