조인 컬럼 문제 수정

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

@@ -84,6 +84,12 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
     ...componentConfig,
   } as TableListConfig;
 
+  // 🎯 디버깅: 초기 컬럼 설정 확인
+  console.log(
+    "🔍 초기 tableConfig.columns:",
+    tableConfig.columns?.map((c) => c.columnName),
+  );
+
   // 상태 관리
   const [data, setData] = useState<Record<string, any>[]>([]);
   const [loading, setLoading] = useState(false);
@@ -98,6 +104,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
   const [tableLabel, setTableLabel] = useState<string>("");
   const [localPageSize, setLocalPageSize] = useState<number>(tableConfig.pagination?.pageSize || 20); // 로컬 페이지 크기 상태
   const [displayColumns, setDisplayColumns] = useState<ColumnConfig[]>([]); // 🎯 표시할 컬럼 (Entity 조인 적용됨)
+
+  // 🎯 조인 컬럼 매핑 상태
+  const [joinColumnMapping, setJoinColumnMapping] = useState<Record<string, string>>({});
   const [columnMeta, setColumnMeta] = useState<Record<string, { webType?: string; codeCategory?: string }>>({}); // 🎯 컬럼 메타정보 (웹타입, 코드카테고리)
 
   // 고급 필터 관련 state
@@ -254,11 +263,60 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
       // Entity 조인 컬럼 추출 (isEntityJoin === true인 컬럼들)
       const entityJoinColumns = tableConfig.columns?.filter((col) => col.isEntityJoin && col.entityJoinInfo) || [];
-      const additionalJoinColumns = entityJoinColumns.map((col) => ({
-        sourceTable: col.entityJoinInfo!.sourceTable,
-        sourceColumn: col.entityJoinInfo!.sourceColumn,
-        joinAlias: col.entityJoinInfo!.joinAlias,
-      }));
+
+      // 🎯 조인 탭에서 추가한 컬럼들도 포함 (실제로 존재하는 컬럼만)
+      const joinTabColumns =
+        tableConfig.columns?.filter(
+          (col) =>
+            !col.isEntityJoin &&
+            col.columnName.includes("_") &&
+            (col.columnName.includes("dept_code_") ||
+              col.columnName.includes("_dept_code") ||
+              col.columnName.includes("_company_") ||
+              col.columnName.includes("_user_")), // 조인 탭에서 추가한 컬럼 패턴들
+        ) || [];
+
+      console.log(
+        "🔍 조인 탭 컬럼들:",
+        joinTabColumns.map((c) => c.columnName),
+      );
+
+      const additionalJoinColumns = [
+        ...entityJoinColumns.map((col) => ({
+          sourceTable: col.entityJoinInfo!.sourceTable,
+          sourceColumn: col.entityJoinInfo!.sourceColumn,
+          joinAlias: col.entityJoinInfo!.joinAlias,
+        })),
+        // 🎯 조인 탭에서 추가한 컬럼들도 추가 (실제로 존재하는 컬럼만)
+        ...joinTabColumns
+          .filter((col) => {
+            // 실제 API 응답에 존재하는 컬럼만 필터링
+            const validJoinColumns = ["dept_code_name", "dept_name"];
+            const isValid = validJoinColumns.includes(col.columnName);
+            if (!isValid) {
+              console.log(`🔍 조인 탭 컬럼 제외: ${col.columnName} (유효하지 않음)`);
+            }
+            return isValid;
+          })
+          .map((col) => {
+            // 실제 존재하는 조인 컬럼만 처리
+            let sourceTable = tableConfig.selectedTable;
+            let sourceColumn = col.columnName;
+
+            if (col.columnName === "dept_code_name" || col.columnName === "dept_name") {
+              sourceTable = "dept_info";
+              sourceColumn = "dept_code";
+            }
+
+            console.log(`🔍 조인 탭 컬럼 처리: ${col.columnName} -> ${sourceTable}.${sourceColumn}`);
+
+            return {
+              sourceTable: sourceTable,
+              sourceColumn: sourceColumn,
+              joinAlias: col.columnName,
+            };
+          }),
+      ];
 
       // 🎯 화면별 엔티티 표시 설정 생성
       const screenEntityConfigs: Record<string, any> = {};
@@ -272,6 +330,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         }
       });
 
+      console.log("🔗 Entity 조인 컬럼:", entityJoinColumns);
+      console.log("🔗 조인 탭 컬럼:", joinTabColumns);
       console.log("🔗 추가 Entity 조인 컬럼:", additionalJoinColumns);
       console.log("🎯 화면별 엔티티 설정:", screenEntityConfigs);
 
