diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
index 9c2ade43..c508ad37 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
@@ -263,7 +263,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                             <select className="select-light dark" name="roofGap" ref={roofRef.rafter}>
                               {raftCodes.map((raft, index) => {
                                 return (
-                                  <option key={index} value={raft.clCode}>
+                                  <option key={index} value={raft.clCode} selected={currentRoofMaterial.raft === raft.clCode}>
                                     {raft.clCodeNm}
                                   </option>
                                 )
diff --git a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
index 17201bda..f3c789c1 100644
--- a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
+++ b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
@@ -25,16 +25,16 @@ export default function RoofAllocationSetting(props) {
     roofList,
     handleDefaultRoofMaterial,
     handleChangeRoofMaterial,
+    handleChangeRaft,
+    handleChangeLayout,
   } = useRoofAllocationSetting(id)
-  const { fetchBasicSettings } = useCanvasSetting()
   const { findCommonCode } = useCommonCode()
   const [raftCodes, setRaftCodes] = useState([])
   useEffect(() => {
-    fetchBasicSettings()
     const raftCodeList = findCommonCode('203800')
-    console.log('🚀 ~ useEffect ~ raftCodeList:', raftCodeList)
-    setRaftCodes(raftCodeList)
+    setRaftCodes(raftCodeList.map((raft) => ({ ...raft, value: raft.clCode, name: raft.clCodeNm })))
   }, [])
+
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap ml mount`}>
@@ -125,10 +125,13 @@ export default function RoofAllocationSetting(props) {
                         <div className="flex-ment">
                           <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
                           <div className="grid-select" style={{ width: '84px' }}>
-                            <QSelectBox
-                              options={raftCodes.map((raft) => ({ name: raft.clCodeNm, value: raft.clCode }))}
-                              value={raftCodes.find((r) => r.id === roof.id)}
-                            />
+                            {raftCodes.length > 0 && (
+                              <QSelectBox
+                                options={raftCodes.map((raft) => ({ name: raft.clCodeNm, value: raft.clCode }))}
+                                onChange={(e) => handleChangeRaft(e, index)}
+                                value={raftCodes.find((r) => r.value === roof.raft)}
+                              />
+                            )}
                             {/* <select className="select-light dark" name="roofGap" ref={roofRef.rafter}>
                               {raftCodes.map((raft, index) => {
                                 return (
@@ -157,11 +160,21 @@ export default function RoofAllocationSetting(props) {
                     </div>
                     <div className="block-box">
                       <div className="icon-btn-wrap">
-                        <button className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''}>
+                        <button
+                          className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''}
+                          onClick={() => {
+                            handleChangeLayout(ROOF_MATERIAL_LAYOUT.PARALLEL, index)
+                          }}
+                        >
                           {getMessage('modal.roof.alloc.select.parallel')}
                           <i className="allocation01"></i>
                         </button>
-                        <button className={roof.layout === ROOF_MATERIAL_LAYOUT.STAIRS ? 'act' : ''}>
+                        <button
+                          className={roof.layout === ROOF_MATERIAL_LAYOUT.STAIRS ? 'act' : ''}
+                          onClick={() => {
+                            handleChangeLayout(ROOF_MATERIAL_LAYOUT.STAIRS, index)
+                          }}
+                        >
                           {getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
                         </button>
                       </div>
diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js
index 26b78b51..59cb4eef 100644
--- a/src/hooks/option/useCanvasSetting.js
+++ b/src/hooks/option/useCanvasSetting.js
@@ -125,6 +125,9 @@ export function useCanvasSetting() {
 
   //지붕재 초기세팅
   const addRoofMaterials = async () => {
+    if (roofMaterials.length !== 0) {
+      return
+    }
     const { data } = await getRoofMaterialList()
     const roofLists = data.map((item, idx) => ({
       ...item,
diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js
index ff20c0cb..d2215131 100644
--- a/src/hooks/roofcover/useRoofAllocationSetting.js
+++ b/src/hooks/roofcover/useRoofAllocationSetting.js
@@ -1,6 +1,6 @@
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { canvasState, currentMenuState, currentObjectState } from '@/store/canvasAtom'
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 import { useSwal } from '@/hooks/useSwal'
 import { usePolygon } from '@/hooks/usePolygon'
 import { basicSettingState, roofDisplaySelector, roofMaterialsSelector, selectedRoofMaterialSelector } from '@/store/settingAtom'
@@ -30,15 +30,12 @@ export function useRoofAllocationSetting(id) {
   const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
   const [basicSetting, setBasicSetting] = useRecoilState(basicSettingState)
   const [currentRoofMaterial, setCurrentRoofMaterial] = useState(roofMaterials[0]) // 팝업 내 기준 지붕재
-  const [roofList, setRoofList] = useState([])
+  const [roofList, setRoofList] = useState(basicSetting.roofs) // 배치면 초기설정에서 선택한 지붕재 배열
   const [editingLines, setEditingLines] = useState([])
+  const isFirstRef = useRef(0)
 
   const { setSurfaceShapePattern } = useRoofFn()
 
-  useEffect(() => {
-    setRoofList(basicSetting.roofs)
-  }, [basicSetting])
-
   useEffect(() => {
     const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) // roofPolygon.innerLines
 
@@ -211,6 +208,11 @@ export function useRoofAllocationSetting(id) {
 
   // 지붕재 변경
   const handleChangeRoofMaterial = (value, index) => {
+    if (isFirstRef.current === 0) {
+      isFirstRef.current++
+      return
+    }
+
     const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value.id)
     const newRoofList = roofList.map((roof, idx) => {
       if (idx === index) {
@@ -231,6 +233,31 @@ export function useRoofAllocationSetting(id) {
     setRoofList(newRoofList)
   }
 
+  // 서까래 변경
+  const handleChangeRaft = (e, index) => {
+    const raftValue = e.value
+
+    const newRoofList = roofList.map((roof, idx) => {
+      if (idx === index) {
+        return { ...roof, raft: raftValue }
+      }
+      return roof
+    })
+
+    setRoofList(newRoofList)
+  }
+
+  const handleChangeLayout = (layoutValue, index) => {
+    const newRoofList = roofList.map((roof, idx) => {
+      if (idx === index) {
+        return { ...roof, layout: layoutValue }
+      }
+      return roof
+    })
+
+    setRoofList(newRoofList)
+  }
+
   return {
     handleSave,
     onAddRoofMaterial,
@@ -246,5 +273,7 @@ export function useRoofAllocationSetting(id) {
     roofList,
     handleDefaultRoofMaterial,
     handleChangeRoofMaterial,
+    handleChangeRaft,
+    handleChangeLayout,
   }
 }