diff --git a/frontend/app/(main)/admin/dashboard/page.tsx b/frontend/app/(main)/admin/dashboard/page.tsx index e43153de..d1ca6125 100644 --- a/frontend/app/(main)/admin/dashboard/page.tsx +++ b/frontend/app/(main)/admin/dashboard/page.tsx @@ -15,7 +15,18 @@ import { DropdownMenuItem, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu"; -import { Plus, Search, MoreVertical, Edit, Trash2, Copy } from "lucide-react"; +import { + AlertDialog, + AlertDialogAction, + AlertDialogCancel, + AlertDialogContent, + AlertDialogDescription, + AlertDialogFooter, + AlertDialogHeader, + AlertDialogTitle, +} from "@/components/ui/alert-dialog"; +import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog"; +import { Plus, Search, MoreVertical, Edit, Trash2, Copy, CheckCircle2 } from "lucide-react"; /** * 대시보드 관리 페이지 @@ -29,6 +40,12 @@ export default function DashboardListPage() { const [searchTerm, setSearchTerm] = useState(""); const [error, setError] = useState(null); + // 모달 상태 + const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); + const [deleteTarget, setDeleteTarget] = useState<{ id: string; title: string } | null>(null); + const [successDialogOpen, setSuccessDialogOpen] = useState(false); + const [successMessage, setSuccessMessage] = useState(""); + // 대시보드 목록 로드 const loadDashboards = async () => { try { @@ -48,19 +65,27 @@ export default function DashboardListPage() { loadDashboards(); }, [searchTerm]); - // 대시보드 삭제 - const handleDelete = async (id: string, title: string) => { - if (!confirm(`"${title}" 대시보드를 삭제하시겠습니까?`)) { - return; - } + // 대시보드 삭제 확인 모달 열기 + const handleDeleteClick = (id: string, title: string) => { + setDeleteTarget({ id, title }); + setDeleteDialogOpen(true); + }; + + // 대시보드 삭제 실행 + const handleDeleteConfirm = async () => { + if (!deleteTarget) return; try { - await dashboardApi.deleteDashboard(id); - alert("대시보드가 삭제되었습니다."); + await dashboardApi.deleteDashboard(deleteTarget.id); + setDeleteDialogOpen(false); + setDeleteTarget(null); + setSuccessMessage("대시보드가 삭제되었습니다."); + setSuccessDialogOpen(true); loadDashboards(); } catch (err) { console.error("Failed to delete dashboard:", err); - alert("대시보드 삭제에 실패했습니다."); + setDeleteDialogOpen(false); + setError("대시보드 삭제에 실패했습니다."); } }; @@ -79,11 +104,12 @@ export default function DashboardListPage() { category: fullDashboard.category, settings: (fullDashboard as any).settings, // 해상도와 배경색 설정도 복사 }); - alert("대시보드가 복사되었습니다."); + setSuccessMessage("대시보드가 복사되었습니다."); + setSuccessDialogOpen(true); loadDashboards(); } catch (err) { console.error("Failed to copy dashboard:", err); - alert("대시보드 복사에 실패했습니다."); + setError("대시보드 복사에 실패했습니다."); } }; @@ -194,7 +220,7 @@ export default function DashboardListPage() { 복사 handleDelete(dashboard.id, dashboard.title)} + onClick={() => handleDeleteClick(dashboard.id, dashboard.title)} className="gap-2 text-red-600 focus:text-red-600" > @@ -210,6 +236,41 @@ export default function DashboardListPage() { )} + + {/* 삭제 확인 모달 */} + + + + 대시보드 삭제 + + "{deleteTarget?.title}" 대시보드를 삭제하시겠습니까? +
이 작업은 되돌릴 수 없습니다. +
+
+ + 취소 + + 삭제 + + +
+
+ + {/* 성공 모달 */} + + + +
+ +
+ 완료 + {successMessage} +
+
+ +
+
+
); }