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