@@ -346,6 +406,10 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       });
 
       if (result) {
+        console.log("🎯 API 응답 결과:", result);
+        console.log("🎯 데이터 개수:", result.data?.length || 0);
+        console.log("🎯 전체 페이지:", result.totalPages);
+        console.log("🎯 총 아이템:", result.total);
         setData(result.data || []);
         setTotalPages(result.totalPages || 1);
         setTotalItems(result.total || 0);
@@ -383,12 +447,88 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           }
         }
 
-        // 🎯 Entity 조인된 컬럼 처리
+        // 🎯 Entity 조인된 컬럼 처리 - 사용자가 설정한 컬럼들만 사용
         let processedColumns = [...(tableConfig.columns || [])];
 
         // 초기 컬럼이 있으면 먼저 설정
         if (processedColumns.length > 0) {
-          setDisplayColumns(processedColumns);
+          console.log(
+            "🔍 사용자 설정 컬럼들:",
+            processedColumns.map((c) => c.columnName),
+          );
+
+          // 🎯 API 응답과 비교하여 존재하지 않는 컬럼 필터링
+          if (result.data.length > 0) {
+            const actualApiColumns = Object.keys(result.data[0]);
+            console.log("🔍 API 응답의 실제 컬럼들:", actualApiColumns);
+
+            // 🎯 조인 컬럼 매핑 테이블 (사용자 설정 → API 응답)
+            // 실제 API 응답에 존재하는 컬럼만 매핑
+            const newJoinColumnMapping: Record<string, string> = {
+              dept_code_dept_code: "dept_code", // user_info.dept_code
+              dept_code_status: "status", // user_info.status (dept_info.status가 조인되지 않음)
+              dept_code_company_name: "dept_name", // dept_info.dept_name (company_name이 조인되지 않음)
+              dept_code_name: "dept_code_name", // dept_info.dept_name
+              dept_name: "dept_name", // dept_info.dept_name
+              status: "status", // user_info.status
+            };
+
+            // 🎯 조인 컬럼 매핑 상태 업데이트
+            setJoinColumnMapping(newJoinColumnMapping);
+
+            console.log("🔍 조인 컬럼 매핑 테이블:", newJoinColumnMapping);
+            console.log("🔍 실제 API 응답 컬럼들:", actualApiColumns);
+
+            // 🎯 컬럼명 매핑 및 유효성 검사
+            const validColumns = processedColumns
+              .map((col) => {
+                // 체크박스는 그대로 유지
+                if (col.columnName === "__checkbox__") return col;
+
+                // 조인 컬럼 매핑 적용
+                const mappedColumnName = newJoinColumnMapping[col.columnName] || col.columnName;
+
+                console.log(`🔍 컬럼 매핑 처리: ${col.columnName} → ${mappedColumnName}`);
+
+                // API 응답에 존재하는지 확인
+                const existsInApi = actualApiColumns.includes(mappedColumnName);
+
+                if (!existsInApi) {
+                  console.log(`🔍 제거될 컬럼: ${col.columnName} → ${mappedColumnName} (API에 존재하지 않음)`);
+                  return null;
+                }
+
+                // 컬럼명이 변경된 경우 업데이트
+                if (mappedColumnName !== col.columnName) {
+                  console.log(`🔄 컬럼명 매핑: ${col.columnName} → ${mappedColumnName}`);
+                  return {
+                    ...col,
+                    columnName: mappedColumnName,
+                  };
+                }
+
+                console.log(`✅ 컬럼 유지: ${col.columnName}`);
+                return col;
+              })
+              .filter((col) => col !== null) as ColumnConfig[];
+
+            if (validColumns.length !== processedColumns.length) {
+              console.log(
+                "🔍 필터링된 컬럼들:",
+                validColumns.map((c) => c.columnName),
+              );
+              console.log(
+                "🔍 제거된 컬럼들:",
+                processedColumns
+                  .filter((col) => {
+                    const mappedName = newJoinColumnMapping[col.columnName] || col.columnName;
+                    return !actualApiColumns.includes(mappedName) && col.columnName !== "__checkbox__";
+                  })
+                  .map((c) => c.columnName),
+              );
+              processedColumns = validColumns;
+            }
+          }
         }
         if (result.entityJoinInfo?.joinConfigs) {
           result.entityJoinInfo.joinConfigs.forEach((joinConfig) => {
@@ -412,11 +552,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
           });
         }
 
