드래그앤 드랍 및 검색 및 핕터링 기능 구현

frontend/components/admin/CodeDetailPanel.tsx

@@ -9,16 +9,115 @@ import { useCommonCode } from "@/hooks/useCommonCode";
 // import { useMultiLang } from "@/hooks/useMultiLang"; // 무한 루프 방지를 위해 임시 제거
 import { CodeFormModal } from "./CodeFormModal";
 import { AlertModal } from "@/components/common/AlertModal";
-import { Search, Plus, Edit, Trash2 } from "lucide-react";
+import { Search, Plus, Edit, Trash2, GripVertical } from "lucide-react";
 import { cn } from "@/lib/utils";
+import {
+  DndContext,
+  closestCenter,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  DragEndEvent,
+} from "@dnd-kit/core";
+import {
+  arrayMove,
+  SortableContext,
+  sortableKeyboardCoordinates,
+  verticalListSortingStrategy,
+} from "@dnd-kit/sortable";
+import { useSortable } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 
 interface CodeDetailPanelProps {
   categoryCode: string;
 }
 
+// 드래그 가능한 코드 아이템 컴포넌트
+interface SortableCodeItemProps {
+  code: any;
+  onEdit: (code: any) => void;
+  onDelete: (code: any) => void;
+}
+
+function SortableCodeItem({ code, onEdit, onDelete }: SortableCodeItemProps) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: `${code.code_category}-${code.code_value}`,
+  });
+
+  const style = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={cn(
+        "group flex items-center justify-between rounded-lg p-3 transition-colors",
+        isDragging ? "border-2 border-blue-200 bg-blue-50 opacity-50 shadow-lg" : "hover:bg-muted",
+      )}
+      {...attributes}
+    >
+      {/* 드래그 핸들 */}
+      <div className="mr-2 cursor-grab text-gray-400 hover:text-gray-600 active:cursor-grabbing" {...listeners}>
+        <GripVertical className="h-4 w-4" />
+      </div>
+
+      <div className="min-w-0 flex-1">
+        <div className="mb-1 flex items-center gap-2">
+          <span className="text-sm font-medium">{code.code_name}</span>
+          {code.is_active === "Y" ? (
+            <Badge variant="secondary" className="text-xs">
+              활성
+            </Badge>
+          ) : (
+            <Badge variant="outline" className="text-xs">
+              비활성
+            </Badge>
+          )}
+        </div>
+        <div className="text-muted-foreground flex items-center gap-2 text-xs">
+          <span className="font-mono">{code.code_value}</span>
+          {code.code_name_eng && <span>({code.code_name_eng})</span>}
+        </div>
+        {code.description && <p className="text-muted-foreground mt-1 text-xs">{code.description}</p>}
+      </div>
+
+      <div className="flex gap-1">
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={() => onEdit(code)}
+          className="opacity-0 transition-opacity group-hover:opacity-100"
+        >
+          <Edit className="h-3 w-3" />
+        </Button>
+        <Button
+          size="sm"
+          variant="ghost"
+          onClick={() => onDelete(code)}
+          className="text-red-600 opacity-0 transition-opacity group-hover:opacity-100 hover:text-red-700"
+        >
+          <Trash2 className="h-3 w-3" />
+        </Button>
+      </div>
+    </div>
+  );
+}
+
 export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
   // const { getText } = useMultiLang(); // 무한 루프 방지를 위해 임시 제거
