diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx
index 5aa0332e..0b806d0c 100644
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/src/components/floor-plan/CanvasFrame.jsx
@@ -36,34 +36,6 @@ import { hotkeyStore } from '@/store/hotkeyAtom'
 import { usePopup } from '@/hooks/usePopup'
 
 export default function CanvasFrame() {
-  const [roofMaterials, setRoofMaterials] = useRecoilState(roofMaterialsAtom)
-  const { getRoofMaterialList } = useMasterController()
-  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)
-    }
-    initRoofMaterial()
-  }, [])
   const canvasRef = useRef(null)
   const { canvas } = useCanvas('canvas')
   const { canvasLoadInit, gridInit } = useCanvasConfigInitialize()
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
index 7c71788a..ef7dfa6c 100644
--- a/src/components/header/Header.jsx
+++ b/src/components/header/Header.jsx
@@ -22,6 +22,9 @@ import { QcastContext } from '@/app/QcastProvider'
 import { usePopup } from '@/hooks/usePopup'
 import { commonCodeState } from '@/store/commonCodeAtom'
 import { isObjectNotEmpty } from '@/util/common-utils'
+import { roofMaterialsAtom } from '@/store/settingAtom'
+import { useMasterController } from '@/hooks/common/useMasterController'
+import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
 
 export const ToggleonMouse = (e, act, target) => {
   const listWrap = e.target.closest(target)
@@ -72,6 +75,38 @@ export default function Header(props) {
   const [commonCode, setCommonCode] = useRecoilState(commonCodeState)
   const { promiseGet } = useAxios()
 
+  /**
+   * 지붕재 목록 Header에서 조회
+   */
+  const [roofMaterials, setRoofMaterials] = useRecoilState(roofMaterialsAtom)
+  const { getRoofMaterialList } = useMasterController()
+  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)
+    }
+    initRoofMaterial()
+  }, [])
+
   useEffect(() => {
     const getCommonCode = async () => {
       await promiseGet({ url: '/api/commcode/qc-comm-code' }).then((res) => {