-        // 컬럼 정보가 없으면 첫 번째 데이터 행에서 추출
+        // 🎯 컬럼 설정이 없으면 API 응답 기반으로 생성
         if ((!processedColumns || processedColumns.length === 0) && result.data.length > 0) {
           const autoColumns: ColumnConfig[] = Object.keys(result.data[0]).map((key, index) => ({
             columnName: key,
-            displayName: columnLabels[key] || key, // 라벨명 우선 사용
+            displayName: columnLabels[key] || key,
             visible: true,
             sortable: true,
             searchable: true,
@@ -425,6 +565,11 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
             order: index,
           }));
 
+          console.log(
+            "🎯 자동 생성된 컬럼들:",
+            autoColumns.map((c) => c.columnName),
+          );
+
           // 컴포넌트 설정 업데이트 (부모 컴포넌트에 알림)
           if (onFormDataChange) {
             onFormDataChange({
@@ -440,6 +585,9 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
         // 🎯 표시할 컬럼 상태 업데이트
         setDisplayColumns(processedColumns);
+        console.log("🎯 displayColumns 업데이트됨:", processedColumns);
+        console.log("🎯 데이터 개수:", result.data?.length || 0);
+        console.log("🎯 전체 데이터:", result.data);
       }
     } catch (err) {
       console.error("테이블 데이터 로딩 오류:", err);
@@ -628,9 +776,22 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
 
     let columns: ColumnConfig[] = [];
 
-    if (!displayColumns || displayColumns.length === 0) {
-      // displayColumns가 아직 설정되지 않은 경우 기본 컬럼 사용
-      if (!tableConfig.columns) return [];
+    // displayColumns가 있으면 우선 사용 (Entity 조인 적용된 컬럼들)
+    if (displayColumns && displayColumns.length > 0) {
+      console.log("🎯 displayColumns 사용:", displayColumns);
+      const filteredColumns = displayColumns.filter((col) => {
+        // 디자인 모드에서는 숨김 컬럼도 표시 (연하게), 실제 화면에서는 완전히 숨김
+        if (isDesignMode) {
+          return col.visible; // 디자인 모드에서는 visible만 체크
+        } else {
+          return col.visible && !col.hidden; // 실제 화면에서는 visible이면서 hidden이 아닌 것만
+        }
+      });
+      console.log("🎯 필터링된 컬럼:", filteredColumns);
+      columns = filteredColumns.sort((a, b) => a.order - b.order);
+    } else if (tableConfig.columns && tableConfig.columns.length > 0) {
+      // displayColumns가 없으면 기본 컬럼 사용
+      console.log("🎯 tableConfig.columns 사용:", tableConfig.columns);
       columns = tableConfig.columns
         .filter((col) => {
           // 디자인 모드에서는 숨김 컬럼도 표시 (연하게), 실제 화면에서는 완전히 숨김
@@ -642,16 +803,8 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
         })
         .sort((a, b) => a.order - b.order);
     } else {
-      columns = displayColumns
-        .filter((col) => {
-          // 디자인 모드에서는 숨김 컬럼도 표시 (연하게), 실제 화면에서는 완전히 숨김
-          if (isDesignMode) {
-            return col.visible; // 디자인 모드에서는 visible만 체크
-          } else {
-            return col.visible && !col.hidden; // 실제 화면에서는 visible이면서 hidden이 아닌 것만
-          }
-        })
-        .sort((a, b) => a.order - b.order);
+      console.log("🎯 사용할 컬럼이 없음");
+      return [];
     }
 
     // 체크박스가 활성화되고 실제 데이터 컬럼이 있는 경우에만 체크박스 컬럼을 추가
@@ -677,8 +830,14 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
       }
     }
 
+    console.log("🎯 최종 visibleColumns:", columns);
+    console.log("🎯 visibleColumns 개수:", columns.length);
+    console.log(
+      "🎯 visibleColumns 컬럼명들:",
+      columns.map((c) => c.columnName),
+    );
     return columns;
-  }, [displayColumns, tableConfig.columns, tableConfig.checkbox]);
+  }, [displayColumns, tableConfig.columns, tableConfig.checkbox, isDesignMode]);
 
   // columnsByPosition은 SingleTableWithSticky에서 사용하지 않으므로 제거
   // 기존 테이블에서만 필요한 경우 다시 추가 가능
@@ -1050,7 +1209,21 @@ export const TableListComponent: React.FC<TableListComponentProps> = ({
                       >
                         {column.columnName === "__checkbox__"
                           ? renderCheckboxCell(row, index)
-                          : formatCellValue(row[column.columnName], column.format, column.columnName) || "\u00A0"}
+                          : (() => {
+                              // 🎯 매핑된 컬럼명으로 데이터 찾기
+                              const mappedColumnName = joinColumnMapping[column.columnName] || column.columnName;
+                              const cellValue = row[mappedColumnName];
+                              if (index === 0) {
+                                // 첫 번째 행만 로그 출력
+                                console.log(
+                                  `🔍 셀 데이터 [${column.columnName} → ${mappedColumnName}]:`,
+                                  cellValue,
+                                  "전체 row:",
+                                  row,
+                                );
+                              }
+                              return formatCellValue(cellValue, column.format, column.columnName) || "\u00A0";
+                            })()}
                       </TableCell>
                     ))}
                   </TableRow>