alert 모달 처리

frontend/components/admin/dashboard/DashboardDesigner.tsx

@@ -12,6 +12,16 @@ import { GRID_CONFIG, snapToGrid, snapSizeToGrid, calculateCellSize } from "./gr
 import { Resolution, RESOLUTIONS, detectScreenResolution } from "./ResolutionSelector";
 import { useMenu } from "@/contexts/MenuContext";
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
 import { Button } from "@/components/ui/button";
 import { CheckCircle2 } from "lucide-react";
 
@@ -43,6 +53,7 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
   const [saveModalOpen, setSaveModalOpen] = useState(false);
   const [dashboardDescription, setDashboardDescription] = useState<string>("");
   const [successModalOpen, setSuccessModalOpen] = useState(false);
+  const [clearConfirmOpen, setClearConfirmOpen] = useState(false);
 
   // 화면 해상도 자동 감지
   const [screenResolution] = useState<Resolution>(() => detectScreenResolution());
@@ -51,17 +62,12 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
   // resolution 변경 감지 및 요소 자동 조정
   const handleResolutionChange = useCallback(
     (newResolution: Resolution) => {
-      console.log("🎯 해상도 변경 요청:", newResolution);
       setResolution((prev) => {
-        console.log("🎯 이전 해상도:", prev);
-
         // 이전 해상도와 새 해상도의 캔버스 너비 비율 계산
         const oldConfig = RESOLUTIONS[prev];
         const newConfig = RESOLUTIONS[newResolution];
         const widthRatio = newConfig.width / oldConfig.width;
 
-        console.log("📐 너비 비율:", widthRatio, `(${oldConfig.width}px → ${newConfig.width}px)`);
-
         // 요소들의 위치와 크기를 비율에 맞춰 조정
         if (widthRatio !== 1 && elements.length > 0) {
           // 새 해상도의 셀 크기 계산
@@ -91,7 +97,6 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
             };
           });
 
-          console.log("✨ 요소 위치/크기 자동 조정 (그리드 스냅 적용):", adjustedElements.length, "개");
           setElements(adjustedElements);
         }
 
@@ -131,34 +136,21 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
   const loadDashboard = async (id: string) => {
     setIsLoading(true);
     try {
-      // console.log('🔄 대시보드 로딩:', id);
-
       const { dashboardApi } = await import("@/lib/api/dashboard");
       const dashboard = await dashboardApi.getDashboard(id);
 
-      // console.log('✅ 대시보드 로딩 완료:', dashboard);
-
       // 대시보드 정보 설정
       setDashboardId(dashboard.id);
       setDashboardTitle(dashboard.title);
 
       // 저장된 설정 복원
-      console.log("🔍 로드된 대시보드:", dashboard);
-      console.log("📦 저장된 settings:", (dashboard as any).settings);
-      console.log("🎯 settings 타입:", typeof (dashboard as any).settings);
-      console.log("🔍 resolution 값:", (dashboard as any).settings?.resolution);
-
-      if ((dashboard as any).settings?.resolution) {
-        const savedResolution = (dashboard as any).settings.resolution as Resolution;
-        console.log("✅ 저장된 해상도 복원:", savedResolution);
-        setResolution(savedResolution);
-      } else {
-        console.log("⚠️ 저장된 해상도 없음");
+      const settings = (dashboard as { settings?: { resolution?: Resolution; backgroundColor?: string } }).settings;
+      if (settings?.resolution) {
+        setResolution(settings.resolution);
       }
 
-      if ((dashboard as any).settings?.backgroundColor) {
-        console.log("✅ 저장된 배경색 복원:", (dashboard as any).settings.backgroundColor);
-        setCanvasBackgroundColor((dashboard as any).settings.backgroundColor);
+      if (settings?.backgroundColor) {
+        setCanvasBackgroundColor(settings.backgroundColor);
       }
 
       // 요소들 설정
@@ -177,7 +169,6 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
         setElementCounter(maxId);
       }
     } catch (error) {
-      // console.error('❌ 대시보드 로딩 오류:', error);
       alert(
         "대시보드를 불러오는 중 오류가 발생했습니다.\n\n" +
           (error instanceof Error ? error.message : "알 수 없는 오류"),
@@ -239,7 +230,7 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
       setElementCounter((prev) => prev + 1);
       setSelectedElement(newElement.id);
     },
-    [elementCounter, canvasConfig.width],
+    [elementCounter, canvasConfig],
   );
 
   // 메뉴에서 요소 추가 시 (캔버스 중앙에 배치)
@@ -257,7 +248,7 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
 
       createElement(type, subtype, centerX, centerY);
     },
-    [canvasConfig.width, canvasConfig.height, createElement],
+    [canvasConfig, createElement],
   );
 
   // 요소 업데이트
@@ -276,13 +267,17 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
     [selectedElement],
   );
 
