kjs
/
ERP-node
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

삭제 확인 모달 공통 컴포넌트 분리(대시보드에만 적용)

This commit is contained in:
dohyeons 2025-10-30 16:25:57 +09:00
parent 7b6132953c
commit 95dc16160e
2 changed files with 77 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
frontend/app/(main)/admin/dashboard/DashboardListClient.tsx
View File

@ -13,18 +13,9 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { useToast } from "@/hooks/use-toast";
import { Pagination, PaginationInfo } from "@/components/common/Pagination";
import { DeleteConfirmModal } from "@/components/common/DeleteConfirmModal";
import { Plus, Search, Edit, Trash2, Copy, MoreVertical, AlertCircle, RefreshCw } from "lucide-react";
interface DashboardListClientProps {
@ -307,26 +298,18 @@ export default function DashboardListClient({ initialDashboards, initialPaginati
)}
{/* 삭제 확인 모달 */}
<AlertDialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
<AlertDialogContent className="max-w-[95vw] sm:max-w-[500px]">
<AlertDialogHeader>
<AlertDialogTitle className="text-base sm:text-lg">대시보드 삭제</AlertDialogTitle>
<AlertDialogDescription className="text-xs sm:text-sm">
&quot;{deleteTarget?.title}&quot; 대시보드를 삭제하시겠습니까?
<br />이 작업은 되돌릴 수 없습니다.
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter className="gap-2 sm:gap-0">
<AlertDialogCancel className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">취소</AlertDialogCancel>
<AlertDialogAction
onClick={handleDeleteConfirm}
className="bg-destructive hover:bg-destructive/90 h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm"
>
삭제
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
<DeleteConfirmModal
open={deleteDialogOpen}
onOpenChange={setDeleteDialogOpen}
title="대시보드 삭제"
description={
<>
&quot;{deleteTarget?.title}&quot; 대시보드를 삭제하시겠습니까?
<br />이 작업은 되돌릴 수 없습니다.
</>
}
onConfirm={handleDeleteConfirm}
/>
</>
);
}

64
frontend/components/common/DeleteConfirmModal.tsx Normal file
View File

@ -0,0 +1,64 @@
"use client";
import React from "react";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Loader2 } from "lucide-react";
interface DeleteConfirmModalProps {
open: boolean;
onOpenChange: (open: boolean) => void;
title: string;
description: React.ReactNode;
onConfirm: () => void | Promise<void>;
confirmText?: string;
isLoading?: boolean;
}
/**
* 삭제 확인 모달 (공통 컴포넌트)
* - 표준 디자인: shadcn AlertDialog 기반
* - 반응형: 모바일/데스크톱 최적화
* - 로딩 상태 지원
*/
export function DeleteConfirmModal({
open,
onOpenChange,
title,
description,
onConfirm,
confirmText = "삭제",
isLoading = false,
}: DeleteConfirmModalProps) {
return (
<AlertDialog open={open} onOpenChange={onOpenChange}>
<AlertDialogContent className="max-w-[95vw] sm:max-w-[500px]">
<AlertDialogHeader>
<AlertDialogTitle className="text-base sm:text-lg">{title}</AlertDialogTitle>
<AlertDialogDescription className="text-xs sm:text-sm">{description}</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter className="gap-2 sm:gap-0">
<AlertDialogCancel disabled={isLoading} className="h-8 flex-1 text-xs sm:h-10 sm:flex-none sm:text-sm">
취소
</AlertDialogCancel>
<AlertDialogAction
onClick={onConfirm}
disabled={isLoading}
className="bg-destructive hover:bg-destructive/90 h-8 flex-1 gap-2 text-xs sm:h-10 sm:flex-none sm:text-sm"
>
{isLoading && <Loader2 className="h-4 w-4 animate-spin" />}
{confirmText}
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
);
}