src/hooks/roofcover/useAuxiliaryDrawing.js

@@ -75,13 +75,14 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
   }, [arrow2])
 
   useEffect(() => {
-    typeRef.current = type
-    clear()
     if (type === null) {
       initEvent()
       return
     }
+
     initEvent()
+    typeRef.current = type
+    clear()
     addCanvasMouseEventListener('mouse:move', mouseMove)
     addCanvasMouseEventListener('mouse:down', mouseDown)
     addDocumentEventListener('keydown', document, keydown[type])
@@ -96,6 +97,10 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
       return
     }
 
+    if (type === null) {
+      return
+    }
+
     // 지붕의 각 꼭지점을 흡착점으로 설정
     const roofsPoints = roofs.map((roof) => roof.points).flat()
     roofAdsorptionPoints.current = [...roofsPoints]
@@ -113,6 +118,9 @@ export function useAuxiliaryDrawing(id, isUseEffect = true) {
   }, [])
 
   useEffect(() => {
+    if (type === null) {
+      return
+    }
     const roofs = canvas?.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF)
     if (roofs.length === 0) {
       return