diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
index d57c99c2..a439481c 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
@@ -30,7 +30,8 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   const globalLocale = useRecoilValue(globalLocaleStore)
   const { basicSetting, setBasicSettings, fetchBasicSettings, basicSettingSave, addedRoofs, setAddedRoofs } = useCanvasSetting()
   const { findCommonCode } = useCommonCode()
-  const [raftCodes, setRaftCodes] = useState([]) //서까래 정보
+  const [raftCodes, setRaftCodes] = useState([]) // 서까래 정보
+  const [currentRoof, setCurrentRoof] = useState(addedRoofs[0]) // 현재 선택된 지붕재 정보
 
   const roofRef = {
     roofCd: useRef(null),
@@ -42,70 +43,61 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
 
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
-    fetchBasicSettings()
+    //fetchBasicSettings()
     const raftCodeList = findCommonCode('203800')
     setRaftCodes(raftCodeList)
   }, [])
 
   useEffect(() => {
-    if (addedRoofs.length > 0) {
+    if (currentRoof.roofMatlCd.length > 0) {
       setBasicSettings({
         ...basicSetting,
         roofsData: {
           roofApply: true,
           roofSeq: 0,
-          roofMatlCd: addedRoofs[0].roofMatlCd,
-          roofWidth: addedRoofs[0].width,
-          roofHeight: addedRoofs[0].length,
-          roofHajebichi: addedRoofs[0].hajebichi,
-          roofGap: addedRoofs[0].raft,
-          roofLayout: addedRoofs[0].layout,
+          roofMatlCd: currentRoof.roofMatlCd,
+          roofWidth: currentRoof.width,
+          roofHeight: currentRoof.length,
+          roofHajebichi: currentRoof.hajebichi,
+          roofGap: currentRoof.raft,
+          roofLayout: currentRoof.layout,
         },
       })
     }
-  }, [basicSetting.roofSizeSet, basicSetting.roofAngleSet, addedRoofs])
-
-  const changeInput = (value, e) => {
-    const { name } = e.target
-    setAddedRoofs(addedRoofs.map((roof) => ({
-      ...roof,
-      [name]: Number(value),
-    })))
-  }
+  }, [basicSetting.roofSizeSet, basicSetting.roofAngleSet, currentRoof])
 
   // Function to update the roofType and corresponding values
   const handleRoofTypeChange = (value) => {
     const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value)
-    setAddedRoofs([selectedRoofMaterial])
+    setCurrentRoof({...selectedRoofMaterial, index: 0})
+  }
+
+  const changeInput = (value, e) => {
+    const { name } = e.target
+    setCurrentRoof({...currentRoof,  [name]: Number(value)})
   }
 
   const handleRafterChange = (value) => {
-    setAddedRoofs(addedRoofs.map((roof) => ({
-      ...roof,
-      raft: value,
-    })))
+    setCurrentRoof({...currentRoof,  raft: value})
   }
 
   const handleRoofLayoutChange = (value) => {
-    setAddedRoofs(addedRoofs.map((roof) => ({
-      ...roof,
-      layout: value,
-    })))
+    setCurrentRoof({...currentRoof,  layout: value})
   }
 
   const handleSaveBtn = () => {
     const roofInfo = { 
-      ...addedRoofs,
+      ...currentRoof,
       roofCd: roofRef.roofCd.current?.value,
       width: roofRef.width.current?.value,
       length: roofRef.length.current?.value,
       hajebichi: roofRef.hajebichi.current?.value,
-      //raft: roofRef.rafter.current?.value,
+      raft: roofRef.rafter.current?.value,
       selected: true,
-      layout: addedRoofs[0].layout,
+      layout: currentRoof.layout,
       index: 0,
     }
-
+    
     const newAddedRoofs = [...addedRoofs]
     if (addedRoofs.length === 1) {
       newAddedRoofs[0] = { ...roofInfo }
@@ -130,12 +122,12 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
       roofsData: {
         roofApply: true,
         roofSeq: 0,
-        roofMatlCd: addedRoofs[0].roofMatlCd,
-        roofWidth: addedRoofs[0].width,
-        roofHeight: addedRoofs[0].length,
-        roofHajebichi: addedRoofs[0].hajebichi,
-        roofGap: addedRoofs[0].raft,
-        roofLayout: addedRoofs[0].layout,
+        roofMatlCd: currentRoof.roofMatlCd,
+        roofWidth: currentRoof.width,
+        roofHeight: currentRoof.length,
+        roofHajebichi: currentRoof.hajebichi,
+        roofGap: currentRoof.raft,
+        roofLayout: currentRoof.layout,
       },
     })
 
@@ -248,14 +240,14 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                     <div className="placement-option">
                       <div className="grid-select no-flx" style={{ width: '171px' }}>
                         <QSelectBox
