대시보드 뷰어에서 화면 너비 설정

frontend/app/(main)/dashboard/[dashboardId]/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import React, { useState, useEffect, use } from "react";
-import { useRouter } from "next/navigation";
 import { DashboardViewer } from "@/components/dashboard/DashboardViewer";
 import { DashboardElement } from "@/components/admin/dashboard/types";
 
@@ -18,7 +17,6 @@ interface DashboardViewPageProps {
  * - 전체화면 모드 지원
  */
 export default function DashboardViewPage({ params }: DashboardViewPageProps) {
-  const router = useRouter();
   const resolvedParams = use(params);
   const [dashboard, setDashboard] = useState<{
     id: string;
@@ -35,12 +33,7 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
 
-  // 대시보드 데이터 로딩
-  useEffect(() => {
-    loadDashboard();
-  }, [resolvedParams.dashboardId]);
-
-  const loadDashboard = async () => {
+  const loadDashboard = React.useCallback(async () => {
     setIsLoading(true);
     setError(null);
 
@@ -50,13 +43,16 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
 
       try {
         const dashboardData = await dashboardApi.getDashboard(resolvedParams.dashboardId);
-        setDashboard(dashboardData);
+        setDashboard({
+          ...dashboardData,
+          elements: dashboardData.elements || [],
+        });
       } catch (apiError) {
         console.warn("API 호출 실패, 로컬 스토리지 확인:", apiError);
 
         // API 실패 시 로컬 스토리지에서 찾기
         const savedDashboards = JSON.parse(localStorage.getItem("savedDashboards") || "[]");
-        const savedDashboard = savedDashboards.find((d: any) => d.id === resolvedParams.dashboardId);
+        const savedDashboard = savedDashboards.find((d: { id: string }) => d.id === resolvedParams.dashboardId);
 
         if (savedDashboard) {
           setDashboard(savedDashboard);
@@ -72,7 +68,12 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
     } finally {
       setIsLoading(false);
     }
-  };
+  }, [resolvedParams.dashboardId]);
+
+  // 대시보드 데이터 로딩
+  useEffect(() => {
+    loadDashboard();
+  }, [loadDashboard]);
 
   // 로딩 상태
   if (isLoading) {
@@ -159,10 +160,11 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
       </div> */}
 
       {/* 대시보드 뷰어 */}
-      <DashboardViewer 
-        elements={dashboard.elements} 
+      <DashboardViewer
+        elements={dashboard.elements}
         dashboardId={dashboard.id}
         backgroundColor={dashboard.settings?.backgroundColor}
+        resolution={dashboard.settings?.resolution}
       />
     </div>
   );
@@ -171,8 +173,33 @@ export default function DashboardViewPage({ params }: DashboardViewPageProps) {
 /**
  * 샘플 대시보드 생성 함수
  */
-function generateSampleDashboard(dashboardId: string) {
-  const dashboards: Record<string, any> = {
+function generateSampleDashboard(dashboardId: string): {
+  id: string;
+  title: string;
+  description?: string;
+  elements: DashboardElement[];
+  settings?: {
+    backgroundColor?: string;
+    resolution?: string;
+  };
+  createdAt: string;
+  updatedAt: string;
+} {
+  const dashboards: Record<
+    string,
+    {
+      id: string;
+      title: string;
+      description?: string;
+      elements: DashboardElement[];
+      settings?: {
+        backgroundColor?: string;
+        resolution?: string;
+      };
+      createdAt: string;
+      updatedAt: string;
+    }
+  > = {
     "sales-overview": {
       id: "sales-overview",
       title: "📊 매출 현황 대시보드",

frontend/components/admin/dashboard/DashboardDesigner.tsx

@@ -141,18 +141,38 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
       const { dashboardApi } = await import("@/lib/api/dashboard");
       const dashboard = await dashboardApi.getDashboard(id);
 
+      console.log("📊 대시보드 로드:", {
+        id: dashboard.id,
+        title: dashboard.title,
+        settings: dashboard.settings,
+        settingsType: typeof dashboard.settings,
+      });
+
       // 대시보드 정보 설정
       setDashboardId(dashboard.id);
       setDashboardTitle(dashboard.title);
 
       // 저장된 설정 복원
       const settings = (dashboard as { settings?: { resolution?: Resolution; backgroundColor?: string } }).settings;
+      console.log("🎨 설정 복원:", {
+        settings,
+        resolution: settings?.resolution,
+        backgroundColor: settings?.backgroundColor,
+        currentResolution: resolution,
+      });
+
       if (settings?.resolution) {
         setResolution(settings.resolution);
+        console.log("✅ Resolution 설정됨:", settings.resolution);
+      } else {
+        console.log("⚠️ Resolution 없음, 기본값 유지:", resolution);
       }
 
       if (settings?.backgroundColor) {
         setCanvasBackgroundColor(settings.backgroundColor);
+        console.log("✅ BackgroundColor 설정됨:", settings.backgroundColor);
+      } else {
+        console.log("⚠️ BackgroundColor 없음, 기본값 유지:", canvasBackgroundColor);
       }
 
       // 요소들 설정