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

frontend/components/common/DeleteConfirmModal.tsx

@@ -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>
+  );
+}