From 2d510bbe0293e73635248af99717b15e081ffb8d Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Wed, 4 Sep 2024 14:34:33 +0900
Subject: [PATCH] =?UTF-8?q?=EC=BA=94=EB=B2=84=EC=8A=A4=20=EC=B6=95?=
 =?UTF-8?q?=EC=86=8C=20=ED=99=95=EB=8C=80=20=EC=8B=9C=20line=20=EC=A7=A7?=
 =?UTF-8?q?=EC=95=84=EC=A7=80=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/components/Roof2.jsx |  9 +++++----
 src/hooks/useMode.js     | 13 ++++++++++---
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/components/Roof2.jsx b/src/components/Roof2.jsx
index aa99b3c9..2d275a36 100644
--- a/src/components/Roof2.jsx
+++ b/src/components/Roof2.jsx
@@ -710,10 +710,11 @@ export default function Roof2(props) {
             <Button className="m-1 p-2" onClick={handleClear}>
               clear
             </Button>
-            {/*<Button className="m-1 p-2" onClick={zoomIn}>
-              확대
-            </Button>
-            */}
+            {
+              <Button className="m-1 p-2" onClick={zoomIn}>
+                확대
+              </Button>
+            }
             <Button className="m-1 p-2" onClick={zoomOut}>
               축소
             </Button>
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index bcbf2c48..4b7d9eb5 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -81,8 +81,9 @@ export function useMode() {
     // }
     if (!canvas) return
     setCanvas(canvas)
+    canvas?.off('mouse:move')
     canvas?.on('mouse:move', drawMouseLines)
-  }, [canvas]) // 빈 배열을 전달하여 컴포넌트가 마운트될 때만 실행되도록 함
+  }, [canvas, zoom]) // 빈 배열을 전달하여 컴포넌트가 마운트될 때만 실행되도록 함
 
   useEffect(() => {
     if (canvas?.getObjects().find((obj) => obj.name === 'connectLine')) {
@@ -278,7 +279,7 @@ export function useMode() {
     }
 
     // 가로선을 그립니다.
-    const horizontalLine = new fabric.Line([0, newY, canvasSize.horizontal, newY], {
+    const horizontalLine = new fabric.Line([0, newY, 2 * canvas.width, newY], {
       stroke: 'red',
       strokeWidth: 1,
       selectable: false,
@@ -286,7 +287,7 @@ export function useMode() {
     })
 
     // 세로선을 그립니다.
-    const verticalLine = new fabric.Line([newX, 0, newX, canvasSize.vertical], {
+    const verticalLine = new fabric.Line([newX, 0, newX, 2 * canvas.height], {
       stroke: 'red',
       strokeWidth: 1,
       selectable: false,
@@ -1138,11 +1139,17 @@ export function useMode() {
   }
 
   const zoomIn = () => {
+    if (canvas.getZoom() + 0.1 > 1.6) {
+      return
+    }
     canvas?.setZoom(canvas.getZoom() + 0.1)
     setZoom(Math.round(zoom + 10))
   }
 
   const zoomOut = () => {
+    if (canvas.getZoom() - 0.1 < 0.5) {
+      return
+    }
     canvas?.setZoom(canvas.getZoom() - 0.1)
     setZoom(Math.ceil(zoom - 10))
   }