diff --git a/frontend/components/screen/ScreenDesigner.tsx b/frontend/components/screen/ScreenDesigner.tsx index 3ea717d3..ac8a8db1 100644 --- a/frontend/components/screen/ScreenDesigner.tsx +++ b/frontend/components/screen/ScreenDesigner.tsx @@ -527,36 +527,35 @@ export default function ScreenDesigner({ selectedScreen, onBackToList }: ScreenD newComp.size = updatedSize; } - // 크기 변경 시 격자 스냅 적용 (그룹 컴포넌트 제외) - if ( - (path === "size.width" || path === "size.height") && - prevLayout.gridSettings?.snapToGrid && - newComp.type !== "group" - ) { - // 현재 해상도에 맞는 격자 정보로 스냅 적용 - const currentGridInfo = calculateGridInfo(screenResolution.width, screenResolution.height, { - columns: prevLayout.gridSettings.columns, - gap: prevLayout.gridSettings.gap, - padding: prevLayout.gridSettings.padding, - snapToGrid: prevLayout.gridSettings.snapToGrid || false, - }); - const snappedSize = snapSizeToGrid( - newComp.size, - currentGridInfo, - prevLayout.gridSettings as GridUtilSettings, - ); - newComp.size = snappedSize; - - // 크기 변경 시 gridColumns도 자동 조정 - const adjustedColumns = adjustGridColumnsFromSize( - newComp, - currentGridInfo, - prevLayout.gridSettings as GridUtilSettings, - ); - if (newComp.gridColumns !== adjustedColumns) { - newComp.gridColumns = adjustedColumns; - } - } + // 크기 변경 시 격자 스냅 적용 제거 (직접 입력 시 불필요) + // 드래그/리사이즈 시에는 별도 로직에서 처리됨 + // if ( + // (path === "size.width" || path === "size.height") && + // prevLayout.gridSettings?.snapToGrid && + // newComp.type !== "group" + // ) { + // const currentGridInfo = calculateGridInfo(screenResolution.width, screenResolution.height, { + // columns: prevLayout.gridSettings.columns, + // gap: prevLayout.gridSettings.gap, + // padding: prevLayout.gridSettings.padding, + // snapToGrid: prevLayout.gridSettings.snapToGrid || false, + // }); + // const snappedSize = snapSizeToGrid( + // newComp.size, + // currentGridInfo, + // prevLayout.gridSettings as GridUtilSettings, + // ); + // newComp.size = snappedSize; + // + // const adjustedColumns = adjustGridColumnsFromSize( + // newComp, + // currentGridInfo, + // prevLayout.gridSettings as GridUtilSettings, + // ); + // if (newComp.gridColumns !== adjustedColumns) { + // newComp.gridColumns = adjustedColumns; + // } + // } // gridColumns 변경 시 크기를 격자에 맞게 자동 조정 if (path === "gridColumns" && prevLayout.gridSettings?.snapToGrid && newComp.type !== "group") { diff --git a/frontend/lib/utils/gridUtils.ts b/frontend/lib/utils/gridUtils.ts index 7ea3f6b4..cb4d2652 100644 --- a/frontend/lib/utils/gridUtils.ts +++ b/frontend/lib/utils/gridUtils.ts @@ -107,9 +107,9 @@ export function snapSizeToGrid(size: Size, gridInfo: GridInfo, gridSettings: Gri const rowHeight = 10; const snappedHeight = Math.max(10, Math.round(size.height / rowHeight) * rowHeight); - console.log( - `📏 크기 스냅: ${size.width}px → ${snappedWidth}px (${gridColumns}컬럼, 컬럼너비:${columnWidth}px, 간격:${gap}px)`, - ); + // console.log( + // `📏 크기 스냅: ${size.width}px → ${snappedWidth}px (${gridColumns}컬럼, 컬럼너비:${columnWidth}px, 간격:${gap}px)`, + // ); return { width: Math.max(columnWidth, snappedWidth),