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:
parent
8e74429a83
commit
0e95f8ed66
|
|
@ -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,
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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 };
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue