diff --git a/frontend/components/admin/dashboard/CanvasElement.tsx b/frontend/components/admin/dashboard/CanvasElement.tsx index 87c69062..303dab38 100644 --- a/frontend/components/admin/dashboard/CanvasElement.tsx +++ b/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} > diff --git a/frontend/components/admin/dashboard/gridUtils.ts b/frontend/components/admin/dashboard/gridUtils.ts index 598851d6..f17496da 100644 --- a/frontend/components/admin/dashboard/gridUtils.ts +++ b/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; }; /**