-                          title={basicSetting.roofSizeSet == 3 ? getMessage('modal.placement.initial.setting.size.none.pitch') : addedRoofs[0]?.roofMatlNm}
+                          title={basicSetting.roofSizeSet == 3 ? getMessage('modal.placement.initial.setting.size.none.pitch') : currentRoof.roofMatlNm}
                           ref={roofRef.roofCd}
                           options={roofMaterials.map((roof, index) => {
                             return { ...roof, name: globalLocale === 'ko' ? roof.roofMatlNm : roof.roofMatlNmJp }
                           })}
                           //value={roofMaterials.find((r) => r.roofMatlCd === basicSetting.roofs[0]?.roofMatlCd)}
                           //title={basicSetting.roofs[0]?.roofMatlNm}
-                          value={basicSetting.roofSizeSet == 3 ? null : addedRoofs[0]?.roofMatlCd}                          
+                          value={basicSetting.roofSizeSet == 3 ? null : currentRoof.roofMatlCd}                          
                           onChange={(e) => handleRoofTypeChange(e.roofMatlCd)}
                           //sourceKey="id"
                           //targetKey="id"
@@ -280,7 +272,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           })}
                         </select> */}
                       </div>
-                      {basicSetting && ['R', 'C'].includes(addedRoofs[0]?.widAuth) && (
+                      {basicSetting && ['R', 'C'].includes(currentRoof.widAuth) && (
                         <div className="flex-ment">
                           <span>W</span>
                           <div className="input-grid" style={{ width: '84px' }}>
@@ -289,9 +281,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                               className="input-origin block"
                               name={`width`}
                               ref={roofRef.width}
-                              value={parseInt(addedRoofs[0]?.width)}
+                              value={parseInt(currentRoof.width)}
                               onChange={(e) => onlyNumberInputChange(e, changeInput)}
-                              readOnly={addedRoofs[0]?.widAuth === 'R'}
+                              readOnly={currentRoof.widAuth === 'R'}
                               disabled={basicSetting.roofSizeSet == 3}
                             />
                           </div>
@@ -305,7 +297,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                             </div> */}
                         </div>
                       )}
-                      {basicSetting && ['R', 'C'].includes(addedRoofs[0]?.lenAuth) && (
+                      {basicSetting && ['R', 'C'].includes(currentRoof.lenAuth) && (
                         <div className="flex-ment">
                           <span>L</span>
                           <div className="input-grid" style={{ width: '84px' }}>
@@ -314,9 +306,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                               className="input-origin block"
                               name={`length`}
                               ref={roofRef.length}
-                              value={parseInt(addedRoofs[0]?.length)}
+                              value={parseInt(currentRoof.length)}
                               onChange={(e) => onlyNumberInputChange(e, changeInput)}
-                              readOnly={addedRoofs[0]?.lenAuth === 'R'}
+                              readOnly={currentRoof.lenAuth === 'R'}
                               disabled={basicSetting.roofSizeSet == 3}
                             />
                           </div>
@@ -330,18 +322,19 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           </div> */}
                         </div>
                       )}
-                      {basicSetting && ['C', 'R'].includes(addedRoofs[0]?.raftAuth) && (
+                      {basicSetting && ['C', 'R'].includes(currentRoof.raftAuth) && (
                         <div className="flex-ment">
                           <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
                           {raftCodes.length > 0 && (
                           <div className="select-wrap" style={{ width: '160px' }}>
                             <QSelectBox
-                              options={raftCodes}                              
-                              title={raftCodes.find((r) => r.clCode === (addedRoofs[0]?.raft === undefined ? addedRoofs[0]?.raftBaseCd : addedRoofs[0]?.raft))?.clCodeNm}
-                              value={addedRoofs[0]?.raft === undefined ? addedRoofs[0]?.raftBaseCd : addedRoofs[0]?.raft}                              
+                              options={raftCodes}
+                              ref={roofRef.rafter}
+                              title={raftCodes.find((r) => r.clCode === (currentRoof.raft === undefined ? currentRoof.raftBaseCd : currentRoof.raft)).clCodeNm}
+                              value={currentRoof.raft === undefined ? currentRoof.raftBaseCd : currentRoof.raft}                              
                               onChange={(e) => handleRafterChange(e.clCode)}
                               sourceKey="clCode"
-                              targetKey={addedRoofs[0]?.raft ? 'raft' : 'raftBaseCd'}
+                              targetKey={currentRoof.raft ? 'raft' : 'raftBaseCd'}
                               showKey="clCodeNm"
                               disabled={basicSetting.roofSizeSet == 3}
                             />
@@ -358,7 +351,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           )}
                         </div>
                       )}
-                      {basicSetting && ['C', 'R'].includes(addedRoofs[0]?.roofPchAuth) && (
+                      {basicSetting && ['C', 'R'].includes(currentRoof.roofPchAuth) && (
                         <div className="flex-ment">
                           <span>{getMessage('hajebichi')}</span>
                           <div className="input-grid" style={{ width: '84px' }}>
@@ -367,9 +360,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                               className="input-origin block"
                               name={`hajebichi`}
                               ref={roofRef.hajebichi}
-                              value={parseInt(addedRoofs[0]?.hajebichi)}
+                              value={parseInt(currentRoof.hajebichi)}
                               onChange={(e) => onlyNumberInputChange(e, changeInput)}
-                              readOnly={addedRoofs[0]?.roofPchAuth === 'R'}
+                              readOnly={currentRoof.roofPchAuth === 'R'}
                               disabled={basicSetting.roofSizeSet == 3}
                             />
                           </div>
@@ -379,7 +372,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                     <div className="placement-roof-btn-wrap">
                       <div className="icon-btn-wrap mt10">
                         <button
-                          className={`${addedRoofs[0]?.layout === ROOF_MATERIAL_LAYOUT.PARALLEL && 'act'}`}
+                          className={`${currentRoof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL && 'act'}`}
                           value={ROOF_MATERIAL_LAYOUT.PARALLEL}
                           onClick={() => handleRoofLayoutChange(ROOF_MATERIAL_LAYOUT.PARALLEL)}
                         >
@@ -387,7 +380,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           <i className="allocation01"></i>
                         </button>
                         <button
-                          className={`${addedRoofs[0]?.layout === ROOF_MATERIAL_LAYOUT.STAIRS && 'act'}`}
+                          className={`${currentRoof.layout === ROOF_MATERIAL_LAYOUT.STAIRS && 'act'}`}
                           value={ROOF_MATERIAL_LAYOUT.STAIRS}
                           onClick={() => handleRoofLayoutChange(ROOF_MATERIAL_LAYOUT.STAIRS)}                        
                         >
diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js
index 965eca6f..05ed5cde 100644
--- a/src/hooks/option/useCanvasSetting.js
+++ b/src/hooks/option/useCanvasSetting.js
@@ -111,7 +111,7 @@ export function useCanvasSetting() {
     if (roofMaterials.length !== 0) {
       return
     }
-    addRoofMaterials()
+    addRoofMaterials()    
   }, [])
 
   //지붕재 초기세팅
@@ -145,6 +145,10 @@ export function useCanvasSetting() {
     setBasicSettings({ ...basicSetting, selectedRoofMaterial: selectedRoofMaterial })
   }
 
+  useEffect(() => {
+    fetchBasicSettings()
+  }, [roofMaterials])
+
   useEffect(() => {
     if (!canvas) {
       return
@@ -255,9 +259,7 @@ export function useCanvasSetting() {
   const fetchBasicSettings = async () => {
     try {
       await get({ url: `/api/canvas-management/canvas-basic-settings/by-object/${correntObjectNo}` }).then((res) => {
-        console.log('fetchBasicSettings res ', res)
-        //if (res.length == 0) return
-
+        
         let roofsRow = {}
         let roofsArray = {}
 
@@ -309,14 +311,12 @@ export function useCanvasSetting() {
           roofs: roofsArray, // 만들어진 roofs 배열
         }
 
-        console.log('fetchBasicSettings patternData', patternData)
+        //console.log('fetchBasicSettings patternData', patternData)
 
         // 데이터 설정
-        //setBasicSettings({ ...basicSetting, roofSizeSet: roofsRow[0].roofSizeSet, roofAngleSet: roofsRow[0].roofAngleSet, roofsData: roofsArray})
         const addRoofs = []
-        roofMaterials.map((material) => {
-          if (material.id === roofsArray[0].roofMatlCd) {
-            //setRoofMaterials({ ...roofMaterials, layout: roofsArray[0].roofLayout })
+        roofMaterials?.map((material) => {
+          if (material.roofMatlCd === roofsArray[0].roofMatlCd) {
             addRoofs.push({ ...material, selected: true
                                       , index: 0                                     
                                       , width: roofsArray[0].roofWidth 
@@ -325,7 +325,7 @@ export function useCanvasSetting() {
                                       , raft: roofsArray[0].roofGap
                                       , layout: roofsArray[0].roofLayout
                                       })
-
+                                     
             setAddedRoofs(addRoofs)
             setBasicSettings({ ...basicSetting, roofMaterials: addRoofs[0]
                                               , roofSizeSet: roofsRow[0].roofSizeSet
@@ -334,7 +334,6 @@ export function useCanvasSetting() {
                                               , selectedRoofMaterial: addRoofs[0] })
           }
         })
-      
       })
     } catch (error) {
       console.error('Data fetching error:', error)
@@ -375,6 +374,7 @@ export function useCanvasSetting() {
 
       //Recoil 설정
       setCanvasSetting({ ...basicSetting })
+      fetchBasicSettings()
     } catch (error) {
       swalFire({ text: getMessage(res.returnMessage), icon: 'error' })
     }