From e9ed7169ed68132488e422e1339fbc7a25f515de Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Thu, 5 Mar 2026 13:28:25 +0900
Subject: [PATCH] =?UTF-8?q?=EC=9E=84=EC=9D=98=EA=B7=B8=EB=A6=AC=EB=93=9C?=
 =?UTF-8?q?=20=EC=9E=98=EB=A6=AC=EB=8A=94=20=ED=98=84=EC=83=81=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useEvent.js    |  8 +++++++-
 src/hooks/useTempGrid.js | 19 ++++++++++++++++++-
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/hooks/useEvent.js b/src/hooks/useEvent.js
index 939f69f5..d03417e4 100644
--- a/src/hooks/useEvent.js
+++ b/src/hooks/useEvent.js
@@ -435,7 +435,13 @@ export function useEvent() {
       y: Math.round(originPointer.y),
     }
 
-    const tempGrid = new fabric.Line([-1500, pointer.y, 2500, pointer.y], {
+    const currentZoom = canvas.getZoom()
+    const vt = canvas.viewportTransform
+    const visibleLeft = -vt[4] / currentZoom
+    const visibleRight = visibleLeft + canvas.getWidth() / currentZoom
+    const padding = 500
+
+    const tempGrid = new fabric.Line([visibleLeft - padding, pointer.y, visibleRight + padding, pointer.y], {
       stroke: gridColor,
       strokeWidth: 1,
       selectable: true,
diff --git a/src/hooks/useTempGrid.js b/src/hooks/useTempGrid.js
index c0a7dcc1..fcb9d238 100644
--- a/src/hooks/useTempGrid.js
+++ b/src/hooks/useTempGrid.js
@@ -11,11 +11,28 @@ export function useTempGrid() {
   const isGridDisplay = useRecoilValue(gridDisplaySelector)
   const [tempGridMode, setTempGridMode] = useRecoilState(tempGridModeState)
   const { getIntersectMousePoint } = useMouse()
+  const getVisibleBounds = () => {
+    const currentZoom = canvas.getZoom()
+    const vt = canvas.viewportTransform
+    const visibleLeft = -vt[4] / currentZoom
+    const visibleTop = -vt[5] / currentZoom
+    const visibleRight = visibleLeft + canvas.getWidth() / currentZoom
+    const visibleBottom = visibleTop + canvas.getHeight() / currentZoom
+    const padding = 500
+    return {
+      left: visibleLeft - padding,
+      top: visibleTop - padding,
+      right: visibleRight + padding,
+      bottom: visibleBottom + padding,
+    }
+  }
+
   const tempGridModeStateLeftClickEvent = (e) => {
     //임의 그리드 모드일 경우
     let pointer = getIntersectMousePoint(e)
+    const bounds = getVisibleBounds()
 
-    const tempGrid = new fabric.Line([pointer.x, -1500, pointer.x, 2500], {
+    const tempGrid = new fabric.Line([pointer.x, bounds.top, pointer.x, bounds.bottom], {
       stroke: gridColor,
       strokeWidth: 1,
       selectable: true,