feat: Enhance screen group deletion functionality with optional numbering rules deletion

- Added a new query parameter `deleteNumberingRules` to the `deleteScreenGroup` function, allowing users to specify if numbering rules should be deleted when a root screen group is removed.
- Updated the `deleteScreenGroup` controller to handle the deletion of numbering rules conditionally based on the new parameter.
- Enhanced the frontend `ScreenGroupTreeView` component to include a checkbox for users to confirm the deletion of numbering rules when deleting a root group, improving user control and clarity during deletion operations.
- Implemented appropriate warnings and messages to inform users about the implications of deleting numbering rules, ensuring better user experience and data integrity awareness.
This commit is contained in:
kjs
2026-03-04 18:42:44 +09:00
parent 93d9df3e5a
commit f97edad1ea
7 changed files with 158 additions and 58 deletions
@@ -453,18 +453,39 @@ export default function TableManagementPage() {
[loadColumnTypes, loadConstraints, pageSize, tables],
);
// 입력 타입 변경
// 입력 타입 변경 - 이전 타입의 설정값 초기화 포함
const handleInputTypeChange = useCallback(
(columnName: string, newInputType: string) => {
setColumns((prev) =>
prev.map((col) => {
if (col.columnName === columnName) {
const inputTypeOption = memoizedInputTypeOptions.find((option) => option.value === newInputType);
return {
const updated: typeof col = {
...col,
inputType: newInputType,
detailSettings: inputTypeOption?.description || col.detailSettings,
};
// 엔티티가 아닌 타입으로 변경 시 참조 설정 초기화
if (newInputType !== "entity") {
updated.referenceTable = undefined;
updated.referenceColumn = undefined;
updated.displayColumn = undefined;
}
// 코드가 아닌 타입으로 변경 시 코드 설정 초기화
if (newInputType !== "code") {
updated.codeCategory = undefined;
updated.codeValue = undefined;
updated.hierarchyRole = undefined;
}
// 카테고리가 아닌 타입으로 변경 시 카테고리 참조 초기화
if (newInputType !== "category") {
updated.categoryRef = undefined;
}
return updated;
}
return col;
}),
@@ -135,6 +135,7 @@ export function ScreenGroupTreeView({
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
const [deletingGroup, setDeletingGroup] = useState<ScreenGroup | null>(null);
const [deleteScreensWithGroup, setDeleteScreensWithGroup] = useState(false); // 화면도 함께 삭제 체크박스
const [deleteNumberingRules, setDeleteNumberingRules] = useState(false); // 채번 규칙도 함께 삭제 체크박스
const [isDeleting, setIsDeleting] = useState(false); // 삭제 진행 중 상태
const [deleteProgress, setDeleteProgress] = useState({ current: 0, total: 0, message: "" }); // 삭제 진행 상태
@@ -439,7 +440,8 @@ export function ScreenGroupTreeView({
const handleDeleteGroup = (group: ScreenGroup, e?: React.MouseEvent) => {
e?.stopPropagation();
setDeletingGroup(group);
setDeleteScreensWithGroup(false); // 기본값: 화면 삭제 안함
setDeleteScreensWithGroup(false);
setDeleteNumberingRules(false);
setIsDeleteDialogOpen(true);
};
@@ -572,11 +574,17 @@ export function ScreenGroupTreeView({
// 최종적으로 대상 그룹 삭제
currentStep++;
setDeleteProgress({ current: currentStep, total: totalSteps, message: "그룹 삭제 완료 중..." });
const response = await deleteScreenGroup(deletingGroup.id);
const isRootGroup = !deletingGroup.parent_group_id;
const response = await deleteScreenGroup(deletingGroup.id, {
deleteNumberingRules: isRootGroup && deleteNumberingRules,
});
if (response.success) {
const messages = [];
if (deleteScreensWithGroup) messages.push(`화면 ${totalScreensToDelete}`);
if (isRootGroup && deleteNumberingRules) messages.push("채번 규칙");
toast.success(
deleteScreensWithGroup
? `그룹과 화면 ${totalScreensToDelete}개가 삭제되었습니다`
messages.length > 0
? `그룹과 ${messages.join(", ")}이(가) 삭제되었습니다`
: "그룹이 삭제되었습니다"
);
await loadGroupsData();
@@ -593,6 +601,7 @@ export function ScreenGroupTreeView({
setIsDeleteDialogOpen(false);
setDeletingGroup(null);
setDeleteScreensWithGroup(false);
setDeleteNumberingRules(false);
}
};
@@ -1479,7 +1488,7 @@ export function ScreenGroupTreeView({
</p>
<p className="mt-2 text-destructive/80">
{deleteScreensWithGroup
? "⚠️ 그룹에 속한 모든 화면, 플로우, 관련 데이터가 영구적으로 삭제됩니다. 이 작업은 되돌릴 수 없습니다."
? "그룹에 속한 모든 화면, 플로우, 관련 데이터가 영구적으로 삭제됩니다. 이 작업은 되돌릴 수 없습니다."
: "그룹에 속한 화면들은 미분류로 이동됩니다."
}
</p>
@@ -1520,6 +1529,43 @@ export function ScreenGroupTreeView({
</label>
</div>
)}
{/* 최상위 그룹일 때 채번 삭제 경고 */}
{deletingGroup && !deletingGroup.parent_group_id && (
<div className="space-y-3">
<div className="rounded-md border-2 border-destructive bg-destructive/5 p-4">
<div className="flex items-start gap-3">
<AlertTriangle className="mt-0.5 h-6 w-6 shrink-0 text-destructive" />
<div className="space-y-2">
<p className="text-sm font-bold text-destructive">
-
</p>
<p className="text-xs text-destructive/90 leading-relaxed">
.
<span className="font-bold underline"> </span>.
, .
</p>
</div>
</div>
</div>
<div className="flex items-center space-x-2 rounded-md border border-destructive/30 bg-destructive/5 p-3">
<input
type="checkbox"
id="deleteNumberingRules"
checked={deleteNumberingRules}
onChange={(e) => setDeleteNumberingRules(e.target.checked)}
className="h-4 w-4 rounded border-destructive text-destructive focus:ring-destructive"
/>
<label
htmlFor="deleteNumberingRules"
className="cursor-pointer text-sm font-semibold text-destructive"
>
()
</label>
</div>
</div>
)}
{/* 로딩 오버레이 */}
{isDeleting && (
@@ -1551,7 +1597,7 @@ export function ScreenGroupTreeView({
</AlertDialogCancel>
<AlertDialogAction
onClick={(e) => {
e.preventDefault(); // 자동 닫힘 방지
e.preventDefault();
confirmDeleteGroup();
}}
disabled={isDeleting}
+8 -2
View File
@@ -156,9 +156,15 @@ export async function updateScreenGroup(id: number, data: Partial<ScreenGroup>):
}
}
export async function deleteScreenGroup(id: number): Promise<ApiResponse<void>> {
export async function deleteScreenGroup(id: number, options?: { deleteNumberingRules?: boolean }): Promise<ApiResponse<void>> {
try {
const response = await apiClient.delete(`/screen-groups/groups/${id}`);
const params = new URLSearchParams();
if (options?.deleteNumberingRules) {
params.set("deleteNumberingRules", "true");
}
const queryString = params.toString();
const url = `/screen-groups/groups/${id}${queryString ? `?${queryString}` : ""}`;
const response = await apiClient.delete(url);
return response.data;
} catch (error: any) {
return { success: false, error: error.message };
@@ -649,11 +649,12 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
title: config.rightPanel?.addButtonLabel || "추가",
modalSize: "lg",
editData: initialData,
isCreateMode: true, // 생성 모드
isCreateMode: true,
onSave: () => {
if (selectedLeftItem) {
loadRightData(selectedLeftItem);
}
loadLeftData();
},
},
});
@@ -664,6 +665,7 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
config.dataTransferFields,
selectedLeftItem,
loadRightData,
loadLeftData,
]);
// 기본키 컬럼명 가져오기 (우측 패널)
@@ -722,19 +724,20 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
screenId: modalScreenId,
title: "수정",
modalSize: "lg",
editData: editData, // 병합된 데이터 전달
isCreateMode: false, // 수정 모드
editData: editData,
isCreateMode: false,
onSave: () => {
if (selectedLeftItem) {
loadRightData(selectedLeftItem);
}
loadLeftData();
},
},
});
window.dispatchEvent(event);
console.log("[SplitPanelLayout2] 우측 수정 모달 열기:", editData);
},
[config.rightPanel?.editModalScreenId, config.rightPanel?.addModalScreenId, config.rightPanel?.mainTableForEdit, selectedLeftItem, loadRightData],
[config.rightPanel?.editModalScreenId, config.rightPanel?.addModalScreenId, config.rightPanel?.mainTableForEdit, selectedLeftItem, loadRightData, loadLeftData],
);
// 좌측 패널 수정 버튼 클릭
@@ -835,10 +838,11 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
// 데이터 새로고침
if (deleteTargetPanel === "left") {
loadLeftData();
setSelectedLeftItem(null); // 좌측 선택 초기화
setRightData([]); // 우측 데이터도 초기화
setSelectedLeftItem(null);
setRightData([]);
} else if (selectedLeftItem) {
loadRightData(selectedLeftItem);
loadLeftData();
}
} catch (error: any) {
console.error("[SplitPanelLayout2] 삭제 실패:", error);
@@ -903,6 +907,7 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
if (selectedLeftItem) {
loadRightData(selectedLeftItem);
}
loadLeftData();
},
},
});
@@ -917,7 +922,6 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
const selectedId = Array.from(selectedRightItems)[0];
const item = rightData.find((d) => d[pkColumn] === selectedId);
if (item) {
// 액션 버튼에 모달 화면이 설정되어 있으면 해당 화면 사용
const modalScreenId = btn.modalScreenId || config.rightPanel?.editModalScreenId || config.rightPanel?.addModalScreenId;
if (!modalScreenId) {
@@ -936,6 +940,7 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
if (selectedLeftItem) {
loadRightData(selectedLeftItem);
}
loadLeftData();
},
},
});
@@ -966,6 +971,7 @@ export const SplitPanelLayout2Component: React.FC<SplitPanelLayout2ComponentProp
selectedLeftItem,
config.dataTransferFields,
loadRightData,
loadLeftData,
selectedRightItems,
getPrimaryKeyColumn,
rightData,
@@ -2449,7 +2449,7 @@ export function TableSectionRenderer({
multiSelect={multiSelect}
filterCondition={conditionalFilterCondition}
modalTitle={`${effectiveOptions.find((o) => o.value === modalCondition)?.label || modalCondition} - ${modalTitle}`}
alreadySelected={conditionalTableData[modalCondition] || []}
alreadySelected={Object.values(conditionalTableData).flat()}
uniqueField={tableConfig.saveConfig?.uniqueField}
onSelect={handleConditionalAddItems}
columnLabels={columnLabels}