diff --git a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx index 923c1aa3..f47da1aa 100644 --- a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx +++ b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx @@ -1091,7 +1091,7 @@ export const SplitPanelLayoutComponent: React.FC searchValues, ]); - // 우측 데이터 로드 + // 우측 데이터 로드 (leftItem이 null이면 전체 데이터 로드) const loadRightData = useCallback( async (leftItem: any) => { const relationshipType = componentConfig.rightPanel?.relation?.type || "detail"; @@ -1099,10 +1099,84 @@ export const SplitPanelLayoutComponent: React.FC if (!rightTableName || isDesignMode) return; + // 좌측 미선택 시: 전체 데이터 로드 (dataFilter 적용) + if (!leftItem && relationshipType === "join") { + setIsLoadingRight(true); + try { + const rightJoinColumns = extractAdditionalJoinColumns( + componentConfig.rightPanel?.columns, + rightTableName, + ); + + const result = await entityJoinApi.getTableDataWithJoins(rightTableName, { + enableEntityJoin: true, + size: 1000, + companyCodeOverride: companyCode, + additionalJoinColumns: rightJoinColumns, + dataFilter: componentConfig.rightPanel?.dataFilter, + }); + + // dataFilter 적용 + let filteredData = result.data || []; + const dataFilter = componentConfig.rightPanel?.dataFilter; + if (dataFilter?.enabled && dataFilter.filters?.length > 0) { + filteredData = filteredData.filter((item: any) => { + return dataFilter.filters.every((cond: any) => { + const value = item[cond.columnName]; + switch (cond.operator) { + case "equals": + return value === cond.value; + case "notEquals": + return value !== cond.value; + case "contains": + return String(value || "").includes(String(cond.value)); + case "is_null": + return value === null || value === undefined || value === ""; + case "is_not_null": + return value !== null && value !== undefined && value !== ""; + default: + return true; + } + }); + }); + } + + // conditions 형식 dataFilter도 지원 (하위 호환성) + const dataFilterConditions = componentConfig.rightPanel?.dataFilter; + if (dataFilterConditions?.enabled && dataFilterConditions.conditions?.length > 0) { + filteredData = filteredData.filter((item: any) => { + return dataFilterConditions.conditions.every((cond: any) => { + const value = item[cond.column]; + switch (cond.operator) { + case "equals": + return value === cond.value; + case "notEquals": + return value !== cond.value; + case "contains": + return String(value || "").includes(String(cond.value)); + default: + return true; + } + }); + }); + } + + setRightData(filteredData); + } catch (error) { + console.error("우측 전체 데이터 로드 실패:", error); + } finally { + setIsLoadingRight(false); + } + return; + } + + // leftItem이 null이면 join 모드 이외에는 데이터 로드 불가 + if (!leftItem) return; + setIsLoadingRight(true); try { if (relationshipType === "detail") { - // 상세 모드: 동일 테이블의 상세 정보 (🆕 엔티티 조인 활성화) + // 상세 모드: 동일 테이블의 상세 정보 (엔티티 조인 활성화) const primaryKey = leftItem.id || leftItem.ID || Object.values(leftItem)[0]; // 🆕 엔티티 조인 API 사용 @@ -1331,11 +1405,11 @@ export const SplitPanelLayoutComponent: React.FC ], ); - // 추가 탭 데이터 로딩 함수 + // 추가 탭 데이터 로딩 함수 (leftItem이 null이면 전체 데이터 로드) const loadTabData = useCallback( async (tabIndex: number, leftItem: any) => { const tabConfig = componentConfig.rightPanel?.additionalTabs?.[tabIndex - 1]; - if (!tabConfig || !leftItem || isDesignMode) return; + if (!tabConfig || isDesignMode) return; const tabTableName = tabConfig.tableName; if (!tabTableName) return; @@ -1346,7 +1420,7 @@ export const SplitPanelLayoutComponent: React.FC const leftColumn = tabConfig.relation?.leftColumn || keys?.[0]?.leftColumn; const rightColumn = tabConfig.relation?.foreignKey || keys?.[0]?.rightColumn; - // 🆕 탭 config의 Entity 조인 컬럼 추출 + // 탭 config의 Entity 조인 컬럼 추출 const tabJoinColumns = extractAdditionalJoinColumns(tabConfig.columns, tabTableName); if (tabJoinColumns) { console.log(`🔗 [분할패널] 탭 ${tabIndex} additionalJoinColumns:`, tabJoinColumns); @@ -1354,7 +1428,20 @@ export const SplitPanelLayoutComponent: React.FC let resultData: any[] = []; - if (leftColumn && rightColumn) { + // 탭의 dataFilter (API 전달용) + const tabDataFilterForApi = (tabConfig as any).dataFilter; + + if (!leftItem) { + // 좌측 미선택: 전체 데이터 로드 (dataFilter는 API에 전달) + const result = await entityJoinApi.getTableDataWithJoins(tabTableName, { + enableEntityJoin: true, + size: 1000, + companyCodeOverride: companyCode, + additionalJoinColumns: tabJoinColumns, + dataFilter: tabDataFilterForApi, + }); + resultData = result.data || []; + } else if (leftColumn && rightColumn) { const searchConditions: Record = {}; if (keys && keys.length > 0) { @@ -1380,18 +1467,46 @@ export const SplitPanelLayoutComponent: React.FC search: searchConditions, enableEntityJoin: true, size: 1000, - additionalJoinColumns: tabJoinColumns, // 🆕 Entity 조인 컬럼 전달 + companyCodeOverride: companyCode, + additionalJoinColumns: tabJoinColumns, + dataFilter: tabDataFilterForApi, }); resultData = result.data || []; } else { const result = await entityJoinApi.getTableDataWithJoins(tabTableName, { enableEntityJoin: true, size: 1000, - additionalJoinColumns: tabJoinColumns, // 🆕 Entity 조인 컬럼 전달 + companyCodeOverride: companyCode, + additionalJoinColumns: tabJoinColumns, + dataFilter: tabDataFilterForApi, }); resultData = result.data || []; } + // 탭별 dataFilter 적용 + const tabDataFilter = (tabConfig as any).dataFilter; + if (tabDataFilter?.enabled && tabDataFilter.filters?.length > 0) { + resultData = resultData.filter((item: any) => { + return tabDataFilter.filters.every((cond: any) => { + const value = item[cond.columnName]; + switch (cond.operator) { + case "equals": + return value === cond.value; + case "notEquals": + return value !== cond.value; + case "contains": + return String(value || "").includes(String(cond.value)); + case "is_null": + return value === null || value === undefined || value === ""; + case "is_not_null": + return value !== null && value !== undefined && value !== ""; + default: + return true; + } + }); + }); + } + setTabsData((prev) => ({ ...prev, [tabIndex]: resultData })); } catch (error) { console.error(`추가탭 ${tabIndex} 데이터 로드 실패:`, error); @@ -1407,29 +1522,55 @@ export const SplitPanelLayoutComponent: React.FC [componentConfig.rightPanel?.additionalTabs, isDesignMode, toast], ); - // 탭 변경 핸들러 + // 탭 변경 핸들러 (좌측 미선택 시에도 전체 데이터 로드) const handleTabChange = useCallback( (newTabIndex: number) => { setActiveTabIndex(newTabIndex); - if (selectedLeftItem) { - if (newTabIndex === 0) { - if (!rightData || (Array.isArray(rightData) && rightData.length === 0)) { - loadRightData(selectedLeftItem); - } - } else { - if (!tabsData[newTabIndex]) { - loadTabData(newTabIndex, selectedLeftItem); - } + if (newTabIndex === 0) { + if (!rightData || (Array.isArray(rightData) && rightData.length === 0)) { + loadRightData(selectedLeftItem); + } + } else { + if (!tabsData[newTabIndex]) { + loadTabData(newTabIndex, selectedLeftItem); } } }, [selectedLeftItem, rightData, tabsData, loadRightData, loadTabData], ); - // 좌측 항목 선택 핸들러 + // 좌측 항목 선택 핸들러 (동일 항목 재클릭 시 선택 해제 → 전체 데이터 표시) const handleLeftItemSelect = useCallback( (item: any) => { + // 동일 항목 클릭 시 선택 해제 (전체 보기로 복귀) + const leftPk = componentConfig.rightPanel?.relation?.leftColumn || + componentConfig.rightPanel?.relation?.keys?.[0]?.leftColumn; + const isSameItem = selectedLeftItem && leftPk && + selectedLeftItem[leftPk] === item[leftPk]; + + if (isSameItem) { + // 선택 해제 → 전체 데이터 로드 + setSelectedLeftItem(null); + setExpandedRightItems(new Set()); + setTabsData({}); + if (activeTabIndex === 0) { + loadRightData(null); + } else { + loadTabData(activeTabIndex, null); + } + // 추가 탭들도 전체 데이터 로드 + const tabs = componentConfig.rightPanel?.additionalTabs; + if (tabs && tabs.length > 0) { + tabs.forEach((_: any, idx: number) => { + if (idx + 1 !== activeTabIndex) { + loadTabData(idx + 1, null); + } + }); + } + return; + } + setSelectedLeftItem(item); setExpandedRightItems(new Set()); // 좌측 항목 변경 시 우측 확장 초기화 setTabsData({}); // 모든 탭 데이터 초기화 @@ -1450,7 +1591,7 @@ export const SplitPanelLayoutComponent: React.FC }); } }, - [loadRightData, loadTabData, activeTabIndex, componentConfig.leftPanel?.tableName, isDesignMode], + [loadRightData, loadTabData, activeTabIndex, componentConfig.leftPanel?.tableName, componentConfig.rightPanel?.relation, componentConfig.rightPanel?.additionalTabs, isDesignMode, selectedLeftItem], ); // 우측 항목 확장/축소 토글 @@ -2026,10 +2167,8 @@ export const SplitPanelLayoutComponent: React.FC if (editModalPanel === "left") { loadLeftData(); // 우측 패널도 새로고침 (FK가 변경되었을 수 있음) - if (selectedLeftItem) { - loadRightData(selectedLeftItem); - } - } else if (editModalPanel === "right" && selectedLeftItem) { + loadRightData(selectedLeftItem); + } else if (editModalPanel === "right") { loadRightData(selectedLeftItem); } } else { @@ -2160,7 +2299,7 @@ export const SplitPanelLayoutComponent: React.FC setSelectedLeftItem(null); setRightData(null); } - } else if (deleteModalPanel === "right" && selectedLeftItem) { + } else if (deleteModalPanel === "right") { loadRightData(selectedLeftItem); } } else { @@ -2317,7 +2456,7 @@ export const SplitPanelLayoutComponent: React.FC if (addModalPanel === "left" || addModalPanel === "left-item") { // 좌측 패널 데이터 새로고침 (일반 추가 또는 하위 항목 추가) loadLeftData(); - } else if (addModalPanel === "right" && selectedLeftItem) { + } else if (addModalPanel === "right") { // 우측 패널 데이터 새로고침 loadRightData(selectedLeftItem); } @@ -2405,10 +2544,22 @@ export const SplitPanelLayoutComponent: React.FC } }, [leftColumnVisibility, componentConfig.leftPanel?.tableName, currentUserId]); - // 초기 데이터 로드 + // 초기 데이터 로드 (좌측 + 우측 전체 데이터) useEffect(() => { if (!isDesignMode && componentConfig.autoLoad !== false) { loadLeftData(); + // 좌측 미선택 상태에서 우측 전체 데이터 기본 로드 + const relationshipType = componentConfig.rightPanel?.relation?.type || "detail"; + if (relationshipType === "join") { + loadRightData(null); + // 추가 탭도 전체 데이터 로드 + const tabs = componentConfig.rightPanel?.additionalTabs; + if (tabs && tabs.length > 0) { + tabs.forEach((_: any, idx: number) => { + loadTabData(idx + 1, null); + }); + } + } } // eslint-disable-next-line react-hooks/exhaustive-deps }, [isDesignMode, componentConfig.autoLoad]); @@ -2421,19 +2572,17 @@ export const SplitPanelLayoutComponent: React.FC // eslint-disable-next-line react-hooks/exhaustive-deps }, [leftFilters]); - // 🆕 전역 테이블 새로고침 이벤트 리스너 + // 전역 테이블 새로고침 이벤트 리스너 useEffect(() => { const handleRefreshTable = () => { if (!isDesignMode) { console.log("🔄 [SplitPanel] refreshTable 이벤트 수신 - 데이터 새로고침"); loadLeftData(); - // 선택된 항목이 있으면 현재 활성 탭 데이터 새로고침 - if (selectedLeftItem) { - if (activeTabIndex === 0) { - loadRightData(selectedLeftItem); - } else { - loadTabData(activeTabIndex, selectedLeftItem); - } + // 현재 활성 탭 데이터 새로고침 (좌측 미선택 시에도 전체 데이터 로드) + if (activeTabIndex === 0) { + loadRightData(selectedLeftItem); + } else { + loadTabData(activeTabIndex, selectedLeftItem); } } }; @@ -3339,15 +3488,7 @@ export const SplitPanelLayoutComponent: React.FC ); } - if (!selectedLeftItem) { - return ( -
-

