줌 상태에 따라 mouseLine 수정

src/hooks/useEvent.js

@@ -369,18 +369,39 @@ export function useEvent() {
   }
 
   const drawMouseLine = (pointer) => {
-    const horizontalLine = new fabric.Line([-2 * canvas.width, pointer.y, 2 * canvas.width, pointer.y], {
+    // 캔버스의 실제 보이는 영역 계산 (zoom과 pan 고려)
+    const canvasWidth = canvas.getWidth()
+    const canvasHeight = canvas.getHeight()
+    const currentZoom = canvas.getZoom()
+    const viewportTransform = canvas.viewportTransform
+
+    const visibleLeft = -viewportTransform[4] / currentZoom
+    const visibleTop = -viewportTransform[5] / currentZoom
+    const visibleRight = visibleLeft + canvasWidth / currentZoom
+    const visibleBottom = visibleTop + canvasHeight / currentZoom
+
+    // 여유 공간 추가
+    const padding = 200
+    const lineLeft = visibleLeft - padding
+    const lineTop = visibleTop - padding
+    const lineRight = visibleRight + padding
+    const lineBottom = visibleBottom + padding
+
+    // 가로선 (수평선)
+    const horizontalLine = new fabric.Line([lineLeft, pointer.y, lineRight, pointer.y], {
       stroke: 'red',
       strokeWidth: 1,
       selectable: false,
+      direction: 'horizontal',
       name: 'mouseLine',
     })
 
-    // 세로선
-    const verticalLine = new fabric.Line([pointer.x, -2 * canvas.height, pointer.x, 2 * canvas.height], {
+    // 세로선 (수직선)
+    const verticalLine = new fabric.Line([pointer.x, lineTop, pointer.x, lineBottom], {
       stroke: 'red',
       strokeWidth: 1,
       selectable: false,
+      direction: 'vertical',
       name: 'mouseLine',
     })