fix: RealtimePreviewDynamic에서 component.style의 width/height가 size를 덮어쓰는 문제 수정

- 문제: 속성 패널에서 너비 입력 시 size.width는 변경되지만 화면에 반영되지 않음
- 원인: RealtimePreviewDynamic의 baseStyle에서 componentStyle을 getWidth() 이후에 스프레드하여 size.width를 덮어씀
- 해결:
  1. componentStyle에서 width, height 제거
  2. 나머지 스타일만 먼저 적용
  3. getWidth(), getHeight()로 size 기반 크기를 마지막에 설정
- 영향:
  - 속성 패널에서 입력한 너비/높이가 화면에 즉시 반영됨
  - component.style의 width/height는 무시되고 size.width/height만 사용됨
- 디버깅 로그 제거
This commit is contained in:
kjs 2025-11-10 16:09:38 +09:00
parent 8e74429a83
commit 0e95f8ed66
2 changed files with 12 additions and 3 deletions

View File

@ -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,
};

View File

@ -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 };