12 그리드 스냅 시스템 적용

frontend/components/admin/dashboard/CanvasElement.tsx

@@ -279,6 +279,8 @@ export function CanvasElement({
         top: displayPosition.y,
         width: displaySize.width,
         height: displaySize.height,
+        padding: `${GRID_CONFIG.ELEMENT_PADDING}px`,
+        boxSizing: "border-box",
       }}
       onMouseDown={handleMouseDown}
     >

frontend/components/admin/dashboard/gridUtils.ts

@@ -11,6 +11,7 @@ export const GRID_CONFIG = {
   CELL_SIZE: 60, // 60px 정사각형 셀
   GAP: 8, // 셀 간격
   SNAP_THRESHOLD: 15, // 스냅 임계값 (px)
+  ELEMENT_PADDING: 4, // 요소 주위 여백 (px)
 } as const;
 
 /**
@@ -29,15 +30,15 @@ export const getCanvasWidth = () => {
 };
 
 /**
- * 좌표를 가장 가까운 그리드 포인트로 스냅
+ * 좌표를 가장 가까운 그리드 포인트로 스냅 (여백 포함)
  * @param value - 스냅할 좌표값
  * @param cellSize - 셀 크기 (선택사항, 기본값은 GRID_CONFIG.CELL_SIZE)
- * @returns 스냅된 좌표값
+ * @returns 스냅된 좌표값 (여백 포함)
  */
 export const snapToGrid = (value: number, cellSize: number = GRID_CONFIG.CELL_SIZE): number => {
   const cellWithGap = cellSize + GRID_CONFIG.GAP;
   const gridIndex = Math.round(value / cellWithGap);
-  return gridIndex * cellWithGap;
+  return gridIndex * cellWithGap + GRID_CONFIG.ELEMENT_PADDING;
 };
 
 /**