From 4e12f93da4bbc02dd9010ae6a0fc2268837665f0 Mon Sep 17 00:00:00 2001 From: DDD1542 Date: Wed, 11 Feb 2026 17:45:43 +0900 Subject: [PATCH] feat: Enhance SplitPanelLayoutComponent with delete modal improvements - Added a new state to manage the table name for the delete modal, allowing for more specific deletion handling based on the context of the item being deleted. - Updated the delete button handler to accept an optional table name parameter, improving the flexibility of the delete functionality. - Enhanced the delete confirmation logic to prioritize the specified table name when available, ensuring accurate deletion operations. - Refactored related logic to maintain clarity and improve the overall user experience during item deletion in the split panel layout. --- .../SplitPanelLayoutComponent.tsx | 50 ++++++++++++------- 1 file changed, 32 insertions(+), 18 deletions(-) diff --git a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx index f47da1aa..9a952bc0 100644 --- a/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx +++ b/frontend/lib/registry/components/v2-split-panel-layout/SplitPanelLayoutComponent.tsx @@ -462,6 +462,7 @@ export const SplitPanelLayoutComponent: React.FC const [showDeleteModal, setShowDeleteModal] = useState(false); const [deleteModalPanel, setDeleteModalPanel] = useState<"left" | "right" | null>(null); const [deleteModalItem, setDeleteModalItem] = useState(null); + const [deleteModalTableName, setDeleteModalTableName] = useState(null); // 추가 탭 삭제 시 테이블명 // 리사이저 드래그 상태 const [isDragging, setIsDragging] = useState(false); @@ -2197,32 +2198,39 @@ export const SplitPanelLayoutComponent: React.FC loadRightData, ]); - // 삭제 버튼 핸들러 - const handleDeleteClick = useCallback((panel: "left" | "right", item: any) => { + // 삭제 버튼 핸들러 (tableName: 추가 탭 등 특정 테이블 지정 시 사용) + const handleDeleteClick = useCallback((panel: "left" | "right", item: any, tableName?: string) => { setDeleteModalPanel(panel); setDeleteModalItem(item); + setDeleteModalTableName(tableName || null); setShowDeleteModal(true); }, []); // 삭제 확인 const handleDeleteConfirm = useCallback(async () => { - // 우측 패널 삭제 시 중계 테이블 확인 - let tableName = - deleteModalPanel === "left" ? componentConfig.leftPanel?.tableName : componentConfig.rightPanel?.tableName; + // 1. 테이블명 결정: deleteModalTableName이 있으면 우선 사용 (추가 탭 등) + let tableName = deleteModalTableName; - // 우측 패널 + 중계 테이블 모드인 경우 - if (deleteModalPanel === "right" && componentConfig.rightPanel?.addConfig?.targetTable) { - tableName = componentConfig.rightPanel.addConfig.targetTable; - console.log("🔗 중계 테이블 모드: 삭제 대상 테이블 =", tableName); + if (!tableName) { + tableName = + deleteModalPanel === "left" ? componentConfig.leftPanel?.tableName : componentConfig.rightPanel?.tableName; + + // 우측 패널 + 중계 테이블 모드인 경우 + if (deleteModalPanel === "right" && componentConfig.rightPanel?.addConfig?.targetTable) { + tableName = componentConfig.rightPanel.addConfig.targetTable; + console.log("🔗 중계 테이블 모드: 삭제 대상 테이블 =", tableName); + } } - const sourceColumn = componentConfig.leftPanel?.itemAddConfig?.sourceColumn || "id"; - let primaryKey: any = deleteModalItem[sourceColumn] || deleteModalItem.id || deleteModalItem.ID; + // 2. Primary Key 추출: id 필드를 우선 사용, 없으면 전체 객체 전달 (복합키) + let primaryKey: any = deleteModalItem?.id || deleteModalItem?.ID; - // 복합키 처리: deleteModalItem 전체를 전달 (백엔드에서 복합키 자동 처리) - if (deleteModalItem && typeof deleteModalItem === "object") { + if (!primaryKey && deleteModalItem && typeof deleteModalItem === "object") { + // id가 없는 경우에만 전체 객체 전달 (복합키 테이블) primaryKey = deleteModalItem; - console.log("🔑 복합키 가능성: 전체 객체 전달", primaryKey); + console.log("🔑 복합키: 전체 객체 전달", Object.keys(primaryKey)); + } else { + console.log("🔑 단일키 삭제: id =", primaryKey, "테이블 =", tableName); } if (!tableName || !primaryKey) { @@ -2290,6 +2298,7 @@ export const SplitPanelLayoutComponent: React.FC // 모달 닫기 setShowDeleteModal(false); setDeleteModalItem(null); + setDeleteModalTableName(null); // 데이터 새로고침 if (deleteModalPanel === "left") { @@ -2300,7 +2309,12 @@ export const SplitPanelLayoutComponent: React.FC setRightData(null); } } else if (deleteModalPanel === "right") { - loadRightData(selectedLeftItem); + // 추가 탭에서 삭제한 경우 해당 탭 데이터 리로드 + if (deleteModalTableName && activeTabIndex > 0) { + loadTabData(activeTabIndex, selectedLeftItem); + } else { + loadRightData(selectedLeftItem); + } } } else { toast({ @@ -2324,7 +2338,7 @@ export const SplitPanelLayoutComponent: React.FC variant: "destructive", }); } - }, [deleteModalPanel, componentConfig, deleteModalItem, toast, selectedLeftItem, loadLeftData, loadRightData]); + }, [deleteModalPanel, deleteModalTableName, componentConfig, deleteModalItem, toast, selectedLeftItem, loadLeftData, loadRightData, loadTabData, activeTabIndex]); // 항목별 추가 버튼 핸들러 (좌측 항목의 + 버튼 - 하위 항목 추가) const handleItemAddClick = useCallback( @@ -3541,7 +3555,7 @@ export const SplitPanelLayoutComponent: React.FC )} {currentTabConfig?.showDelete && ( @@ -3585,7 +3599,7 @@ export const SplitPanelLayoutComponent: React.FC )} {currentTabConfig?.showDelete && (