엔티티 카테고리 타입 컬럼 배지 표시기능

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

@@ -365,6 +365,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const [columnMeta, setColumnMeta] = useState<
     Record<string, { webType?: string; codeCategory?: string; inputType?: string }>
   >({});
+  // 🆕 엔티티 조인 테이블의 컬럼 메타데이터 (테이블명.컬럼명 → inputType)
+  const [joinedColumnMeta, setJoinedColumnMeta] = useState<
+    Record<string, { webType?: string; codeCategory?: string; inputType?: string }>
+  >({});
   const [categoryMappings, setCategoryMappings] = useState<
     Record<string, Record<string, { label: string; color?: string }>>
   >({});
@@ -1044,58 +1048,119 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           }
         }
 
-        // 🆕 엔티티 조인 컬럼 중 카테고리 타입이 아니지만 조인된 테이블의 카테고리 필드인 경우도 로드
-        // 화면 설정의 columns에서 "테이블명.컬럼명" 형태의 조인 컬럼 추출
+        // 🆕 엔티티 조인 컬럼의 inputType 정보 가져오기 및 카테고리 매핑 로드
+        // 1. "테이블명.컬럼명" 형태의 조인 컬럼 추출
         const joinedColumns = tableConfig.columns
           ?.filter((col) => col.columnName?.includes("."))
           .map((col) => col.columnName) || [];
         
-        // 알려진 카테고리 필드 목록 (조인된 테이블에서 자주 사용되는 카테고리 컬럼)
-        const knownCategoryFields = ["material", "division", "status", "currency_code", "inbound_type", "outbound_type"];
+        // 2. additionalJoinInfo가 있는 컬럼도 추출 (예: item_code_material → item_info.material)
+        const additionalJoinColumns = tableConfig.columns
+          ?.filter((col: any) => col.additionalJoinInfo?.referenceTable)
+          .map((col: any) => ({
+            columnName: col.columnName, // 예: item_code_material
+            referenceTable: col.additionalJoinInfo.referenceTable, // 예: item_info
+            // joinAlias에서 실제 컬럼명 추출 (item_code_material → material)
+            actualColumn: col.additionalJoinInfo.joinAlias?.replace(`${col.additionalJoinInfo.sourceColumn}_`, '') || col.columnName,
+          })) || [];
         
