feat: 수정 모달 자동 닫기 및 테이블 새로고침 기능 구현

- EditModal: 저장 완료 후 자동으로 닫히고 부모 테이블 새로고침
- buttonActions.ts: 저장 성공 후 closeEditModal 이벤트 발생
- InteractiveScreenViewerDynamic: onSave prop 추가하여 EditModal 연동
- InteractiveDataTable: EditModal 열 때 onSave 콜백으로 loadData 전달
- 두 가지 시나리오 모두 지원:
  1. InteractiveScreenViewerDynamic 버튼의 onSave 호출
  2. DynamicComponentRenderer 버튼의 buttonActions.ts 처리
This commit is contained in:
kjs
2025-11-03 09:58:04 +09:00
parent aef62454c2
commit 8e9daf5b22
6 changed files with 481 additions and 55 deletions
@@ -769,7 +769,7 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
setShowSaveModal(true);
}, [getDisplayColumns, generateAutoValue, component.addModalConfig]);
// 데이터 수정 핸들러 (SaveModal 사용)
// 데이터 수정 핸들러 (EditModal 사용)
const handleEditData = useCallback(() => {
if (selectedRows.size !== 1) return;
@@ -793,17 +793,25 @@ export const InteractiveDataTable: React.FC<InteractiveDataTableProps> = ({
initialData[col.columnName] = selectedRowData[col.columnName] || "";
});
setEditFormData(initialData);
setEditingRowData(selectedRowData);
// 수정 모달 설정에서 제목과 설명 가져오기
const editModalTitle = component.editModalConfig?.title || "";
const editModalTitle = component.editModalConfig?.title || "데이터 수정";
const editModalDescription = component.editModalConfig?.description || "";
console.log("📝 수정 모달 설정:", { editModalTitle, editModalDescription });
setShowEditModal(true);
}, [selectedRows, data, getDisplayColumns, component.editModalConfig]);
// 전역 EditModal 열기 이벤트 발생
const event = new CustomEvent("openEditModal", {
detail: {
screenId,
title: editModalTitle,
description: editModalDescription,
modalSize: "lg",
editData: initialData,
onSave: () => {
loadData(); // 테이블 데이터 새로고침
},
},
});
window.dispatchEvent(event);
}, [selectedRows, data, getDisplayColumns, component.addModalConfig, component.editModalConfig, loadData]);
// 수정 폼 데이터 변경 핸들러
const handleEditFormChange = useCallback((columnName: string, value: any) => {