From 102cc4d672730c77c6cecf3ea6f2197146cf3772 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Tue, 19 Aug 2025 15:32:33 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A4=8C=20=EC=83=81=ED=83=9C=EC=97=90=20?=
 =?UTF-8?q?=EB=94=B0=EB=9D=BC=20mouseLine=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 | 27 ++++++++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/src/hooks/useEvent.js b/src/hooks/useEvent.js
index 6499f2f3..748e680a 100644
--- a/src/hooks/useEvent.js
+++ b/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',
     })