fix: table-list 컴포넌트 크기 조절 및 동기화 문제 해결

- 기본 너비 120px → 1000px 변경
- 선택 영역과 컴포넌트 영역 크기 동기화
- 편집 패널에서 너비/높이 조절 시 즉시 반영되도록 개선
This commit is contained in:
SeongHyun Kim
2025-11-17 10:01:09 +09:00
parent e2a4df575c
commit 660f81edbc
7 changed files with 84 additions and 42 deletions
+30 -1
View File
@@ -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와 동기화 (픽셀 단위)
},
};