현대적 라이브러리 도입 완료

frontend/components/admin/CodeCategoryPanel.tsx

@@ -1,16 +1,15 @@
 "use client";
 
-import { useState } from "react";
+import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import { Badge } from "@/components/ui/badge";
+
 import { LoadingSpinner } from "@/components/common/LoadingSpinner";
-import { useCommonCode } from "@/hooks/useCommonCode";
-// import { useMultiLang } from "@/hooks/useMultiLang"; // 무한 루프 방지를 위해 임시 제거
 import { CodeCategoryFormModal } from "./CodeCategoryFormModal";
+import { CategoryItem } from "./CategoryItem";
 import { AlertModal } from "@/components/common/AlertModal";
-import { Search, Plus, Edit, Trash2 } from "lucide-react";
-import { cn } from "@/lib/utils";
+import { Search, Plus } from "lucide-react";
+import { useCategories, useDeleteCategory } from "@/hooks/queries/useCategories";
 
 interface CodeCategoryPanelProps {
   selectedCategoryCode: string;
@@ -18,88 +17,87 @@ interface CodeCategoryPanelProps {
 }
 
 export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: CodeCategoryPanelProps) {
-  // useMultiLang 호출 제거 - 상위에서 전달받도록 수정
-  const {
-    categories,
-    categoriesLoading,
-    categoriesError,
-    fetchCategories,
-    createCategory,
-    updateCategory,
-    deleteCategory,
-  } = useCommonCode();
+  // React Query로 카테고리 데이터 관리
+  const { data: categories = [], isLoading, error } = useCategories();
+  const deleteCategoryMutation = useDeleteCategory();
 
   // 로컬 상태
   const [searchTerm, setSearchTerm] = useState("");
-  const [showActiveOnly, setShowActiveOnly] = useState(false); // 활성 필터 상태
+  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 matchesSearch =
       category.category_name.toLowerCase().includes(searchTerm.toLowerCase()) ||
       category.category_code.toLowerCase().includes(searchTerm.toLowerCase());
 
-    // 활성 상태 필터 조건
-    const matchesActiveFilter = showActiveOnly ? category.is_active : true;
+    const matchesActive = !showActiveOnly || category.is_active === "Y";
 
-    return matchesSearch && matchesActiveFilter;
+    return matchesSearch && matchesActive;
   });
 
