From 832e80cd7f1e43f8cec44251a7f03836368b13d3 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Thu, 6 Nov 2025 14:18:36 +0900
Subject: [PATCH] =?UTF-8?q?=EB=B0=B0=EC=A7=80=20=ED=91=9C=EC=8B=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/admin/RoleDeleteModal.tsx |   2 +-
 frontend/components/admin/RoleFormModal.tsx   |   2 +-
 .../table-list/TableListComponent.tsx         | 137 ++++++++++++------
 3 files changed, 94 insertions(+), 47 deletions(-)

diff --git a/frontend/components/admin/RoleDeleteModal.tsx b/frontend/components/admin/RoleDeleteModal.tsx
index cf363dbd..9d178351 100644
--- a/frontend/components/admin/RoleDeleteModal.tsx
+++ b/frontend/components/admin/RoleDeleteModal.tsx
@@ -133,7 +133,7 @@ export function RoleDeleteModal({ isOpen, onClose, onSuccess, role }: RoleDelete
           )}
         </div>
 
-        <DialogFooter className="gap-2 sm:gap-0">
+        <ResizableDialogFooter className="gap-2 sm:gap-0">
           <Button
             variant="outline"
             onClick={onClose}
diff --git a/frontend/components/admin/RoleFormModal.tsx b/frontend/components/admin/RoleFormModal.tsx
index c20e9871..492a463c 100644
--- a/frontend/components/admin/RoleFormModal.tsx
+++ b/frontend/components/admin/RoleFormModal.tsx
@@ -359,7 +359,7 @@ export function RoleFormModal({ isOpen, onClose, onSuccess, editingRole }: RoleF
           )}
         </div>
 
-        <DialogFooter className="gap-2 sm:gap-0">
+        <ResizableDialogFooter className="gap-2 sm:gap-0">
           <Button
             variant="outline"
             onClick={onClose}
diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx
index c46fe1fe..13865051 100644
--- a/frontend/lib/registry/components/table-list/TableListComponent.tsx
+++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx
@@ -455,83 +455,130 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   // 카테고리 값 매핑 로드
   // ========================================
 
