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

frontend/components/admin/CodeCategoryPanel.tsx

@@ -23,17 +23,24 @@ export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: Co
 
   // 로컬 상태
   const [searchTerm, setSearchTerm] = useState("");
+  const [showActiveOnly, setShowActiveOnly] = useState(false); // 활성 필터 상태
   const [showFormModal, setShowFormModal] = useState(false);
   const [editingCategory, setEditingCategory] = useState<string>("");
   const [showDeleteModal, setShowDeleteModal] = useState(false);
   const [deletingCategory, setDeletingCategory] = useState<string>("");
 
-  // 검색 필터링
-  const filteredCategories = categories.filter(
-    (category) =>
+  // 검색 및 활성 상태 필터링
+  const filteredCategories = categories.filter((category) => {
+    // 검색 조건
+    const matchesSearch =
       category.category_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
-      category.category_code.toLowerCase().includes(searchTerm.toLowerCase()),
-  );
+      category.category_code.toLowerCase().includes(searchTerm.toLowerCase());
+
+    // 활성 상태 필터 조건
+    const matchesActiveFilter = showActiveOnly ? category.is_active : true;
+
+    return matchesSearch && matchesActiveFilter;
+  });
 
   // 카테고리 생성 핸들러
   const handleCreateCategory = () => {
@@ -94,6 +101,19 @@ export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: Co
           </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={handleCreateCategory} className="w-full" size="sm">
           <Plus className="mr-2 h-4 w-4" />새 카테고리
         </Button>