배치면 초기설정 우선 수정

src/components/floor-plan/CanvasMenu.jsx

@@ -308,9 +308,10 @@ export default function CanvasMenu(props) {
     }
   }, [type, globalLocale])
 
-  useEffect(() => {
-    if (!selectedRoofMaterial) return
-    //if (Object.keys(basicSetting).length === 0 || !basicSetting.roofSizeSet) return
+  /*useEffect(() => {
+    if (menuNumber === 1) {
+      return
+    }
     setMenuNumber(1)
     // if ([2, 3].some((num) => num === canvasSetting?.roofSizeSet)) {
     //   setMenuNumber(3)
@@ -321,8 +322,8 @@ export default function CanvasMenu(props) {
     //   setType('outline')
     //   setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE)
     // }
-  }, [selectedRoofMaterial])
-  
+  }, [basicSetting])*/
+
   const checkMenuState = (menu) => {
     return (['2', '3'].includes(canvasSetting?.roofSizeSet) && menu.index === 2) || (menuNumber === 4 && menu.index === 2)
   }

src/components/floor-plan/FloorPlan.jsx

@@ -25,6 +25,7 @@ export default function FloorPlan({ children }) {
   useEffect(() => {
     ///setCorrentObjectNo(floorPlanState.objectNo)
     //console.log('FloorPlan objectNo ', floorPlanState.objectNo, correntObjectNo)
+    setMenuNumber(1)
     fetchSettings()
     return () => {
       closeAll()

src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx

@@ -8,8 +8,8 @@ import MaterialGuide from '@/components/floor-plan/modal/placementShape/Material
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
-import { useRecoilValue } from 'recoil'
-import { roofMaterialsAtom } from '@/store/settingAtom'
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { addedRoofsState, roofMaterialsAtom } from '@/store/settingAtom'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { globalLocaleStore } from '@/store/localeAtom'
@@ -28,10 +28,11 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   const roofMaterials = useRecoilValue(roofMaterialsAtom)
 
   const globalLocale = useRecoilValue(globalLocaleStore)
-  const { basicSetting, setBasicSettings, basicSettingSave, addedRoofs, setAddedRoofs } = useCanvasSetting()
+  const { basicSetting, setBasicSettings, basicSettingSave } = useCanvasSetting()
+  const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState)
   const { findCommonCode } = useCommonCode()
   const [raftCodes, setRaftCodes] = useState([]) // 서까래 정보
-  const [currentRoof, setCurrentRoof] = useState(addedRoofs[0]) // 현재 선택된 지붕재 정보
+  const [currentRoof, setCurrentRoof] = useState(null) // 현재 선택된 지붕재 정보
 
   const roofRef = {
     roofCd: useRef(null),
@@ -50,7 +51,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
 
   //지붕각도 설정(경사/각도)
   const roofAngleSetArray = [
-    { id: 'ra04', name: 'roofAngleSet', value: 'slope', message: 'modal.placement.initial.setting.roof.pitch'},
+    { id: 'ra04', name: 'roofAngleSet', value: 'slope', message: 'modal.placement.initial.setting.roof.pitch' },
     { id: 'ra05', name: 'roofAngleSet', value: 'flat', message: 'modal.placement.initial.setting.roof.angle' },
   ]
 
@@ -59,7 +60,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
     if (!basicSetting || !currentRoof || Object.keys(currentRoof).length === 0 || Object.keys(basicSetting).length === 0) return
     const raftCodeList = findCommonCode('203800')
     setRaftCodes(raftCodeList)
-    
+
     if (addedRoofs[0].roofAngleSet && addedRoofs[0].roofAngleSet?.length > 0) {
       setCurrentRoof({ ...currentRoof, roofSizeSet: String(addedRoofs[0].roofSizeSet), roofAngleSet: addedRoofs[0].roofAngleSet })
     } else if (basicSetting.roofAngleSet && basicSetting.roofAngleSet?.length > 0) {
@@ -67,9 +68,15 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
     }
   }, [])
 
+  useEffect(() => {
+    if (addedRoofs.length > 0) {
+      setCurrentRoof({ ...addedRoofs[0] })
+    }
+  }, [addedRoofs])
+
   useEffect(() => {
     console.log('🚀 ~ fetchBasicSettings ~ currentRoof :', currentRoof)
-    if(!currentRoof) return
+    if (!currentRoof) return
     setBasicSettings({
       ...basicSetting,
       roofSizeSet: String(currentRoof.roofSizeSet),
@@ -196,42 +203,42 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                     </div>
                   </th>
                   <td>
-                    <div className="pop-form-radio">                      
+                    <div className="pop-form-radio">
                       {currentRoof &&
                         roofSizeSetArray.map((item) => (
                           <div className="d-check-radio pop" key={item.id}>
-                          <input type="radio" 
-                                id={item.id}
-                                name={item.name}
-                                value={item.value}
-                                checked={currentRoof?.roofSizeSet === item.value}
-                                onChange={(e) => setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })}
-                          />
-                          <label htmlFor={item.id}>{getMessage(item.message)}</label>
+                            <input
+                              type="radio"
+                              id={item.id}
+                              name={item.name}
+                              value={item.value}
+                              checked={currentRoof?.roofSizeSet === item.value}
+                              onChange={(e) => setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })}
+                            />
+                            <label htmlFor={item.id}>{getMessage(item.message)}</label>
                           </div>
-                        ))
-                      }
+                        ))}
                     </div>
                   </td>
                 </tr>
                 <tr>
                   <th>{getMessage('modal.placement.initial.setting.roof.angle.setting')}</th>
                   <td>
-                    <div className="pop-form-radio">                      
+                    <div className="pop-form-radio">
                       {currentRoof &&
                         roofAngleSetArray.map((item) => (
                           <div className="d-check-radio pop" key={item.id}>
-                          <input type="radio"
-                                id={item.id}
-                                name={item.name}
-                                value={item.value}
-                                checked={currentRoof?.roofAngleSet === item.value}
-                                onChange={(e) => setCurrentRoof({ ...currentRoof, roofAngleSet: e.target.value })}
-                          />
-                          <label htmlFor={item.id}>{getMessage(item.message)}</label>
+                            <input
+                              type="radio"
+                              id={item.id}
+                              name={item.name}
+                              value={item.value}
+                              checked={currentRoof?.roofAngleSet === item.value}
+                              onChange={(e) => setCurrentRoof({ ...currentRoof, roofAngleSet: e.target.value })}
+                            />
+                            <label htmlFor={item.id}>{getMessage(item.message)}</label>
                           </div>
-                        ))
-                      }
+                        ))}
                     </div>
                   </td>
                 </tr>

