From 294e0e4e182c18886a4fa88029003c71a1e72bb0 Mon Sep 17 00:00:00 2001 From: SeongHyun Kim Date: Thu, 22 Jan 2026 19:59:28 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EB=B6=84=ED=95=A0=20=ED=8C=A8=EB=84=90?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20=ED=83=AD(additionalTabs)=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=EB=B2=84=ED=8A=BC=EC=9D=B4=20=ED=95=B4=EB=8B=B9=20?= =?UTF-8?q?=ED=83=AD=EC=9D=98=20editButton=20=EC=84=A4=EC=A0=95=EC=9D=84?= =?UTF-8?q?=20=EC=82=AC=EC=9A=A9=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SplitPanelLayoutComponent.tsx | 180 ++++++++++-------- 1 file changed, 101 insertions(+), 79 deletions(-) diff --git a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx index 9b8e7cf0..8560db4e 100644 --- a/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx +++ b/frontend/lib/registry/components/split-panel-layout/SplitPanelLayoutComponent.tsx @@ -1583,98 +1583,120 @@ export const SplitPanelLayoutComponent: React.FC const handleEditClick = useCallback( (panel: "left" | "right", item: any) => { // ๐Ÿ†• ์šฐ์ธก ํŒจ๋„ ์ˆ˜์ • ๋ฒ„ํŠผ ์„ค์ • ํ™•์ธ - if (panel === "right" && componentConfig.rightPanel?.editButton?.mode === "modal") { - const modalScreenId = componentConfig.rightPanel?.editButton?.modalScreenId; + // ๐Ÿ”ง ํ˜„์žฌ ํ™œ์„ฑ ํƒญ์— ๋”ฐ๋ผ ํ•ด๋‹น ํƒญ์˜ editButton ์„ค์ • ์‚ฌ์šฉ + if (panel === "right") { + // ๊ธฐ๋ณธ ํƒญ(0)์ด๋ฉด rightPanel.editButton, ์ถ”๊ฐ€ ํƒญ์ด๋ฉด additionalTabs์˜ editButton ์‚ฌ์šฉ + const editButtonConfig = + activeTabIndex === 0 + ? componentConfig.rightPanel?.editButton + : componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1]?.editButton; - if (modalScreenId) { - // ์ปค์Šคํ…€ ๋ชจ๋‹ฌ ํ™”๋ฉด ์—ด๊ธฐ - const rightTableName = componentConfig.rightPanel?.tableName || ""; + // ํ•ด๋‹น ํƒญ์˜ ํ…Œ์ด๋ธ”๋ช… ๊ฐ€์ ธ์˜ค๊ธฐ + const currentTableName = + activeTabIndex === 0 + ? componentConfig.rightPanel?.tableName || "" + : componentConfig.rightPanel?.additionalTabs?.[activeTabIndex - 1]?.tableName || ""; - // Primary Key ์ฐพ๊ธฐ (์šฐ์„ ์ˆœ์œ„: ์„ค์ •๊ฐ’ > id > ID > non-null ํ•„๋“œ) - // ๐Ÿ”ง ์„ค์ •์—์„œ primaryKeyColumn ์ง€์ • ๊ฐ€๋Šฅ - const configuredPrimaryKey = componentConfig.rightPanel?.editButton?.primaryKeyColumn; + console.log("๐Ÿ”ง [SplitPanel] ์ˆ˜์ • ๋ฒ„ํŠผ ํด๋ฆญ - ํ˜„์žฌ ํƒญ ์„ค์ • ํ™•์ธ:", { + activeTabIndex, + editButtonConfig, + currentTableName, + isModalMode: editButtonConfig?.mode === "modal", + }); - let primaryKeyName = "id"; - let primaryKeyValue: any; + if (editButtonConfig?.mode === "modal") { + const modalScreenId = editButtonConfig.modalScreenId; - if (configuredPrimaryKey && item[configuredPrimaryKey] !== undefined && item[configuredPrimaryKey] !== null) { - // ์„ค์ •๋œ Primary Key ์‚ฌ์šฉ - primaryKeyName = configuredPrimaryKey; - primaryKeyValue = item[configuredPrimaryKey]; - } else if (item.id !== undefined && item.id !== null) { - primaryKeyName = "id"; - primaryKeyValue = item.id; - } else if (item.ID !== undefined && item.ID !== null) { - primaryKeyName = "ID"; - primaryKeyValue = item.ID; - } else { - // ๐Ÿ”ง ์ฒซ ๋ฒˆ์งธ non-null ํ•„๋“œ๋ฅผ Primary Key๋กœ ๊ฐ„์ฃผ - const keys = Object.keys(item); - let found = false; - for (const key of keys) { - if (item[key] !== undefined && item[key] !== null) { - primaryKeyName = key; - primaryKeyValue = item[key]; - found = true; - break; + if (modalScreenId) { + // ์ปค์Šคํ…€ ๋ชจ๋‹ฌ ํ™”๋ฉด ์—ด๊ธฐ + + // Primary Key ์ฐพ๊ธฐ (์šฐ์„ ์ˆœ์œ„: ์„ค์ •๊ฐ’ > id > ID > non-null ํ•„๋“œ) + // ๐Ÿ”ง ์„ค์ •์—์„œ primaryKeyColumn ์ง€์ • ๊ฐ€๋Šฅ + const configuredPrimaryKey = editButtonConfig.primaryKeyColumn; + + let primaryKeyName = "id"; + let primaryKeyValue: any; + + if (configuredPrimaryKey && item[configuredPrimaryKey] !== undefined && item[configuredPrimaryKey] !== null) { + // ์„ค์ •๋œ Primary Key ์‚ฌ์šฉ + primaryKeyName = configuredPrimaryKey; + primaryKeyValue = item[configuredPrimaryKey]; + } else if (item.id !== undefined && item.id !== null) { + primaryKeyName = "id"; + primaryKeyValue = item.id; + } else if (item.ID !== undefined && item.ID !== null) { + primaryKeyName = "ID"; + primaryKeyValue = item.ID; + } else { + // ๐Ÿ”ง ์ฒซ ๋ฒˆ์งธ non-null ํ•„๋“œ๋ฅผ Primary Key๋กœ ๊ฐ„์ฃผ + const keys = Object.keys(item); + let found = false; + for (const key of keys) { + if (item[key] !== undefined && item[key] !== null) { + primaryKeyName = key; + primaryKeyValue = item[key]; + found = true; + break; + } + } + // ๋ชจ๋“  ํ•„๋“œ๊ฐ€ null์ด๋ฉด ์ฒซ ๋ฒˆ์งธ ํ•„๋“œ ์‚ฌ์šฉ + if (!found && keys.length > 0) { + primaryKeyName = keys[0]; + primaryKeyValue = item[keys[0]]; } } - // ๋ชจ๋“  ํ•„๋“œ๊ฐ€ null์ด๋ฉด ์ฒซ ๋ฒˆ์งธ ํ•„๋“œ ์‚ฌ์šฉ - if (!found && keys.length > 0) { - primaryKeyName = keys[0]; - primaryKeyValue = item[keys[0]]; - } - } - console.log("โœ… ์ˆ˜์ • ๋ชจ๋‹ฌ ์—ด๊ธฐ:", { - tableName: rightTableName, - primaryKeyName, - primaryKeyValue, - screenId: modalScreenId, - fullItem: item, - }); + console.log("โœ… ์ˆ˜์ • ๋ชจ๋‹ฌ ์—ด๊ธฐ:", { + activeTabIndex, + tableName: currentTableName, + primaryKeyName, + primaryKeyValue, + screenId: modalScreenId, + fullItem: item, + }); - // modalDataStore์—๋„ ์ €์žฅ (ํ˜ธํ™˜์„ฑ ์œ ์ง€) - import("@/stores/modalDataStore").then(({ useModalDataStore }) => { - useModalDataStore.getState().setData(rightTableName, [item]); - }); + // modalDataStore์—๋„ ์ €์žฅ (ํ˜ธํ™˜์„ฑ ์œ ์ง€) + import("@/stores/modalDataStore").then(({ useModalDataStore }) => { + useModalDataStore.getState().setData(currentTableName, [item]); + }); - // ๐Ÿ†• groupByColumns ์ถ”์ถœ - const groupByColumns = componentConfig.rightPanel?.editButton?.groupByColumns || []; + // ๐Ÿ†• groupByColumns ์ถ”์ถœ + const groupByColumns = editButtonConfig.groupByColumns || []; - console.log("๐Ÿ”ง [SplitPanel] ์ˆ˜์ • ๋ฒ„ํŠผ ํด๋ฆญ - groupByColumns ํ™•์ธ:", { - groupByColumns, - editButtonConfig: componentConfig.rightPanel?.editButton, - hasGroupByColumns: groupByColumns.length > 0, - }); + console.log("๐Ÿ”ง [SplitPanel] ์ˆ˜์ • ๋ฒ„ํŠผ ํด๋ฆญ - groupByColumns ํ™•์ธ:", { + groupByColumns, + editButtonConfig, + hasGroupByColumns: groupByColumns.length > 0, + }); - // ScreenModal ์—ด๊ธฐ ์ด๋ฒคํŠธ ๋ฐœ์ƒ (URL ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ID + groupByColumns + primaryKeyColumn ์ „๋‹ฌ) - window.dispatchEvent( - new CustomEvent("openScreenModal", { - detail: { - screenId: modalScreenId, - urlParams: { - mode: "edit", - editId: primaryKeyValue, - tableName: rightTableName, - primaryKeyColumn: primaryKeyName, // ๐Ÿ†• Primary Key ์ปฌ๋Ÿผ๋ช… ์ „๋‹ฌ - ...(groupByColumns.length > 0 && { - groupByColumns: JSON.stringify(groupByColumns), - }), + // ScreenModal ์—ด๊ธฐ ์ด๋ฒคํŠธ ๋ฐœ์ƒ (URL ํŒŒ๋ผ๋ฏธํ„ฐ๋กœ ID + groupByColumns + primaryKeyColumn ์ „๋‹ฌ) + window.dispatchEvent( + new CustomEvent("openScreenModal", { + detail: { + screenId: modalScreenId, + urlParams: { + mode: "edit", + editId: primaryKeyValue, + tableName: currentTableName, + primaryKeyColumn: primaryKeyName, // ๐Ÿ†• Primary Key ์ปฌ๋Ÿผ๋ช… ์ „๋‹ฌ + ...(groupByColumns.length > 0 && { + groupByColumns: JSON.stringify(groupByColumns), + }), + }, }, - }, - }), - ); + }), + ); - console.log("โœ… [SplitPanel] openScreenModal ์ด๋ฒคํŠธ ๋ฐœ์ƒ:", { - screenId: modalScreenId, - editId: primaryKeyValue, - tableName: rightTableName, - primaryKeyColumn: primaryKeyName, - groupByColumns: groupByColumns.length > 0 ? JSON.stringify(groupByColumns) : "์—†์Œ", - }); + console.log("โœ… [SplitPanel] openScreenModal ์ด๋ฒคํŠธ ๋ฐœ์ƒ:", { + screenId: modalScreenId, + editId: primaryKeyValue, + tableName: currentTableName, + primaryKeyColumn: primaryKeyName, + groupByColumns: groupByColumns.length > 0 ? JSON.stringify(groupByColumns) : "์—†์Œ", + }); - return; + return; + } } } @@ -1684,7 +1706,7 @@ export const SplitPanelLayoutComponent: React.FC setEditModalFormData({ ...item }); setShowEditModal(true); }, - [componentConfig], + [componentConfig, activeTabIndex], ); // ์ˆ˜์ • ๋ชจ๋‹ฌ ์ €์žฅ