diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index 30a64e65..0e9055ab 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -296,7 +296,8 @@ export default function CanvasMenu(props) {
   }, [type, globalLocale])
 
   useEffect(() => {
-    setMenuNumber(1)
+    if (Object.keys(basicSetting).length === 0) return
+    // setMenuNumber(1)
     // if ([2, 3].some((num) => num === canvasSetting?.roofSizeSet)) {
     //   setMenuNumber(3)
     //   setType('surface')
@@ -306,7 +307,7 @@ export default function CanvasMenu(props) {
     //   setType('outline')
     //   setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
     // }
-  }, [canvasSetting])
+  }, [basicSetting])
 
   const checkMenuState = (menu) => {
     return (['2', '3'].includes(canvasSetting?.roofSizeSet) && menu.index === 2) || (menuNumber === 4 && menu.index === 2)
diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
index c54d323f..866c6dea 100644
--- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
+++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx
@@ -43,60 +43,63 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
 
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
+    if (!basicSetting || !currentRoof || Object.keys(currentRoof).length === 0 || Object.keys(basicSetting).length === 0) return
     const raftCodeList = findCommonCode('203800')
     setRaftCodes(raftCodeList)
-    setCurrentRoof({...currentRoof, roofSizeSet: basicSetting.roofMaterials.roofSizeSet, roofAngleSet: basicSetting.roofMaterials.roofAngleSet})
+    // setCurrentRoof({ ...currentRoof, roofSizeSet: basicSetting.roofMaterials.roofSizeSet, roofAngleSet: basicSetting.roofMaterials.roofAngleSet })
   }, [])
 
   useEffect(() => {
-      setBasicSettings({
-        ...basicSetting,
-        roofSizeSet:  String(currentRoof.roofSizeSet),
-        roofAngleSet: currentRoof.roofAngleSet,
-        roofsData: {
-          roofApply: true,
-          roofSeq: 0,
-          roofMatlCd: currentRoof.roofMatlCd,
-          roofWidth: currentRoof.width,
-          roofHeight: currentRoof.length,
-          roofHajebichi: currentRoof.hajebichi,
-          roofGap: currentRoof.raft,
-          roofLayout: currentRoof.layout,
-          roofPitch: currentRoof.pitch,
-          roofAngle: currentRoof.angle,
-        },
-      })
+    if (!currentRoof || Object.keys(currentRoof).length === 0) return
+    console.log(basicSetting)
+    setBasicSettings({
+      ...basicSetting,
+      roofSizeSet: String(currentRoof.roofSizeSet),
+      roofAngleSet: currentRoof.roofAngleSet,
+      roofsData: {
+        roofApply: true,
+        roofSeq: 0,
+        roofMatlCd: currentRoof.roofMatlCd,
+        roofWidth: currentRoof.width,
+        roofHeight: currentRoof.length,
+        roofHajebichi: currentRoof.hajebichi,
+        roofGap: currentRoof.raft,
+        roofLayout: currentRoof.layout,
+        roofPitch: currentRoof.pitch,
+        roofAngle: currentRoof.angle,
+      },
+    })
   }, [currentRoof])
 
   const handleRoofSizeSetChange = (value) => {
-    setCurrentRoof({...currentRoof,  roofSizeSet: value})
+    setCurrentRoof({ ...currentRoof, roofSizeSet: value })
   }
 
   const handleRoofAngleSetChange = (value) => {
-    setCurrentRoof({...currentRoof,  roofAngleSet: value})
+    setCurrentRoof({ ...currentRoof, roofAngleSet: value })
   }
 
   // Function to update the roofType and corresponding values
   const handleRoofTypeChange = (value) => {
     const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value)
