From 95dc16160e1e4e9ce944ce8df3fc91aaaeadbd52 Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Thu, 30 Oct 2025 16:25:57 +0900
Subject: [PATCH] =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=ED=99=95=EC=9D=B8=20?=
 =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC(=EB=8C=80=EC=8B=9C?=
 =?UTF-8?q?=EB=B3=B4=EB=93=9C=EC=97=90=EB=A7=8C=20=EC=A0=81=EC=9A=A9)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/dashboard/DashboardListClient.tsx   | 43 ++++---------
 .../components/common/DeleteConfirmModal.tsx  | 64 +++++++++++++++++++
 2 files changed, 77 insertions(+), 30 deletions(-)
 create mode 100644 frontend/components/common/DeleteConfirmModal.tsx

diff --git a/frontend/app/(main)/admin/dashboard/DashboardListClient.tsx b/frontend/app/(main)/admin/dashboard/DashboardListClient.tsx
index 8c55e366..a67761e4 100644
--- a/frontend/app/(main)/admin/dashboard/DashboardListClient.tsx
+++ b/frontend/app/(main)/admin/dashboard/DashboardListClient.tsx
@@ -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}
+      />
     </>
   );
 }
diff --git a/frontend/components/common/DeleteConfirmModal.tsx b/frontend/components/common/DeleteConfirmModal.tsx
new file mode 100644
index 00000000..6168a069
--- /dev/null
+++ b/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>
+  );
+}