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) { - {/* - */} + { + + } 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)) }