diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx
index b43fd559..4e0a14c0 100644
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/src/components/floor-plan/CanvasFrame.jsx
@@ -36,28 +36,31 @@ 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()
+  useEffect(() => {
+    async function initRoofMaterial() {
+      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 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)
+    }
+    initRoofMaterial()
   }, [])
   const canvasRef = useRef(null)
   const { canvas } = useCanvas('canvas')