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.
This commit is contained in:
DDD1542 2026-02-11 17:45:43 +09:00
parent c551e82eee
commit 4e12f93da4
1 changed files with 32 additions and 18 deletions

View File

@ -462,6 +462,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
const [showDeleteModal, setShowDeleteModal] = useState(false);
const [deleteModalPanel, setDeleteModalPanel] = useState<"left" | "right" | null>(null);
const [deleteModalItem, setDeleteModalItem] = useState<any>(null);
const [deleteModalTableName, setDeleteModalTableName] = useState<string | null>(null); // 추가 탭 삭제 시 테이블명
// 리사이저 드래그 상태
const [isDragging, setIsDragging] = useState(false);
@ -2197,32 +2198,39 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
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<SplitPanelLayoutComponentProps>
// 모달 닫기
setShowDeleteModal(false);
setDeleteModalItem(null);
setDeleteModalTableName(null);
// 데이터 새로고침
if (deleteModalPanel === "left") {
@ -2300,7 +2309,12 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
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<SplitPanelLayoutComponentProps>
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<SplitPanelLayoutComponentProps>
)}
{currentTabConfig?.showDelete && (
<Button size="sm" variant="ghost" className="text-destructive h-7 px-2 text-xs"
onClick={() => handleDeleteClick("right", item)}
onClick={() => handleDeleteClick("right", item, currentTabConfig?.tableName)}
>
<Trash2 className="h-3 w-3" />
</Button>
@ -3585,7 +3599,7 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
)}
{currentTabConfig?.showDelete && (
<Button size="sm" variant="ghost" className="text-destructive h-7 px-2 text-xs"
onClick={() => handleDeleteClick("right", item)}
onClick={() => handleDeleteClick("right", item, currentTabConfig?.tableName)}
>
<Trash2 className="h-3 w-3" />
</Button>