From c5499d2e18a59ebce88edcdf4a7ea47dbb8555fc Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Thu, 16 Oct 2025 11:55:14 +0900
Subject: [PATCH] =?UTF-8?q?=ED=95=B4=EC=83=81=EB=8F=84=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD=20=EC=8B=9C=20=EC=9A=94=EC=86=8C=EB=93=A4=20=EA=B0=84?=
 =?UTF-8?q?=EA=B2=A9=20=EC=A1=B0=EC=A0=88=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/dashboard/DashboardDesigner.tsx     | 62 ++++++++++++++++---
 1 file changed, 53 insertions(+), 9 deletions(-)

diff --git a/frontend/components/admin/dashboard/DashboardDesigner.tsx b/frontend/components/admin/dashboard/DashboardDesigner.tsx
index 60983eff..048e5172 100644
--- a/frontend/components/admin/dashboard/DashboardDesigner.tsx
+++ b/frontend/components/admin/dashboard/DashboardDesigner.tsx
@@ -7,7 +7,7 @@ import { DashboardTopMenu } from "./DashboardTopMenu";
 import { ElementConfigModal } from "./ElementConfigModal";
 import { ListWidgetConfigModal } from "./widgets/ListWidgetConfigModal";
 import { DashboardElement, ElementType, ElementSubtype } from "./types";
-import { GRID_CONFIG } from "./gridUtils";
+import { GRID_CONFIG, snapToGrid, snapSizeToGrid, calculateCellSize } from "./gridUtils";
 import { Resolution, RESOLUTIONS, detectScreenResolution } from "./ResolutionSelector";
 
 interface DashboardDesignerProps {
@@ -37,14 +37,58 @@ 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;
-    });
-  }, []);
+  // 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) {
+          // 새 해상도의 셀 크기 계산
+          const newCellSize = calculateCellSize(newConfig.width);
+
+          const adjustedElements = elements.map((el) => {
+            // 비율에 맞춰 조정 (X와 너비만)
+            const scaledX = el.position.x * widthRatio;
+            const scaledWidth = el.size.width * widthRatio;
+
+            // 그리드에 스냅 (X, Y, 너비, 높이 모두)
+            const snappedX = snapToGrid(scaledX, newCellSize);
+            const snappedY = snapToGrid(el.position.y, newCellSize);
+            const snappedWidth = snapSizeToGrid(scaledWidth, 2, newCellSize);
+            const snappedHeight = snapSizeToGrid(el.size.height, 2, newCellSize);
+
+            return {
+              ...el,
+              position: {
+                x: snappedX,
+                y: snappedY,
+              },
+              size: {
+                width: snappedWidth,
+                height: snappedHeight,
+              },
+            };
+          });
+
+          console.log("✨ 요소 위치/크기 자동 조정 (그리드 스냅 적용):", adjustedElements.length, "개");
+          setElements(adjustedElements);
+        }
+
+        return newResolution;
+      });
+    },
+    [elements],
+  );
 
   // 현재 해상도 설정 (안전하게 기본값 제공)
   const canvasConfig = RESOLUTIONS[resolution] || RESOLUTIONS.fhd;