diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
index db98cdc5..d57c99c2 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
@@ -48,74 +48,61 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   }, [])
 
   useEffect(() => {
-    if (basicSetting.roofs.length > 0) {
+    if (addedRoofs.length > 0) {
       setBasicSettings({
         ...basicSetting,
         roofsData: {
           roofApply: true,
-          roofSeq: 1,
-          roofMatlCd: basicSetting.roofs[0].roofMatlCd,
-          roofWidth: basicSetting.roofs[0].width,
-          roofHeight: basicSetting.roofs[0].length,
-          roofHajebichi: basicSetting.roofs[0].hajebichi,
-          roofGap: basicSetting.roofs[0].raft,
-          roofLayout: basicSetting.roofs[0].layout,
+          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,
         },
       })
     }
-  }, [basicSetting.roofs, basicSetting.roofSizeSet, basicSetting.roofAngleSet])
+  }, [basicSetting.roofSizeSet, basicSetting.roofAngleSet, addedRoofs])
 
   const changeInput = (value, e) => {
     const { name } = e.target
-    console.log('🚀 ~ changeInput ~ value name :', value, name)
-    setBasicSettings({
-      ...basicSetting,
-      roofs: basicSetting.roofs.map((roof) => ({
-        ...roof,
-        [name]: Number(value),
-      })),
-    });
+    setAddedRoofs(addedRoofs.map((roof) => ({
+      ...roof,
+      [name]: Number(value),
+    })))
   }
 
   // Function to update the roofType and corresponding values
   const handleRoofTypeChange = (value) => {
     const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value)
-    setBasicSettings({
-      ...basicSetting,
-      roofs: [selectedRoofMaterial], // 선택된 데이터로 roofs 배열 초기화
-    });
+    setAddedRoofs([selectedRoofMaterial])
   }
 
   const handleRafterChange = (value) => {
-    setBasicSettings({
-      ...basicSetting,
-      roofs: basicSetting.roofs.map((roof) => ({
-        ...roof,
-        raft: value,
-      })),
-    });
+    setAddedRoofs(addedRoofs.map((roof) => ({
+      ...roof,
+      raft: value,
+    })))
   }
 
   const handleRoofLayoutChange = (value) => {
-    setBasicSettings({
-      ...basicSetting,
-      roofs: basicSetting.roofs.map((roof) => ({
-        ...roof,
-        layout: value,
-      })),
-    });
+    setAddedRoofs(addedRoofs.map((roof) => ({
+      ...roof,
+      layout: value,
+    })))
   }
 
   const handleSaveBtn = () => {
     const roofInfo = { 
-      ...basicSetting.roofs,
+      ...addedRoofs,
       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,
       selected: true,
-      layout: basicSetting.roofs[0].layout,
+      layout: addedRoofs[0].layout,
       index: 0,
     }
 
@@ -139,16 +126,16 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
         // 선택된 지붕재 정보
         ...roofInfo,
       },
-      roofs: addedRoofs,
+      //roofs: addedRoofs,
       roofsData: {
         roofApply: true,
-        roofSeq: 1,
-        roofMatlCd: basicSetting.roofs[0].roofMatlCd,
-        roofWidth: basicSetting.roofs[0].width,
-        roofHeight: basicSetting.roofs[0].length,
-        roofHajebichi: basicSetting.roofs[0].hajebichi,
-        roofGap: basicSetting.roofs[0].raft,
-        roofLayout: basicSetting.roofs[0].layout,
+        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,
       },
     })
 
@@ -261,14 +248,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') : basicSetting.roofs[0]?.roofMatlNm}
+                          title={basicSetting.roofSizeSet == 3 ? getMessage('modal.placement.initial.setting.size.none.pitch') : addedRoofs[0]?.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 : basicSetting.roofs[0]?.roofMatlCd}                          
+                          value={basicSetting.roofSizeSet == 3 ? null : addedRoofs[0]?.roofMatlCd}                          
                           onChange={(e) => handleRoofTypeChange(e.roofMatlCd)}
                           //sourceKey="id"
                           //targetKey="id"
@@ -293,7 +280,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           })}
                         </select> */}
                       </div>
