From abed34ce9a70bdc9fce3c4b66f81c72998b1f454 Mon Sep 17 00:00:00 2001 From: dohyeons Date: Thu, 16 Oct 2025 16:51:24 +0900 Subject: [PATCH] =?UTF-8?q?alert=20=EB=AA=A8=EB=8B=AC=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../admin/dashboard/DashboardDesigner.tsx | 84 +++++++++++-------- .../admin/dashboard/DashboardTopMenu.tsx | 12 +-- 2 files changed, 51 insertions(+), 45 deletions(-) diff --git a/frontend/components/admin/dashboard/DashboardDesigner.tsx b/frontend/components/admin/dashboard/DashboardDesigner.tsx index 7f19bbc4..a9164370 100644 --- a/frontend/components/admin/dashboard/DashboardDesigner.tsx +++ b/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(""); const [successModalOpen, setSuccessModalOpen] = useState(false); + const [clearConfirmOpen, setClearConfirmOpen] = useState(false); // 화면 해상도 자동 감지 const [screenResolution] = useState(() => 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 router.push(`/dashboard/${dashboardId}`) : undefined} dashboardTitle={dashboardTitle} onAddElement={addElementFromMenu} resolution={resolution} @@ -544,6 +538,26 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D + + {/* 초기화 확인 모달 */} + + + + 캔버스 초기화 + + 모든 요소가 삭제됩니다. 이 작업은 되돌릴 수 없습니다. +
+ 계속하시겠습니까? + + + + 취소 + + 초기화 + + + + ); } diff --git a/frontend/components/admin/dashboard/DashboardTopMenu.tsx b/frontend/components/admin/dashboard/DashboardTopMenu.tsx index 446830a8..7c58078f 100644 --- a/frontend/components/admin/dashboard/DashboardTopMenu.tsx +++ b/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({ {/* 우측: 액션 버튼 */}
- {onViewDashboard && ( - - )}