-  // 전체 삭제
+  // 전체 삭제 확인 모달 열기
   const clearCanvas = useCallback(() => {
-    if (window.confirm("모든 요소를 삭제하시겠습니까?")) {
-      setElements([]);
-      setSelectedElement(null);
-      setElementCounter(0);
-    }
+    setClearConfirmOpen(true);
+  }, []);
+
+  // 실제 초기화 실행
+  const handleClearConfirm = useCallback(() => {
+    setElements([]);
+    setSelectedElement(null);
+    setElementCounter(0);
+    setClearConfirmOpen(false);
   }, []);
 
   // 요소 설정 모달 열기
@@ -428,7 +423,7 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
         throw error;
       }
     },
-    [elements, dashboardId, resolution, canvasBackgroundColor, router],
+    [elements, dashboardId, resolution, canvasBackgroundColor, refreshMenus],
   );
 
   // 로딩 중이면 로딩 화면 표시
@@ -450,7 +445,6 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
       <DashboardTopMenu
         onSaveLayout={saveLayout}
         onClearCanvas={clearCanvas}
-        onViewDashboard={dashboardId ? () => router.push(`/dashboard/${dashboardId}`) : undefined}
         dashboardTitle={dashboardTitle}
         onAddElement={addElementFromMenu}
         resolution={resolution}
@@ -544,6 +538,26 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
           </div>
         </DialogContent>
       </Dialog>
+
+      {/* 초기화 확인 모달 */}
+      <AlertDialog open={clearConfirmOpen} onOpenChange={setClearConfirmOpen}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>캔버스 초기화</AlertDialogTitle>
+            <AlertDialogDescription>
+              모든 요소가 삭제됩니다. 이 작업은 되돌릴 수 없습니다.
+              <br />
+              계속하시겠습니까?
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>취소</AlertDialogCancel>
+            <AlertDialogAction onClick={handleClearConfirm} className="bg-red-600 hover:bg-red-700">
+              초기화
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
     </div>
   );
 }

frontend/components/admin/dashboard/DashboardTopMenu.tsx

@@ -11,7 +11,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import { Save, Trash2, Eye, Palette } from "lucide-react";
+import { Save, Trash2, Palette } from "lucide-react";
 import { ElementType, ElementSubtype } from "./types";
 import { ResolutionSelector, Resolution } from "./ResolutionSelector";
 import { Input } from "@/components/ui/input";
@@ -20,7 +20,6 @@ import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover
 interface DashboardTopMenuProps {
   onSaveLayout: () => void;
   onClearCanvas: () => void;
-  onViewDashboard?: () => void;
   dashboardTitle?: string;
   onAddElement?: (type: ElementType, subtype: ElementSubtype) => void;
   resolution?: Resolution;
@@ -33,12 +32,11 @@ interface DashboardTopMenuProps {
 /**
  * 대시보드 편집 화면 상단 메뉴바
  * - 차트/위젯 선택 (셀렉트박스)
- * - 저장/초기화/보기 버튼
+ * - 저장/초기화 버튼
  */
 export function DashboardTopMenu({
   onSaveLayout,
   onClearCanvas,
-  onViewDashboard,
   dashboardTitle,
   onAddElement,
   resolution = "fhd",
@@ -211,12 +209,6 @@ export function DashboardTopMenu({
 
       {/* 우측: 액션 버튼 */}
       <div className="flex items-center gap-2">
-        {onViewDashboard && (
-          <Button variant="outline" size="sm" onClick={onViewDashboard} className="gap-2">
-            <Eye className="h-4 w-4" />
-            미리보기
-          </Button>
-        )}
         <Button variant="outline" size="sm" onClick={onClearCanvas} className="gap-2 text-red-600 hover:text-red-700">
           <Trash2 className="h-4 w-4" />
           초기화