-                      {basicSetting && ['R', 'C'].includes(basicSetting.roofs[0]?.widAuth) && (
+                      {basicSetting && ['R', 'C'].includes(addedRoofs[0]?.widAuth) && (
                         <div className="flex-ment">
                           <span>W</span>
                           <div className="input-grid" style={{ width: '84px' }}>
@@ -302,9 +289,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                               className="input-origin block"
                               name={`width`}
                               ref={roofRef.width}
-                              value={parseInt(basicSetting.roofs[0]?.width)}
+                              value={parseInt(addedRoofs[0]?.width)}
                               onChange={(e) => onlyNumberInputChange(e, changeInput)}
-                              readOnly={basicSetting.roofs[0]?.widAuth === 'R'}
+                              readOnly={addedRoofs[0]?.widAuth === 'R'}
                               disabled={basicSetting.roofSizeSet == 3}
                             />
                           </div>
@@ -318,7 +305,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                             </div> */}
                         </div>
                       )}
-                      {basicSetting && ['R', 'C'].includes(basicSetting.roofs[0]?.lenAuth) && (
+                      {basicSetting && ['R', 'C'].includes(addedRoofs[0]?.lenAuth) && (
                         <div className="flex-ment">
                           <span>L</span>
                           <div className="input-grid" style={{ width: '84px' }}>
@@ -327,9 +314,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                               className="input-origin block"
                               name={`length`}
                               ref={roofRef.length}
-                              value={parseInt(basicSetting.roofs[0]?.length)}
+                              value={parseInt(addedRoofs[0]?.length)}
                               onChange={(e) => onlyNumberInputChange(e, changeInput)}
-                              readOnly={basicSetting.roofs[0]?.lenAuth === 'R'}
+                              readOnly={addedRoofs[0]?.lenAuth === 'R'}
                               disabled={basicSetting.roofSizeSet == 3}
                             />
                           </div>
@@ -343,18 +330,18 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           </div> */}
                         </div>
                       )}
-                      {basicSetting && ['C', 'R'].includes(basicSetting.roofs[0]?.raftAuth) && (
+                      {basicSetting && ['C', 'R'].includes(addedRoofs[0]?.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 === (basicSetting.roofs[0]?.raft === undefined ? basicSetting.roofs[0]?.raftBaseCd : basicSetting.roofs[0]?.raft))?.clCodeNm}
-                              value={basicSetting.roofs[0]?.raft === undefined ? basicSetting.roofs[0]?.raftBaseCd : basicSetting.roofs[0]?.raft}                              
+                              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}                              
                               onChange={(e) => handleRafterChange(e.clCode)}
                               sourceKey="clCode"
-                              targetKey={basicSetting.roofs[0]?.raft ? 'raft' : 'raftBaseCd'}
+                              targetKey={addedRoofs[0]?.raft ? 'raft' : 'raftBaseCd'}
                               showKey="clCodeNm"
                               disabled={basicSetting.roofSizeSet == 3}
                             />
@@ -371,7 +358,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           )}
                         </div>
                       )}
