From 8e74429a8303ecb0b5f9f029b27328c01bf90e44 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 10 Nov 2025 15:58:56 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20updateComponentProperty=EC=97=90?=
 =?UTF-8?q?=EC=84=9C=20gridColumns=20=EA=B4=80=EB=A0=A8=20=EC=9E=90?=
 =?UTF-8?q?=EB=8F=99=20=ED=81=AC=EA=B8=B0=20=EC=A1=B0=EC=A0=95=20=EC=A0=9C?=
 =?UTF-8?q?=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 문제: 속성 패널에서 너비를 입력해도 화면에 반영되지 않음
- 원인: updateComponentProperty에서 gridColumns 변경 시 자동으로 너비를 재계산
- 해결:
  1. gridColumns 변경 시 updateSizeFromGridColumns 호출 제거
  2. gridColumns 변경 시 calculateWidthFromColumns 호출 제거
- 영향:
  - 속성 패널에서 입력한 너비가 화면에 즉시 반영됨
  - gridColumns는 더 이상 너비를 자동으로 조정하지 않음
---
 frontend/components/screen/ScreenDesigner.tsx | 49 +++++++++----------
 1 file changed, 24 insertions(+), 25 deletions(-)

diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index ac8a8db1..54f26a8d 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -521,11 +521,11 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
           const finalKey = pathParts[pathParts.length - 1];
           current[finalKey] = value;
 
-          // gridColumns 변경 시 크기 자동 업데이트
-          if (path === "gridColumns" && prevLayout.gridSettings) {
-            const updatedSize = updateSizeFromGridColumns(newComp, prevLayout.gridSettings as GridUtilSettings);
-            newComp.size = updatedSize;
-          }
+          // gridColumns 변경 시 크기 자동 업데이트 제거 (격자 시스템 제거됨)
+          // if (path === "gridColumns" && prevLayout.gridSettings) {
+          //   const updatedSize = updateSizeFromGridColumns(newComp, prevLayout.gridSettings as GridUtilSettings);
+          //   newComp.size = updatedSize;
+          // }
 
           // 크기 변경 시 격자 스냅 적용 제거 (직접 입력 시 불필요)
           // 드래그/리사이즈 시에는 별도 로직에서 처리됨
@@ -557,26 +557,25 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
           //   }
           // }
 
-          // gridColumns 변경 시 크기를 격자에 맞게 자동 조정
-          if (path === "gridColumns" && 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,
-            });
-
-            // gridColumns에 맞는 정확한 너비 계산
-            const newWidth = calculateWidthFromColumns(
-              newComp.gridColumns,
-              currentGridInfo,
-              prevLayout.gridSettings as GridUtilSettings,
-            );
-            newComp.size = {
-              ...newComp.size,
-              width: newWidth,
-            };
-          }
+          // gridColumns 변경 시 크기를 격자에 맞게 자동 조정 제거 (격자 시스템 제거됨)
+          // if (path === "gridColumns" && 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 newWidth = calculateWidthFromColumns(
+          //     newComp.gridColumns,
+          //     currentGridInfo,
+          //     prevLayout.gridSettings as GridUtilSettings,
+          //   );
+          //   newComp.size = {
+          //     ...newComp.size,
+          //     width: newWidth,
+          //   };
+          // }
 
           // 위치 변경 시 격자 스냅 적용 (그룹 내부 컴포넌트 포함)
           if (