해상도 복원 구현

backend-node/src/services/DashboardService.ts

@@ -321,34 +321,24 @@ export class DashboardService {
       ]);
 
       // 3. 요소 데이터 변환
-      console.log("📊 대시보드 요소 개수:", elementsResult.rows.length);
-
       const elements: DashboardElement[] = elementsResult.rows.map(
-        (row: any, index: number) => {
-          const element = {
-            id: row.id,
-            type: row.element_type,
-            subtype: row.element_subtype,
-            position: {
-              x: row.position_x,
-              y: row.position_y,
-            },
-            size: {
-              width: row.width,
-              height: row.height,
-            },
-            title: row.title,
-            content: row.content,
-            dataSource: JSON.parse(row.data_source_config || "{}"),
-            chartConfig: JSON.parse(row.chart_config || "{}"),
-          };
-
-          console.log(
-            `📊 위젯 #${index + 1}: type="${element.type}", subtype="${element.subtype}", title="${element.title}"`
-          );
-
-          return element;
-        }
+        (row: any) => ({
+          id: row.id,
+          type: row.element_type,
+          subtype: row.element_subtype,
+          position: {
+            x: row.position_x,
+            y: row.position_y,
+          },
+          size: {
+            width: row.width,
+            height: row.height,
+          },
+          title: row.title,
+          content: row.content,
+          dataSource: JSON.parse(row.data_source_config || "{}"),
+          chartConfig: JSON.parse(row.chart_config || "{}"),
+        })
       );
 
       return {
@@ -363,6 +353,7 @@ export class DashboardService {
         tags: JSON.parse(dashboard.tags || "[]"),
         category: dashboard.category,
         viewCount: parseInt(dashboard.view_count || "0"),
+        settings: dashboard.settings || undefined,
         elements,
       };
     } catch (error) {

backend-node/src/types/dashboard.ts

@@ -48,6 +48,10 @@ export interface Dashboard {
   tags?: string[];
   category?: string;
   viewCount: number;
+  settings?: {
+    resolution?: string;
+    backgroundColor?: string;
+  };
   elements: DashboardElement[];
 }
 

frontend/components/admin/dashboard/DashboardDesigner.tsx

@@ -37,6 +37,15 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
   const [screenResolution] = useState<Resolution>(() => detectScreenResolution());
   const [resolution, setResolution] = useState<Resolution>(screenResolution);
 
+  // resolution 변경 감지
+  const handleResolutionChange = useCallback((newResolution: Resolution) => {
+    console.log("🎯 해상도 변경 요청:", newResolution);
+    setResolution((prev) => {
+      console.log("🎯 이전 해상도:", prev);
+      return newResolution;
+    });
+  }, []);
+
   // 현재 해상도 설정 (안전하게 기본값 제공)
   const canvasConfig = RESOLUTIONS[resolution] || RESOLUTIONS.fhd;
 
@@ -81,6 +90,8 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
       // 저장된 설정 복원
       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;
@@ -91,6 +102,7 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
       }
 
       if ((dashboard as any).settings?.backgroundColor) {
+        console.log("✅ 저장된 배경색 복원:", (dashboard as any).settings.backgroundColor);
         setCanvasBackgroundColor((dashboard as any).settings.backgroundColor);
       }
 
@@ -273,6 +285,9 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
 
       if (dashboardId) {
         // 기존 대시보드 업데이트
+        console.log("💾 저장 시작 - 현재 resolution 상태:", resolution);
+        console.log("💾 저장 시작 - 현재 배경색 상태:", canvasBackgroundColor);
+
         const updateData = {
           elements: elementsData,
           settings: {
@@ -280,11 +295,15 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
             backgroundColor: canvasBackgroundColor,
           },
         };
+
         console.log("💾 저장할 데이터:", updateData);
-        console.log("💾 저장할 해상도:", resolution);
+        console.log("💾 저장할 settings:", updateData.settings);
 
         savedDashboard = await dashboardApi.updateDashboard(dashboardId, updateData);
 
+        console.log("✅ 저장된 대시보드:", savedDashboard);
+        console.log("✅ 저장된 settings:", (savedDashboard as any).settings);
+
         alert(`대시보드 "${savedDashboard.title}"이 업데이트되었습니다!`);
 
         // Next.js 라우터로 뷰어 페이지 이동
@@ -319,7 +338,7 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
       const errorMessage = error instanceof Error ? error.message : "알 수 없는 오류";
       alert(`대시보드 저장 중 오류가 발생했습니다.\n\n오류: ${errorMessage}\n\n관리자에게 문의하세요.`);
     }
-  }, [elements, dashboardId, router]);
+  }, [elements, dashboardId, router, resolution, canvasBackgroundColor]);
 
   // 로딩 중이면 로딩 화면 표시
   if (isLoading) {
@@ -344,7 +363,7 @@ export default function DashboardDesigner({ dashboardId: initialDashboardId }: D
         dashboardTitle={dashboardTitle}
         onAddElement={addElementFromMenu}
         resolution={resolution}
-        onResolutionChange={setResolution}
+        onResolutionChange={handleResolutionChange}
         currentScreenResolution={screenResolution}
         backgroundColor={canvasBackgroundColor}
         onBackgroundColorChange={setCanvasBackgroundColor}