From 0e95f8ed66c9a824c1a074916f8e81cd7b43164e Mon Sep 17 00:00:00 2001
From: kjs <kjs@wace.me>
Date: Mon, 10 Nov 2025 16:09:38 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20RealtimePreviewDynamic=EC=97=90=EC=84=9C?=
 =?UTF-8?q?=20component.style=EC=9D=98=20width/height=EA=B0=80=20size?=
 =?UTF-8?q?=EB=A5=BC=20=EB=8D=AE=EC=96=B4=EC=93=B0=EB=8A=94=20=EB=AC=B8?=
 =?UTF-8?q?=EC=A0=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 문제: 속성 패널에서 너비 입력 시 size.width는 변경되지만 화면에 반영되지 않음
- 원인: RealtimePreviewDynamic의 baseStyle에서 componentStyle을 getWidth() 이후에 스프레드하여 size.width를 덮어씀
- 해결:
  1. componentStyle에서 width, height 제거
  2. 나머지 스타일만 먼저 적용
  3. getWidth(), getHeight()로 size 기반 크기를 마지막에 설정
- 영향:
  - 속성 패널에서 입력한 너비/높이가 화면에 즉시 반영됨
  - component.style의 width/height는 무시되고 size.width/height만 사용됨
- 디버깅 로그 제거
---
 frontend/components/screen/RealtimePreviewDynamic.tsx | 9 ++++++---
 frontend/components/screen/ScreenDesigner.tsx         | 6 ++++++
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/frontend/components/screen/RealtimePreviewDynamic.tsx b/frontend/components/screen/RealtimePreviewDynamic.tsx
index 679ed5a8..fa5dc755 100644
--- a/frontend/components/screen/RealtimePreviewDynamic.tsx
+++ b/frontend/components/screen/RealtimePreviewDynamic.tsx
@@ -257,13 +257,16 @@ export const RealtimePreviewDynamic: React.FC<RealtimePreviewProps> = ({
       }
     : component;
 
+  // componentStyle에서 width, height 제거 (size.width, size.height만 사용)
+  const { width: _styleWidth, height: _styleHeight, ...restComponentStyle } = componentStyle || {};
+  
   const baseStyle = {
     left: `${position.x}px`,
     top: `${position.y}px`,
-    width: getWidth(), // getWidth()가 모든 우선순위를 처리
-    height: getHeight(),
+    ...restComponentStyle, // width/height 제외한 스타일 먼저 적용
+    width: getWidth(), // size.width로 덮어쓰기
+    height: getHeight(), // size.height로 덮어쓰기
     zIndex: component.type === "layout" ? 1 : position.z || 2,
-    ...componentStyle,
     right: undefined,
   };
 
diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx
index 54f26a8d..0f3cc9b4 100644
--- a/frontend/components/screen/ScreenDesigner.tsx
+++ b/frontend/components/screen/ScreenDesigner.tsx
@@ -634,9 +634,15 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
             }
           }
 
+          console.log("🔍 최종 newComp:", { id: newComp.id, size: newComp.size, path });
           return newComp;
         });
 
+        console.log(
+          "🔍 updatedComponents:",
+          updatedComponents.map((c) => ({ id: c.id, size: c.size })),
+        );
+
         // 🔥 새로운 layout 생성
         const newLayout = { ...prevLayout, components: updatedComponents };