refactor: 분할 패널에서 좌측 테이블만 검색 컴포넌트 등록하도록 변경

변경 사유:
- 분할 패널은 마스터-디테일 구조로 좌측(마스터)만 독립적으로 검색 가능
- 우측(디테일)은 좌측 선택 항목에 종속되므로 별도 검색 불필요

변경 내용:
- 우측 테이블 registerTable 호출 제거 (주석 처리)
- TableSearchWidget에서 좌측 테이블만 선택 가능
- 우측 테이블 관련 상태(rightFilters, rightGrouping 등)는 내부 로직용으로 유지

효과:
- 분할 패널 사용 시 좌측 마스터 테이블만 검색 설정 가능
- 우측 디테일 테이블은 좌측 선택에 따라 자동 필터링
- 검색 컴포넌트 UI가 더 직관적으로 개선
This commit is contained in:
kjs 2025-11-12 15:54:48 +09:00
parent c40d8ea1ba
commit 9cf9b87068
1 changed files with 32 additions and 32 deletions

View File

@ -314,38 +314,38 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
}
}, [component.id, componentConfig.leftPanel?.tableName, componentConfig.leftPanel?.displayColumns, leftColumnLabels, component.title, isDesignMode]);
// 우측 테이블 등록 (Context에 등록)
useEffect(() => {
const rightTableName = componentConfig.rightPanel?.tableName;
if (!rightTableName || isDesignMode) return;
const rightTableId = `split-panel-right-${component.id}`;
// 🔧 화면에 표시되는 컬럼만 등록 (displayColumns 또는 columns)
const displayColumns = componentConfig.rightPanel?.columns || [];
const rightColumns = displayColumns.map((col: any) => col.columnName || col.name || col).filter(Boolean);
if (rightColumns.length > 0) {
registerTable({
tableId: rightTableId,
label: `${component.title || "분할 패널"} (우측)`,
tableName: rightTableName,
columns: rightColumns.map((col: string) => ({
columnName: col,
columnLabel: rightColumnLabels[col] || col,
inputType: "text",
visible: true,
width: 150,
sortable: true,
filterable: true,
})),
onFilterChange: setRightFilters,
onGroupChange: setRightGrouping,
onColumnVisibilityChange: setRightColumnVisibility,
});
return () => unregisterTable(rightTableId);
}
}, [component.id, componentConfig.rightPanel?.tableName, componentConfig.rightPanel?.columns, rightColumnLabels, component.title, isDesignMode]);
// 우측 테이블은 검색 컴포넌트 등록 제외 (좌측 마스터 테이블만 검색 가능)
// useEffect(() => {
// const rightTableName = componentConfig.rightPanel?.tableName;
// if (!rightTableName || isDesignMode) return;
//
// const rightTableId = `split-panel-right-${component.id}`;
// // 🔧 화면에 표시되는 컬럼만 등록 (displayColumns 또는 columns)
// const displayColumns = componentConfig.rightPanel?.columns || [];
// const rightColumns = displayColumns.map((col: any) => col.columnName || col.name || col).filter(Boolean);
//
// if (rightColumns.length > 0) {
// registerTable({
// tableId: rightTableId,
// label: `${component.title || "분할 패널"} (우측)`,
// tableName: rightTableName,
// columns: rightColumns.map((col: string) => ({
// columnName: col,
// columnLabel: rightColumnLabels[col] || col,
// inputType: "text",
// visible: true,
// width: 150,
// sortable: true,
// filterable: true,
// })),
// onFilterChange: setRightFilters,
// onGroupChange: setRightGrouping,
// onColumnVisibilityChange: setRightColumnVisibility,
// });
//
// return () => unregisterTable(rightTableId);
// }
// }, [component.id, componentConfig.rightPanel?.tableName, componentConfig.rightPanel?.columns, rightColumnLabels, component.title, isDesignMode]);
// 좌측 테이블 컬럼 라벨 로드
useEffect(() => {