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" + /> +

๋น„์›Œ๋‘๋ฉด ์„ค๋ช…์ด ํ‘œ์‹œ๋˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค

+
+
+
+ )} +