From 2a52f25c10ce792c12fb91759e73e4cc5402b20c Mon Sep 17 00:00:00 2001 From: kjs Date: Thu, 13 Nov 2025 17:42:20 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EB=AA=A8=EB=8B=AC=20=EC=A0=80=EC=9E=A5?= =?UTF-8?q?=20=ED=9B=84=20=EB=B6=80=EB=AA=A8=20=ED=99=94=EB=A9=B4=20?= =?UTF-8?q?=ED=85=8C=EC=9D=B4=EB=B8=94=20=EC=9E=90=EB=8F=99=20=EC=83=88?= =?UTF-8?q?=EB=A1=9C=EA=B3=A0=EC=B9=A8=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ScreenModal에 onRefresh 콜백 추가하여 refreshTable 이벤트 발송 - InteractiveScreenViewerDynamic에 onRefresh, onFlowRefresh prop 추가 및 하위 컴포넌트로 전달 - TableListComponent에 refreshTable 이벤트 리스너 추가 - SplitPanelLayoutComponent에 refreshTable 이벤트 리스너 추가하여 좌/우측 패널 모두 새로고침 - 모달에서 데이터 저장 시 부모 화면의 모든 테이블 컴포넌트가 자동으로 새로고침되도록 개선 변경된 파일: - frontend/components/common/ScreenModal.tsx - frontend/components/screen/InteractiveScreenViewerDynamic.tsx - frontend/lib/registry/components/table-list/TableListComponent.tsx - frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx --- frontend/components/common/ScreenModal.tsx | 5 +++++ .../screen/InteractiveScreenViewerDynamic.tsx | 12 ++++++++--- .../SplitPanelLayoutComponent.tsx | 20 +++++++++++++++++++ .../table-list/TableListComponent.tsx | 16 +++++++++++++++ 4 files changed, 50 insertions(+), 3 deletions(-) diff --git a/frontend/components/common/ScreenModal.tsx b/frontend/components/common/ScreenModal.tsx index 609c2b43..4bbb913e 100644 --- a/frontend/components/common/ScreenModal.tsx +++ b/frontend/components/common/ScreenModal.tsx @@ -414,6 +414,11 @@ export const ScreenModal: React.FC = ({ className }) => { return newFormData; }); }} + onRefresh={() => { + // 부모 화면의 테이블 새로고침 이벤트 발송 + console.log("🔄 모달에서 부모 화면 테이블 새로고침 이벤트 발송"); + window.dispatchEvent(new CustomEvent("refreshTable")); + }} screenInfo={{ id: modalState.screenId!, tableName: screenData.screenInfo?.tableName, diff --git a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx index 639ffa0a..a2ab1522 100644 --- a/frontend/components/screen/InteractiveScreenViewerDynamic.tsx +++ b/frontend/components/screen/InteractiveScreenViewerDynamic.tsx @@ -40,6 +40,8 @@ interface InteractiveScreenViewerProps { tableName?: string; }; onSave?: () => Promise; + onRefresh?: () => void; + onFlowRefresh?: () => void; } export const InteractiveScreenViewerDynamic: React.FC = ({ @@ -50,6 +52,8 @@ export const InteractiveScreenViewerDynamic: React.FC { const { isPreviewMode } = useScreenPreview(); // 프리뷰 모드 확인 const { userName, user } = useAuth(); @@ -324,9 +328,11 @@ export const InteractiveScreenViewerDynamic: React.FC { - // 테이블 컴포넌트는 자체적으로 loadData 호출 - }} + onRefresh={onRefresh || (() => { + // 부모로부터 전달받은 onRefresh 또는 기본 동작 + console.log("🔄 InteractiveScreenViewerDynamic onRefresh 호출"); + })} + onFlowRefresh={onFlowRefresh} onClose={() => { // buttonActions.ts가 이미 처리함 }} diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx index ced60e9e..955bae86 100644 --- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx +++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx @@ -962,6 +962,26 @@ 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) { + loadRightData(selectedLeftItem); + } + } + }; + + window.addEventListener("refreshTable", handleRefreshTable); + + return () => { + window.removeEventListener("refreshTable", handleRefreshTable); + }; + }, [isDesignMode, loadLeftData, loadRightData, selectedLeftItem]); + // 리사이저 드래그 핸들러 const handleMouseDown = (e: React.MouseEvent) => { if (!resizable) return; diff --git a/frontend/lib/registry/components/table-list/TableListComponent.tsx b/frontend/lib/registry/components/table-list/TableListComponent.tsx index 16734059..8b397881 100644 --- a/frontend/lib/registry/components/table-list/TableListComponent.tsx +++ b/frontend/lib/registry/components/table-list/TableListComponent.tsx @@ -1766,6 +1766,22 @@ export const TableListComponent: React.FC = ({ } }, [tableConfig.refreshInterval, isDesignMode]); + // 🆕 전역 테이블 새로고침 이벤트 리스너 + useEffect(() => { + const handleRefreshTable = () => { + if (tableConfig.selectedTable && !isDesignMode) { + console.log("🔄 [TableList] refreshTable 이벤트 수신 - 데이터 새로고침"); + setRefreshTrigger((prev) => prev + 1); + } + }; + + window.addEventListener("refreshTable", handleRefreshTable); + + return () => { + window.removeEventListener("refreshTable", handleRefreshTable); + }; + }, [tableConfig.selectedTable, isDesignMode]); + // 초기 컬럼 너비 측정 (한 번만) useEffect(() => { if (!hasInitializedWidths.current && visibleColumns.length > 0) {