fix: 속성 패널에서 너비/높이 직접 입력 시 격자 스냅 제거

- 문제: 속성 패널에서 너비/높이 입력 시 격자 시스템이 자동으로 값을 변경
- 원인: updateComponentProperty에서 size.width/height 변경 시 무조건 격자 스냅 적용
- 해결: 직접 입력 시에는 격자 스냅을 적용하지 않도록 로직 주석 처리
- 영향:
  - 속성 패널에서 원하는 크기로 자유롭게 설정 가능
  - 드래그/리사이즈 시에는 별도 로직에서 격자 스냅 처리
- 디버깅 로그 제거
This commit is contained in:
kjs 2025-11-10 15:49:48 +09:00
parent 99deab05d8
commit 99468ca250
2 changed files with 32 additions and 33 deletions

View File

@ -527,36 +527,35 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD
newComp.size = updatedSize; newComp.size = updatedSize;
} }
// 크기 변경 시 격자 스냅 적용 (그룹 컴포넌트 제외) // 크기 변경 시 격자 스냅 적용 제거 (직접 입력 시 불필요)
if ( // 드래그/리사이즈 시에는 별도 로직에서 처리됨
(path === "size.width" || path === "size.height") && // if (
prevLayout.gridSettings?.snapToGrid && // (path === "size.width" || path === "size.height") &&
newComp.type !== "group" // prevLayout.gridSettings?.snapToGrid &&
) { // newComp.type !== "group"
// 현재 해상도에 맞는 격자 정보로 스냅 적용 // ) {
const currentGridInfo = calculateGridInfo(screenResolution.width, screenResolution.height, { // const currentGridInfo = calculateGridInfo(screenResolution.width, screenResolution.height, {
columns: prevLayout.gridSettings.columns, // columns: prevLayout.gridSettings.columns,
gap: prevLayout.gridSettings.gap, // gap: prevLayout.gridSettings.gap,
padding: prevLayout.gridSettings.padding, // padding: prevLayout.gridSettings.padding,
snapToGrid: prevLayout.gridSettings.snapToGrid || false, // snapToGrid: prevLayout.gridSettings.snapToGrid || false,
}); // });
const snappedSize = snapSizeToGrid( // const snappedSize = snapSizeToGrid(
newComp.size, // newComp.size,
currentGridInfo, // currentGridInfo,
prevLayout.gridSettings as GridUtilSettings, // prevLayout.gridSettings as GridUtilSettings,
); // );
newComp.size = snappedSize; // newComp.size = snappedSize;
//
// 크기 변경 시 gridColumns도 자동 조정 // const adjustedColumns = adjustGridColumnsFromSize(
const adjustedColumns = adjustGridColumnsFromSize( // newComp,
newComp, // currentGridInfo,
currentGridInfo, // prevLayout.gridSettings as GridUtilSettings,
prevLayout.gridSettings as GridUtilSettings, // );
); // if (newComp.gridColumns !== adjustedColumns) {
if (newComp.gridColumns !== adjustedColumns) { // newComp.gridColumns = adjustedColumns;
newComp.gridColumns = adjustedColumns; // }
} // }
}
// gridColumns 변경 시 크기를 격자에 맞게 자동 조정 // gridColumns 변경 시 크기를 격자에 맞게 자동 조정
if (path === "gridColumns" && prevLayout.gridSettings?.snapToGrid && newComp.type !== "group") { if (path === "gridColumns" && prevLayout.gridSettings?.snapToGrid && newComp.type !== "group") {

View File

@ -107,9 +107,9 @@ export function snapSizeToGrid(size: Size, gridInfo: GridInfo, gridSettings: Gri
const rowHeight = 10; const rowHeight = 10;
const snappedHeight = Math.max(10, Math.round(size.height / rowHeight) * rowHeight); const snappedHeight = Math.max(10, Math.round(size.height / rowHeight) * rowHeight);
console.log( // console.log(
`📏 크기 스냅: ${size.width}px → ${snappedWidth}px (${gridColumns}컬럼, 컬럼너비:${columnWidth}px, 간격:${gap}px)`, // `📏 크기 스냅: ${size.width}px → ${snappedWidth}px (${gridColumns}컬럼, 컬럼너비:${columnWidth}px, 간격:${gap}px)`,
); // );
return { return {
width: Math.max(columnWidth, snappedWidth), width: Math.max(columnWidth, snappedWidth),