fix: 분할 패널 추가 탭(additionalTabs) 수정 버튼이 해당 탭의 editButton 설정을 사용하도록 수정

This commit is contained in:
SeongHyun Kim
2026-01-22 19:59:28 +09:00
parent 4495e414b5
commit 294e0e4e18

View File

@@ -1583,98 +1583,120 @@ export const SplitPanelLayoutComponent: React.FC<SplitPanelLayoutComponentProps>
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<SplitPanelLayoutComponentProps>
setEditModalFormData({ ...item });
setShowEditModal(true);
},
[componentConfig],
[componentConfig, activeTabIndex],
);
// 수정 모달 저장