feat: TableListComponent에서 카테고리 값을 배지로 표시

- categoryMappings 타입을 색상 포함하도록 수정
- 카테고리 값 로드 시 color 필드 포함
- formatValue에서 카테고리를 Badge 컴포넌트로 렌더링
- 매핑 없을 시에도 기본 slate 색상의 배지로 표시
- 디버깅 로그 추가

frontend/lib/registry/components/table-list/TableListComponent.tsx

@@ -243,7 +243,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const [displayColumns, setDisplayColumns] = useState<ColumnConfig[]>([]);
   const [joinColumnMapping, setJoinColumnMapping] = useState<Record<string, string>>({});
   const [columnMeta, setColumnMeta] = useState<Record<string, { webType?: string; codeCategory?: string; inputType?: string }>>({});
-  const [categoryMappings, setCategoryMappings] = useState<Record<string, Record<string, string>>>({});
+  const [categoryMappings, setCategoryMappings] = useState<Record<string, Record<string, { label: string; color?: string }>>>({});
   const [searchValues, setSearchValues] = useState<Record<string, any>>({});
   const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set());
   const [columnWidths, setColumnWidths] = useState<Record<string, number>>({});
@@ -437,7 +437,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
         if (categoryColumns.length === 0) return;
 
-        const mappings: Record<string, Record<string, string>> = {};
+        const mappings: Record<string, Record<string, { label: string; color?: string }>> = {};
 
         for (const columnName of categoryColumns) {
           try {
@@ -447,17 +447,22 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
             );
 
             if (response.data.success && response.data.data) {
-              const mapping: Record<string, string> = {};
+              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[columnName] = mapping;
+              console.log(`✅ [TableList] 카테고리 매핑 로드 [${columnName}]:`, mapping);
             }
           } catch (error) {
-            // 카테고리 값 로드 실패 시 무시
+            console.error(`❌ [TableList] 카테고리 값 로드 실패 [${columnName}]:`, error);
           }
         }
 
+        console.log("📊 [TableList] 전체 카테고리 매핑:", mappings);
         setCategoryMappings(mappings);
       } catch (error) {
         console.error("TableListComponent 카테고리 매핑 로드 실패:", error);
@@ -920,16 +925,29 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       // inputType 기반 포맷팅 (columnMeta에서 가져온 inputType 우선)
       const inputType = meta?.inputType || column.inputType;
       
-      // 카테고리 타입: 코드값 → 라벨로 변환
+      // 카테고리 타입: 배지로 표시
       if (inputType === "category") {
+        if (!value) return "";
+        
         const mapping = categoryMappings[column.columnName];
-        if (mapping && value) {
-          const label = mapping[String(value)];
-          if (label) {
-            return label;
-          }
-        }
-        return String(value);
+        const categoryData = mapping?.[String(value)];
+        
+        // 매핑 데이터가 있으면 라벨과 색상 사용, 없으면 코드값과 기본색상
+        const displayLabel = categoryData?.label || String(value);
+        const displayColor = categoryData?.color || "#64748b"; // 기본 slate 색상
+        
+        const { Badge } = require("@/components/ui/badge");
+        return (
+          <Badge 
+            style={{ 
+              backgroundColor: displayColor,
+              borderColor: displayColor
+            }} 
+            className="text-white"
+          >
+            {displayLabel}
+          </Badge>
+        );
       }
       
       // 코드 타입: 코드 값 → 코드명 변환