From 99468ca2503af79d17b2613ac667b339e5acebdd Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 10 Nov 2025 15:49:48 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=86=8D=EC=84=B1=20=ED=8C=A8=EB=84=90?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=20=EB=84=88=EB=B9=84/=EB=86=92=EC=9D=B4=20?=
 =?UTF-8?q?=EC=A7=81=EC=A0=91=20=EC=9E=85=EB=A0=A5=20=EC=8B=9C=20=EA=B2=A9?=
 =?UTF-8?q?=EC=9E=90=20=EC=8A=A4=EB=83=85=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 문제: 속성 패널에서 너비/높이 입력 시 격자 시스템이 자동으로 값을 변경
- 원인: updateComponentProperty에서 size.width/height 변경 시 무조건 격자 스냅 적용
- 해결: 직접 입력 시에는 격자 스냅을 적용하지 않도록 로직 주석 처리
- 영향:
  - 속성 패널에서 원하는 크기로 자유롭게 설정 가능
  - 드래그/리사이즈 시에는 별도 로직에서 격자 스냅 처리
- 디버깅 로그 제거
---
 frontend/components/screen/ScreenDesigner.tsx | 59 +++++++++----------
 frontend/lib/utils/gridUtils.ts               |  6 +-
 2 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index 3ea717d3..ac8a8db1 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -527,36 +527,35 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
             newComp.size = updatedSize;
           }
 
-          // 크기 변경 시 격자 스냅 적용 (그룹 컴포넌트 제외)
-          if (
-            (path === "size.width" || path === "size.height") &&
-            prevLayout.gridSettings?.snapToGrid &&
-            newComp.type !== "group"
-          ) {
-            // 현재 해상도에 맞는 격자 정보로 스냅 적용
-            const currentGridInfo = calculateGridInfo(screenResolution.width, screenResolution.height, {
-              columns: prevLayout.gridSettings.columns,
-              gap: prevLayout.gridSettings.gap,
-              padding: prevLayout.gridSettings.padding,
-              snapToGrid: prevLayout.gridSettings.snapToGrid || false,
-            });
-            const snappedSize = snapSizeToGrid(
-              newComp.size,
-              currentGridInfo,
-              prevLayout.gridSettings as GridUtilSettings,
-            );
-            newComp.size = snappedSize;
-
-            // 크기 변경 시 gridColumns도 자동 조정
-            const adjustedColumns = adjustGridColumnsFromSize(
-              newComp,
-              currentGridInfo,
-              prevLayout.gridSettings as GridUtilSettings,
-            );
-            if (newComp.gridColumns !== adjustedColumns) {
-              newComp.gridColumns = adjustedColumns;
-            }
-          }
+          // 크기 변경 시 격자 스냅 적용 제거 (직접 입력 시 불필요)
+          // 드래그/리사이즈 시에는 별도 로직에서 처리됨
+          // if (
+          //   (path === "size.width" || path === "size.height") &&
+          //   prevLayout.gridSettings?.snapToGrid &&
+          //   newComp.type !== "group"
+          // ) {
+          //   const currentGridInfo = calculateGridInfo(screenResolution.width, screenResolution.height, {
+          //     columns: prevLayout.gridSettings.columns,
+          //     gap: prevLayout.gridSettings.gap,
+          //     padding: prevLayout.gridSettings.padding,
+          //     snapToGrid: prevLayout.gridSettings.snapToGrid || false,
+          //   });
+          //   const snappedSize = snapSizeToGrid(
+          //     newComp.size,
+          //     currentGridInfo,
+          //     prevLayout.gridSettings as GridUtilSettings,
+          //   );
+          //   newComp.size = snappedSize;
+          //
+          //   const adjustedColumns = adjustGridColumnsFromSize(
+          //     newComp,
+          //     currentGridInfo,
+          //     prevLayout.gridSettings as GridUtilSettings,
+          //   );
+          //   if (newComp.gridColumns !== adjustedColumns) {
+          //     newComp.gridColumns = adjustedColumns;
+          //   }
+          // }
 
           // gridColumns 변경 시 크기를 격자에 맞게 자동 조정
           if (path === "gridColumns" && prevLayout.gridSettings?.snapToGrid && newComp.type !== "group") {
diff --git a/frontend/lib/utils/gridUtils.ts b/frontend/lib/utils/gridUtils.ts
index 7ea3f6b4..cb4d2652 100644
--- a/frontend/lib/utils/gridUtils.ts
+++ b/frontend/lib/utils/gridUtils.ts
@@ -107,9 +107,9 @@ export function snapSizeToGrid(size: Size, gridInfo: GridInfo, gridSettings: Gri
   const rowHeight = 10;
   const snappedHeight = Math.max(10, Math.round(size.height / rowHeight) * rowHeight);
 
-  console.log(
-    `📏 크기 스냅: ${size.width}px → ${snappedWidth}px (${gridColumns}컬럼, 컬럼너비:${columnWidth}px, 간격:${gap}px)`,
-  );
+  // console.log(
+  //   `📏 크기 스냅: ${size.width}px → ${snappedWidth}px (${gridColumns}컬럼, 컬럼너비:${columnWidth}px, 간격:${gap}px)`,
+  // );
 
   return {
     width: Math.max(columnWidth, snappedWidth),