엔티티타입 표시방식 변경

2025-09-23 17:43:24 +09:00
parent 28109eb63b
commit a757034d86
2 changed files with 232 additions and 43 deletions
--- a/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx
+++ b/frontend/lib/registry/components/table-list/TableListConfigPanel.tsx
@@ -364,49 +364,145 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({

  // 🎯 엔티티 컬럼의 표시 컬럼 정보 로드
  const loadEntityDisplayConfig = async (column: ColumnConfig) => {
-    if (!column.isEntityJoin || !column.entityJoinInfo || !column.entityDisplayConfig) return;
+    console.log("🔍 loadEntityDisplayConfig 시작:", {
+      columnName: column.columnName,
+      isEntityJoin: column.isEntityJoin,
+      entityJoinInfo: column.entityJoinInfo,
+      entityDisplayConfig: column.entityDisplayConfig,
+      configSelectedTable: config.selectedTable,
+    });

-    const { sourceTable, joinTable } = column.entityDisplayConfig;
-    const configKey = `${column.columnName}`;
+    if (!column.isEntityJoin || !column.entityJoinInfo) {
+      console.log("⚠️ 엔티티 컬럼 조건 불만족:", {
+        isEntityJoin: column.isEntityJoin,
+        entityJoinInfo: column.entityJoinInfo,
+      });
+      return;
+    }

-    // 이미 로드된 경우 스킵
-    if (entityDisplayConfigs[configKey]) return;
+    // entityDisplayConfig가 없으면 초기화
+    if (!column.entityDisplayConfig) {
+      console.log("🔧 entityDisplayConfig 초기화:", column.columnName);
+      const updatedColumns = config.columns?.map((col) => {
+        if (col.columnName === column.columnName) {
+          return {
+            ...col,
+            entityDisplayConfig: {
+              displayColumns: [],
+              separator: " - ",
+              sourceTable: config.selectedTable || "",
+              joinTable: "",
+            },
+          };
+        }
+        return col;
+      });

-    // joinTable이 비어있으면 Entity 조인 API로 조인 테이블 정보를 가져와서 설정
-    let actualJoinTable = joinTable;
-    if (!actualJoinTable && sourceTable) {
+      if (updatedColumns) {
+        handleChange("columns", updatedColumns);
+        // 업데이트된 컬럼으로 다시 시도
+        const updatedColumn = updatedColumns.find((col) => col.columnName === column.columnName);
+        if (updatedColumn) {
+          console.log("🔄 업데이트된 컬럼으로 재시도:", updatedColumn.entityDisplayConfig);
+          return loadEntityDisplayConfig(updatedColumn);
+        }
+      }
+      return;
+    }
+
+    console.log("🔍 entityDisplayConfig 전체 구조:", column.entityDisplayConfig);
+    console.log("🔍 entityDisplayConfig 키들:", Object.keys(column.entityDisplayConfig));
+
+    // sourceTable과 joinTable이 없으면 entityJoinInfo에서 가져오기
+    let sourceTable = column.entityDisplayConfig.sourceTable;
+    let joinTable = column.entityDisplayConfig.joinTable;
+
+    if (!sourceTable && column.entityJoinInfo) {
+      sourceTable = column.entityJoinInfo.sourceTable;
+    }
+
+    if (!joinTable) {
+      // joinTable이 없으면 tableTypeApi로 조회해서 설정
      try {
-        console.log("🔍 조인 테이블 정보를 Entity 조인 API로 가져오기:", sourceTable);
-        const entityJoinResult = await entityJoinApi.getEntityJoinColumns(sourceTable);
-        
-        // 해당 컬럼에 대한 조인 설정 찾기
-        const columnJoinConfig = entityJoinResult.availableColumns?.find(
-          (col) => col.columnName === column.columnName
-        );
-        
-        if (columnJoinConfig?.joinTable) {
-          actualJoinTable = columnJoinConfig.joinTable;
-          console.log("✅ 조인 테이블 정보 찾음:", actualJoinTable);
-          
+        console.log("🔍 joinTable이 없어서 tableTypeApi로 조회:", sourceTable);
+        const columnList = await tableTypeApi.getColumns(sourceTable);
+        const columnInfo = columnList.find((col: any) => (col.column_name || col.columnName) === column.columnName);
+
+        if (columnInfo?.reference_table || columnInfo?.referenceTable) {
+          joinTable = columnInfo.reference_table || columnInfo.referenceTable;
+          console.log("✅ tableTypeApi에서 조인 테이블 정보 찾음:", joinTable);
+
          // entityDisplayConfig 업데이트
          const updatedConfig = {
            ...column.entityDisplayConfig,
-            joinTable: actualJoinTable,
+            sourceTable: sourceTable,
+            joinTable: joinTable,
          };
-          
+
          // 컬럼 설정 업데이트
          const updatedColumns = config.columns?.map((col) =>
-            col.columnName === column.columnName
-              ? { ...col, entityDisplayConfig: updatedConfig }
-              : col
+            col.columnName === column.columnName ? { ...col, entityDisplayConfig: updatedConfig } : col,
          );
-          
+
          if (updatedColumns) {
            handleChange("columns", updatedColumns);
          }
        }
      } catch (error) {
-        console.error("Entity 조인 정보 조회 실패:", error);
+        console.error("tableTypeApi 컬럼 정보 조회 실패:", error);
+      }
+    }
+
+    console.log("🔍 최종 추출한 값:", { sourceTable, joinTable });
+    const configKey = `${column.columnName}`;
+
+    // 이미 로드된 경우 스킵
+    if (entityDisplayConfigs[configKey]) return;
+
+    // joinTable이 비어있으면 tableTypeApi로 컬럼 정보를 다시 가져와서 referenceTable 정보를 찾기
+    let actualJoinTable = joinTable;
+    if (!actualJoinTable && sourceTable) {
+      try {
+        console.log("🔍 tableTypeApi로 컬럼 정보 다시 조회:", {
+          tableName: sourceTable,
+          columnName: column.columnName,
+        });
+
+        const columnList = await tableTypeApi.getColumns(sourceTable);
+        const columnInfo = columnList.find((col: any) => (col.column_name || col.columnName) === column.columnName);
+
+        console.log("🔍 컬럼 정보 조회 결과:", {
+          columnInfo: columnInfo,
+          referenceTable: columnInfo?.reference_table || columnInfo?.referenceTable,
+          referenceColumn: columnInfo?.reference_column || columnInfo?.referenceColumn,
+        });
+
+        if (columnInfo?.reference_table || columnInfo?.referenceTable) {
+          actualJoinTable = columnInfo.reference_table || columnInfo.referenceTable;
+          console.log("✅ tableTypeApi에서 조인 테이블 정보 찾음:", actualJoinTable);
+
+          // entityDisplayConfig 업데이트
+          const updatedConfig = {
+            ...column.entityDisplayConfig,
+            joinTable: actualJoinTable,
+          };
+
+          // 컬럼 설정 업데이트
+          const updatedColumns = config.columns?.map((col) =>
+            col.columnName === column.columnName ? { ...col, entityDisplayConfig: updatedConfig } : col,
+          );
+
+          if (updatedColumns) {
+            handleChange("columns", updatedColumns);
+          }
+        } else {
+          console.log("⚠️ tableTypeApi에서도 referenceTable을 찾을 수 없음:", {
+            columnName: column.columnName,
+            columnInfo: columnInfo,
+          });
+        }
+      } catch (error) {
+        console.error("tableTypeApi 컬럼 정보 조회 실패:", error);
      }
    }

@@ -443,13 +539,14 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
  // 🎯 엔티티 표시 컬럼 선택 토글
  const toggleEntityDisplayColumn = (columnName: string, selectedColumn: string) => {
    const configKey = `${columnName}`;
-    const config = entityDisplayConfigs[configKey];
-    if (!config) return;
+    const localConfig = entityDisplayConfigs[configKey];
+    if (!localConfig) return;

-    const newSelectedColumns = config.selectedColumns.includes(selectedColumn)
-      ? config.selectedColumns.filter((col) => col !== selectedColumn)
-      : [...config.selectedColumns, selectedColumn];
+    const newSelectedColumns = localConfig.selectedColumns.includes(selectedColumn)
+      ? localConfig.selectedColumns.filter((col) => col !== selectedColumn)
+      : [...localConfig.selectedColumns, selectedColumn];

+    // 로컬 상태 업데이트
    setEntityDisplayConfigs((prev) => ({
      ...prev,
      [configKey]: {
@@ -458,6 +555,29 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
      },
    }));

+    // 실제 컬럼 설정도 업데이트
+    const updatedColumns = config.columns?.map((col) => {
+      if (col.columnName === columnName && col.entityDisplayConfig) {
+        return {
+          ...col,
+          entityDisplayConfig: {
+            ...col.entityDisplayConfig,
+            displayColumns: newSelectedColumns,
+          },
+        };
+      }
+      return col;
+    });
+
+    if (updatedColumns) {
+      handleChange("columns", updatedColumns);
+      console.log("🎯 엔티티 표시 컬럼 설정 업데이트:", {
+        columnName,
+        selectedColumns: newSelectedColumns,
+        updatedColumn: updatedColumns.find((col) => col.columnName === columnName),
+      });
+    }
+
    // 컬럼 설정 업데이트
    updateColumn(columnName, {
      entityDisplayConfig: {
@@ -470,9 +590,10 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
  // 🎯 엔티티 표시 구분자 업데이트
  const updateEntityDisplaySeparator = (columnName: string, separator: string) => {
    const configKey = `${columnName}`;
-    const config = entityDisplayConfigs[configKey];
-    if (!config) return;
+    const localConfig = entityDisplayConfigs[configKey];
+    if (!localConfig) return;

+    // 로컬 상태 업데이트
    setEntityDisplayConfigs((prev) => ({
      ...prev,
      [configKey]: {
@@ -481,13 +602,28 @@ export const TableListConfigPanel: React.FC<TableListConfigPanelProps> = ({
      },
    }));

-    // 컬럼 설정 업데이트
-    updateColumn(columnName, {
-      entityDisplayConfig: {
-        ...config.entityDisplayConfig,
-        separator,
-      },
+    // 실제 컬럼 설정도 업데이트
+    const updatedColumns = config.columns?.map((col) => {
+      if (col.columnName === columnName && col.entityDisplayConfig) {
+        return {
+          ...col,
+          entityDisplayConfig: {
+            ...col.entityDisplayConfig,
+            separator,
+          },
+        };
+      }
+      return col;
    });
+
+    if (updatedColumns) {
+      handleChange("columns", updatedColumns);
+      console.log("🎯 엔티티 표시 구분자 설정 업데이트:", {
+        columnName,
+        separator,
+        updatedColumn: updatedColumns.find((col) => col.columnName === columnName),
+      });
+    }
  };

  // 컬럼 순서 변경