테이블에 카테고리 값 보이기

frontend/components/screen/InteractiveDataTable.tsx

@@ -144,6 +144,9 @@ 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 loadCodeOptions = useCallback(
     async (categoryCode: string) => {
@@ -191,6 +194,66 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     };
   }, [currentPage, searchValues, loadData, component.tableName]);
 
+  // 카테고리 타입 컬럼의 값 매핑 로드
+  useEffect(() => {
+    const loadCategoryMappings = async () => {
+      if (!component.tableName) return;
+
+      try {
+        // 카테고리 타입 컬럼 찾기
+        const categoryColumns = component.columns?.filter((col) => {
+          const webType = getColumnWebType(col.columnName);
+          return webType === "category";
+        });
+
+        console.log(`🔍 InteractiveDataTable 카테고리 컬럼 확인:`, {
+          tableName: component.tableName,
+          totalColumns: component.columns?.length,
+          categoryColumns: categoryColumns?.map(c => ({
+            name: c.columnName,
+            webType: getColumnWebType(c.columnName)
+          }))
+        });
+
+        if (!categoryColumns || categoryColumns.length === 0) return;
+
+        // 각 카테고리 컬럼의 값 목록 조회
+        const mappings: Record<string, Record<string, string>> = {};
+
+        for (const col of categoryColumns) {
+          try {
+            const response = await apiClient.get(
+              `/table-categories/${component.tableName}/${col.columnName}/values`
+            );
+
+            if (response.data.success && response.data.data) {
+              // valueCode -> valueLabel 매핑 생성
+              const mapping: Record<string, string> = {};
+              response.data.data.forEach((item: any) => {
+                mapping[item.valueCode] = item.valueLabel;
+              });
+              mappings[col.columnName] = mapping;
+            }
+          } catch (error) {
+            // 카테고리 값 로드 실패 시 무시
+          }
+        }
+
+        console.log(`✅ InteractiveDataTable 카테고리 매핑 완료:`, {
+          tableName: component.tableName,
+          mappedColumns: Object.keys(mappings),
+          mappings
+        });
+
+        setCategoryMappings(mappings);
+      } catch (error) {
+        console.error("카테고리 매핑 로드 실패:", error);
+      }
+    };
+
+    loadCategoryMappings();
+  }, [component.tableName, component.columns, getColumnWebType]);
+
   // 파일 상태 확인 함수
   const checkFileStatus = useCallback(
     async (rowData: Record<string, any>) => {
@@ -374,7 +437,6 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
       // 먼저 컴포넌트에 설정된 컬럼에서 찾기 (화면 관리에서 설정한 값 우선)
       const componentColumn = component.columns?.find((col) => col.columnName === columnName);
       if (componentColumn?.widgetType && componentColumn.widgetType !== "text") {
-        console.log(`🔍 [${columnName}] componentColumn.widgetType 사용:`, componentColumn.widgetType);
         return componentColumn.widgetType;
       }
 
@@ -384,14 +446,11 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
       // input_type 우선 사용 (category 등)
       const inputType = (tableColumn as any)?.input_type || (tableColumn as any)?.inputType;
       if (inputType) {
-        console.log(`✅ [${columnName}] input_type 사용:`, inputType);
         return inputType;
       }
       
       // 없으면 webType 사용
-      const result = tableColumn?.webType || "text";
-      console.log(`✅ [${columnName}] webType 사용:`, result);
-      return result;
+      return tableColumn?.webType || "text";
     },
     [component.columns, tableColumns],
   );
@@ -1862,9 +1921,12 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
     // 가상 파일 컬럼의 경우 value가 없어도 파일 아이콘을 표시해야 함
     if (!column.isVirtualFileColumn && (value === null || value === undefined)) return "";
 
+    // 실제 웹 타입 가져오기 (input_type 포함)
+    const actualWebType = getColumnWebType(column.columnName);
+
     // 파일 타입 컬럼 처리 (가상 파일 컬럼 포함)
     const isFileColumn =
-      column.widgetType === "file" || column.columnName === "file_path" || column.isVirtualFileColumn;
+      actualWebType === "file" || column.columnName === "file_path" || column.isVirtualFileColumn;
 
     // 파일 타입 컬럼은 파일 아이콘으로 표시 (컬럼별 파일 관리)
     if (isFileColumn && rowData) {
@@ -1904,7 +1966,18 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
       );
     }
 
-    switch (column.widgetType) {
+    // 실제 웹 타입으로 스위치 (input_type="category"도 포함됨)
+    switch (actualWebType) {
+      case "category": {
+        // 카테고리 타입: 코드값 -> 라벨로 변환
+        const mapping = categoryMappings[column.columnName];
+        if (mapping && value) {
+          const label = mapping[String(value)];
+          return label || String(value);
+        }
+        return String(value || "");
+      }
+
       case "date":
         if (value) {
           try {