From 114928ca4ffd683481340eb16e23dd7143918ed5 Mon Sep 17 00:00:00 2001 From: kjs Date: Wed, 1 Oct 2025 17:41:30 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20=EC=88=98=EC=A0=95=20=EB=B2=84=ED=8A=BC?= =?UTF-8?q?=20=EC=95=A1=EC=85=98=EC=97=90=20=EC=A0=9C=EB=AA=A9=EA=B3=BC=20?= =?UTF-8?q?=EC=84=A4=EB=AA=85=20=EC=84=A4=EC=A0=95=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 추가된 기능: 1. ButtonConfigPanel - 수정 모달 제목/설명 입력 필드 추가 ✅ 2. EditModal - 제목/설명 props 추가 및 조건부 헤더 렌더링 ✅ 3. DataTableConfigPanel - 수정 모달 설정 섹션 추가 ✅ 4. InteractiveDataTable - editModalConfig에서 제목/설명 읽기 ✅ 5. screen/[screenId]/page - 제목/설명 전달 추가 ✅ 6. 타입 정의 - editModalConfig 추가 ✅ 변경된 파일: - frontend/components/screen/config-panels/ButtonConfigPanel.tsx - frontend/components/screen/EditModal.tsx - frontend/components/screen/InteractiveDataTable.tsx - frontend/components/screen/panels/DataTableConfigPanel.tsx - frontend/app/(main)/screens/[screenId]/page.tsx - frontend/types/screen-legacy-backup.ts 결과: - ✅ 수정 버튼에서 모달 제목과 설명을 설정할 수 있음 - ✅ 데이터테이블에서도 수정 모달 설정 가능 - ✅ 제목과 설명이 모달 헤더에 표시됨 - ✅ 설정하지 않으면 기본 동작 유지 --- .../app/(main)/screens/[screenId]/page.tsx | 6 ++ frontend/components/screen/EditModal.tsx | 21 ++++- .../screen/InteractiveDataTable.tsx | 9 ++- .../config-panels/ButtonConfigPanel.tsx | 80 +++++++++++++------ .../screen/panels/DataTableConfigPanel.tsx | 59 +++++++++++++- frontend/types/screen-legacy-backup.ts | 1 + 6 files changed, 147 insertions(+), 29 deletions(-) diff --git a/frontend/app/(main)/screens/[screenId]/page.tsx b/frontend/app/(main)/screens/[screenId]/page.tsx index 93111ba8..cfa669ad 100644 --- a/frontend/app/(main)/screens/[screenId]/page.tsx +++ b/frontend/app/(main)/screens/[screenId]/page.tsx @@ -41,6 +41,8 @@ export default function ScreenViewPage() { modalSize?: "sm" | "md" | "lg" | "xl" | "full"; editData?: any; onSave?: () => void; + modalTitle?: string; + modalDescription?: string; }>({}); useEffect(() => { @@ -67,6 +69,8 @@ export default function ScreenViewPage() { modalSize: event.detail.modalSize, editData: event.detail.editData, onSave: event.detail.onSave, + modalTitle: event.detail.modalTitle, + modalDescription: event.detail.modalDescription, }); setEditModalOpen(true); }; @@ -408,6 +412,8 @@ export default function ScreenViewPage() { modalSize={editModalConfig.modalSize} editData={editModalConfig.editData} onSave={editModalConfig.onSave} + modalTitle={editModalConfig.modalTitle} + modalDescription={editModalConfig.modalDescription} onDataChange={(changedFormData) => { console.log("📝 EditModal에서 데이터 변경 수신:", changedFormData); // 변경된 데이터를 메인 폼에 반영 diff --git a/frontend/components/screen/EditModal.tsx b/frontend/components/screen/EditModal.tsx index 63ba80e8..05bdab6b 100644 --- a/frontend/components/screen/EditModal.tsx +++ b/frontend/components/screen/EditModal.tsx @@ -18,6 +18,8 @@ interface EditModalProps { editData?: any; onSave?: () => void; onDataChange?: (formData: Record) => void; // 폼 데이터 변경 콜백 추가 + modalTitle?: string; // 모달 제목 + modalDescription?: string; // 모달 설명 } /** @@ -32,6 +34,8 @@ export const EditModal: React.FC = ({ editData, onSave, onDataChange, + modalTitle, + modalDescription, }) => { const [loading, setLoading] = useState(false); const [formData, setFormData] = useState({}); @@ -247,9 +251,20 @@ export const EditModal: React.FC = ({ }} data-radix-portal="true" > - - 수정 - + {/* 모달 헤더 (제목/설명이 있으면 표시) */} + {(modalTitle || modalDescription) && ( + + {modalTitle || "수정"} + {modalDescription &&

{modalDescription}

} + + )} + + {/* 제목/설명이 없으면 접근성을 위한 숨김 헤더만 표시 */} + {!modalTitle && !modalDescription && ( + + 수정 + + )}
{loading ? ( diff --git a/frontend/components/screen/InteractiveDataTable.tsx b/frontend/components/screen/InteractiveDataTable.tsx index 9ca617e3..42cdbadd 100644 --- a/frontend/components/screen/InteractiveDataTable.tsx +++ b/frontend/components/screen/InteractiveDataTable.tsx @@ -744,8 +744,15 @@ export const InteractiveDataTable: React.FC = ({ setEditFormData(initialData); setEditingRowData(selectedRowData); + + // 수정 모달 설정에서 제목과 설명 가져오기 + const editModalTitle = component.editModalConfig?.title || ""; + const editModalDescription = component.editModalConfig?.description || ""; + + console.log("📝 수정 모달 설정:", { editModalTitle, editModalDescription }); + setShowEditModal(true); - }, [selectedRows, data, getDisplayColumns]); + }, [selectedRows, data, getDisplayColumns, component.editModalConfig]); // 수정 폼 데이터 변경 핸들러 const handleEditFormChange = useCallback((columnName: string, value: any) => { diff --git a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx index 8939db1f..5216469a 100644 --- a/frontend/components/screen/config-panels/ButtonConfigPanel.tsx +++ b/frontend/components/screen/config-panels/ButtonConfigPanel.tsx @@ -395,29 +395,63 @@ export const ButtonConfigPanel: React.FC = ({ component,
{config.action?.editMode === "modal" && ( -
- - -
+ <> +
+ + + onUpdateProperty("componentConfig.action", { + ...config.action, + editModalTitle: e.target.value, + }) + } + /> +

비워두면 기본 제목이 표시됩니다

+
+ +
+ + + onUpdateProperty("componentConfig.action", { + ...config.action, + editModalDescription: e.target.value, + }) + } + /> +

비워두면 설명이 표시되지 않습니다

+
+ +
+ + +
+ )} )} diff --git a/frontend/components/screen/panels/DataTableConfigPanel.tsx b/frontend/components/screen/panels/DataTableConfigPanel.tsx index f408b009..9291a028 100644 --- a/frontend/components/screen/panels/DataTableConfigPanel.tsx +++ b/frontend/components/screen/panels/DataTableConfigPanel.tsx @@ -52,7 +52,7 @@ const DataTableConfigPanelComponent: React.FC = ({ addButtonText: component.addButtonText || "추가", editButtonText: component.editButtonText || "수정", deleteButtonText: component.deleteButtonText || "삭제", - // 모달 설정 + // 추가 모달 설정 modalTitle: component.addModalConfig?.title || "새 데이터 추가", // 테이블명도 로컬 상태로 관리 tableName: component.tableName || "", @@ -62,6 +62,9 @@ const DataTableConfigPanelComponent: React.FC = ({ modalGridColumns: component.addModalConfig?.gridColumns || 2, modalSubmitButtonText: component.addModalConfig?.submitButtonText || "추가", modalCancelButtonText: component.addModalConfig?.cancelButtonText || "취소", + // 수정 모달 설정 + editModalTitle: component.editModalConfig?.title || "", + editModalDescription: component.editModalConfig?.description || "", paginationEnabled: component.pagination?.enabled ?? true, showPageSizeSelector: component.pagination?.showPageSizeSelector ?? true, showPageInfo: component.pagination?.showPageInfo ?? true, @@ -161,7 +164,7 @@ const DataTableConfigPanelComponent: React.FC = ({ addButtonText: component.addButtonText || "추가", editButtonText: component.editButtonText || "수정", deleteButtonText: component.deleteButtonText || "삭제", - // 모달 설정 + // 추가 모달 설정 modalTitle: component.addModalConfig?.title || "새 데이터 추가", modalDescription: component.addModalConfig?.description || "", modalWidth: component.addModalConfig?.width || "lg", @@ -169,6 +172,9 @@ const DataTableConfigPanelComponent: React.FC = ({ modalGridColumns: component.addModalConfig?.gridColumns || 2, modalSubmitButtonText: component.addModalConfig?.submitButtonText || "추가", modalCancelButtonText: component.addModalConfig?.cancelButtonText || "취소", + // 수정 모달 설정 + editModalTitle: component.editModalConfig?.title || "", + editModalDescription: component.editModalConfig?.description || "", paginationEnabled: component.pagination?.enabled ?? true, showPageSizeSelector: component.pagination?.showPageSizeSelector ?? true, showPageInfo: component.pagination?.showPageInfo ?? true, @@ -1379,6 +1385,55 @@ const DataTableConfigPanelComponent: React.FC = ({ )} + {/* 수정 모달 설정 */} + {localValues.enableEdit && ( +
+

수정 모달 설정

+ +
+
+ + { + const newValue = e.target.value; + setLocalValues((prev) => ({ ...prev, editModalTitle: newValue })); + onUpdateComponent({ + editModalConfig: { ...component.editModalConfig, title: newValue }, + }); + }} + placeholder="데이터 수정" + className="h-8 text-sm" + /> +

비워두면 기본 제목이 표시됩니다

+
+ +
+ + { + const newValue = e.target.value; + setLocalValues((prev) => ({ ...prev, editModalDescription: newValue })); + onUpdateComponent({ + editModalConfig: { ...component.editModalConfig, description: newValue }, + }); + }} + placeholder="선택한 데이터를 수정합니다" + className="h-8 text-sm" + /> +

비워두면 설명이 표시되지 않습니다

+
+
+
+ )} +