+  // 카테고리 컬럼 목록 추출 (useMemo로 최적화)
+  const categoryColumns = useMemo(() => {
+    const cols = Object.entries(columnMeta)
+      .filter(([_, meta]) => meta.inputType === "category")
+      .map(([columnName, _]) => columnName);
+    
+    console.log("🔍 [TableList] 카테고리 컬럼 추출:", {
+      columnMeta,
+      categoryColumns: cols,
+      columnMetaKeys: Object.keys(columnMeta),
+    });
+    
+    return cols;
+  }, [columnMeta]);
+
+  // 카테고리 매핑 로드 (columnMeta 변경 시 즉시 실행)
   useEffect(() => {
     const loadCategoryMappings = async () => {
-      if (!tableConfig.selectedTable) return;
+      console.log("🔄 [TableList] loadCategoryMappings 트리거:", {
+        hasTable: !!tableConfig.selectedTable,
+        table: tableConfig.selectedTable,
+        categoryColumnsLength: categoryColumns.length,
+        categoryColumns,
+        columnMetaKeys: Object.keys(columnMeta),
+      });
 
-      // columnMeta가 비어있으면 대기
-      const columnMetaKeys = Object.keys(columnMeta || {});
-      if (columnMetaKeys.length === 0) {
-        console.log("⏳ [TableList] columnMeta 로딩 대기 중...");
+      if (!tableConfig.selectedTable) {
+        console.log("⏭️ [TableList] 테이블 선택 안됨, 카테고리 매핑 로드 스킵");
+        return;
+      }
+
+      if (categoryColumns.length === 0) {
+        console.log("⏭️ [TableList] 카테고리 컬럼 없음, 카테고리 매핑 로드 스킵");
+        setCategoryMappings({});
         return;
       }
       
-      console.log("🚀 [TableList] 카테고리 매핑 로드 트리거:", {
+      console.log("🚀 [TableList] 카테고리 매핑 로드 시작:", {
         table: tableConfig.selectedTable,
-        columnMetaKeys,
-        dataLength: data.length,
+        categoryColumns,
+        columnMetaKeys: Object.keys(columnMeta),
       });
 
       try {
-        const categoryColumns = Object.entries(columnMeta)
-          .filter(([_, meta]) => meta.inputType === "category")
-          .map(([columnName, _]) => columnName);
-
-        if (categoryColumns.length === 0) {
-          console.log("⚠️ [TableList] 카테고리 컬럼 없음:", {
-            table: tableConfig.selectedTable,
-            columnMetaKeys,
-            columnMeta,
-          });
-          return;
-        }
-
-        console.log("🔄 [TableList] 카테고리 매핑 로드 시작:", {
-          table: tableConfig.selectedTable,
-          categoryColumns,
-          dataLength: data.length,
-          loading,
-        });
-
         const mappings: Record<string, Record<string, { label: string; color?: string }>> = {};
 
         for (const columnName of categoryColumns) {
           try {
+            console.log(`📡 [TableList] API 호출 시작 [${columnName}]:`, {
+              url: `/table-categories/${tableConfig.selectedTable}/${columnName}/values`,
+            });
+
             const apiClient = (await import("@/lib/api/client")).apiClient;
             const response = await apiClient.get(`/table-categories/${tableConfig.selectedTable}/${columnName}/values`);
 
-            if (response.data.success && response.data.data) {
+            console.log(`📡 [TableList] API 응답 [${columnName}]:`, {
+              success: response.data.success,
+              dataLength: response.data.data?.length,
+              rawData: response.data,
+              items: response.data.data,
+            });
+
+            if (response.data.success && response.data.data && Array.isArray(response.data.data)) {
               const mapping: Record<string, { label: string; color?: string }> = {};
+              
               response.data.data.forEach((item: any) => {
-                mapping[item.valueCode] = {
+                // valueCode를 문자열로 변환하여 키로 사용
+                const key = String(item.valueCode);
+                mapping[key] = {
                   label: item.valueLabel,
                   color: item.color,
                 };
+                console.log(`  🔑 [${columnName}] "${key}" => "${item.valueLabel}" (색상: ${item.color})`);
+              });
+              
+              if (Object.keys(mapping).length > 0) {
+                mappings[columnName] = mapping;
+                console.log(`✅ [TableList] 카테고리 매핑 로드 완료 [${columnName}]:`, {
+                  columnName,
+                  mappingCount: Object.keys(mapping).length,
+                  mappingKeys: Object.keys(mapping),
+                  mapping,
+                });
+              } else {
+                console.warn(`⚠️ [TableList] 매핑 데이터가 비어있음 [${columnName}]`);
+              }
+            } else {
+              console.warn(`⚠️ [TableList] 카테고리 값 없음 [${columnName}]:`, {
+                success: response.data.success,
+                hasData: !!response.data.data,
+                isArray: Array.isArray(response.data.data),
+                response: response.data,
               });
-              mappings[columnName] = mapping;
-              console.log(`✅ [TableList] 카테고리 매핑 로드 [${columnName}]:`, mapping);
             }
-          } catch (error) {
-            console.error(`❌ [TableList] 카테고리 값 로드 실패 [${columnName}]:`, error);
+          } catch (error: any) {
+            console.error(`❌ [TableList] 카테고리 값 로드 실패 [${columnName}]:`, {
+              error: error.message,
+              stack: error.stack,
+              response: error.response?.data,
+              status: error.response?.status,
+            });
           }
         }
 
-        console.log("📊 [TableList] 전체 카테고리 매핑:", mappings);
-        console.log("🔄 [TableList] setCategoryMappings 호출 전:", categoryMappings);
-        setCategoryMappings(mappings);
-        setCategoryMappingsKey((prev) => prev + 1); // 리렌더링 트리거
+        console.log("📊 [TableList] 전체 카테고리 매핑 설정:", {
+          mappingsCount: Object.keys(mappings).length,
+          mappingsKeys: Object.keys(mappings),
+          mappings,
+        });
         
-        // 상태 업데이트 확인을 위한 setTimeout
-        setTimeout(() => {
-          console.log("✅ [TableList] setCategoryMappings 호출 후 (비동기):", categoryMappings);
-        }, 100);
+        if (Object.keys(mappings).length > 0) {
+          setCategoryMappings(mappings);
+          setCategoryMappingsKey((prev) => prev + 1);
+          console.log("✅ [TableList] setCategoryMappings 호출 완료");
+        } else {
+          console.warn("⚠️ [TableList] 매핑이 비어있어 상태 업데이트 스킵");
+        }
       } catch (error) {
-        console.error("TableListComponent 카테고리 매핑 로드 실패:", error);
+        console.error("❌ [TableList] 카테고리 매핑 로드 실패:", error);
       }
     };
 
     loadCategoryMappings();
-  }, [tableConfig.selectedTable, Object.keys(columnMeta || {}).length]); // columnMeta가 로드되면 실행!
+  }, [tableConfig.selectedTable, categoryColumns.length, JSON.stringify(categoryColumns)]); // 더 명확한 의존성
 
   // ========================================
   // 데이터 가져오기
@@ -1141,7 +1188,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           return String(value);
       }
     },
-    [columnMeta, optimizedConvertCode],
+    [columnMeta, optimizedConvertCode, categoryMappings],
   );
 
   // ========================================