좌측에서 항목을 선택하세요

-
- ); - } - - if (currentTabData.length === 0) { + if (currentTabData.length === 0 && !isTabLoading) { return (

관련 데이터가 없습니다.

@@ -4107,11 +4248,20 @@ export const SplitPanelLayoutComponent: React.FC
) : ( - // 선택 없음 + // 데이터 없음 또는 초기 로딩 대기
-

좌측에서 항목을 선택하세요

-

선택한 항목의 상세 정보가 여기에 표시됩니다

+ {componentConfig.rightPanel?.relation?.type === "join" ? ( + <> + +

데이터를 불러오는 중...

+ + ) : ( + <> +

좌측에서 항목을 선택하세요

+

선택한 항목의 상세 정보가 여기에 표시됩니다

+ + )}
)} diff --git a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx index b2fff2cd..25a57448 100644 --- a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx +++ b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutConfigPanel.tsx @@ -328,7 +328,7 @@ const AdditionalTabConfigPanel: React.FC = ({
@@ -341,11 +341,11 @@ const AdditionalTabConfigPanel: React.FC = ({ )}
- -
+ + {/* ===== 1. 기본 정보 ===== */} -
- +
+

기본 정보

@@ -366,123 +366,120 @@ const AdditionalTabConfigPanel: React.FC = ({ />
-
- - updateTab({ panelHeaderHeight: parseInt(e.target.value) || 48 })} - placeholder="48" - className="h-8 w-24 text-xs" - /> -
{/* ===== 2. 테이블 선택 ===== */} -
- -
- - - - - - - - - 테이블을 찾을 수 없습니다. - - {availableRightTables.map((table) => ( - updateTab({ tableName: table.tableName, columns: [] })} - > - - {table.displayName || table.tableName} - - ))} - - - - -
+
+

테이블 설정

+ + + + + + + + 테이블을 찾을 수 없습니다. + + {availableRightTables.map((table) => ( + updateTab({ tableName: table.tableName, columns: [] })} + > + + {table.displayName || table.tableName} + {table.displayName && ({table.tableName})} + + ))} + + + +
- {/* ===== 3. 표시 모드 ===== */} -
- -
+ {/* ===== 3. 표시 모드 + 요약 설정 ===== */} +
+

표시 설정

+
{/* 요약 설정 (목록 모드) */} - {tab.displayMode === "list" && ( -
-
- + {(tab.displayMode || "list") === "list" && ( +
+ +
+ updateTab({ summaryColumnCount: parseInt(e.target.value) || 3 })} - min={1} - max={10} - className="h-8 text-xs" + className="bg-white" /> +

접기 전에 표시할 컬럼 개수 (기본: 3개)

-
+
+
+ +

컬럼명 표시 여부

+
updateTab({ summaryShowLabel: !!checked })} + onCheckedChange={(checked) => updateTab({ summaryShowLabel: checked as boolean })} /> -
)}
{/* ===== 4. 컬럼 매핑 (연결 키) ===== */} -
- -

- 좌측 패널 선택 시 관련 데이터만 표시합니다 -

-
+
+

컬럼 매핑 (연결 키)

+

좌측 패널 선택 시 관련 데이터만 표시합니다

+
@@ -515,10 +508,7 @@ const AdditionalTabConfigPanel: React.FC = ({ value={tab.relation?.keys?.[0]?.rightColumn || tab.relation?.foreignKey || "__none__"} onValueChange={(value) => { if (value === "__none__") { - // 선택 안 함 - 조인 키 제거 - updateTab({ - relation: undefined, - }); + updateTab({ relation: undefined }); } else { updateTab({ relation: { @@ -530,17 +520,13 @@ const AdditionalTabConfigPanel: React.FC = ({ } }} > - + - - 선택 안 함 (전체 데이터) - + 선택 안 함 (전체 데이터) {tabColumns.map((col) => ( - - {col.columnLabel || col.columnName} - + {col.columnLabel || col.columnName} ))} @@ -549,215 +535,202 @@ const AdditionalTabConfigPanel: React.FC = ({
{/* ===== 5. 기능 버튼 ===== */} -
- +
+

기능 버튼

- updateTab({ showSearch: !!checked })} - /> + updateTab({ showSearch: !!checked })} />
- updateTab({ showAdd: !!checked })} - /> + updateTab({ showAdd: !!checked })} />
- updateTab({ showEdit: !!checked })} - /> + updateTab({ showEdit: !!checked })} />
- updateTab({ showDelete: !!checked })} - /> + updateTab({ showDelete: !!checked })} />
- {/* ===== 6. 표시 컬럼 설정 ===== */} -
-
- - -
-

