src/components/floor-plan/modal/auxiliary/AuxiliaryDrawing.jsx

@@ -133,6 +133,11 @@ export default function AuxiliaryDrawing({ id, pos = { x: 50, y: 230 } }) {
   }
 
   const onClickButton = (button) => {
+    if (buttonAct === button.id || type === button.type) {
+      setButtonAct(null)
+      setType(null)
+      return
+    }
     setButtonAct(button.id)
     setType(button.type)
   }

src/hooks/roofcover/useAuxiliaryDrawing.js

@@ -77,6 +77,13 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
   useEffect(() => {
     typeRef.current = type
     clear()
+    if (type === null) {
+      initEvent()
+      return
+    }
+    initEvent()
+    addCanvasMouseEventListener('mouse:move', mouseMove)
+    addCanvasMouseEventListener('mouse:down', mouseDown)
     addDocumentEventListener('keydown', document, keydown[type])
   }, [type])
 
@@ -133,7 +140,7 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
     // roofs의 innerLines에서 object와 같은 것을 찾아서 제거
     const roofs = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
     roofs.forEach((roof) => {
-      roof.innerLines = roof.innerLines.filter(inner => inner !== object)
+      roof.innerLines = roof.innerLines.filter((inner) => inner !== object)
     })
 
     canvas.remove(object)