From 9d346a3d3ab4bd15d62ea634263177ccf9cf24d6 Mon Sep 17 00:00:00 2001 From: kjs Date: Tue, 23 Sep 2025 16:51:12 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EC=97=94=ED=8B=B0=ED=8B=B0=20=EC=BB=AC?= =?UTF-8?q?=EB=9F=BC=20=ED=91=9C=EC=8B=9C=20=EC=84=A4=EC=A0=95=20=EB=AC=B8?= =?UTF-8?q?=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - TableListComponent에서 엔티티 컬럼 라벨을 기준 테이블 라벨로 표시 - TableListConfigPanel에서 input_type 필드로 엔티티 컬럼 감지 - ScreenDesigner에서 컬럼 정보 로드 시 input_type 필드 포함 - UnifiedColumnInfo 타입에 input_type 필드 추가 - 엔티티 컬럼 감지 로직에 디버깅 로그 추가 이제 화면 편집기에서 엔티티 컬럼의 표시 컬럼 설정이 정상적으로 보여야 함 --- frontend/app/(main)/admin/tableMng/page.tsx | 40 --- frontend/components/screen/ScreenDesigner.tsx | 1 + .../table-list/TableListComponent.tsx | 6 +- .../table-list/TableListConfigPanel.tsx | 329 ++++++++++++------ frontend/types/table-management.ts | 1 + 5 files changed, 225 insertions(+), 152 deletions(-) diff --git a/frontend/app/(main)/admin/tableMng/page.tsx b/frontend/app/(main)/admin/tableMng/page.tsx index f09f6bc8..9a83277a 100644 --- a/frontend/app/(main)/admin/tableMng/page.tsx +++ b/frontend/app/(main)/admin/tableMng/page.tsx @@ -867,46 +867,6 @@ export default function TableManagementPage() { )} - {/* 표시 컬럼 */} - {column.referenceTable && column.referenceTable !== "none" && ( -
- - -
- )} {/* 설정 완료 표시 - 간소화 */} diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index 8680c0cd..5e89166d 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -664,6 +664,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD columnLabel: col.displayName || col.columnLabel || col.column_label || col.columnName || col.column_name, dataType: col.dataType || col.data_type || col.dbType, webType: col.webType || col.web_type, + input_type: col.inputType || col.input_type, // 🎯 input_type 필드 추가 widgetType: col.widgetType || col.widget_type || col.webType || col.web_type, isNullable: col.isNullable || col.is_nullable, required: col.required !== undefined ? col.required : col.isNullable === "NO" || col.is_nullable === "NO", diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx index a10c6fa4..64a2eab6 100644 --- a/frontend/lib/registry/components/table-list/TableListComponent.tsx +++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx @@ -194,10 +194,10 @@ export const TableListComponent: React.FC = ({ // Entity 타입인 경우 if (column.webType === "entity") { - // 백엔드에서 받은 displayColumnLabel을 사용하거나, 없으면 기본값 사용 - displayLabel = column.displayColumnLabel || column.displayColumn || `${column.columnName}_name`; + // 우선 기준 테이블의 컬럼 라벨을 사용 + displayLabel = column.displayName || column.columnName; console.log( - `🎯 Entity 조인 컬럼 라벨 설정: ${column.columnName} → "${displayLabel}" (${column.displayColumn || "기본값"})`, + `🎯 Entity 조인 컬럼 라벨 설정: ${column.columnName} → "${displayLabel}" (기준 테이블 라벨 사용)`, ); } diff --git a/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx b/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx index 7eeb0d76..a4c1a5c6 100644 --- a/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx +++ b/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx @@ -62,12 +62,17 @@ export const TableListConfigPanel: React.FC = ({ const [loadingEntityJoins, setLoadingEntityJoins] = useState(false); // 🎯 엔티티 컬럼 표시 설정을 위한 상태 - const [entityDisplayConfigs, setEntityDisplayConfigs] = useState; - joinColumns: Array<{ columnName: string; displayName: string; dataType: string }>; - selectedColumns: string[]; - separator: string; - }>>({}); + const [entityDisplayConfigs, setEntityDisplayConfigs] = useState< + Record< + string, + { + sourceColumns: Array<{ columnName: string; displayName: string; dataType: string }>; + joinColumns: Array<{ columnName: string; displayName: string; dataType: string }>; + selectedColumns: string[]; + separator: string; + } + > + >({}); // 화면 테이블명이 있으면 자동으로 설정 useEffect(() => { @@ -284,6 +289,72 @@ export const TableListConfigPanel: React.FC = ({ handleChange("columns", updatedColumns); }; + // 🎯 기존 컬럼들을 체크하여 엔티티 타입인 경우 isEntityJoin 플래그 설정 + useEffect(() => { + console.log("🔍 엔티티 컬럼 감지 useEffect 실행:", { + hasColumns: !!config.columns, + columnsCount: config.columns?.length || 0, + hasTableColumns: !!tableColumns, + tableColumnsCount: tableColumns?.length || 0, + selectedTable: config.selectedTable + }); + + if (!config.columns || !tableColumns) { + console.log("⚠️ 컬럼 또는 테이블 컬럼 정보가 없어서 엔티티 감지 스킵"); + return; + } + + const updatedColumns = config.columns.map((column) => { + // 이미 isEntityJoin이 설정된 경우 스킵 + if (column.isEntityJoin) { + console.log("✅ 이미 엔티티 플래그 설정됨:", column.columnName); + return column; + } + + // 테이블 컬럼 정보에서 해당 컬럼 찾기 + const tableColumn = tableColumns.find((tc) => tc.column_name === column.columnName); + console.log("🔍 컬럼 검색:", { + columnName: column.columnName, + found: !!tableColumn, + inputType: tableColumn?.input_type, + webType: tableColumn?.web_type + }); + + // 엔티티 타입인 경우 isEntityJoin 플래그 설정 (input_type 또는 web_type 확인) + if (tableColumn && (tableColumn.input_type === "entity" || tableColumn.web_type === "entity")) { + console.log("🎯 엔티티 컬럼 감지 및 플래그 설정:", column.columnName); + + return { + ...column, + isEntityJoin: true, + entityJoinInfo: { + sourceTable: config.selectedTable || "", + sourceColumn: column.columnName, + joinAlias: column.columnName, + }, + entityDisplayConfig: { + displayColumns: [], // 빈 배열로 초기화 + separator: " - ", + sourceTable: config.selectedTable || "", + joinTable: tableColumn.reference_table || "", + }, + }; + } + + return column; + }); + + // 변경사항이 있는 경우에만 업데이트 + const hasChanges = updatedColumns.some((col, index) => col.isEntityJoin !== config.columns![index].isEntityJoin); + + if (hasChanges) { + console.log("🎯 엔티티 컬럼 플래그 업데이트:", updatedColumns); + handleChange("columns", updatedColumns); + } else { + console.log("ℹ️ 엔티티 컬럼 변경사항 없음"); + } + }, [config.columns, tableColumns, config.selectedTable]); + // 🎯 엔티티 컬럼의 표시 컬럼 정보 로드 const loadEntityDisplayConfig = async (column: ColumnConfig) => { if (!column.isEntityJoin || !column.entityJoinInfo || !column.entityDisplayConfig) return; @@ -304,7 +375,7 @@ export const TableListConfigPanel: React.FC = ({ const sourceColumns = sourceResult.columns || []; const joinColumns = joinResult.columns || []; - setEntityDisplayConfigs(prev => ({ + setEntityDisplayConfigs((prev) => ({ ...prev, [configKey]: { sourceColumns, @@ -325,10 +396,10 @@ export const TableListConfigPanel: React.FC = ({ if (!config) return; const newSelectedColumns = config.selectedColumns.includes(selectedColumn) - ? config.selectedColumns.filter(col => col !== selectedColumn) + ? config.selectedColumns.filter((col) => col !== selectedColumn) : [...config.selectedColumns, selectedColumn]; - setEntityDisplayConfigs(prev => ({ + setEntityDisplayConfigs((prev) => ({ ...prev, [configKey]: { ...prev[configKey], @@ -351,7 +422,7 @@ export const TableListConfigPanel: React.FC = ({ const config = entityDisplayConfigs[configKey]; if (!config) return; - setEntityDisplayConfigs(prev => ({ + setEntityDisplayConfigs((prev) => ({ ...prev, [configKey]: { ...prev[configKey], @@ -791,6 +862,135 @@ export const TableListConfigPanel: React.FC = ({ {/* 컬럼 설정 탭 */} + {/* 🎯 엔티티 컬럼 표시 설정 섹션 - 컬럼 설정 패널 바깥으로 분리 */} + {config.columns?.some((col) => col.isEntityJoin) && ( + + + 🎯 엔티티 컬럼 표시 설정 + 엔티티 타입 컬럼의 표시할 컬럼들을 조합하여 설정하세요 + + + {config.columns + ?.filter((col) => col.isEntityJoin && col.entityDisplayConfig) + .map((column) => ( +
+
+
+ + {column.columnName} + + {column.displayName} +
+ +
+ + {entityDisplayConfigs[column.columnName] && ( +
+ {/* 구분자 설정 */} +
+ + updateEntityDisplaySeparator(column.columnName, e.target.value)} + className="h-7 text-xs" + placeholder=" - " + /> +
+ + {/* 기본 테이블 컬럼 */} +
+ +
+ {entityDisplayConfigs[column.columnName].sourceColumns.map((col) => ( +
+ + toggleEntityDisplayColumn(column.columnName, col.columnName) + } + className="h-3 w-3" + /> + +
+ ))} +
+
+ + {/* 조인 테이블 컬럼 */} +
+ +
+ {entityDisplayConfigs[column.columnName].joinColumns.map((col) => ( +
+ + toggleEntityDisplayColumn(column.columnName, col.columnName) + } + className="h-3 w-3" + /> + +
+ ))} +
+
+ + {/* 선택된 컬럼 미리보기 */} + {entityDisplayConfigs[column.columnName].selectedColumns.length > 0 && ( +
+ +
+ {entityDisplayConfigs[column.columnName].selectedColumns.map((colName, idx) => ( + + + {colName} + + {idx < entityDisplayConfigs[column.columnName].selectedColumns.length - 1 && ( + + {entityDisplayConfigs[column.columnName].separator} + + )} + + ))} +
+
+ )} +
+ )} +
+ ))} + + + )} + {!screenTableName ? ( @@ -921,105 +1121,17 @@ export const TableListConfigPanel: React.FC = ({ /> - {/* 🎯 엔티티 타입 컬럼일 때 표시 컬럼 선택 UI */} - {column.isEntityJoin && column.entityDisplayConfig && ( -
-
- - + {/* 엔티티 타입 컬럼 표시 */} + {column.isEntityJoin && ( +
+
+ + 엔티티 타입 + + + 표시 컬럼 설정은 상단의 "🎯 엔티티 컬럼 표시 설정" 섹션에서 하세요 +
- - {entityDisplayConfigs[column.columnName] && ( -
- {/* 구분자 설정 */} -
- - updateEntityDisplaySeparator(column.columnName, e.target.value)} - className="h-7 text-xs" - placeholder=" - " - /> -
- - {/* 기본 테이블 컬럼 */} -
- -
- {entityDisplayConfigs[column.columnName].sourceColumns.map((col) => ( -
- toggleEntityDisplayColumn(column.columnName, col.columnName)} - className="h-3 w-3" - /> - -
- ))} -
-
- - {/* 조인 테이블 컬럼 */} -
- -
- {entityDisplayConfigs[column.columnName].joinColumns.map((col) => ( -
- toggleEntityDisplayColumn(column.columnName, col.columnName)} - className="h-3 w-3" - /> - -
- ))} -
-
- - {/* 선택된 컬럼 미리보기 */} - {entityDisplayConfigs[column.columnName].selectedColumns.length > 0 && ( -
- -
- {entityDisplayConfigs[column.columnName].selectedColumns.map((colName, idx) => ( - - - {colName} - - {idx < entityDisplayConfigs[column.columnName].selectedColumns.length - 1 && ( - {entityDisplayConfigs[column.columnName].separator} - )} - - ))} -
-
- )} -
- )}
)} @@ -1528,7 +1640,6 @@ export const TableListConfigPanel: React.FC = ({ -
); }; diff --git a/frontend/types/table-management.ts b/frontend/types/table-management.ts index d5bcf127..bd2cac09 100644 --- a/frontend/types/table-management.ts +++ b/frontend/types/table-management.ts @@ -46,6 +46,7 @@ export interface UnifiedColumnInfo { // 입력 설정 inputType: "direct" | "auto"; + input_type?: string; // 🎯 데이터베이스의 input_type 필드 (entity, text, number 등) detailSettings?: Record; // JSON 파싱된 객체 description?: string;