fix: table-list 컴포넌트 크기 조절 및 동기화 문제 해결
- 기본 너비 120px → 1000px 변경 - 선택 영역과 컴포넌트 영역 크기 동기화 - 편집 패널에서 너비/높이 조절 시 즉시 반영되도록 개선
This commit is contained in:
@@ -525,6 +525,34 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
||||
const finalKey = pathParts[pathParts.length - 1];
|
||||
current[finalKey] = value;
|
||||
|
||||
// 🆕 size 변경 시 style도 함께 업데이트 (파란 테두리와 실제 크기 동기화)
|
||||
if (path === "size.width" || path === "size.height" || path === "size") {
|
||||
if (!newComp.style) {
|
||||
newComp.style = {};
|
||||
}
|
||||
|
||||
if (path === "size.width") {
|
||||
newComp.style.width = `${value}px`;
|
||||
} else if (path === "size.height") {
|
||||
newComp.style.height = `${value}px`;
|
||||
} else if (path === "size") {
|
||||
// size 객체 전체가 변경된 경우
|
||||
if (value.width !== undefined) {
|
||||
newComp.style.width = `${value.width}px`;
|
||||
}
|
||||
if (value.height !== undefined) {
|
||||
newComp.style.height = `${value.height}px`;
|
||||
}
|
||||
}
|
||||
|
||||
console.log("🔄 size 변경 → style 동기화:", {
|
||||
componentId: newComp.id,
|
||||
path,
|
||||
value,
|
||||
updatedStyle: newComp.style,
|
||||
});
|
||||
}
|
||||
|
||||
// gridColumns 변경 시 크기 자동 업데이트 제거 (격자 시스템 제거됨)
|
||||
// if (path === "gridColumns" && prevLayout.gridSettings) {
|
||||
// const updatedSize = updateSizeFromGridColumns(newComp, prevLayout.gridSettings as GridUtilSettings);
|
||||
@@ -2217,7 +2245,8 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
|
||||
labelColor: "#212121",
|
||||
labelFontWeight: "500",
|
||||
labelMarginBottom: "4px",
|
||||
width: `${widthPercent}%`, // gridColumns에 맞춘 퍼센트 너비
|
||||
width: `${componentSize.width}px`, // size와 동기화 (픽셀 단위)
|
||||
height: `${componentSize.height}px`, // size와 동기화 (픽셀 단위)
|
||||
},
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user