모듈 회로 구성을 벗어나는 경우 moduleCompass 초기화

src/hooks/common/useCanvasMenu.js

@@ -1,8 +1,30 @@
 import { menuNumberState } from '@/store/menuAtom'
-import { useRecoilState } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { useEffect } from 'react'
+import { canvasState } from '@/store/canvasAtom'
+import { usePolygon } from '@/hooks/usePolygon'
+import { POLYGON_TYPE } from '@/common/common'
 
 export const useCanvasMenu = () => {
   const [menuNumber, setMenuNumber] = useRecoilState(menuNumberState)
+  const canvas = useRecoilValue(canvasState)
+  const { drawDirectionArrow } = usePolygon()
+
+  useEffect(() => {
+    /*
+     * 모듈,회로 구성을 벗어나면 방향 표시 초기화 필요
+     * */
+    if (!canvas) return
+    if (![4, 5].includes(menuNumber)) {
+      canvas
+        .getObjects()
+        .filter((obj) => obj.name === POLYGON_TYPE.ROOF)
+        .forEach((obj) => {
+          obj.set('moduleCompass', null)
+          drawDirectionArrow(obj)
+        })
+    }
+  }, [menuNumber])
 
   return {
     menuNumber,