From 7581cd1582a41b535345d838bafdb84f6eb9bb27 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Thu, 6 Nov 2025 12:12:19 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=85=8C=EC=9D=B4=EB=B8=94=20=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=EC=97=90=EC=84=9C=20=EC=B9=B4=ED=85=8C?=
 =?UTF-8?q?=EA=B3=A0=EB=A6=AC=20=EA=B0=92=EC=9D=84=20=EB=B0=B0=EC=A7=80?=
 =?UTF-8?q?=EB=A1=9C=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 카테고리 타입 컬럼을 배지 형태로 렌더링
- 사용자가 설정한 색상 적용
- categoryMappings에 라벨과 색상 모두 저장
- 기본 색상: #3b82f6 (파란색)
- 텍스트 색상: 흰색으로 고정하여 가독성 확보
---
 .../screen/InteractiveDataTable.tsx           | 33 ++++++++++++++-----
 1 file changed, 24 insertions(+), 9 deletions(-)

diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx
index 3165bfa8..7a150e57 100644
--- a/frontend/components/screen/InteractiveDataTable.tsx
+++ b/frontend/components/screen/InteractiveDataTable.tsx
@@ -144,8 +144,8 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
   const [filteredData, setFilteredData] = useState<any[]>([]); // 필터링된 데이터
   const [columnLabels, setColumnLabels] = useState<Record<string, string>>({}); // 컬럼명 -> 라벨 매핑
 
-  // 카테고리 값 매핑 캐시 (컬럼명 -> {코드 -> 라벨})
-  const [categoryMappings, setCategoryMappings] = useState<Record<string, Record<string, string>>>({});
+  // 카테고리 값 매핑 캐시 (컬럼명 -> {코드 -> {라벨, 색상}})
+  const [categoryMappings, setCategoryMappings] = useState<Record<string, Record<string, { label: string; color?: string }>>>({});
 
   // 공통코드 옵션 가져오기
   const loadCodeOptions = useCallback(
@@ -208,7 +208,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
         if (!categoryColumns || categoryColumns.length === 0) return;
 
         // 각 카테고리 컬럼의 값 목록 조회
-        const mappings: Record<string, Record<string, string>> = {};
+        const mappings: Record<string, Record<string, { label: string; color?: string }>> = {};
 
         for (const col of categoryColumns) {
           try {
@@ -217,10 +217,13 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
             );
 
             if (response.data.success && response.data.data) {
-              // valueCode -> valueLabel 매핑 생성
-              const mapping: Record<string, string> = {};
+              // valueCode -> {label, color} 매핑 생성
+              const mapping: Record<string, { label: string; color?: string }> = {};
               response.data.data.forEach((item: any) => {
-                mapping[item.valueCode] = item.valueLabel;
+                mapping[item.valueCode] = {
+                  label: item.valueLabel,
+                  color: item.color,
+                };
               });
               mappings[col.columnName] = mapping;
             }
@@ -1911,11 +1914,23 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     // 실제 웹 타입으로 스위치 (input_type="category"도 포함됨)
     switch (actualWebType) {
       case "category": {
-        // 카테고리 타입: 코드값 -> 라벨로 변환
+        // 카테고리 타입: 배지로 표시
         const mapping = categoryMappings[column.columnName];
         if (mapping && value) {
-          const label = mapping[String(value)];
-          return label || String(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 || "");
       }