From 3d48c0f7cbca6b272b5f283e8190240aef137dbc Mon Sep 17 00:00:00 2001
From: dohyeons <ddhhss0603@gmail.com>
Date: Mon, 13 Oct 2025 17:16:44 +0900
Subject: [PATCH] =?UTF-8?q?12=20=EA=B7=B8=EB=A6=AC=EB=93=9C=20=EC=8A=A4?=
 =?UTF-8?q?=EB=83=85=20=EC=8B=9C=EC=8A=A4=ED=85=9C=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/components/admin/dashboard/CanvasElement.tsx | 2 ++
 frontend/components/admin/dashboard/gridUtils.ts      | 7 ++++---
 2 files changed, 6 insertions(+), 3 deletions(-)

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;
 };
 
 /**