캔버스 축소 확대 시 line 짧아지는 현상 수정

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>

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))
   }