-    setCurrentRoof({...selectedRoofMaterial, index: 0, roofSizeSet: String(currentRoof.roofSizeSet), roofAngleSet: currentRoof.roofAngleSet})
+    setCurrentRoof({ ...selectedRoofMaterial, index: 0, roofSizeSet: String(currentRoof.roofSizeSet), roofAngleSet: currentRoof.roofAngleSet })
   }
 
   const changeInput = (value, e) => {
     const { name } = e.target
-    setCurrentRoof({...currentRoof,  [name]: Number(value)})
+    setCurrentRoof({ ...currentRoof, [name]: Number(value) })
   }
 
   const handleRafterChange = (value) => {
-    setCurrentRoof({...currentRoof,  raft: value})
+    setCurrentRoof({ ...currentRoof, raft: value })
   }
 
   const handleRoofLayoutChange = (value) => {
-    setCurrentRoof({...currentRoof,  layout: value})
+    setCurrentRoof({ ...currentRoof, layout: value })
   }
 
   const handleSaveBtn = () => {
-    const roofInfo = { 
+    const roofInfo = {
       ...currentRoof,
       roofCd: roofRef.roofCd.current?.value,
       width: roofRef.width.current?.value,
@@ -107,7 +110,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
       layout: currentRoof.layout,
       index: 0,
     }
-    
+
     const newAddedRoofs = [...addedRoofs]
     if (addedRoofs.length === 1) {
       newAddedRoofs[0] = { ...roofInfo }
@@ -119,7 +122,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
       selectedRoofMaterial: {
         // 선택된 지붕재 정보
         roofInfo,
-      }      
+      },
     })
 
     setBasicSettings({
@@ -184,7 +187,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           name="roofSizeSet"
                           id="ra01"
                           value="1" // roofSizeSet 값이 '1'인 경우
-                          checked={currentRoof.roofSizeSet === '1'} // 선택 여부 확인
+                          checked={currentRoof?.roofSizeSet === '1'} // 선택 여부 확인
                           //onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
                           onClick={() => handleRoofSizeSetChange('1')}
                         />
@@ -196,7 +199,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           name="roofSizeSet"
                           id="ra02"
                           value="2" // roofSizeSet 값이 '2'인 경우
-                          checked={currentRoof.roofSizeSet === '2'} // 선택 여부 확인
+                          checked={currentRoof?.roofSizeSet === '2'} // 선택 여부 확인
                           //onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
                           onClick={() => handleRoofSizeSetChange('2')}
                         />
@@ -208,7 +211,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           name="roofSizeSet"
                           id="ra03"
                           value="3" // roofSizeSet 값이 '3'인 경우
-                          checked={currentRoof.roofSizeSet === '3'} // 선택 여부 확인
+                          checked={currentRoof?.roofSizeSet === '3'} // 선택 여부 확인
                           //onChange={(e) => setBasicSettings({ ...basicSetting, roofSizeSet: e.target.value })} // 상태 업데이트
                           onClick={() => handleRoofSizeSetChange('3')}
                         />
@@ -227,7 +230,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           name="roofAngleSet"
                           id="ra04"
                           value="slope" // 첫 번째 라디오 버튼의 값
-                          checked={currentRoof.roofAngleSet === 'slope'} // 현재 선택된 값인지 확인
+                          checked={currentRoof?.roofAngleSet === 'slope'} // 현재 선택된 값인지 확인
                           //onChange={(e) => setBasicSettings({ ...basicSetting, roofAngleSet: e.target.value })} // 상태 업데이트
                           onClick={() => handleRoofAngleSetChange('slope')}
                         />
@@ -239,7 +242,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                           name="roofAngleSet"
                           id="ra05"
                           value="flat" // 두 번째 라디오 버튼의 값
-                          checked={currentRoof.roofAngleSet === 'flat'} // 현재 선택된 값인지 확인
+                          checked={currentRoof?.roofAngleSet === 'flat'} // 현재 선택된 값인지 확인
                           //onChange={(e) => setBasicSettings({ ...basicSetting, roofAngleSet: e.target.value })} // 상태 업데이트
                           onClick={() => handleRoofAngleSetChange('flat')}
                         />
@@ -259,17 +262,19 @@ 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={currentRoof.roofSizeSet === '3' ? getMessage('modal.placement.initial.setting.size.none.pitch') : currentRoof.roofMatlNm}
+                          title={
+                            currentRoof?.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={currentRoof.roofSizeSet === '3' ? null : currentRoof.roofMatlCd}                          
+                          value={currentRoof?.roofSizeSet === '3' ? null : currentRoof?.roofMatlCd}
                           onChange={(e) => handleRoofTypeChange(e.roofMatlCd)}
                           sourceKey="id"
                           targetKey="id"
                           showKey="name"
-                          disabled={currentRoof.roofSizeSet === '3'}
+                          disabled={currentRoof?.roofSizeSet === '3'}
                         />
                         {/* <select
                           className="select-light dark"
@@ -298,10 +303,10 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                               className="input-origin block"
                               name={`width`}
                               ref={roofRef.width}
-                              value={parseInt(currentRoof.width)}
+                              value={parseInt(currentRoof?.width)}
                               onChange={(e) => onlyNumberInputChange(e, changeInput)}
-                              readOnly={currentRoof.widAuth === 'R'}
-                              disabled={currentRoof.roofSizeSet === '3'}
+                              readOnly={currentRoof?.widAuth === 'R'}
+                              disabled={currentRoof?.roofSizeSet === '3'}
                             />
                           </div>
                           {/* <div className="input-grid" style={{ width: '63px' }}>
@@ -323,10 +328,10 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                               className="input-origin block"
                               name={`length`}
                               ref={roofRef.length}
-                              value={parseInt(currentRoof.length)}
+                              value={parseInt(currentRoof?.length)}
                               onChange={(e) => onlyNumberInputChange(e, changeInput)}
-                              readOnly={currentRoof.lenAuth === 'R'}
-                              disabled={currentRoof.roofSizeSet === '3'}
+                              readOnly={currentRoof?.lenAuth === 'R'}
+                              disabled={currentRoof?.roofSizeSet === '3'}
                             />
                           </div>
                           {/* <div className="input-grid" style={{ width: '63px' }}>
@@ -343,19 +348,22 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                         <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}
-                              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={currentRoof.raft ? 'raft' : 'raftBaseCd'}
-                              showKey="clCodeNm"
-                              disabled={currentRoof.roofSizeSet === '3'}
-                            />
-                            {/* <select className="select-light dark" name="roofGap" ref={roofRef.rafter}>
+                            <div className="select-wrap" style={{ width: '160px' }}>
+                              <QSelectBox
+                                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={currentRoof?.raft ? 'raft' : 'raftBaseCd'}
+                                showKey="clCodeNm"
+                                disabled={currentRoof?.roofSizeSet === '3'}
+                              />
+                              {/* <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}>
@@ -364,7 +372,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                                 )
                               })}
                             </select> */}
-                          </div>
+                            </div>
                           )}
                         </div>
                       )}
