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