From bcb8a11d5a8e1448d0c34842e918a309f2ac50a2 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Wed, 4 Jun 2025 15:45:30 +0900
Subject: [PATCH] =?UTF-8?q?zoom=EA=B0=92=EC=97=90=20=EB=94=B0=EB=9D=BC=20m?=
 =?UTF-8?q?ouseLine=20=EC=95=88=EA=B7=B8=EB=A0=A4=EC=A7=80=EB=8A=94=20?=
 =?UTF-8?q?=EB=B6=80=EB=B6=84=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 | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/hooks/useEvent.js b/src/hooks/useEvent.js
index 9f9e4ea0..f3c6dee8 100644
--- a/src/hooks/useEvent.js
+++ b/src/hooks/useEvent.js
@@ -1,4 +1,4 @@
-import { useRef } from 'react'
+import { useEffect, useRef } from 'react'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
 import { canvasState, canvasZoomState, currentMenuState, textModeState } from '@/store/canvasAtom'
 import { fabric } from 'fabric'
@@ -25,6 +25,7 @@ export function useEvent() {
   const setCanvasZoom = useSetRecoilState(canvasZoomState)
   const gridColor = useRecoilValue(gridColorState)
   const isGridDisplay = useRecoilValue(gridDisplaySelector)
+  const zoom = useRecoilValue(canvasZoomState)
 
   const { adsorptionPointAddMode, adsorptionPointMode, adsorptionRange, getAdsorptionPoints, adsorptionPointAddModeStateEvent } = useAdsorptionPoint()
   const { dotLineGridSetting, interval, getClosestLineGrid } = useDotLineGrid()
@@ -59,6 +60,12 @@ export function useEvent() {
     addDefaultEvent()
   }
 
+  useEffect(() => {
+    if (canvas) {
+      addCanvasMouseEventListener('mouse:move', defaultMouseMoveEvent)
+    }
+  }, [zoom])
+
   const addDefaultEvent = () => {
     //default Event 추가
     addCanvasMouseEventListener('mouse:move', defaultMouseMoveEvent)
@@ -280,7 +287,7 @@ export function useEvent() {
   }
 
   const drawMouseLine = (pointer) => {
-    const horizontalLine = new fabric.Line([-4 * canvas.width, pointer.y, 4 * canvas.width, pointer.y], {
+    const horizontalLine = new fabric.Line([-2 * canvas.width, pointer.y, 2 * canvas.width, pointer.y], {
       stroke: 'red',
       strokeWidth: 1,
       selectable: false,
@@ -288,7 +295,7 @@ export function useEvent() {
     })
 
     // 세로선
-    const verticalLine = new fabric.Line([pointer.x, -4 * canvas.height, pointer.x, 4 * canvas.height], {
+    const verticalLine = new fabric.Line([pointer.x, -2 * canvas.height, pointer.x, 2 * canvas.height], {
       stroke: 'red',
       strokeWidth: 1,
       selectable: false,