From b526d8ea2c9e3769b506c16ad197750fd2e8556d Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Thu, 6 Nov 2025 12:15:47 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20?=
 =?UTF-8?q?=EB=B0=B0=EC=A7=80=20=ED=91=9C=EC=8B=9C=20=EA=B0=9C=EC=84=A0=20?=
 =?UTF-8?q?=EB=B0=8F=20=EB=94=94=EB=B2=84=EA=B9=85=20=EB=A1=9C=EA=B7=B8=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 매핑이 없어도 항상 배지로 표시
- 매핑 없을 시 코드값 그대로 + 기본 slate 색상 사용
- 카테고리 매핑 로드 과정 로그 추가
- 기존 데이터에 기본 색상 추가하는 마이그레이션 스크립트 생성
---
 .../screen/InteractiveDataTable.tsx           | 40 ++++++++++---------
 1 file changed, 22 insertions(+), 18 deletions(-)

diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 7a150e57..b0b8dc59 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -226,12 +226,14 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
                 };
               });
               mappings[col.columnName] = mapping;
+              console.log(`✅ 카테고리 매핑 로드 성공 [${col.columnName}]:`, mapping);
             }
           } catch (error) {
-            // 카테고리 값 로드 실패 시 무시
+            console.error(`❌ 카테고리 값 로드 실패 [${col.columnName}]:`, error);
           }
         }
 
+        console.log("📊 전체 카테고리 매핑:", mappings);
         setCategoryMappings(mappings);
       } catch (error) {
         console.error("카테고리 매핑 로드 실패:", error);
@@ -1915,24 +1917,26 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     switch (actualWebType) {
       case "category": {
         // 카테고리 타입: 배지로 표시
+        if (!value) return "";
+        
         const mapping = categoryMappings[column.columnName];
-        if (mapping && value) {
-          const categoryData = mapping[String(value)];
-          if (categoryData) {
-            return (
-              <Badge 
-                style={{ 
-                  backgroundColor: categoryData.color || "#3b82f6",
-                  borderColor: categoryData.color || "#3b82f6"
-                }} 
-                className="text-white"
-              >
-                {categoryData.label}
-              </Badge>
-            );
-          }
-        }
-        return String(value || "");
+        const categoryData = mapping?.[String(value)];
+        
+        // 매핑 데이터가 있으면 라벨과 색상 사용, 없으면 코드값과 기본색상
+        const displayLabel = categoryData?.label || String(value);
+        const displayColor = categoryData?.color || "#64748b"; // 기본 slate 색상
+        
+        return (
+          <Badge 
+            style={{ 
+              backgroundColor: displayColor,
+              borderColor: displayColor
+            }} 
+            className="text-white"
+          >
+            {displayLabel}
+          </Badge>
+        );
       }
 
       case "date":