src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx

@@ -47,190 +47,194 @@ export default function RoofAllocationSetting(props) {
   return (
     <WithDraggable isShow={true} pos={pos}>
       <div className={`modal-pop-wrap lr mount`}>
-        <div className="modal-head">
-          <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
-          <button className="modal-close" onClick={() => closePopup(id)}>
-            닫기
-          </button>
-        </div>
-        <div className="modal-body">
-          <div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
-          <div className="allocation-select-wrap">
-            <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
-            <div className="grid-select">
-              <QSelectBox
-                options={roofMaterials}
-                value={roofMaterials[0]}
-                onChange={(e) => {
-                  // const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id)
-                  setCurrentRoofMaterial(e)
-                }}
-                showKey={'roofMatlNm'}
-                sourceKey={'roofMatlCd'}
-                targetKey={'roofMatlCd'}
-              />
+        {currentRoofList && (
+          <>
+            <div className="modal-head">
+              <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
+              <button className="modal-close" onClick={() => closePopup(id)}>
+                닫기
+              </button>
             </div>
-            <button
-              className="allocation-edit"
-              onClick={() => {
-                onAddRoofMaterial()
-              }}
-            >
-              <i className="edit-ico"></i>
-              {getMessage('modal.common.add')}
-            </button>
-          </div>
-          <div className="grid-option-overflow">
-            <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 className="modal-body">
+              <div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
+              <div className="allocation-select-wrap">
+                <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
+                <div className="grid-select">
+                  <QSelectBox
+                    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
+                  className="allocation-edit"
+                  onClick={() => {
+                    onAddRoofMaterial()
+                  }}
+                >
+                  <i className="edit-ico"></i>
+                  {getMessage('modal.common.add')}
+                </button>
+              </div>
+              <div className="grid-option-overflow">
+                <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>
-                      <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>
-                          <span>{pitchText}</span>
-                        </div>
-                      </div>
-                      {(roof.widAuth || roof.lenAuth) && (
-                        <div className="block-box">
-                          {roof.widAuth && (
+                        <div className="grid-option-block-form">
+                          <div className="block-box">
                             <div className="flex-ment">
-                              <span>W</span>
-                              <div className="input-grid" style={{ width: '100px' }}>
+                              <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>
+                          </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"
-                                  defaultValue={roof.width}
-                                  onChange={(e) => handleChangeInput(e, 'width', index)}
-                                  readOnly={roof.widAuth === 'R'}
+                                  onChange={(e) => {
+                                    handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index)
+                                  }}
+                                  defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
                                 />
                               </div>
+                              <span>{pitchText}</span>
                             </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}
-                                  onChange={(e) => handleChangeInput(e, 'length', index)}
-                                  readOnly={roof.lenAuth === 'R'}
-                                />
-                              </div>
-                            </div>
-                          )}
-                        </div>
-                      )}
-                      {(roof.raftAuth || roof.roofPchAuth) && (
-                        <div className="block-box">
-                          {roof.raftAuth && (
+                          </div>
+                          {(roof.widAuth || roof.lenAuth) && (
                             <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'}
-                                      onChange={(e) => handleChangeRaft(e, index)}
+                              {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}
+                                      onChange={(e) => handleChangeInput(e, 'width', index)}
+                                      readOnly={roof.widAuth === 'R'}
                                     />
                                   </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"
-                                    onChange={(e) => handleChangeInput(e, 'hajebichi', index)}
-                                    value={parseInt(roof.hajebichi)}
-                                    readOnly={roof.roofPchAuth === 'R'}
-                                  />
                                 </div>
-                              </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}
+                                      onChange={(e) => handleChangeInput(e, 'length', index)}
+                                      readOnly={roof.lenAuth === '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.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'}
+                                          onChange={(e) => handleChangeRaft(e, index)}
+                                        />
+                                      </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"
+                                        onChange={(e) => handleChangeInput(e, 'hajebichi', index)}
+                                        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>
+              </div>
+              <div className="grid-btn-wrap">
+                <button className="btn-frame modal act" onClick={handleSave}>
+                  {getMessage('modal.roof.alloc.apply')}
+                </button>
+              </div>
             </div>
-          </div>
-          <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={handleSave}>
-              {getMessage('modal.roof.alloc.apply')}
-            </button>
-          </div>
-        </div>
+          </>
+        )}
       </div>
     </WithDraggable>
   )

src/hooks/option/useCanvasSetting.js

@@ -23,6 +23,7 @@ import {
   roofMaterialsAtom,
   selectedRoofMaterialSelector,
   addedRoofsState,
+  fetchRoofMaterialsState,
 } from '@/store/settingAtom'
 import { MENU, POLYGON_TYPE } from '@/common/common'
 import { globalFontAtom } from '@/store/fontAtom'
@@ -77,6 +78,7 @@ export function useCanvasSetting() {
   const [gridColor, setGridColor] = useRecoilState(gridColorState)
   const [color, setColor] = useColor(gridColor ?? '#FF0000')
   const { menuNumber, setMenuNumber } = useCanvasMenu()
+
   const [settingsData, setSettingsData] = useState({
     ...settingModalFirstOptions,
     ...settingModalSecondOptions,
@@ -102,6 +104,7 @@ export function useCanvasSetting() {
   const { getRoofMaterialList, getModuleTypeItemList } = useMasterController()
   const [roofMaterials, setRoofMaterials] = useRecoilState(roofMaterialsAtom)
   const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState)
+  const [fetchRoofMaterials, setFetchRoofMaterials] = useRecoilState(fetchRoofMaterialsState)
   const [type, setType] = useRecoilState(menuTypeState)
   const setCurrentMenu = useSetRecoilState(currentMenuState)
   const SelectOptions = [
@@ -114,10 +117,10 @@ export function useCanvasSetting() {
   const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
 
   useEffect(() => {
-    if (roofMaterials.length !== 0) {
-      return
+    setFetchRoofMaterials(!fetchRoofMaterials)
+    if (fetchRoofMaterials) {
+      addRoofMaterials()
     }
-    addRoofMaterials()
   }, [])
 
   //지붕재 초기세팅
@@ -326,7 +329,7 @@ export function useCanvasSetting() {
           ]
         }
 
-        // 데이터 설정        
+        // 데이터 설정
         const addRoofs = []
         for (let i = 0; i < roofsArray.length; i++) {
           roofMaterials?.map((material) => {
@@ -344,7 +347,7 @@ export function useCanvasSetting() {
                 roofAngleSet: roofsRow[i].roofAngleSet,
                 pitch: roofsArray[i].roofPitch,
                 angle: roofsArray[i].roofAngle,
-              })           
+              })
             }
           })
         }
@@ -404,7 +407,6 @@ export function useCanvasSetting() {
         ],
       }
 
-
       await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => {
         swalFire({ text: getMessage(res.returnMessage) })
       })

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -33,7 +33,7 @@ export function useRoofAllocationSetting(id) {
   const { drawDirectionArrow, addLengthText, splitPolygonWithLines, splitPolygonWithSeparate } = usePolygon()
   const [popupId, setPopupId] = useState(uuidv4())
   const { addPopup, closePopup, closeAll } = usePopup()
-  const currentObject = useRecoilValue(currentObjectState)  
+  const currentObject = useRecoilValue(currentObjectState)
   const { setMenuNumber } = useCanvasMenu()
   const setMenuType = useSetRecoilState(menuTypeState)
   const roofMaterials = useRecoilValue(roofMaterialsSelector)
@@ -42,15 +42,20 @@ export function useRoofAllocationSetting(id) {
   const [currentRoofMaterial, setCurrentRoofMaterial] = useState(roofMaterials[0]) // 팝업 내 기준 지붕재
   const [roofList, setRoofList] = useRecoilState(addedRoofsState) // 배치면 초기설정에서 선택한 지붕재 배열
   const [editingLines, setEditingLines] = useState([])
-  const [currentRoofList, setCurrentRoofList] = useState(roofList)
+  const [currentRoofList, setCurrentRoofList] = useState(null)
   const currentAngleType = useRecoilValue(currentAngleTypeSelector)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
+  const [basicInfo, setBasicInfo] = useState(null)
   const { get, post } = useAxios(globalLocaleState)
   const { getMessage } = useMessage()
   const { swalFire } = useSwal()
 
   const { setSurfaceShapePattern } = useRoofFn()
 
+  useEffect(() => {
+    setCurrentRoofList(roofList)
+  }, [])
+
   useEffect(() => {
     const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) // roofPolygon.innerLines
 
@@ -133,6 +138,8 @@ export function useRoofAllocationSetting(id) {
 
         console.log('fetchBasicSettings roofsArray', roofsArray)
 
+        console.log(roofsArray)
+
         // 데이터 설정
         const selectRoofs = []
         for (let i = 0; i < roofsArray.length; i++) {
@@ -154,8 +161,8 @@ export function useRoofAllocationSetting(id) {
             }
           })
         }
-        
-        setCurrentRoofList(selectRoofs)
+
+        // setCurrentRoofList(selectRoofs)
         //setBasicSetting({ ...basicSetting, roofsData: roofsArray })
         setBasicSetting({
           ...basicSetting,
@@ -163,6 +170,10 @@ export function useRoofAllocationSetting(id) {
           roofAngleSet: res[0].roofAngleSet,
           roofsData: roofsArray,
         })
+        setBasicInfo({
+          roofSizeSet: '' + res[0].roofSizeSet,
+          roofAngleSet: '' + res[0].roofAngleSet,
+        })
       })
     } catch (error) {
       console.error('Data fetching error:', error)
@@ -173,10 +184,10 @@ export function useRoofAllocationSetting(id) {
   const basicSettingSave = async () => {
     try {
       const patternData = {
-        objectNo: correntObjectNo,      
+        objectNo: correntObjectNo,
         roofSizeSet: Number(basicSetting.roofSizeSet),
         roofAngleSet: basicSetting.roofAngleSet,
-        roofAllocationList: currentRoofList.map((item, index) => ({          
+        roofAllocationList: currentRoofList.map((item, index) => ({
           roofApply: item.selected === null || item.selected === undefined ? 'true' : item.selected,
           roofSeq: index,
           roofMatlCd: item.roofMatlCd === null || item.roofMatlCd === undefined ? 'ROOF_ID_WA_53A' : item.roofMatlCd,
@@ -190,19 +201,19 @@ export function useRoofAllocationSetting(id) {
         })),
       }
 
-    console.log('🚀 ~ basicSettingSave ~ patternData >>>>>>>>>>>>> :', patternData)
+      console.log('🚀 ~ basicSettingSave ~ patternData >>>>>>>>>>>>> :', patternData)
 
-    await post({ url: `/api/canvas-management/roof-allocation-settings`, data: patternData }).then((res) => {
-    console.log('roof-allocation-settings res ', res)
-      swalFire({ text: getMessage(res.returnMessage) })
-    })
+      await post({ url: `/api/canvas-management/roof-allocation-settings`, data: patternData }).then((res) => {
+        console.log('roof-allocation-settings res ', res)
+        swalFire({ text: getMessage(res.returnMessage) })
+      })
 
-    //Recoil 설정
-    //setCanvasSetting({ ...basicSetting })
-    fetchBasicSettings()
-  } catch (error) {
-    swalFire({ text: error.message, icon: 'error' })
-  }
+      //Recoil 설정
+      //setCanvasSetting({ ...basicSetting })
+      fetchBasicSettings()
+    } catch (error) {
+      swalFire({ text: error.message, icon: 'error' })
+    }
   }
 
   const onAddRoofMaterial = () => {
@@ -321,8 +332,9 @@ export function useRoofAllocationSetting(id) {
     })
 
     const newRoofList = currentRoofList.map((roof, idx) => {
-      return { ...roof, index: idx }
+      return { ...roof, index: idx, ...basicInfo }
     })
+    console.log('basicInfo', newRoofList)
 
     setBasicSetting((prev) => {
       return {
@@ -330,7 +342,6 @@ export function useRoofAllocationSetting(id) {
         selectedRoofMaterial: newRoofList.find((roof) => roof.selected),
       }
     })
-
     setRoofList(newRoofList)
 
     const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof')

src/store/settingAtom.js

@@ -244,3 +244,8 @@ export const correntObjectNoState = atom({
   key: 'correntObjectNoState',
   default: '',
 })
+
+export const fetchRoofMaterialsState = atom({
+  key: 'fetchRoofMaterialsState',
+  default: false,
+})