diff --git a/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
index e8942948..1d5bc188 100644
--- a/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
+++ b/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx
@@ -79,133 +79,134 @@ export default function ContextRoofAllocationSetting(props) {
             </button>
           </div>
           <div className="grid-option-wrap">
-            {currentRoofList.map((roof, index) => {
-              return (
-                <div className="grid-option-box" key={index}>
-                  <div className="d-check-radio pop no-text">
-                    <input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
-                    <label
-                      htmlFor="ra01"
-                      onClick={(e) => {
-                        handleDefaultRoofMaterial(index)
-                      }}
-                    ></label>
-                  </div>
-                  <div className="grid-option-block-form">
-                    <div className="block-box">
-                      <div className="flex-ment">
-                        <div className="grid-select" style={{ width: '248px' }}>
-                          <QSelectBox
-                            options={roofMaterials}
-                            value={roof}
-                            showKey={'roofMatlNm'}
-                            sourceKey={'roofMatlCd'}
-                            targetKey={'roofMatlCd'}
-                            onChange={(e) => handleChangeRoofMaterial(e, index)}
-                          />
-                        </div>
-                        {index === 0 && <span className="dec">{getMessage('modal.roof.alloc.default.roof.material')}</span>}
-                        {index !== 0 && <button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>}
-                      </div>
+            {currentRoofList.length > 0 &&
+              currentRoofList.map((roof, index) => {
+                return (
+                  <div className="grid-option-box" key={index}>
+                    <div className="d-check-radio pop no-text">
+                      <input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
+                      <label
+                        htmlFor="ra01"
+                        onClick={(e) => {
+                          handleDefaultRoofMaterial(index)
+                        }}
+                      ></label>
                     </div>
-                    <div className="block-box">
-                      <div className="flex-ment">
-                        <span>{getMessage('slope')}</span>
-                        <div className="input-grid" style={{ width: '214px' }}>
-                          <input
-                            type="text"
-                            className="input-origin block"
-                            onChange={(e) => {
-                              handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index)
-                            }}
-                            defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
-                          />
+                    <div className="grid-option-block-form">
+                      <div className="block-box">
+                        <div className="flex-ment">
+                          <div className="grid-select" style={{ width: '248px' }}>
+                            <QSelectBox
+                              options={roofMaterials}
+                              value={roof}
+                              showKey={'roofMatlNm'}
+                              sourceKey={'roofMatlCd'}
+                              targetKey={'roofMatlCd'}
+                              onChange={(e) => handleChangeRoofMaterial(e, index)}
+                            />
+                          </div>
+                          {index === 0 && <span className="dec">{getMessage('modal.roof.alloc.default.roof.material')}</span>}
+                          {index !== 0 && <button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>}
                         </div>
-                        <span>{pitchText}</span>
                       </div>
-                    </div>
-                    {(roof.widAuth || roof.lenAuth) && (
                       <div className="block-box">
-                        {roof.widAuth && (
-                          <div className="flex-ment">
-                            <span>W</span>
-                            <div className="input-grid" style={{ width: '100px' }}>
-                              <input type="text" className="input-origin block" defaultValue={roof.width} readOnly={roof.widAuth === 'R'} />
-                            </div>
+                        <div className="flex-ment">
+                          <span>{getMessage('slope')}</span>
+                          <div className="input-grid" style={{ width: '214px' }}>
+                            <input
+                              type="text"
+                              className="input-origin block"
+                              onChange={(e) => {
+                                handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index)
+                              }}
+                              defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
+                            />
                           </div>
-                        )}
-                        {roof.lenAuth && (
-                          <div className="flex-ment">
-                            <span>L</span>
-                            <div className="input-grid" style={{ width: '100px' }}>
-                              <input type="text" className="input-origin block" defaultValue={roof.length} readOnly={roof.lenAuth === 'R'} />
-                            </div>
-                          </div>
-                        )}
+                          <span>{pitchText}</span>
+                        </div>
                       </div>
-                    )}
-                    {(roof.raftAuth || roof.roofPchAuth) && (
-                      <div className="block-box">
-                        {roof.raftAuth && (
-                          <div className="block-box">
+                      {(roof.widAuth || roof.lenAuth) && (
+                        <div className="block-box">
+                          {roof.widAuth && (
                             <div className="flex-ment">
-                              <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
-                              {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>
-                        )}
-                        {roof.roofPchAuth && (
-                          <div className="block-box">
-                            <div className="flex-ment">
-                              <span>{getMessage('hajebichi')}</span>
-                              <div className="input-grid" style={{ width: '84px' }}>
-                                <input
-                                  type="text"
-                                  className="input-origin block"
-                                  value={parseInt(roof.hajebichi)}
-                                  readOnly={roof.roofPchAuth === 'R'}
-                                />
+                              <span>W</span>
+                              <div className="input-grid" style={{ width: '100px' }}>
+                                <input type="text" className="input-origin block" defaultValue={roof.width} readOnly={roof.widAuth === 'R'} />
                               </div>
                             </div>
-                          </div>
-                        )}
-                      </div>
-                    )}
-                    <div className="block-box">
-                      <div className="icon-btn-wrap">
-                        <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' : ''}
-                          onClick={() => {
-                            handleChangeLayout(ROOF_MATERIAL_LAYOUT.STAIRS, index)
-                          }}
-                        >
-                          {getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
-                        </button>
+                          )}
+                          {roof.lenAuth && (
+                            <div className="flex-ment">
+                              <span>L</span>
+                              <div className="input-grid" style={{ width: '100px' }}>
+                                <input type="text" className="input-origin block" defaultValue={roof.length} readOnly={roof.lenAuth === 'R'} />
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      )}
+                      {(roof.raftAuth || roof.roofPchAuth) && (
+                        <div className="block-box">
+                          {roof.raftAuth && (
+                            <div className="block-box">
+                              <div className="flex-ment">
+                                <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
+                                {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>
+                          )}
+                          {roof.roofPchAuth && (
+                            <div className="block-box">
+                              <div className="flex-ment">
+                                <span>{getMessage('hajebichi')}</span>
+                                <div className="input-grid" style={{ width: '84px' }}>
+                                  <input
+                                    type="text"
+                                    className="input-origin block"
+                                    value={parseInt(roof.hajebichi)}
+                                    readOnly={roof.roofPchAuth === 'R'}
+                                  />
+                                </div>
+                              </div>
+                            </div>
+                          )}
+                        </div>
+                      )}
+                      <div className="block-box">
+                        <div className="icon-btn-wrap">
+                          <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' : ''}
+                            onClick={() => {
+                              handleChangeLayout(ROOF_MATERIAL_LAYOUT.STAIRS, index)
+                            }}
+                          >
+                            {getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
+                          </button>
+                        </div>
                       </div>
                     </div>
                   </div>
-                </div>
-              )
-            })}
+                )
+              })}
           </div>
           <div className="grid-btn-wrap">
             <button className="btn-frame modal act" onClick={handleSaveContext}>
diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js
index 546ebe0b..1488fb26 100644
--- a/src/hooks/roofcover/useRoofAllocationSetting.js
+++ b/src/hooks/roofcover/useRoofAllocationSetting.js
@@ -42,7 +42,7 @@ export function useRoofAllocationSetting(id) {
   const [currentRoofMaterial, setCurrentRoofMaterial] = useState(roofMaterials[0]) // 팝업 내 기준 지붕재
   const [roofList, setRoofList] = useRecoilState(addedRoofsState) // 배치면 초기설정에서 선택한 지붕재 배열
   const [editingLines, setEditingLines] = useState([])
-  const [currentRoofList, setCurrentRoofList] = useState(null)
+  const [currentRoofList, setCurrentRoofList] = useState([])
   const currentAngleType = useRecoilValue(currentAngleTypeSelector)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const [basicInfo, setBasicInfo] = useState(null)