- 표시할 컬럼을 선택하세요. 선택하지 않으면 모든 컬럼이 표시됩니다. -

+ {/* ===== 6. 표시할 컬럼 - DnD + Entity 조인 통합 ===== */} + {(() => { + const selectedColumns = tab.columns || []; + const filteredTabCols = tabColumns.filter((c) => !["company_code", "company_name"].includes(c.columnName)); + const unselectedCols = filteredTabCols.filter((c) => !selectedColumns.some((sc) => sc.name === c.columnName)); + const dbNumericTypes = ["numeric", "decimal", "integer", "bigint", "double precision", "real", "smallint", "int4", "int8", "float4", "float8"]; + const inputNumericTypes = ["number", "decimal", "currency", "integer"]; - {/* 테이블 미선택 상태 */} - {!tab.tableName && ( -
-

먼저 테이블을 선택하세요

-
- )} + const handleTabDragEnd = (event: DragEndEvent) => { + const { active, over } = event; + if (over && active.id !== over.id) { + const oldIndex = selectedColumns.findIndex((c) => c.name === active.id); + const newIndex = selectedColumns.findIndex((c) => c.name === over.id); + if (oldIndex !== -1 && newIndex !== -1) { + updateTab({ columns: arrayMove([...selectedColumns], oldIndex, newIndex) }); + } + } + }; - {/* 테이블 선택됨 - 컬럼 목록 */} - {tab.tableName && ( -
- {/* 로딩 상태 */} - {loadingTabColumns && ( -
-

컬럼을 불러오는 중...

-
- )} + return ( +
+

표시할 컬럼 ({selectedColumns.length}개 선택)

+
+ {!tab.tableName ? ( +

테이블을 선택해주세요

+ ) : loadingTabColumns ? ( +

컬럼을 불러오는 중...

+ ) : ( + <> + {selectedColumns.length > 0 && ( + + c.name)} strategy={verticalListSortingStrategy}> +
+ {selectedColumns.map((col, index) => { + const colInfo = tabColumns.find((c) => c.columnName === col.name); + const isNumeric = colInfo && ( + dbNumericTypes.includes(colInfo.dataType?.toLowerCase() || "") || + inputNumericTypes.includes(colInfo.input_type?.toLowerCase() || "") || + inputNumericTypes.includes(colInfo.webType?.toLowerCase() || "") + ); + return ( + { + const newColumns = [...selectedColumns]; + newColumns[index] = { ...newColumns[index], label: value }; + updateTab({ columns: newColumns }); + }} + onWidthChange={(value) => { + const newColumns = [...selectedColumns]; + newColumns[index] = { ...newColumns[index], width: value }; + updateTab({ columns: newColumns }); + }} + onFormatChange={(checked) => { + const newColumns = [...selectedColumns]; + newColumns[index] = { ...newColumns[index], format: { ...newColumns[index].format, type: "number", thousandSeparator: checked } }; + updateTab({ columns: newColumns }); + }} + onRemove={() => updateTab({ columns: selectedColumns.filter((_, i) => i !== index) })} + /> + ); + })} +
+ + + )} - {/* 설정된 컬럼이 없을 때 */} - {!loadingTabColumns && (tab.columns || []).length === 0 && ( -
-

설정된 컬럼이 없습니다

-

컬럼을 추가하지 않으면 모든 컬럼이 표시됩니다

-
- )} + {selectedColumns.length > 0 && unselectedCols.length > 0 && ( +
+ 미선택 컬럼 +
+ )} - {/* 설정된 컬럼 목록 */} - {!loadingTabColumns && (tab.columns || []).length > 0 && ( - (tab.columns || []).map((col, colIndex) => ( -
- {/* 상단: 순서 변경 + 삭제 버튼 */} -
-
- - - #{colIndex + 1} -
- + + {column.columnLabel || column.columnName} +
+ ))}
- {/* 컬럼 선택 */} -
- - -
+ {/* Entity 조인 컬럼 - 아코디언 (접기/펼치기) */} + {(() => { + const joinData = tab.tableName ? entityJoinColumnsMap?.[tab.tableName] : null; + if (!joinData || joinData.joinTables.length === 0) return null; - {/* 라벨 + 너비 */} -
-
- - { - const newColumns = [...(tab.columns || [])]; - newColumns[colIndex] = { ...col, label: e.target.value }; - updateTab({ columns: newColumns }); - }} - placeholder="표시 라벨" - className="h-8 text-xs" - /> -
-
- - { - const newColumns = [...(tab.columns || [])]; - newColumns[colIndex] = { ...col, width: parseInt(e.target.value) || 100 }; - updateTab({ columns: newColumns }); - }} - placeholder="100" - className="h-8 text-xs" - /> -
-
-
- )) - )} + return joinData.joinTables.map((joinTable, tableIndex) => { + const joinColumnsToShow = joinTable.availableColumns.filter((column) => { + const matchingJoinColumn = joinData.availableColumns.find( + (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName, + ); + if (!matchingJoinColumn) return false; + return !selectedColumns.some((c) => c.name === matchingJoinColumn.joinAlias); + }); + const addedCount = joinTable.availableColumns.length - joinColumnsToShow.length; + if (joinColumnsToShow.length === 0 && addedCount === 0) return null; + + return ( +
+ + + + {joinTable.tableName} + {addedCount > 0 && ( + {addedCount}개 선택 + )} + {joinColumnsToShow.length}개 남음 + +
+ {joinColumnsToShow.map((column, colIndex) => { + const matchingJoinColumn = joinData.availableColumns.find( + (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName, + ); + if (!matchingJoinColumn) return null; + + return ( +
{ + updateTab({ + columns: [...selectedColumns, { + name: matchingJoinColumn.joinAlias, + label: matchingJoinColumn.suggestedLabel || matchingJoinColumn.columnLabel, + width: 100, + isEntityJoin: true, + joinInfo: { + sourceTable: tab.tableName!, + sourceColumn: (joinTable as any).joinConfig?.sourceColumn || "", + referenceTable: matchingJoinColumn.tableName, + joinAlias: matchingJoinColumn.joinAlias, + }, + }], + }); + }} + > + + + {column.columnLabel || column.columnName} +
+ ); + })} + {joinColumnsToShow.length === 0 && ( +

모든 컬럼이 이미 추가되었습니다

+ )} +
+
+ ); + }); + })()} + + )} +
- )} -
+ ); + })()} {/* ===== 7. 추가 모달 컬럼 설정 (showAdd일 때) ===== */} {tab.showAdd && ( -
+
- +

추가 모달 컬럼 설정

)} - {/* ===== 7.5 Entity 조인 컬럼 ===== */} - {(() => { - const joinData = tab.tableName ? entityJoinColumnsMap?.[tab.tableName] : null; - if (!joinData || joinData.joinTables.length === 0) return null; - - return ( -
- -

연관 테이블의 컬럼을 추가합니다

- {joinData.joinTables.map((joinTable, tableIndex) => ( -
-
- - {joinTable.tableName} - {joinTable.currentDisplayColumn} -
-
- {joinTable.availableColumns.map((column, colIndex) => { - const matchingJoinColumn = joinData.availableColumns.find( - (jc) => jc.tableName === joinTable.tableName && jc.columnName === column.columnName, - ); - if (!matchingJoinColumn) return null; - const tabColumns2 = tab.columns || []; - const isAdded = tabColumns2.some((c) => c.name === matchingJoinColumn.joinAlias); - - return ( -
{ - if (isAdded) { - updateTab({ columns: tabColumns2.filter((c) => c.name !== matchingJoinColumn.joinAlias) }); - } else { - updateTab({ - columns: [...tabColumns2, { - name: matchingJoinColumn.joinAlias, - label: matchingJoinColumn.suggestedLabel || matchingJoinColumn.columnLabel, - width: 100, - isEntityJoin: true, - joinInfo: { - sourceTable: tab.tableName!, - sourceColumn: (joinTable as any).joinConfig?.sourceColumn || "", - referenceTable: matchingJoinColumn.tableName, - joinAlias: matchingJoinColumn.joinAlias, - }, - }], - }); - } - }} - > - - - {column.columnLabel} - {column.dataType} -
- ); - })} -
-
- ))} -
- ); - })()} + {/* Entity 조인 컬럼은 표시 컬럼 목록에 통합됨 */} {/* ===== 8. 데이터 필터링 ===== */} -
- +
+

데이터 필터링

= ({
{/* ===== 9. 중복 데이터 제거 ===== */} -
+
- +

중복 데이터 제거

{ @@ -1019,8 +927,8 @@ const AdditionalTabConfigPanel: React.FC = ({ {/* ===== 10. 수정 버튼 설정 ===== */} {tab.showEdit && ( -
- +
+

수정 버튼 설정

@@ -1125,8 +1033,8 @@ const AdditionalTabConfigPanel: React.FC = ({ {/* ===== 11. 삭제 버튼 설정 ===== */} {tab.showDelete && ( -
- +
+

삭제 버튼 설정

@@ -1196,7 +1104,7 @@ const AdditionalTabConfigPanel: React.FC = ({ 탭 삭제
-
+ );