메뉴들 플로팅 패널로 구현

frontend/lib/utils/gridUtils.ts

@@ -75,12 +75,28 @@ export function snapSizeToGrid(size: Size, gridInfo: GridInfo, gridSettings: Gri
   const { gap } = gridSettings;
 
   // 격자 단위로 너비 계산
-  const gridColumns = Math.max(1, Math.round(size.width / (columnWidth + gap)));
+  // 컴포넌트가 차지하는 컬럼 수를 올바르게 계산
+  let gridColumns = 1;
+
+  // 현재 너비에서 가장 가까운 격자 컬럼 수 찾기
+  for (let cols = 1; cols <= gridSettings.columns; cols++) {
+    const targetWidth = cols * columnWidth + (cols - 1) * gap;
+    if (size.width <= targetWidth + (columnWidth + gap) / 2) {
+      gridColumns = cols;
+      break;
+    }
+    gridColumns = cols;
+  }
+
   const snappedWidth = gridColumns * columnWidth + (gridColumns - 1) * gap;
 
   // 높이는 20px 단위로 스냅
   const snappedHeight = Math.max(40, Math.round(size.height / 20) * 20);
 
+  console.log(
+    `📏 크기 스냅: ${size.width}px → ${snappedWidth}px (${gridColumns}컬럼, 컬럼너비:${columnWidth}px, 간격:${gap}px)`,
+  );
+
   return {
     width: Math.max(columnWidth, snappedWidth),
     height: snappedHeight,