From d8a7986120b1f1d22c6a925b3fdd5b83877a90d2 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Mon, 26 May 2025 17:30:03 +0900
Subject: [PATCH] =?UTF-8?q?[1046]=20-=20=EB=8C=93=EA=B8=80=201.=20?=
 =?UTF-8?q?=EC=9E=84=EC=9D=98=EA=B7=B8=EB=A6=AC=EB=93=9C=20=EC=9A=B0?=
 =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=ED=9D=A1=EC=B0=A9=EC=A0=90=EC=97=90=20?=
 =?UTF-8?q?=EC=83=9D=EC=84=B1=202.=20=EC=9E=84=EC=9D=98=EA=B7=B8=EB=A6=AC?=
 =?UTF-8?q?=EB=93=9C=20=EC=83=9D=EC=84=B1=20=ED=9B=84=20mouseLine=20?=
 =?UTF-8?q?=EC=95=88=EA=B7=B8=EB=A0=A4=EC=A7=80=EB=8A=94=20=ED=98=84?=
 =?UTF-8?q?=EC=83=81=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useEvent.js    | 22 ++++++++++++++++++----
 src/hooks/useTempGrid.js |  5 +++--
 2 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/src/hooks/useEvent.js b/src/hooks/useEvent.js
index 59c5d895..d701bcd9 100644
--- a/src/hooks/useEvent.js
+++ b/src/hooks/useEvent.js
@@ -2,7 +2,14 @@ import { useRef } from 'react'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { canvasState, canvasZoomState, currentMenuState, textModeState } from '@/store/canvasAtom'
 import { fabric } from 'fabric'
-import { calculateDistance, calculateDistancePoint, calculateIntersection, distanceBetweenPoints, findClosestPoint } from '@/util/canvas-util'
+import {
+  calculateDistance,
+  calculateDistancePoint,
+  calculateIntersection,
+  distanceBetweenPoints,
+  findClosestPoint,
+  getInterSectionLineNotOverCoordinate,
+} from '@/util/canvas-util'
 import { useAdsorptionPoint } from '@/hooks/useAdsorptionPoint'
 import { useDotLineGrid } from '@/hooks/useDotLineGrid'
 import { useTempGrid } from '@/hooks/useTempGrid'
@@ -146,7 +153,7 @@ export function useEvent() {
         ...innerLinePoints,
       ]
 
-      if (dotLineGridSetting.LINE || canvas.getObjects().filter((obj) => ['lineGrid', 'tempGrid'].includes(obj.name)).length > 0) {
+      if (dotLineGridSetting.LINE || canvas.getObjects().filter((obj) => ['lineGrid', 'tempGrid'].includes(obj.name)).length > 1) {
         const closestLine = getClosestLineGrid(pointer)
 
         const horizonLines = canvas.getObjects().filter((obj) => ['lineGrid', 'tempGrid'].includes(obj.name) && obj.direction === 'horizontal')
@@ -260,7 +267,9 @@ export function useEvent() {
           arrivalPoint = guideIntersectionPoint
         }
       }
-    } catch (e) {}
+    } catch (e) {
+      console.error(e)
+    }
 
     const horizontalLine = new fabric.Line([-4 * canvas.width, arrivalPoint.y, 4 * canvas.width, arrivalPoint.y], {
       stroke: 'red',
@@ -298,7 +307,12 @@ export function useEvent() {
     e.preventDefault()
     e.stopPropagation()
     //임의 그리드 모드일 경우
-    let pointer = { x: e.offsetX, y: e.offsetY }
+    let originPointer = { x: e.offsetX, y: e.offsetY }
+    const mouseLines = canvas.getObjects().filter((obj) => obj.name === 'mouseLine')
+    let pointer = getInterSectionLineNotOverCoordinate(mouseLines[0], mouseLines[1]) || {
+      x: Math.round(originPointer.x),
+      y: Math.round(originPointer.y),
+    }
 
     const tempGrid = new fabric.Line([-1500, pointer.y, 2500, pointer.y], {
       stroke: gridColor,
diff --git a/src/hooks/useTempGrid.js b/src/hooks/useTempGrid.js
index c875bcb3..c0a7dcc1 100644
--- a/src/hooks/useTempGrid.js
+++ b/src/hooks/useTempGrid.js
@@ -2,6 +2,7 @@ import { canvasState, tempGridModeState } from '@/store/canvasAtom'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { gridColorState } from '@/store/gridAtom'
 import { gridDisplaySelector } from '@/store/settingAtom'
+import { useMouse } from '@/hooks/useMouse'
 
 const GRID_PADDING = 5
 export function useTempGrid() {
@@ -9,10 +10,10 @@ export function useTempGrid() {
   const gridColor = useRecoilValue(gridColorState)
   const isGridDisplay = useRecoilValue(gridDisplaySelector)
   const [tempGridMode, setTempGridMode] = useRecoilState(tempGridModeState)
-
+  const { getIntersectMousePoint } = useMouse()
   const tempGridModeStateLeftClickEvent = (e) => {
     //임의 그리드 모드일 경우
-    let pointer = canvas.getPointer(e.e)
+    let pointer = getIntersectMousePoint(e)
 
     const tempGrid = new fabric.Line([pointer.x, -1500, pointer.x, 2500], {
       stroke: gridColor,