From 5d374f902a6d3d488660cc761db9f97f8619ea28 Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 10 Nov 2025 15:51:37 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=84=88=EB=B9=84/=EB=86=92=EC=9D=B4=20?=
 =?UTF-8?q?=EC=9E=85=EB=A0=A5=20=EC=8B=9C=20=EC=9E=90=EC=9C=A0=20=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=EA=B0=80=EB=8A=A5=ED=95=98=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B0=8F=20=ED=8F=AC=EC=BB=A4=EC=8A=A4=20?=
 =?UTF-8?q?=EC=95=84=EC=9B=83=20=EC=8B=9C=2010px=20=EB=8B=A8=EC=9C=84=20?=
 =?UTF-8?q?=EC=8A=A4=EB=83=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 문제: 너비/높이 입력 시 즉시 10px 단위로 스냅되어 자유 입력 불가
- 해결:
  1. 너비: onChange에서는 입력값 그대로 반영, onBlur에서 10px 단위로 스냅
  2. 높이: 로컬 상태로 자유 입력 허용, onBlur/Enter 시 10px 단위로 스냅
  3. step을 10에서 1로 변경하여 자유 입력 가능
- 영향:
  - 입력 중에는 원하는 값 입력 가능
  - 입력 완료 시(포커스 아웃 또는 Enter) 자동으로 10px 단위로 정렬
---
 .../screen/panels/UnifiedPropertiesPanel.tsx  | 28 +++++++++++++------
 1 file changed, 19 insertions(+), 9 deletions(-)

diff --git a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
index d790dfaa..838842f8 100644
--- a/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
+++ b/frontend/components/screen/panels/UnifiedPropertiesPanel.tsx
@@ -328,22 +328,26 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
               type="number"
               value={localHeight}
               onChange={(e) => {
-                // 입력 중에는 로컬 상태만 업데이트 (격자 스냅 방지)
+                // 입력 중에는 로컬 상태만 업데이트 (자유 입력)
                 setLocalHeight(e.target.value);
               }}
               onBlur={(e) => {
-                // 포커스를 잃을 때만 실제로 업데이트
+                // 포커스를 잃을 때 10px 단위로 스냅
                 const value = parseInt(e.target.value) || 0;
-                if (value >= 1) {
-                  handleUpdate("size.height", value);
+                if (value >= 10) {
+                  const snappedValue = Math.round(value / 10) * 10;
+                  handleUpdate("size.height", snappedValue);
+                  setLocalHeight(String(snappedValue));
                 }
               }}
               onKeyDown={(e) => {
-                // Enter 키를 누르면 즉시 적용
+                // Enter 키를 누르면 즉시 적용 (10px 단위로 스냅)
                 if (e.key === "Enter") {
                   const value = parseInt(e.currentTarget.value) || 0;
-                  if (value >= 1) {
-                    handleUpdate("size.height", value);
+                  if (value >= 10) {
+                    const snappedValue = Math.round(value / 10) * 10;
+                    handleUpdate("size.height", snappedValue);
+                    setLocalHeight(String(snappedValue));
                   }
                   e.currentTarget.blur(); // 포커스 제거
                 }
@@ -410,12 +414,18 @@ export const UnifiedPropertiesPanel: React.FC<UnifiedPropertiesPanelProps> = ({
                 type="number"
                 min={10}
                 max={3840}
-                step="10"
+                step="1"
                 value={selectedComponent.size?.width || 100}
                 onChange={(e) => {
                   const value = parseInt(e.target.value, 10);
                   if (!isNaN(value) && value >= 10) {
-                    // 10px 단위로 스냅
+                    handleUpdate("size.width", value);
+                  }
+                }}
+                onBlur={(e) => {
+                  const value = parseInt(e.target.value, 10);
+                  if (!isNaN(value) && value >= 10) {
+                    // 포커스 아웃 시 10px 단위로 스냅
                     const snappedValue = Math.round(value / 10) * 10;
                     handleUpdate("size.width", snappedValue);
                   }