diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index 017e025e..71fdb0bf 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -123,6 +123,13 @@ export default function CanvasMenu(props) {
     if (pathname !== '/floor-plan') router.push('/floor-plan')
   }
 
+  useEffect(() => {
+    console.log('addedRoofs', addedRoofs)
+  }, [addedRoofs])
+  useEffect(() => {
+    console.log('selectedRoofMaterial', selectedRoofMaterial)
+  }, [selectedRoofMaterial])
+
   const changeSelectedRoofMaterial = (e) => {
     setBasicSetting({ ...basicSetting, selectedRoofMaterial: e })
   }
@@ -307,14 +314,16 @@ export default function CanvasMenu(props) {
                 <button className={`btn02 ${commonUtils.dimension ? 'active' : ''} `} onClick={() => commonFunctions('dimension')}></button>
                 <button className={`btn03 ${commonUtils.distance ? 'active' : ''} `} onClick={() => commonFunctions('distance')}></button>
               </div>
-              {addedRoofs.length > 0 && (
+              {isObjectNotEmpty(selectedRoofMaterial) && addedRoofs.length > 0 && (
                 <div className="select-box">
                   {
                     <QSelectBox
-                      title={selectedRoofMaterial?.roofMatlNm}
                       showKey={'roofMatlNm'}
                       options={addedRoofs}
+                      value={selectedRoofMaterial}
                       onChange={changeSelectedRoofMaterial}
+                      sourceKey={'index'}
+                      targetKey={'index'}
                     />
                   }
                 </div>
diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
index 6e526018..77d49d5e 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
@@ -47,6 +47,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
     fetchBasicSettings()
     const raftCodeList = findCommonCode('203800')
     setRaftCodes(raftCodeList)
+    console.log('raftCodeList', raftCodeList)
   }, [])
 
   useEffect(() => {
@@ -78,9 +79,8 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   }
 
   const handleRafterChange = (value) => {
-    console.log('🚀 ~ handleRafterChange ~ value:', value)
     const selectedRafter = raftCodes.find((raft) => raft.clCode === value)
-    setCurrentRoofMaterial({ ...currentRoofMaterial, raft: selectedRafter })
+    setCurrentRoofMaterial({ ...currentRoofMaterial, raft: selectedRafter.clCode })
   }
 
   const handleSaveBtn = () => {
@@ -93,12 +93,12 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
       // raft: roofRef.rafter.current?.value,
       selected: true,
       layout: roofLayout,
+      index: 0,
     }
 
     const newAddedRoofs = [...addedRoofs]
     if (addedRoofs.length === 1) {
-      newAddedRoofs[0] = roofInfo
-
+      newAddedRoofs[0] = { ...roofInfo }
       setAddedRoofs(newAddedRoofs)
     }
 
@@ -244,6 +244,9 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           })}
                           value={currentRoofMaterial}
                           onChange={(e) => handleRoofTypeChange(e.roofMatlCd)}
+                          sourceKey="id"
+                          targetKey="id"
+                          showKey="name"
                         />
                         {/* <select
                           className="select-light dark"
@@ -312,16 +315,17 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                       {currentRoofMaterial && ['C', 'R'].includes(currentRoofMaterial.raftAuth) && (
                         <div className="flex-ment">
                           <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
-                          <div className="select-wrap" style={{ width: '160px' }}>
-                            <QSelectBox
-                              ref={roofRef.rafter}
-                              options={raftCodes.map((raft, index) => {
-                                return { ...raft, name: globalLocale === 'ko' ? raft.clCodeNm : raft.clCodeNmJp }
-                              })}
-                              value={raftCodes.find((r) => r.clCode === currentRoofMaterial.raftBaseCd)}
-                              onChange={(e) => handleRafterChange(e.clCode)}
-                            />
-                            {/* <select className="select-light dark" name="roofGap" ref={roofRef.rafter}>
+                          {raftCodes.length > 0 && (
+                            <div className="select-wrap" style={{ width: '160px' }}>
+                              <QSelectBox
+                                options={raftCodes}
+                                value={currentRoofMaterial}
+                                onChange={(e) => handleRafterChange(e.clCode)}
+                                sourceKey="clCode"
+                                targetKey={currentRoofMaterial.raft ? 'raft' : 'raftBaseCd'}
+                                showKey="clCodeNm"
+                              />
+                              {/* <select className="select-light dark" name="roofGap" ref={roofRef.rafter}>
                               {raftCodes.map((raft, index) => {
                                 return (
                                   <option key={index} value={raft.clCode} selected={currentRoofMaterial.raft === raft.clCode}>
@@ -330,7 +334,8 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                                 )
                               })}
                             </select> */}
-                          </div>
+                            </div>
+                          )}
                         </div>
                       )}
                       {currentRoofMaterial && ['C', 'R'].includes(currentRoofMaterial.roofPchAuth) && (
diff --git a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
index 3a485b0e..95f99be3 100644
--- a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
+++ b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx
@@ -51,13 +51,15 @@ export default function RoofAllocationSetting(props) {
             <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
             <div className="grid-select">
               <QSelectBox
-                title={roofMaterials[0]?.name}
                 options={roofMaterials}
                 value={roofMaterials[0]}
                 onChange={(e) => {
                   // const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id)
                   setCurrentRoofMaterial(e)
                 }}
+                showKey={'roofMatlNm'}
+                sourceKey={'roofMatlCd'}
+                targetKey={'roofMatlCd'}
               />
             </div>
             <button
@@ -89,7 +91,10 @@ export default function RoofAllocationSetting(props) {
                         <div className="grid-select" style={{ width: '248px' }}>
                           <QSelectBox
                             options={roofMaterials}
-                            title={roofMaterials.find((r) => r.id === roof.id).name}
+                            value={roof}
+                            showKey={'roofMatlNm'}
+                            sourceKey={'roofMatlCd'}
+                            targetKey={'roofMatlCd'}
                             onChange={(e) => handleChangeRoofMaterial(e, index)}
                           />
                         </div>
@@ -123,9 +128,17 @@ export default function RoofAllocationSetting(props) {
                           <div className="block-box">
                             <div className="flex-ment">
                               <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
-                              <div className="grid-select" style={{ width: '160px' }}>
-                                <QSelectBox options={raftCodes} value={raftCodes.find((r) => r.clCode === roof.raftBaseCd)} />
-                              </div>
+                              {raftCodes.length > 0 && (
+                                <div className="grid-select" style={{ width: '160px' }}>
+                                  <QSelectBox
+                                    options={raftCodes}
+                                    value={roof}
+                                    showKey={'clCodeNm'}
+                                    sourceKey={'clCode'}
+                                    targetKey={roof.raft ? 'raft' : 'raftBaseCd'}
+                                  />
+                                </div>
+                              )}
                             </div>
                           </div>
                         )}
diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js
index 0af5a95f..195d0df1 100644
--- a/src/hooks/option/useCanvasSetting.js
+++ b/src/hooks/option/useCanvasSetting.js
@@ -137,6 +137,7 @@ export function useCanvasSetting() {
       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),
@@ -149,10 +150,10 @@ export function useCanvasSetting() {
 
     if (addedRoofs.length === 0) {
       const newAddedRoofs = []
-      newAddedRoofs.push({ ...selectedRoofMaterial, selected: true })
+      newAddedRoofs.push({ ...selectedRoofMaterial, selected: true, index: 0 })
       setAddedRoofs(newAddedRoofs)
     }
-    setBasicSettings({ ...basicSetting, roofMaterials: selectedRoofMaterial })
+    setBasicSettings({ ...basicSetting, selectedRoofMaterial: selectedRoofMaterial })
   }
 
   useEffect(() => {
diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js
index 83242d2e..a2c7b483 100644
--- a/src/hooks/roofcover/useRoofAllocationSetting.js
+++ b/src/hooks/roofcover/useRoofAllocationSetting.js
@@ -169,11 +169,12 @@ export function useRoofAllocationSetting(id) {
     setBasicSetting((prev) => {
       return {
         ...prev,
-        roofs: roofList,
         selectedRoofMaterial: roofList.find((roof) => roof.selected),
       }
     })
 
+    setRoofList(roofList)
+
     const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof')
 
     roofs.forEach((roof) => {
diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js
index 8d309263..2350b0f5 100644
--- a/src/store/settingAtom.js
+++ b/src/store/settingAtom.js
@@ -225,11 +225,8 @@ export const selectedRoofMaterialSelector = selector({
   key: 'selectedRoofMaterialSelector',
   get: ({ get }) => {
     const basicSetting = get(basicSettingState)
-    const addedRoofs = get(addedRoofsSelector)
-    // addedRoofs에서 selectedRoofMaterial을 찾아 index를 반환
-    const index = addedRoofs.findIndex((roof) => roof === basicSetting.selectedRoofMaterial)
 
-    return { ...basicSetting.selectedRoofMaterial, index }
+    return { ...basicSetting.selectedRoofMaterial }
   },
 })