+        console.log("🔍 [TableList] additionalJoinInfo 컬럼:", additionalJoinColumns);
+        
+        // 조인 테이블별로 그룹화
+        const joinedTableColumns: Record<string, { columnName: string; actualColumn: string }[]> = {};
+        
+        // "테이블명.컬럼명" 형태 처리
         for (const joinedColumn of joinedColumns) {
-          // 이미 로드된 컬럼은 스킵
-          if (mappings[joinedColumn]) continue;
-          
           const parts = joinedColumn.split(".");
           if (parts.length !== 2) continue;
           
           const joinedTable = parts[0];
           const joinedColumnName = parts[1];
           
-          // 알려진 카테고리 필드인 경우만 로드 시도
-          if (!knownCategoryFields.includes(joinedColumnName)) continue;
-          
+          if (!joinedTableColumns[joinedTable]) {
+            joinedTableColumns[joinedTable] = [];
+          }
+          joinedTableColumns[joinedTable].push({
+            columnName: joinedColumn,
+            actualColumn: joinedColumnName,
+          });
+        }
+        
+        // additionalJoinInfo 형태 처리
+        for (const col of additionalJoinColumns) {
+          if (!joinedTableColumns[col.referenceTable]) {
+            joinedTableColumns[col.referenceTable] = [];
+          }
+          joinedTableColumns[col.referenceTable].push({
+            columnName: col.columnName, // 예: item_code_material
+            actualColumn: col.actualColumn, // 예: material
+          });
+        }
+        
+        console.log("🔍 [TableList] 조인 테이블별 컬럼:", joinedTableColumns);
+        
+        // 조인된 테이블별로 inputType 정보 가져오기
+        const newJoinedColumnMeta: Record<string, { webType?: string; codeCategory?: string; inputType?: string }> = {};
+        
+        for (const [joinedTable, columns] of Object.entries(joinedTableColumns)) {
           try {
-            console.log(`📡 [TableList] 조인 테이블 카테고리 로드 시도 [${joinedColumn}]:`, {
-              url: `/table-categories/${joinedTable}/${joinedColumnName}/values`,
-            });
+            // 조인 테이블의 컬럼 inputType 정보 가져오기 (이미 import된 tableTypeApi 사용)
+            const inputTypes = await tableTypeApi.getColumnInputTypes(joinedTable);
             
-            const response = await apiClient.get(`/table-categories/${joinedTable}/${joinedColumnName}/values`);
+            console.log(`📡 [TableList] 조인 테이블 inputType 로드 [${joinedTable}]:`, inputTypes);
             
-            if (response.data.success && response.data.data && Array.isArray(response.data.data)) {
-              const mapping: Record<string, { label: string; color?: string }> = {};
+            for (const col of columns) {
+              const inputTypeInfo = inputTypes.find((it: any) => it.columnName === col.actualColumn);
               
-              response.data.data.forEach((item: any) => {
-                const key = String(item.valueCode);
-                mapping[key] = {
-                  label: item.valueLabel,
-                  color: item.color,
-                };
-              });
+              // 컬럼명 그대로 저장 (item_code_material 또는 item_info.material)
+              newJoinedColumnMeta[col.columnName] = {
+                inputType: inputTypeInfo?.inputType,
+              };
               
-              if (Object.keys(mapping).length > 0) {
-                mappings[joinedColumn] = mapping;
-                console.log(`✅ [TableList] 조인 테이블 카테고리 매핑 로드 완료 [${joinedColumn}]:`, {
-                  mappingCount: Object.keys(mapping).length,
-                });
+              console.log(`  🔗 [${col.columnName}] (실제: ${col.actualColumn}) inputType: ${inputTypeInfo?.inputType || "unknown"}`);
+              
+              // inputType이 category인 경우 카테고리 매핑 로드
+              if (inputTypeInfo?.inputType === "category" && !mappings[col.columnName]) {
+                try {
+                  console.log(`📡 [TableList] 조인 테이블 카테고리 로드 시도 [${col.columnName}]:`, {
+                    url: `/table-categories/${joinedTable}/${col.actualColumn}/values`,
+                  });
+                  
+                  const response = await apiClient.get(`/table-categories/${joinedTable}/${col.actualColumn}/values`);
+                  
+                  if (response.data.success && response.data.data && Array.isArray(response.data.data)) {
+                    const mapping: Record<string, { label: string; color?: string }> = {};
+                    
+                    response.data.data.forEach((item: any) => {
+                      const key = String(item.valueCode);
+                      mapping[key] = {
+                        label: item.valueLabel,
+                        color: item.color,
+                      };
+                    });
+                    
+                    if (Object.keys(mapping).length > 0) {
+                      mappings[col.columnName] = mapping;
+                      console.log(`✅ [TableList] 조인 테이블 카테고리 매핑 로드 완료 [${col.columnName}]:`, {
+                        mappingCount: Object.keys(mapping).length,
+                      });
+                    }
+                  }
+                } catch (error) {
+                  console.log(`ℹ️ [TableList] 조인 테이블 카테고리 없음 (${col.columnName})`);
+                }
               }
             }
           } catch (error) {
-            // 조인 테이블 카테고리 로드 실패는 무시 (카테고리가 아닌 필드일 수 있음)
-            console.log(`ℹ️ [TableList] 조인 테이블 카테고리 없음 (${joinedColumn})`);
+            console.error(`❌ [TableList] 조인 테이블 inputType 로드 실패 [${joinedTable}]:`, error);
           }
         }
+        
+        // 조인 컬럼 메타데이터 상태 업데이트
+        if (Object.keys(newJoinedColumnMeta).length > 0) {
+          setJoinedColumnMeta(newJoinedColumnMeta);
+          console.log("✅ [TableList] 조인 컬럼 메타데이터 설정:", newJoinedColumnMeta);
+        }
 
         console.log("📊 [TableList] 전체 카테고리 매핑 설정:", {
           mappingsCount: Object.keys(mappings).length,
@@ -1929,7 +1994,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         return rowData.writer_name;
       }
 
-      const meta = columnMeta[column.columnName];
+      // 🆕 메인 테이블 메타 또는 조인 테이블 메타에서 정보 가져오기
+      const meta = columnMeta[column.columnName] || joinedColumnMeta[column.columnName];
 
       // inputType 기반 포맷팅 (columnMeta에서 가져온 inputType 우선)
       const inputType = meta?.inputType || column.inputType;
@@ -2119,7 +2185,7 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           return String(value);
       }
     },
-    [columnMeta, optimizedConvertCode, categoryMappings],
+    [columnMeta, joinedColumnMeta, optimizedConvertCode, categoryMappings],
   );
 
   // ========================================

화면_임베딩_및_데이터_전달_시스템_구현_계획서.md

@@ -1681,3 +1681,4 @@ const 출고등록_설정: ScreenSplitPanel = {
 
 
 
+

화면_임베딩_시스템_Phase1-4_구현_완료.md

@@ -528,3 +528,4 @@ const { data: config } = await getScreenSplitPanel(screenId);
 
 
 
+

화면_임베딩_시스템_충돌_분석_보고서.md

@@ -515,3 +515,4 @@ function ScreenViewPage() {
 
 
 
+