커스텀 훅 분리 및 react query 최적화

frontend/app/(main)/admin/commonCode/page.tsx

@@ -1,14 +1,14 @@
 "use client";
 
-import { useState } from "react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { CodeCategoryPanel } from "@/components/admin/CodeCategoryPanel";
 import { CodeDetailPanel } from "@/components/admin/CodeDetailPanel";
+import { useSelectedCategory } from "@/hooks/useSelectedCategory";
 // import { useMultiLang } from "@/hooks/useMultiLang"; // 무한 루프 방지를 위해 임시 제거
 
 export default function CommonCodeManagementPage() {
   // const { getText } = useMultiLang(); // 무한 루프 방지를 위해 임시 제거
-  const [selectedCategoryCode, setSelectedCategoryCode] = useState<string>("");
+  const { selectedCategoryCode, selectCategory } = useSelectedCategory();
 
   return (
     <div className="container mx-auto space-y-6 p-6">
@@ -30,10 +30,7 @@ export default function CommonCodeManagementPage() {
               <CardTitle className="flex items-center gap-2">📂 코드 카테고리</CardTitle>
             </CardHeader>
             <CardContent className="p-0">
-              <CodeCategoryPanel
-                selectedCategoryCode={selectedCategoryCode}
-                onSelectCategory={setSelectedCategoryCode}
-              />
+              <CodeCategoryPanel selectedCategoryCode={selectedCategoryCode} onSelectCategory={selectCategory} />
             </CardContent>
           </Card>
         </div>