feat: 테이블 리스트에서 카테고리 값을 배지로 표시

- 카테고리 타입 컬럼을 배지 형태로 렌더링
- 사용자가 설정한 색상 적용
- categoryMappings에 라벨과 색상 모두 저장
- 기본 색상: #3b82f6 (파란색)
- 텍스트 색상: 흰색으로 고정하여 가독성 확보

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 || "");
       }