From 01f92d6132fc9bf830610b384e0261ddacafe4da Mon Sep 17 00:00:00 2001
From: leeheejin <imleesinok@gmail.com>
Date: Wed, 22 Oct 2025 10:13:59 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B7=B8=EB=A6=AC=EB=93=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../admin/dashboard/CanvasElement.tsx         | 50 +++----------------
 .../admin/dashboard/DashboardCanvas.tsx       |  6 +--
 2 files changed, 11 insertions(+), 45 deletions(-)

diff --git a/frontend/components/admin/dashboard/CanvasElement.tsx b/frontend/components/admin/dashboard/CanvasElement.tsx
index 838a96f8..7bd4165e 100644
--- a/frontend/components/admin/dashboard/CanvasElement.tsx
+++ b/frontend/components/admin/dashboard/CanvasElement.tsx
@@ -280,19 +280,9 @@ export function CanvasElement({
         const maxX = canvasWidth - element.size.width;
         rawX = Math.min(rawX, maxX);
 
-        // 드래그 중 실시간 스냅 (마그네틱 스냅)
-        const gridSize = cellSize + 5; // GAP 포함한 실제 그리드 크기
-        const magneticThreshold = 15; // 큰 그리드에 끌리는 거리 (px)
-
-        // X 좌표 스냅 (큰 그리드 우선, 없으면 서브그리드)
-        const nearestGridX = Math.round(rawX / gridSize) * gridSize;
-        const distToGridX = Math.abs(rawX - nearestGridX);
-        const snappedX = distToGridX <= magneticThreshold ? nearestGridX : Math.round(rawX / subGridSize) * subGridSize;
-
-        // Y 좌표 스냅 (큰 그리드 우선, 없으면 서브그리드)
-        const nearestGridY = Math.round(rawY / gridSize) * gridSize;
-        const distToGridY = Math.abs(rawY - nearestGridY);
-        const snappedY = distToGridY <= magneticThreshold ? nearestGridY : Math.round(rawY / subGridSize) * subGridSize;
+        // 드래그 중 실시간 스냅 (서브그리드만 사용)
+        const snappedX = Math.round(rawX / subGridSize) * subGridSize;
+        const snappedY = Math.round(rawY / subGridSize) * subGridSize;
 
         setTempPosition({ x: snappedX, y: snappedY });
         
@@ -342,35 +332,11 @@ export function CanvasElement({
         const maxWidth = canvasWidth - newX;
         newWidth = Math.min(newWidth, maxWidth);
 
-        // 리사이즈 중 실시간 스냅 (마그네틱 스냅)
-        const gridSize = cellSize + 5; // GAP 포함한 실제 그리드 크기
-        const magneticThreshold = 15;
-
-        // 위치 스냅
-        const nearestGridX = Math.round(newX / gridSize) * gridSize;
-        const distToGridX = Math.abs(newX - nearestGridX);
-        const snappedX = distToGridX <= magneticThreshold ? nearestGridX : Math.round(newX / subGridSize) * subGridSize;
-
-        const nearestGridY = Math.round(newY / gridSize) * gridSize;
-        const distToGridY = Math.abs(newY - nearestGridY);
-        const snappedY = distToGridY <= magneticThreshold ? nearestGridY : Math.round(newY / subGridSize) * subGridSize;
-
-        // 크기 스냅 (그리드 칸 단위로 스냅하되, 마지막 GAP은 제외)
-        // 예: 1칸 = cellSize, 2칸 = cellSize*2 + GAP, 3칸 = cellSize*3 + GAP*2
-        const calculateGridWidth = (cells: number) => cells * cellSize + Math.max(0, cells - 1) * 5;
-
-        // 가장 가까운 그리드 칸 수 계산
-        const nearestWidthCells = Math.round(newWidth / gridSize);
-        const nearestGridWidth = calculateGridWidth(nearestWidthCells);
-        const distToGridWidth = Math.abs(newWidth - nearestGridWidth);
-        const snappedWidth =
-          distToGridWidth <= magneticThreshold ? nearestGridWidth : Math.round(newWidth / subGridSize) * subGridSize;
-
-        const nearestHeightCells = Math.round(newHeight / gridSize);
-        const nearestGridHeight = calculateGridWidth(nearestHeightCells);
-        const distToGridHeight = Math.abs(newHeight - nearestGridHeight);
-        const snappedHeight =
-          distToGridHeight <= magneticThreshold ? nearestGridHeight : Math.round(newHeight / subGridSize) * subGridSize;
+        // 리사이즈 중 실시간 스냅 (서브그리드만 사용)
+        const snappedX = Math.round(newX / subGridSize) * subGridSize;
+        const snappedY = Math.round(newY / subGridSize) * subGridSize;
+        const snappedWidth = Math.round(newWidth / subGridSize) * subGridSize;
+        const snappedHeight = Math.round(newHeight / subGridSize) * subGridSize;
 
         // 임시 크기/위치 저장 (스냅됨)
         setTempPosition({ x: Math.max(0, snappedX), y: Math.max(0, snappedY) });
diff --git a/frontend/components/admin/dashboard/DashboardCanvas.tsx b/frontend/components/admin/dashboard/DashboardCanvas.tsx
index 073ddb37..f586df57 100644
--- a/frontend/components/admin/dashboard/DashboardCanvas.tsx
+++ b/frontend/components/admin/dashboard/DashboardCanvas.tsx
@@ -420,8 +420,8 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
         onClick={handleCanvasClick}
         onMouseDown={handleMouseDown}
       >
-        {/* 12개 컬럼 메인 구분선 */}
-        {columnLines.map((x, i) => (
+        {/* 12개 컬럼 메인 구분선 - 주석 처리 (서브그리드만 사용) */}
+        {/* {columnLines.map((x, i) => (
           <div
             key={`col-${i}`}
             className="pointer-events-none absolute top-0 h-full"
@@ -432,7 +432,7 @@ export const DashboardCanvas = forwardRef<HTMLDivElement, DashboardCanvasProps>(
               zIndex: 0,
             }}
           />
-        ))}
+        ))} */}
         {/* 배치된 요소들 렌더링 */}
         {elements.length === 0 && (
           <div className="pointer-events-none absolute inset-0 flex items-center justify-center text-gray-400">