From 99deab05d8eb013d0bb9bfd166c6c4bc3a4ab23d Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 10 Nov 2025 15:45:51 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20gridUtils=20=ED=95=A8=EC=88=98=EB=93=A4?=
 =?UTF-8?q?=20import=20=EB=88=84=EB=9D=BD=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 문제: adjustGridColumnsFromSize 등 gridUtils 함수들이 import되지 않아 런타임 오류 발생
- 해결:
  1. gridUtils에서 필요한 함수들 import 추가
  2. 3개 파라미터를 받는 snap 함수 호출을 올바른 함수로 변경
     - snapSizeTo10px -> snapSizeToGrid
     - snapPositionTo10px -> snapToGrid
- 영향: 컴포넌트 크기/위치 조정 시 격자 스냅 기능 정상 작동
---
 frontend/components/screen/ScreenDesigner.tsx | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index 7479c9c9..3ea717d3 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -24,6 +24,13 @@ import {
   calculateRelativePositions,
   restoreAbsolutePositions,
 } from "@/lib/utils/groupingUtils";
+import {
+  adjustGridColumnsFromSize,
+  updateSizeFromGridColumns,
+  calculateWidthFromColumns,
+  snapSizeToGrid,
+  snapToGrid,
+} from "@/lib/utils/gridUtils";
 
 // 10px 단위 스냅 함수
 const snapTo10px = (value: number): number => {
@@ -533,7 +540,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
               padding: prevLayout.gridSettings.padding,
               snapToGrid: prevLayout.gridSettings.snapToGrid || false,
             });
-            const snappedSize = snapSizeTo10px(
+            const snappedSize = snapSizeToGrid(
               newComp.size,
               currentGridInfo,
               prevLayout.gridSettings as GridUtilSettings,
@@ -1083,8 +1090,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
         };
 
         const adjustedComponents = layout.components.map((comp) => {
-          const snappedPosition = snapPositionTo10px(comp.position, newGridInfo, gridUtilSettings);
-          const snappedSize = snapSizeTo10px(comp.size, newGridInfo, gridUtilSettings);
+          const snappedPosition = snapToGrid(comp.position, newGridInfo, gridUtilSettings);
+          const snappedSize = snapSizeToGrid(comp.size, newGridInfo, gridUtilSettings);
 
           // gridColumns가 없거나 범위를 벗어나면 자동 조정
           let adjustedGridColumns = comp.gridColumns;
@@ -1198,8 +1205,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
         };
 
         finalComponents = scaledComponents.map((comp) => {
-          const snappedPosition = snapPositionTo10px(comp.position, newGridInfo, gridUtilSettings);
-          const snappedSize = snapSizeTo10px(comp.size, newGridInfo, gridUtilSettings);
+          const snappedPosition = snapToGrid(comp.position, newGridInfo, gridUtilSettings);
+          const snappedSize = snapSizeToGrid(comp.size, newGridInfo, gridUtilSettings);
 
           // gridColumns 재계산
           const adjustedGridColumns = adjustGridColumnsFromSize({ size: snappedSize }, newGridInfo, gridUtilSettings);
@@ -1268,8 +1275,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
     };
 
     const adjustedComponents = layout.components.map((comp) => {
-      const snappedPosition = snapPositionTo10px(comp.position, currentGridInfo, gridUtilSettings);
-      const snappedSize = snapSizeTo10px(comp.size, currentGridInfo, gridUtilSettings);
+      const snappedPosition = snapToGrid(comp.position, currentGridInfo, gridUtilSettings);
+      const snappedSize = snapSizeToGrid(comp.size, currentGridInfo, gridUtilSettings);
 
       // gridColumns가 없거나 범위를 벗어나면 자동 조정
       let adjustedGridColumns = comp.gridColumns;
@@ -1404,7 +1411,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
       // 격자 스냅 적용
       const snappedPosition =
         layout.gridSettings?.snapToGrid && currentGridInfo
-          ? snapPositionTo10px({ x: dropX, y: dropY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings)
+          ? snapToGrid({ x: dropX, y: dropY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings)
           : { x: dropX, y: dropY, z: 1 };
 
       console.log("🎨 템플릿 드롭:", {
@@ -1823,7 +1830,7 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
       // 격자 스냅 적용
       const snappedPosition =
         layout.gridSettings?.snapToGrid && currentGridInfo
-          ? snapPositionTo10px({ x: dropX, y: dropY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings)
+          ? snapToGrid({ x: dropX, y: dropY, z: 1 }, currentGridInfo, layout.gridSettings as GridUtilSettings)
           : { x: dropX, y: dropY, z: 1 };
 
       console.log("🏗️ 레이아웃 드롭 (줌 보정):", {