-  const { codes, codesLoading, codesError, fetchCodes, deleteCode } = useCommonCode();
+  const { codes, setCodes, codesLoading, codesError, fetchCodes, deleteCode, reorderCodes } = useCommonCode();
+
+  // 드래그앤드롭 센서 설정
+  const sensors = useSensors(
+    useSensor(PointerSensor),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+  );
 
   // 카테고리 변경 시 코드 조회
   useEffect(() => {
@@ -30,6 +129,7 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
 
   // 로컬 상태
   const [searchTerm, setSearchTerm] = useState("");
+  const [showActiveOnly, setShowActiveOnly] = useState(false); // 활성 필터 상태
   const [showFormModal, setShowFormModal] = useState(false);
   const [editingCode, setEditingCode] = useState<{ categoryCode: string; codeValue: string }>({
     categoryCode: "",
@@ -41,12 +141,18 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
     codeValue: "",
   });
 
-  // 검색 필터링
-  const filteredCodes = codes.filter(
-    (code) =>
+  // 검색 및 활성 상태 필터링
+  const filteredCodes = codes.filter((code) => {
+    // 검색 조건
+    const matchesSearch =
       code.code_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      code.code_value.toLowerCase().includes(searchTerm.toLowerCase()),
-  );
+      code.code_value.toLowerCase().includes(searchTerm.toLowerCase());
+
+    // 활성 상태 필터 조건
+    const matchesActiveFilter = showActiveOnly ? code.is_active : true;
+
+    return matchesSearch && matchesActiveFilter;
+  });
 
   // 코드 생성 핸들러
   const handleCreateCode = () => {
@@ -82,6 +188,54 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
     }
   };
 
+  // 드래그 종료 핸들러
+  const handleDragEnd = async (event: DragEndEvent) => {
+    const { active, over } = event;
+
+    if (!over || active.id === over.id) {
+      return;
+    }
+
+    const activeIndex = filteredCodes.findIndex((code) => `${code.code_category}-${code.code_value}` === active.id);
+    const overIndex = filteredCodes.findIndex((code) => `${code.code_category}-${code.code_value}` === over.id);
+
+    if (activeIndex !== overIndex) {
+      // 전체 codes 배열에서 현재 카테고리의 코드들을 찾아서 재정렬
+      const currentCategoryCodes = codes.filter((code) => code.code_category === categoryCode);
+      const otherCategoryCodes = codes.filter((code) => code.code_category !== categoryCode);
+
+      // 현재 카테고리 코드들의 순서를 변경
+      const reorderedCategoryCodes = arrayMove(currentCategoryCodes, activeIndex, overIndex);
+
+      // 전체 codes 배열 업데이트
+      const newCodesArray = [...otherCategoryCodes, ...reorderedCategoryCodes];
+      setCodes(newCodesArray);
+
+      try {
+        // 서버에 순서 변경 요청
+        console.log("🔄 코드 순서 변경:", {
+          categoryCode,
+          from: activeIndex,
+          to: overIndex,
+          reorderedCodes: reorderedCategoryCodes.map((code) => code.code_value),
+        });
+
+        // 백엔드 API 호출 - 실제 DB에 순서 저장
+        await reorderCodes(
+          categoryCode,
+          reorderedCategoryCodes.map((code, index) => ({
+            codeValue: code.code_value,
+            sortOrder: index + 1,
+          })),
+        );
+      } catch (error) {
+        console.error("순서 변경 실패:", error);
+        // 실패 시 원래 순서로 복원
+        fetchCodes(categoryCode);
+      }
+    }
+  };
+
   // 카테고리가 선택되지 않은 경우
   if (!categoryCode) {
     return (
@@ -122,12 +276,25 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
           </div>
         </div>
 
+        {/* 활성 상태 필터 토글 */}
+        <div className="flex items-center gap-2">
+          <label className="flex cursor-pointer items-center gap-2 text-sm">
+            <input
+              type="checkbox"
+              checked={showActiveOnly}
+              onChange={(e) => setShowActiveOnly(e.target.checked)}
+              className="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500"
+            />
+            활성 코드만 표시
+          </label>
+        </div>
+
         <Button onClick={handleCreateCode} className="w-full" size="sm">
           <Plus className="mr-2 h-4 w-4" />새 코드
         </Button>
       </div>
 
-      {/* 코드 목록 */}
+      {/* 코드 목록 (드래그앤드롭) */}
       <div className="max-h-96 overflow-y-auto">
         {codesLoading ? (
           <div className="p-4 text-center">
@@ -139,56 +306,23 @@ export function CodeDetailPanel({ categoryCode }: CodeDetailPanelProps) {
             <p>코드가 없습니다.</p>
           </div>
         ) : (
-          <div className="space-y-1">
-            {filteredCodes.map((code) => (
-              <div
-                key={`${code.code_category}-${code.code_value}`}
-                className="group hover:bg-muted flex items-center justify-between rounded-lg p-3 transition-colors"
-              >
-                <div className="min-w-0 flex-1">
-                  <div className="mb-1 flex items-center gap-2">
-                    <span className="text-sm font-medium">{code.code_name}</span>
-                    {code.is_active === "Y" ? (
-                      <Badge variant="secondary" className="text-xs">
-                        활성
-                      </Badge>
-                    ) : (
-                      <Badge variant="outline" className="text-xs">
-                        비활성
-                      </Badge>
-                    )}
-                  </div>
-                  <div className="text-muted-foreground flex items-center gap-2 text-xs">
-                    <span className="bg-muted rounded px-2 py-1 font-mono">{code.code_value}</span>
-                    {code.code_name_eng && <span>({code.code_name_eng})</span>}
-                  </div>
-                  {code.description && (
-                    <p className="text-muted-foreground mt-1 truncate text-xs">{code.description}</p>
-                  )}
-                </div>
-
-                {/* 액션 버튼 */}
-                <div className="flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="h-8 w-8 p-0"
-                    onClick={() => handleEditCode(code.code_value)}
-                  >
-                    <Edit className="h-3 w-3" />
-                  </Button>
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="h-8 w-8 p-0 text-red-600 hover:text-red-700"
-                    onClick={() => handleDeleteCode(code.code_value)}
-                  >
-                    <Trash2 className="h-3 w-3" />
-                  </Button>
-                </div>
+          <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+            <SortableContext
+              items={filteredCodes.map((code) => `${code.code_category}-${code.code_value}`)}
+              strategy={verticalListSortingStrategy}
+            >
+              <div className="space-y-1">
+                {filteredCodes.map((code) => (
+                  <SortableCodeItem
+                    key={`${code.code_category}-${code.code_value}`}
+                    code={code}
+                    onEdit={(code) => handleEditCode(code.code_value)}
+                    onDelete={(code) => handleDeleteCode(code.code_value)}
+                  />
+                ))}
               </div>
-            ))}
-          </div>
+            </SortableContext>
+          </DndContext>
         )}
       </div>