src/hooks/useEvent.js

@@ -160,6 +160,7 @@ export function useEvent() {
         const verticalLines = canvas.getObjects().filter((obj) => ['lineGrid', 'tempGrid'].includes(obj.name) && obj.direction === 'vertical')
 
         if (!horizonLines || !verticalLines) {
+          drawMouseLine(pointer)
           return
         }
 
@@ -183,6 +184,7 @@ export function useEvent() {
         }
 
         if (!closestVerticalLine || !closestHorizontalLine) {
+          drawMouseLine(pointer)
           return
         }
 
@@ -271,7 +273,14 @@ export function useEvent() {
       console.error(e)
     }
 
-    const horizontalLine = new fabric.Line([-4 * canvas.width, arrivalPoint.y, 4 * canvas.width, arrivalPoint.y], {
+    drawMouseLine(arrivalPoint)
+
+    // 캔버스를 다시 그립니다.
+    canvas?.renderAll()
+  }
+
+  const drawMouseLine = (pointer) => {
+    const horizontalLine = new fabric.Line([-4 * canvas.width, pointer.y, 4 * canvas.width, pointer.y], {
       stroke: 'red',
       strokeWidth: 1,
       selectable: false,
@@ -279,7 +288,7 @@ export function useEvent() {
     })
 
     // 세로선
-    const verticalLine = new fabric.Line([arrivalPoint.x, -4 * canvas.height, arrivalPoint.x, 4 * canvas.height], {
+    const verticalLine = new fabric.Line([pointer.x, -4 * canvas.height, pointer.x, 4 * canvas.height], {
       stroke: 'red',
       strokeWidth: 1,
       selectable: false,
@@ -288,9 +297,6 @@ export function useEvent() {
 
     // 선들을 캔버스에 추가합니다.
     canvas?.add(horizontalLine, verticalLine)
-
-    // 캔버스를 다시 그립니다.
-    canvas?.renderAll()
   }
 
   const removeMouseLine = () => {