-  // 카테고리 생성 핸들러
-  const handleCreateCategory = () => {
+  // 새 카테고리 생성
+  const handleNewCategory = () => {
     setEditingCategory("");
     setShowFormModal(true);
   };
 
-  // 카테고리 수정 핸들러
+  // 카테고리 수정
   const handleEditCategory = (categoryCode: string) => {
     setEditingCategory(categoryCode);
     setShowFormModal(true);
   };
 
-  // 카테고리 삭제 핸들러
+  // 카테고리 삭제 확인
   const handleDeleteCategory = (categoryCode: string) => {
     setDeletingCategory(categoryCode);
     setShowDeleteModal(true);
   };
 
-  // 삭제 확인 핸들러
+  // 카테고리 삭제 실행
   const handleConfirmDelete = async () => {
     if (!deletingCategory) return;
 
     try {
-      await deleteCategory(deletingCategory);
+      await deleteCategoryMutation.mutateAsync(deletingCategory);
+
+      // 삭제된 카테고리가 선택된 상태라면 선택 해제
+      if (selectedCategoryCode === deletingCategory) {
+        onSelectCategory("");
+      }
+
       setShowDeleteModal(false);
       setDeletingCategory("");
     } catch (error) {
-      console.error("카테고리 삭제 오류:", error);
-      // 에러 처리는 useCommonCode 훅에서 처리됨
+      console.error("카테고리 삭제 실패:", error);
     }
   };
 
-  if (categoriesError) {
+  if (error) {
     return (
-      <div className="p-4 text-center text-red-600">
-        <p className="mb-2">❌ {categoriesError}</p>
-        <Button onClick={() => fetchCategories()} variant="outline" size="sm">
-          다시 시도
-        </Button>
+      <div className="flex h-full items-center justify-center">
+        <div className="text-center">
+          <p className="text-red-600">카테고리를 불러오는 중 오류가 발생했습니다.</p>
+          <Button variant="outline" onClick={() => window.location.reload()} className="mt-2">
+            다시 시도
+          </Button>
+        </div>
       </div>
     );
   }
 
   return (
-    <div className="space-y-4">
-      {/* 검색 및 추가 버튼 */}
-      <div className="space-y-3 border-b p-4">
-        <div className="flex gap-2">
-          <div className="relative flex-1">
-            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 transform text-gray-400" />
+    <div className="flex h-full flex-col">
+      {/* 검색 및 필터 */}
+      <div className="border-b p-4">
+        <div className="space-y-3">
+          {/* 검색 */}
+          <div className="relative">
+            <Search className="absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-gray-400" />
             <Input
               placeholder="카테고리 검색..."
               value={searchTerm}
@@ -107,102 +105,49 @@ export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: Co
               className="pl-10"
             />
           </div>
-        </div>
 
-        {/* 활성 상태 필터 토글 */}
-        <div className="flex items-center gap-2">
-          <label className="flex cursor-pointer items-center gap-2 text-sm">
+          {/* 활성 필터 */}
+          <div className="flex items-center space-x-2">
             <input
               type="checkbox"
+              id="activeOnly"
               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"
+              className="rounded border-gray-300"
             />
-            활성 카테고리만 표시
-          </label>
-        </div>
+            <label htmlFor="activeOnly" className="text-sm text-gray-600">
+              활성 카테고리만 표시
+            </label>
+          </div>
 
-        <Button onClick={handleCreateCategory} className="w-full" size="sm">
-          <Plus className="mr-2 h-4 w-4" />새 카테고리
-        </Button>
+          {/* 새 카테고리 버튼 */}
+          <Button onClick={handleNewCategory} className="w-full" size="sm">
+            <Plus className="mr-2 h-4 w-4" />새 카테고리
+          </Button>
+        </div>
       </div>
 
       {/* 카테고리 목록 */}
-      <div className="max-h-96 overflow-y-auto">
-        {categoriesLoading ? (
-          <div className="p-4 text-center">
-            <LoadingSpinner size="sm" />
-            <p className="text-muted-foreground mt-2 text-sm">카테고리를 불러오는 중...</p>
+      <div className="flex-1 overflow-y-auto">
+        {isLoading ? (
+          <div className="flex h-32 items-center justify-center">
+            <LoadingSpinner />
           </div>
         ) : filteredCategories.length === 0 ? (
-          <div className="text-muted-foreground p-4 text-center">
-            <p>카테고리가 없습니다.</p>
+          <div className="p-4 text-center text-gray-500">
+            {searchTerm ? "검색 결과가 없습니다." : "카테고리가 없습니다."}
           </div>
         ) : (
-          <div className="space-y-1">
+          <div className="space-y-1 p-2">
             {filteredCategories.map((category) => (
-              <div
+              <CategoryItem
                 key={category.category_code}
-                className={cn(
-                  "group flex cursor-pointer items-center justify-between rounded-lg p-3 transition-colors",
-                  selectedCategoryCode === category.category_code
-                    ? "border-2 border-gray-300 bg-gray-100 shadow-sm"
-                    : "hover:bg-muted",
-                )}
-                onClick={() => onSelectCategory(category.category_code)}
-              >
-                <div className="min-w-0 flex-1">
-                  <div className="mb-1 flex items-center gap-2">
-                    <span className="text-sm font-medium">{category.category_name}</span>
-                    {category.is_active === "Y" ? (
-                      <Badge variant="secondary" className="text-xs">
-                        활성
-                      </Badge>
-                    ) : (
-                      <Badge variant="outline" className="text-xs">
-                        비활성
-                      </Badge>
-                    )}
-                  </div>
-                  <p className="text-muted-foreground truncate text-xs">{category.category_code}</p>
-                  {category.description && (
-                    <p className="text-muted-foreground mt-1 truncate text-xs">{category.description}</p>
-                  )}
-                </div>
-
-                {/* 액션 버튼 */}
-                <div
-                  className={cn(
-                    "flex gap-1 transition-opacity",
-                    selectedCategoryCode === category.category_code
-                      ? "opacity-100"
-                      : "opacity-0 group-hover:opacity-100",
-                  )}
-                >
-                  <Button
-                    variant="ghost"
-                    size="sm"
-                    className="h-8 w-8 p-0"
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      handleEditCategory(category.category_code);
-                    }}
-                  >
-                    <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={(e) => {
-                      e.stopPropagation();
-                      handleDeleteCategory(category.category_code);
-                    }}
-                  >
-                    <Trash2 className="h-3 w-3" />
-                  </Button>
-                </div>
-              </div>
+                category={category}
+                isSelected={selectedCategoryCode === category.category_code}
+                onSelect={() => onSelectCategory(category.category_code)}
+                onEdit={() => handleEditCategory(category.category_code)}
+                onDelete={() => handleDeleteCategory(category.category_code)}
+              />
             ))}
           </div>
         )}
@@ -214,9 +159,6 @@ export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: Co
           isOpen={showFormModal}
           onClose={() => setShowFormModal(false)}
           editingCategoryCode={editingCategory}
-          categories={categories}
-          onCreateCategory={createCategory}
-          onUpdateCategory={updateCategory}
         />
       )}
 
@@ -225,11 +167,11 @@ export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: Co
         <AlertModal
           isOpen={showDeleteModal}
           onClose={() => setShowDeleteModal(false)}
-          onConfirm={handleConfirmDelete}
           type="error"
-          title="삭제 확인"
-          message="이 카테고리를 삭제하시겠습니까? 관련된 모든 코드도 함께 삭제됩니다."
+          title="카테고리 삭제"
+          message="정말로 이 카테고리를 삭제하시겠습니까? 이 작업은 되돌릴 수 없습니다."
           confirmText="삭제"
+          onConfirm={handleConfirmDelete}
         />
       )}
     </div>