-                      {basicSetting && ['C', 'R'].includes(basicSetting.roofs[0]?.roofPchAuth) && (
+                      {basicSetting && ['C', 'R'].includes(addedRoofs[0]?.roofPchAuth) && (
                         <div className="flex-ment">
                           <span>{getMessage('hajebichi')}</span>
                           <div className="input-grid" style={{ width: '84px' }}>
@@ -380,9 +367,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                               className="input-origin block"
                               name={`hajebichi`}
                               ref={roofRef.hajebichi}
-                              value={parseInt(basicSetting.roofs[0]?.hajebichi)}
+                              value={parseInt(addedRoofs[0]?.hajebichi)}
                               onChange={(e) => onlyNumberInputChange(e, changeInput)}
-                              readOnly={basicSetting.roofs[0]?.roofPchAuth === 'R'}
+                              readOnly={addedRoofs[0]?.roofPchAuth === 'R'}
                               disabled={basicSetting.roofSizeSet == 3}
                             />
                           </div>
@@ -392,7 +379,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={`${basicSetting.roofs[0]?.layout === ROOF_MATERIAL_LAYOUT.PARALLEL && 'act'}`}
+                          className={`${addedRoofs[0]?.layout === ROOF_MATERIAL_LAYOUT.PARALLEL && 'act'}`}
                           value={ROOF_MATERIAL_LAYOUT.PARALLEL}
                           onClick={() => handleRoofLayoutChange(ROOF_MATERIAL_LAYOUT.PARALLEL)}
                         >
@@ -400,7 +387,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           <i className="allocation01"></i>
                         </button>
                         <button
-                          className={`${basicSetting.roofs[0]?.layout === ROOF_MATERIAL_LAYOUT.STAIRS && 'act'}`}
+                          className={`${addedRoofs[0]?.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 7362fe03..965eca6f 100644
--- a/src/hooks/option/useCanvasSetting.js
+++ b/src/hooks/option/useCanvasSetting.js
@@ -142,7 +142,7 @@ export function useCanvasSetting() {
       newAddedRoofs.push({ ...selectedRoofMaterial, selected: true, index: 0 })
       setAddedRoofs(newAddedRoofs)
     }
-    setBasicSettings({ ...basicSetting, selectedRoofMaterial: selectedRoofMaterial, roofMaterials: selectedRoofMaterial })
+    setBasicSettings({ ...basicSetting, selectedRoofMaterial: selectedRoofMaterial })
   }
 
   useEffect(() => {
@@ -317,19 +317,21 @@ export function useCanvasSetting() {
         roofMaterials.map((material) => {
           if (material.id === roofsArray[0].roofMatlCd) {
             //setRoofMaterials({ ...roofMaterials, layout: roofsArray[0].roofLayout })
-            addRoofs.push({ ...material, selected: true                                     
+            addRoofs.push({ ...material, selected: true
+                                      , index: 0                                     
                                       , width: roofsArray[0].roofWidth 
                                       , length: roofsArray[0].roofHeight
                                       , hajebichi: roofsArray[0].roofHajebichi
                                       , raft: roofsArray[0].roofGap
                                       , layout: roofsArray[0].roofLayout
                                       })
-            setBasicSettings({ ...basicSetting, roofMaterials: material
-                                              , roofs: addRoofs
+
+            setAddedRoofs(addRoofs)
+            setBasicSettings({ ...basicSetting, roofMaterials: addRoofs[0]
                                               , roofSizeSet: roofsRow[0].roofSizeSet
                                               , roofAngleSet: roofsRow[0].roofAngleSet
                                               , roofsData: roofsArray
-                                              , selectedRoofMaterial: material })
+                                              , selectedRoofMaterial: addRoofs[0] })
           }
         })
       
@@ -354,13 +356,13 @@ export function useCanvasSetting() {
         roofMaterialsAddList: [
           {
             roofApply: true,
-            roofSeq: 1,
+            roofSeq: 0,
             roofMatlCd: basicSetting.roofsData.roofMatlCd === null || basicSetting.roofsData.roofMatlCd === undefined ? 'ROOF_ID_WA_53A' : basicSetting.roofsData.roofMatlCd,
             roofWidth: basicSetting.roofsData.roofWidth === null || basicSetting.roofsData.roofWidth === undefined ? 0 : basicSetting.roofsData.roofWidth,
             roofHeight: basicSetting.roofsData.roofHeight === null || basicSetting.roofsData.roofHeight === undefined ? 0 : basicSetting.roofsData.roofHeight,
             roofHajebichi: basicSetting.roofsData.roofHajebichi === null || basicSetting.roofsData.roofHajebichi === undefined ? 0 : basicSetting.roofsData.roofHajebichi,
             roofGap: basicSetting.roofsData.roofGap === null || basicSetting.roofsData.roofGap === undefined ? 'HEI_455' : basicSetting.roofsData.roofGap,
-            roofLayout: basicSetting.roofsData.roofLayout,
+            roofLayout: basicSetting.roofsData.roofLayout === null || basicSetting.roofsData.roofLayout === undefined ? 'P' : basicSetting.roofsData.roofLayout,
           },
         ],
       }