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,