해상도 변경 시 요소들 간격 조절 구현

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;