getRoofMaterialList 한번만 호출하도록 수정

src/components/floor-plan/CanvasFrame.jsx

@@ -12,7 +12,7 @@ import { usePlan } from '@/hooks/usePlan'
 import { useContextMenu } from '@/hooks/useContextMenu'
 import { useCanvasConfigInitialize } from '@/hooks/common/useCanvasConfigInitialize'
 import { currentMenuState } from '@/store/canvasAtom'
-import { totalDisplaySelector } from '@/store/settingAtom'
+import { roofMaterialsAtom, totalDisplaySelector } from '@/store/settingAtom'
 import { MENU, POLYGON_TYPE } from '@/common/common'
 import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
 import { QcastContext } from '@/app/QcastProvider'
@@ -30,8 +30,35 @@ import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 import { useEvent } from '@/hooks/useEvent'
 import { compasDegAtom } from '@/store/orientationAtom'
+import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
+import { useMasterController } from '@/hooks/common/useMasterController'
 
 export default function CanvasFrame() {
+  const [roofMaterials, setRoofMaterials] = useRecoilState(roofMaterialsAtom)
+  const { getRoofMaterialList } = useMasterController()
+  useEffect(async () => {
+    if (roofMaterials.length !== 0) {
+      return
+    }
+    const { data } = await getRoofMaterialList()
+
+    const roofLists = data.map((item, idx) => ({
+      ...item,
+      id: item.roofMatlCd,
+      name: item.roofMatlNm,
+      selected: idx === 0,
+      index: idx,
+      nameJp: item.roofMatlNmJp,
+      length: item.lenBase && parseInt(item.lenBase),
+      width: item.widBase && parseInt(item.widBase),
+      raft: item.raftBase && parseInt(item.raftBase),
+      layout: ['ROOF_ID_SLATE', 'ROOF_ID_SINGLE'].includes(item.roofMatlCd) ? ROOF_MATERIAL_LAYOUT.STAIRS : ROOF_MATERIAL_LAYOUT.PARALLEL,
+      hajebichi: item.roofPchBase && parseInt(item.roofPchBase),
+      pitch: item.pitch ? parseInt(item.pitch) : 4,
+      angle: item.angle ? parseInt(item.angle) : 21.8,
+    }))
+    setRoofMaterials(roofLists)
+  }, [])
   const canvasRef = useRef(null)
   const { canvas } = useCanvas('canvas')
   const { canvasLoadInit, gridInit } = useCanvasConfigInitialize()

src/hooks/option/useCanvasSetting.js

@@ -148,7 +148,7 @@ export function useCanvasSetting(executeEffect = true) {
     }
 
     /** 초 1회만 실행하도록 처리 */
-    addRoofMaterials()
+    //addRoofMaterials()
   }, [])
 
   /**