UX/UI 개선 및 CRUD 즉시 반영 개선

frontend/components/admin/CodeCategoryPanel.tsx

@@ -19,7 +19,15 @@ interface CodeCategoryPanelProps {
 
 export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: CodeCategoryPanelProps) {
   // useMultiLang 호출 제거 - 상위에서 전달받도록 수정
-  const { categories, categoriesLoading, categoriesError, fetchCategories, deleteCategory } = useCommonCode();
+  const {
+    categories,
+    categoriesLoading,
+    categoriesError,
+    fetchCategories,
+    createCategory,
+    updateCategory,
+    deleteCategory,
+  } = useCommonCode();
 
   // 로컬 상태
   const [searchTerm, setSearchTerm] = useState("");
@@ -138,7 +146,7 @@ export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: Co
                 className={cn(
                   "group flex cursor-pointer items-center justify-between rounded-lg p-3 transition-colors",
                   selectedCategoryCode === category.category_code
-                    ? "bg-primary text-primary-foreground"
+                    ? "border-2 border-gray-300 bg-gray-100 shadow-sm"
                     : "hover:bg-muted",
                 )}
                 onClick={() => onSelectCategory(category.category_code)}
@@ -163,7 +171,14 @@ export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: Co
                 </div>
 
                 {/* 액션 버튼 */}
-                <div className="flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">
+                <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"
@@ -199,6 +214,9 @@ export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: Co
           isOpen={showFormModal}
           onClose={() => setShowFormModal(false)}
           editingCategoryCode={editingCategory}
+          categories={categories}
+          onCreateCategory={createCategory}
+          onUpdateCategory={updateCategory}
         />
       )}
 
@@ -208,11 +226,10 @@ export function CodeCategoryPanel({ selectedCategoryCode, onSelectCategory }: Co
           isOpen={showDeleteModal}
           onClose={() => setShowDeleteModal(false)}
           onConfirm={handleConfirmDelete}
+          type="error"
           title="삭제 확인"
           message="이 카테고리를 삭제하시겠습니까? 관련된 모든 코드도 함께 삭제됩니다."
           confirmText="삭제"
-          cancelText="취소"
-          variant="destructive"
         />
       )}
     </div>