@@ -386,25 +394,27 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                         </div>
                       )}
                     </div>
-                    <div className="placement-roof-btn-wrap">
-                      <div className="icon-btn-wrap mt10">
-                        <button
-                          className={`${currentRoof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL && 'act'}`}
-                          value={ROOF_MATERIAL_LAYOUT.PARALLEL}
-                          onClick={() => handleRoofLayoutChange(ROOF_MATERIAL_LAYOUT.PARALLEL)}
-                        >
-                          {getMessage('modal.roof.alloc.select.parallel')}
-                          <i className="allocation01"></i>
-                        </button>
-                        <button
-                          className={`${currentRoof.layout === ROOF_MATERIAL_LAYOUT.STAIRS && 'act'}`}
-                          value={ROOF_MATERIAL_LAYOUT.STAIRS}
-                          onClick={() => handleRoofLayoutChange(ROOF_MATERIAL_LAYOUT.STAIRS)}                        
-                        >
-                          {getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
-                        </button>
+                    {currentRoof && (
+                      <div className="placement-roof-btn-wrap">
+                        <div className="icon-btn-wrap mt10">
+                          <button
+                            className={`${currentRoof?.layout === ROOF_MATERIAL_LAYOUT.PARALLEL && 'act'}`}
+                            value={ROOF_MATERIAL_LAYOUT.PARALLEL}
+                            onClick={() => handleRoofLayoutChange(ROOF_MATERIAL_LAYOUT.PARALLEL)}
+                          >
+                            {getMessage('modal.roof.alloc.select.parallel')}
+                            <i className="allocation01"></i>
+                          </button>
+                          <button
+                            className={`${currentRoof.layout === ROOF_MATERIAL_LAYOUT.STAIRS && 'act'}`}
+                            value={ROOF_MATERIAL_LAYOUT.STAIRS}
+                            onClick={() => handleRoofLayoutChange(ROOF_MATERIAL_LAYOUT.STAIRS)}
+                          >
+                            {getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
+                          </button>
+                        </div>
                       </div>
-                    </div>
+                    )}
                   </td>
                 </tr>
               </tbody>
diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js
index b3c3b1c7..d793e4f3 100644
--- a/src/hooks/option/useCanvasSetting.js
+++ b/src/hooks/option/useCanvasSetting.js
@@ -412,7 +412,7 @@ export function useCanvasSetting() {
       //Recoil 설정
       //setCanvasSetting({ ...basicSetting })\
       console.log(basicSetting)
-
+      fetchBasicSettings()
       if (['2', '3'].includes(basicSetting?.roofSizeSet)) {
         setMenuNumber(3)
         setType('surface')
@@ -422,7 +422,6 @@ export function useCanvasSetting() {
         setType('outline')
         setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
       }
-      fetchBasicSettings()
     } catch (error) {
       swalFire({ text: error.message, icon: 'error' })
     }