Merge remote-tracking branch 'origin/dev' into dev

src/components/floor-plan/CanvasMenu.jsx

@@ -308,9 +308,10 @@ export default function CanvasMenu(props) {
     }
   }, [type, globalLocale])
 
-  useEffect(() => {
+  /*useEffect(() => {
-    if (!selectedRoofMaterial) return
+    if (menuNumber === 1) {
-    //if (Object.keys(basicSetting).length === 0 || !basicSetting.roofSizeSet) return
+      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 { useRecoilState, useRecoilValue } from 'recoil'
-import { roofMaterialsAtom } from '@/store/settingAtom'
+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' },
   ]
 
@@ -60,16 +61,22 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
     const raftCodeList = findCommonCode('203800')
     setRaftCodes(raftCodeList)
 
-    if (addedRoofs.length > 0) {
+    if (addedRoofs[0].roofAngleSet && addedRoofs[0].roofAngleSet?.length > 0) {
-      setCurrentRoof({ ...currentRoof, roofSizeSet: addedRoofs[0].roofSizeSet, roofAngleSet: addedRoofs[0].roofAngleSet })
+      setCurrentRoof({ ...currentRoof, roofSizeSet: String(addedRoofs[0].roofSizeSet), roofAngleSet: addedRoofs[0].roofAngleSet })
-    } else if (basicSetting.roofSizeSet.length > 0) {
+    } else if (basicSetting.roofAngleSet && basicSetting.roofAngleSet?.length > 0) {
-      setCurrentRoof({ ...currentRoof, roofSizeSet: basicSetting.roofSizeSet, roofAngleSet: basicSetting.roofAngleSet })
+      setCurrentRoof({ ...currentRoof, roofSizeSet: String(basicSetting.roofSizeSet), roofAngleSet: basicSetting.roofAngleSet })
     }
   }, [])
 
+  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" 
+                            <input
-                                id={item.id}
+                              type="radio"
-                                name={item.name}
+                              id={item.id}
-                                value={item.value}
+                              name={item.name}
-                                checked={currentRoof?.roofSizeSet === item.value}
+                              value={item.value}
-                                onChange={(e) => setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })}
+                              checked={currentRoof?.roofSizeSet === item.value}
-                          />
+                              onChange={(e) => setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })}
-                          <label htmlFor={item.id}>{getMessage(item.message)}</label>
+                            />
+                            <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"
+                            <input
-                                id={item.id}
+                              type="radio"
-                                name={item.name}
+                              id={item.id}
-                                value={item.value}
+                              name={item.name}
-                                checked={currentRoof?.roofAngleSet === item.value}
+                              value={item.value}
-                                onChange={(e) => setCurrentRoof({ ...currentRoof, roofAngleSet: e.target.value })}
+                              checked={currentRoof?.roofAngleSet === item.value}
-                          />
+                              onChange={(e) => setCurrentRoof({ ...currentRoof, roofAngleSet: e.target.value })}
-                          <label htmlFor={item.id}>{getMessage(item.message)}</label>
+                            />
+                            <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">
+        {currentRoofList && (
-          <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
+          <>
-          <button className="modal-close" onClick={() => closePopup(id)}>
+            <div className="modal-head">
-            닫기
+              <h1 className="title">{getMessage('plan.menu.estimate.roof.alloc')}</h1>
-          </button>
+              <button className="modal-close" onClick={() => closePopup(id)}>
-        </div>
+                닫기
-        <div className="modal-body">
+              </button>
-          <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
+            <div className="modal-body">
-              className="allocation-edit"
+              <div className="properties-guide">{getMessage('modal.roof.alloc.info')}</div>
-              onClick={() => {
+              <div className="allocation-select-wrap">
-                onAddRoofMaterial()
+                <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
-              }}
+                <div className="grid-select">
-            >
+                  <QSelectBox
-              <i className="edit-ico"></i>
+                    options={roofMaterials}
-              {getMessage('modal.common.add')}
+                    value={roofMaterials[0]}
-            </button>
+                    onChange={(e) => {
-          </div>
+                      // const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id)
-          <div className="grid-option-overflow">
+                      setCurrentRoofMaterial(e)
-            <div className="grid-option-wrap">
+                    }}
-              {currentRoofList.map((roof, index) => {
+                    showKey={'roofMatlNm'}
-                return (
+                    sourceKey={'roofMatlCd'}
-                  <div className="grid-option-box" key={index}>
+                    targetKey={'roofMatlCd'}
-                    <div className="d-check-radio pop no-text">
+                  />
-                      <input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
+                </div>
-                      <label
+                <button
-                        htmlFor="ra01"
+                  className="allocation-edit"
-                        onClick={(e) => {
+                  onClick={() => {
-                          handleDefaultRoofMaterial(index)
+                    onAddRoofMaterial()
-                        }}
+                  }}
-                      ></label>
+                >
-                    </div>
+                  <i className="edit-ico"></i>
-                    <div className="grid-option-block-form">
+                  {getMessage('modal.common.add')}
-                      <div className="block-box">
+                </button>
-                        <div className="flex-ment">
+              </div>
-                          <div className="grid-select" style={{ width: '248px' }}>
+              <div className="grid-option-overflow">
-                            <QSelectBox
+                <div className="grid-option-wrap">
-                              options={roofMaterials}
+                  {currentRoofList.map((roof, index) => {
-                              value={roof}
+                    return (
-                              showKey={'roofMatlNm'}
+                      <div className="grid-option-box" key={index}>
-                              sourceKey={'roofMatlCd'}
+                        <div className="d-check-radio pop no-text">
-                              targetKey={'roofMatlCd'}
+                          <input type="radio" name="radio01" checked={roof.selected && 'checked'} readOnly={true} />
-                              onChange={(e) => handleChangeRoofMaterial(e, index)}
+                          <label
-                            />
+                            htmlFor="ra01"
-                          </div>
+                            onClick={(e) => {
-                          {index === 0 && <span className="dec">{getMessage('modal.roof.alloc.default.roof.material')}</span>}
+                              handleDefaultRoofMaterial(index)
-                          {index !== 0 && <button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>}
+                            }}
+                          ></label>
                         </div>
-                      </div>
+                        <div className="grid-option-block-form">
-                      <div className="block-box">
+                          <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="flex-ment">
-                              <span>W</span>
+                              <div className="grid-select" style={{ width: '248px' }}>
-                              <div className="input-grid" style={{ width: '100px' }}>
+                                <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) => {
-                                  onChange={(e) => handleChangeInput(e, 'width', index)}
+                                    handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index)
-                                  readOnly={roof.widAuth === 'R'}
+                                  }}
+                                  defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle}
                                 />
                               </div>
+                              <span>{pitchText}</span>
                             </div>
-                          )}
+                          </div>
-                          {roof.lenAuth && (
+                          {(roof.widAuth || 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 className="block-box">
-                              <div className="flex-ment">
+                              {roof.widAuth && (
-                                <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
+                                <div className="flex-ment">
-                                {raftCodes.length > 0 && (
+                                  <span>W</span>
-                                  <div className="grid-select" style={{ width: '160px' }}>
+                                  <div className="input-grid" style={{ width: '100px' }}>
-                                    <QSelectBox
+                                    <input
-                                      options={raftCodes}
+                                      type="text"
-                                      value={roof}
+                                      className="input-origin block"
-                                      showKey={'clCodeNm'}
+                                      defaultValue={roof.width}
-                                      sourceKey={'clCode'}
+                                      onChange={(e) => handleChangeInput(e, 'width', index)}
-                                      targetKey={roof.raft ? 'raft' : 'raftBaseCd'}
+                                      readOnly={roof.widAuth === 'R'}
-                                      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>
+                              )}
+                              {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>
+                          {(roof.raftAuth || roof.roofPchAuth) && (
-                      )}
+                            <div className="block-box">
-                      <div className="block-box">
+                              {roof.raftAuth && (
-                        <div className="icon-btn-wrap">
+                                <div className="block-box">
-                          <button
+                                  <div className="flex-ment">
-                            className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''}
+                                    <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
-                            onClick={() => {
+                                    {raftCodes.length > 0 && (
-                              handleChangeLayout(ROOF_MATERIAL_LAYOUT.PARALLEL, index)
+                                      <div className="grid-select" style={{ width: '160px' }}>
-                            }}
+                                        <QSelectBox
-                          >
+                                          options={raftCodes}
-                            {getMessage('modal.roof.alloc.select.parallel')}
+                                          value={roof}
-                            <i className="allocation01"></i>
+                                          showKey={'clCodeNm'}
-                          </button>
+                                          sourceKey={'clCode'}
-                          <button
+                                          targetKey={roof.raft ? 'raft' : 'raftBaseCd'}
-                            className={roof.layout === ROOF_MATERIAL_LAYOUT.STAIRS ? 'act' : ''}
+                                          onChange={(e) => handleChangeRaft(e, index)}
-                            onClick={() => {
+                                        />
-                              handleChangeLayout(ROOF_MATERIAL_LAYOUT.STAIRS, index)
+                                      </div>
-                            }}
+                                    )}
-                          >
+                                  </div>
-                            {getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
+                                </div>
-                          </button>
+                              )}
+                              {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/module/useTrestle.js

@@ -9,12 +9,6 @@ export const useTrestle = () => {
   const moduleSelectionData = useRecoilValue(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터
 
   const apply = () => {
-    // rack은 맵 형태의 객체인데 key value 형태로 되어있다.
-    // 이때 이 형태를 [{key, value}, ...] 형태로 바꿔야 함.
-    /*const rackInfos = Object.keys(rack).map((key) => {
-      return { key, value: rack[key] }
-    })*/
-
     //처마력바가 체크되어 있는 경우 exposedBottomPoints를 이용해 처마력바 그려줘야함.
     // exposedBottomPoints는 노출 최하면 들의 centerPoint 배열.
 
@@ -32,9 +26,11 @@ export const useTrestle = () => {
       const construction = moduleSelectionData.roofConstructions.find((construction) => construction.roofIndex === roofMaterialIndex).construction
       let isEaveBar = construction.setupCover
       let isSnowGuard = construction.setupSnowCover
+      const direction = parent.direction
 
       const rack = surface.trestleDetail.rack
-      const { rackQty, rackIntvlPct } = surface.trestleDetail
+      let { rackQty, rackIntvlPct } = surface.trestleDetail
+
       const rackInfos = Object.keys(rack).map((key) => {
         return { key, value: rack[key] }
       })
@@ -73,7 +69,7 @@ export const useTrestle = () => {
         // 처마력바설치 true인 경우 설치
         exposedBottomModules.forEach((module) => {
           //TODO : 방향별로 처마력바 설치해야함
-          const bottomPoints = findTopTwoPoints([...module.points])
+          const bottomPoints = findTopTwoPoints([...module.points], direction)
           if (!bottomPoints) return
           const eaveBar = new fabric.Line([bottomPoints[0].x, bottomPoints[0].y, bottomPoints[1].x, bottomPoints[1].y], {
             name: 'eaveBar',
@@ -85,14 +81,12 @@ export const useTrestle = () => {
           canvas.renderAll()
         })
       }
-
       // 가대 설치를 위한 가장 아래 모듈로부터 위로 몇단인지 계산
       // 오른쪽,왼쪽 둘 다 아래에 아무것도 없는, 처마 커버를 필요로 하는 모듈
       exposedBottomModules.forEach((module) => {
         const { width, height } = module
         let { x: startX, y: startY } = { ...module.getCenterPoint() }
         let { x, y } = { ...module.getCenterPoint() }
-        const direction = 'south'
         //TODO : 방향별로 가대 설치해야함
 
         let leftRows = 1
@@ -105,9 +99,7 @@ export const useTrestle = () => {
         //우선 절반을 나눈 뒤 왼쪽부터 찾는다.
         while (hasNextModule) {
           //바로 위에 있는지 확인한다.
-          let nextModule = centerPoints.find((centerPoint) => {
+          let nextModule = findNextModule({ x, y, width, height }, centerPoints, direction)
-            return Math.abs(centerPoint.x - x) < 2 && Math.abs(centerPoint.y - (y - height)) < 2
-          })
 
           if (nextModule) {
             // 바로 위 모듈을 찾는다.
@@ -117,16 +109,10 @@ export const useTrestle = () => {
           } else {
             // 바로 위가 없을 경우 먼저 왼쪽위가 있는지 확인 한다.
             if (findLeft) {
-              const topLeftPoint = { x: x - width / 2, y: y - height }
+              nextModule = findNextLeftModule({ x, y, width, height }, centerPoints, direction)
-              nextModule = centerPoints.find((centerPoint) => {
-                return Math.abs(centerPoint.x - topLeftPoint.x) < 2 && Math.abs(centerPoint.y - topLeftPoint.y) < 2
-              })
               findLeft = false
             } else {
-              const topRightPoint = { x: x + width / 2, y: y - height }
+              nextModule = findNextRightModule({ x, y, width, height }, centerPoints, direction)
-              nextModule = centerPoints.find((centerPoint) => {
-                return Math.abs(centerPoint.x - topRightPoint.x) < 2 && Math.abs(centerPoint.y - topRightPoint.y) < 2
-              })
               findLeft = true
             }
 
@@ -148,9 +134,7 @@ export const useTrestle = () => {
         // 오른쪽 찾는다.
         while (hasNextModule) {
           //바로 위에 있는지 확인한다.
-          let nextModule = centerPoints.find((centerPoint) => {
+          let nextModule = findNextModule({ x, y, width, height }, centerPoints, direction)
-            return Math.abs(centerPoint.x - x) < 2 && Math.abs(centerPoint.y - (y - height)) < 2
-          })
 
           if (nextModule) {
             // 바로 위 모듈을 찾는다.
@@ -160,16 +144,10 @@ export const useTrestle = () => {
           } else {
             // 바로 위가 없을 경우 먼저 왼쪽위가 있는지 확인 한다.
             if (findRight) {
-              const topRightPoint = { x: x + width / 2, y: y - height }
+              nextModule = findNextRightModule({ x, y, width, height }, centerPoints, direction)
-              nextModule = centerPoints.find((centerPoint) => {
-                return Math.abs(centerPoint.x - topRightPoint.x) < 2 && Math.abs(centerPoint.y - topRightPoint.y) < 2
-              })
               findRight = false
             } else {
-              const topLeftPoint = { x: x - width / 2, y: y - height }
+              nextModule = findNextLeftModule({ x, y, width, height }, centerPoints, direction)
-              nextModule = centerPoints.find((centerPoint) => {
-                return Math.abs(centerPoint.x - topLeftPoint.x) < 2 && Math.abs(centerPoint.y - topLeftPoint.y) < 2
-              })
               findRight = true
             }
 
@@ -191,9 +169,7 @@ export const useTrestle = () => {
         // 센터 찾는다.
         while (hasNextModule) {
           //바로 위에 있는지 확인한다.
-          let nextModule = centerPoints.find((centerPoint) => {
+          let nextModule = findNextModule({ x, y, width, height }, centerPoints, direction)
-            return Math.abs(centerPoint.x - x) < 2 && Math.abs(centerPoint.y - (y - height)) < 2
-          })
 
           if (nextModule) {
             // 바로 위 모듈을 찾는다.
@@ -233,7 +209,6 @@ export const useTrestle = () => {
         const { width, height } = module
         let { x: startX, y: startY } = { ...module.getCenterPoint() }
         let { x, y } = { ...module.getCenterPoint() }
-        const direction = 'south'
         //TODO : 방향별로 가대 설치해야함
 
         let leftRows = 1
@@ -243,9 +218,7 @@ export const useTrestle = () => {
         //우선 절반을 나눈 뒤 왼쪽부터 찾는다.
         while (hasNextModule) {
           //바로 위에 있는지 확인한다.
-          let nextModule = centerPoints.find((centerPoint) => {
+          let nextModule = findNextModule({ x, y, width, height }, centerPoints, direction)
-            return Math.abs(centerPoint.x - x) < 2 && Math.abs(centerPoint.y - (y - height)) < 2
-          })
 
           if (nextModule) {
             // 바로 위 모듈을 찾는다.
@@ -255,16 +228,10 @@ export const useTrestle = () => {
           } else {
             // 바로 위가 없을 경우 먼저 왼쪽위가 있는지 확인 한다.
             if (findLeft) {
-              const topLeftPoint = { x: x - width / 2, y: y - height }
+              nextModule = findNextLeftModule({ x, y, width, height }, centerPoints, direction)
-              nextModule = centerPoints.find((centerPoint) => {
-                return Math.abs(centerPoint.x - topLeftPoint.x) < 2 && Math.abs(centerPoint.y - topLeftPoint.y) < 2
-              })
               findLeft = false
             } else {
-              const topRightPoint = { x: x + width / 2, y: y - height }
+              nextModule = nextModule = findNextRightModule({ x, y, width, height }, centerPoints, direction)
-              nextModule = centerPoints.find((centerPoint) => {
-                return Math.abs(centerPoint.x - topRightPoint.x) < 2 && Math.abs(centerPoint.y - topRightPoint.y) < 2
-              })
               findLeft = true
             }
 
@@ -291,7 +258,6 @@ export const useTrestle = () => {
         const { width, height } = module
         let { x: startX, y: startY } = { ...module.getCenterPoint() }
         let { x, y } = { ...module.getCenterPoint() }
-        const direction = 'south'
         //TODO : 방향별로 가대 설치해야함
 
         let rightRows = 1
@@ -301,9 +267,7 @@ export const useTrestle = () => {
         // 오른쪽 찾는다.
         while (hasNextModule) {
           //바로 위에 있는지 확인한다.
-          let nextModule = centerPoints.find((centerPoint) => {
+          let nextModule = findNextModule({ x, y, width, height }, centerPoints, direction)
-            return Math.abs(centerPoint.x - x) < 2 && Math.abs(centerPoint.y - (y - height)) < 2
-          })
 
           if (nextModule) {
             // 바로 위 모듈을 찾는다.
@@ -313,16 +277,10 @@ export const useTrestle = () => {
           } else {
             // 바로 위가 없을 경우 먼저 왼쪽위가 있는지 확인 한다.
             if (findRight) {
-              const topRightPoint = { x: x + width / 2, y: y - height }
+              nextModule = findNextRightModule({ x, y, width, height }, centerPoints, direction)
-              nextModule = centerPoints.find((centerPoint) => {
-                return Math.abs(centerPoint.x - topRightPoint.x) < 2 && Math.abs(centerPoint.y - topRightPoint.y) < 2
-              })
               findRight = false
             } else {
-              const topLeftPoint = { x: x - width / 2, y: y - height }
+              nextModule = findNextLeftModule({ x, y, width, height }, centerPoints, direction)
-              nextModule = centerPoints.find((centerPoint) => {
-                return Math.abs(centerPoint.x - topLeftPoint.x) < 2 && Math.abs(centerPoint.y - topLeftPoint.y) < 2
-              })
               findRight = true
             }
 
@@ -361,7 +319,92 @@ export const useTrestle = () => {
     installBracket()
   }
 
-  const drawRacks = (rackInfos, rackQty, rackIntvlPct, module, direction = 'south', l) => {
+  const findNextModule = (currentPoint, centerPoints, direction) => {
+    let { x, y, width, height } = currentPoint
+    width = Math.floor(width)
+    height = Math.floor(height)
+
+    let result
+    switch (direction) {
+      case 'south': {
+        result = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - x) < 2 && Math.abs(centerPoint.y - (y - height)) < 2)
+        break
+      }
+      case 'north': {
+        result = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - x) < 2 && Math.abs(centerPoint.y - (y + height)) < 2)
+        break
+      }
+      case 'east': {
+        result = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - (x - width)) < 2 && Math.abs(centerPoint.y - y) < 2)
+        break
+      }
+      case 'west': {
+        result = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - (x + width)) < 2 && Math.abs(centerPoint.y - y) < 2)
+        break
+      }
+    }
+
+    return result
+  }
+
+  const findNextLeftModule = (currentPoint, centerPoints, direction) => {
+    const { x, y, width, height } = currentPoint
+    let result
+    let topLeftPoint
+
+    switch (direction) {
+      case 'south': {
+        topLeftPoint = { x: x - width / 2, y: y - height }
+        break
+      }
+      case 'north': {
+        topLeftPoint = { x: x + width / 2, y: y + height }
+        break
+      }
+      case 'east': {
+        topLeftPoint = { x: x - width, y: y + height / 2 }
+        break
+      }
+      case 'west': {
+        topLeftPoint = { x: x + width, y: y - height / 2 }
+        break
+      }
+    }
+
+    result = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - topLeftPoint.x) < 2 && Math.abs(centerPoint.y - topLeftPoint.y) < 2)
+
+    return result
+  }
+  const findNextRightModule = (currentPoint, centerPoints, direction) => {
+    const { x, y, width, height } = currentPoint
+    let result
+    let topRightPoint
+
+    switch (direction) {
+      case 'south': {
+        topRightPoint = { x: x + width / 2, y: y - height }
+        break
+      }
+      case 'north': {
+        topRightPoint = { x: x - width / 2, y: y + height }
+        break
+      }
+      case 'east': {
+        topRightPoint = { x: x - width, y: y - height / 2 }
+        break
+      }
+      case 'west': {
+        topRightPoint = { x: x + width, y: y + height / 2 }
+        break
+      }
+    }
+
+    result = centerPoints.find((centerPoint) => Math.abs(centerPoint.x - topRightPoint.x) < 2 && Math.abs(centerPoint.y - topRightPoint.y) < 2)
+
+    return result
+  }
+
+  const drawRacks = (rackInfos, rackQty, rackIntvlPct, module, direction, l) => {
     const { width, height } = module
 
     let startPointX, startPointY
@@ -370,10 +413,20 @@ export const useTrestle = () => {
       case 'L': {
         // 왼쪽부분 시작 점
         if (direction === 'south') {
-          const x = module.left
+          startPointX = module.left + width / rackIntvlPct
-          const y = module.top + module.height / 2
+          startPointY = module.top + module.height
-          startPointX = x + width / rackIntvlPct
+          break
-          startPointY = y + height / 2
+        } else if (direction === 'east') {
+          startPointX = module.left + width
+          startPointY = module.top + height - height / rackIntvlPct
+          break
+        } else if (direction === 'west') {
+          startPointX = module.left
+          startPointY = module.top + height / rackIntvlPct
+          break
+        } else if (direction === 'north') {
+          startPointX = module.left + width - width / rackIntvlPct
+          startPointY = module.top
           break
         }
       }
@@ -381,19 +434,49 @@ export const useTrestle = () => {
       case 'R': {
         // 오른쪽부분 시작 점
         if (direction === 'south') {
-          const x = module.left + module.width
+          startPointX = module.left + module.width - width / rackIntvlPct
-          const y = module.top + module.height / 2
+          startPointY = module.top + module.height / 2 + height / 2
-          startPointX = x - width / rackIntvlPct
+          break
-          startPointY = y + height / 2
+        } else if (direction === 'east') {
+          startPointX = module.left + width
+          startPointY = module.top + height / rackIntvlPct
+          break
+        } else if (direction === 'west') {
+          startPointX = module.left
+          startPointY = module.top + height - height / rackIntvlPct
+          break
+        } else if (direction === 'north') {
+          startPointX = module.left + width / rackIntvlPct
+          startPointY = module.top
           break
         }
       }
       case 'C': {
         // 중간부분 시작점
         if (direction === 'south') {
+          const x = module.left + module.width / 2
+          const y = module.top + module.height / 2
           startPointX = x
           startPointY = y + height / 2
           break
+        } else if (direction === 'east') {
+          const x = module.left + width
+          const y = module.top + module.height / 2
+          startPointX = x
+          startPointY = y
+          break
+        } else if (direction === 'west') {
+          const x = module.left
+          const y = module.top + module.height / 2
+          startPointX = x
+          startPointY = y
+          break
+        } else if (direction === 'north') {
+          const x = module.left + module.width / 2
+          const y = module.top
+          startPointX = x
+          startPointY = y
+          break
         }
       }
     }
@@ -410,6 +493,13 @@ export const useTrestle = () => {
             stroke: 'red',
             strokeWidth: 4,
             selectable: false,
+            fill: 'red',
+            shadow: {
+              color: 'black', // Outline color
+              blur: 10,
+              offsetX: 0,
+              offsetY: 0,
+            },
             supFitQty,
             supFitIntvlPct,
             rackLen,
@@ -425,6 +515,100 @@ export const useTrestle = () => {
 
         break
       }
+      case 'east': {
+        rackInfos.forEach((rackInfo) => {
+          const { rackLen, itemId, supFitQty, supFitIntvlPct } = rackInfo
+
+          const rackLength = rackLen / 10
+
+          const rack = new fabric.Line([startPointX, startPointY, startPointX - rackLength, startPointY], {
+            name: 'rack',
+            stroke: 'red',
+            shadow: {
+              color: 'black', // Outline color
+              blur: 10,
+              offsetX: 0,
+              offsetY: 0,
+            },
+            strokeWidth: 4,
+            selectable: false,
+            supFitQty,
+            supFitIntvlPct,
+            rackLen,
+            rackId: itemId,
+            direction: 'left',
+          })
+
+          canvas.add(rack)
+          canvas.renderAll()
+
+          startPointX -= rackLength + 3
+        })
+        break
+      }
+
+      case 'west': {
+        rackInfos.forEach((rackInfo) => {
+          const { rackLen, itemId, supFitQty, supFitIntvlPct } = rackInfo
+
+          const rackLength = rackLen / 10
+
+          const rack = new fabric.Line([startPointX, startPointY, startPointX + rackLength, startPointY], {
+            name: 'rack',
+            stroke: 'red',
+            shadow: {
+              color: 'black', // Outline color
+              blur: 10,
+              offsetX: 0,
+              offsetY: 0,
+            },
+            strokeWidth: 4,
+            selectable: false,
+            supFitQty,
+            supFitIntvlPct,
+            rackLen,
+            rackId: itemId,
+            direction: 'right',
+          })
+
+          canvas.add(rack)
+          canvas.renderAll()
+
+          startPointX += rackLength + 3
+        })
+        break
+      }
+      case 'north': {
+        rackInfos.forEach((rackInfo) => {
+          const { rackLen, itemId, supFitQty, supFitIntvlPct } = rackInfo
+
+          const rackLength = rackLen / 10
+
+          const rack = new fabric.Line([startPointX, startPointY, startPointX, startPointY + rackLength], {
+            name: 'rack',
+            stroke: 'red',
+            shadow: {
+              color: 'black', // Outline color
+              blur: 10,
+              offsetX: 0,
+              offsetY: 0,
+            },
+            strokeWidth: 4,
+            selectable: false,
+            supFitQty,
+            supFitIntvlPct,
+            rackLen,
+            rackId: itemId,
+            direction: 'bottom',
+          })
+
+          canvas.add(rack)
+          canvas.renderAll()
+
+          startPointY += rackLength + 3
+        })
+        break
+      }
     }
   }
 
@@ -460,6 +644,57 @@ export const useTrestle = () => {
           canvas.add(bracket)
         })
         canvas.renderAll()
+      } else if (direction === 'left') {
+        const result = getBracketPoints(supFitQty, supFitIntvlPct)
+
+        result.forEach((percent) => {
+          const bracket = new fabric.Rect({
+            left: x2 + (rackLen / 10) * percent,
+            top: y2 - moduleLength / 3,
+            fill: 'green',
+            name: 'bracket',
+            width: moduleLength,
+            height: moduleLength,
+            selectable: false,
+          })
+
+          canvas.add(bracket)
+        })
+        canvas.renderAll()
+      } else if (direction === 'right') {
+        const result = getBracketPoints(supFitQty, supFitIntvlPct)
+
+        result.forEach((percent) => {
+          const bracket = new fabric.Rect({
+            left: x2 - (rackLen / 10) * percent,
+            top: y2 - moduleLength / 3,
+            fill: 'green',
+            name: 'bracket',
+            width: moduleLength,
+            height: moduleLength,
+            selectable: false,
+          })
+
+          canvas.add(bracket)
+        })
+        canvas.renderAll()
+      } else if (direction === 'bottom') {
+        const result = getBracketPoints(supFitQty, supFitIntvlPct)
+
+        result.forEach((percent) => {
+          const bracket = new fabric.Rect({
+            left: x2 - moduleLength / 3,
+            top: y2 - (rackLen / 10) * percent,
+            fill: 'green',
+            name: 'bracket',
+            width: moduleLength,
+            height: moduleLength,
+            selectable: false,
+          })
+
+          canvas.add(bracket)
+        })
+        canvas.renderAll()
       }
     })
   }
@@ -488,8 +723,21 @@ export const useTrestle = () => {
     return points
   }
 
-  function findTopTwoPoints(points) {
+  function findTopTwoPoints(points, direction) {
-    points.sort((a, b) => b.y - a.y)
+    switch (direction) {
+      case 'south':
+        points.sort((a, b) => b.y - a.y)
+        break
+      case 'north':
+        points.sort((a, b) => a.y - b.y)
+        break
+      case 'east':
+        points.sort((a, b) => b.x - a.x)
+        break
+      case 'west':
+        points.sort((a, b) => a.x - b.x)
+        break
+    }
 
     return points.slice(0, 2)
   }
@@ -549,12 +797,12 @@ export const useTrestle = () => {
           bottomRightPoint = { x: x - width / 2, y: y - height }
           break
         case 'east':
-          bottomCell = centerPoints.filter((centerPoint) => Math.abs(centerPoint.x - (x - width)) < 2 && Math.abs(centerPoint.y - y) < 2)
+          bottomCell = centerPoints.filter((centerPoint) => Math.abs(centerPoint.x - (x + width)) < 2 && Math.abs(centerPoint.y - y) < 2)
           bottomLeftPoint = { x: x + width, y: y + height / 2 }
           bottomRightPoint = { x: x + width, y: y - height / 2 }
           break
         case 'west':
-          bottomCell = centerPoints.filter((centerPoint) => Math.abs(centerPoint.x - (x + width)) < 2 && Math.abs(centerPoint.y - y) < 2)
+          bottomCell = centerPoints.filter((centerPoint) => Math.abs(centerPoint.x - (x - width)) < 2 && Math.abs(centerPoint.y - y) < 2)
           bottomLeftPoint = { x: x - width, y: y - height / 2 }
           bottomRightPoint = { x: x - width, y: y + height / 2 }
           break

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) {
+    setFetchRoofMaterials(!fetchRoofMaterials)
-      return
+    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,9 +161,19 @@ export function useRoofAllocationSetting(id) {
             }
           })
         }
-        
+
-        setCurrentRoofList(selectRoofs)
+        // setCurrentRoofList(selectRoofs)
-        setBasicSetting({ ...basicSetting, roofsData: roofsArray })
+        //setBasicSetting({ ...basicSetting, roofsData: roofsArray })
+        setBasicSetting({
+          ...basicSetting,
+          roofSizeSet: res[0].roofSizeSet,
+          roofAngleSet: res[0].roofAngleSet,
+          roofsData: roofsArray,
+        })
+        setBasicInfo({
+          roofSizeSet: '' + res[0].roofSizeSet,
+          roofAngleSet: '' + res[0].roofAngleSet,
+        })
       })
     } catch (error) {
       console.error('Data fetching error:', error)
@@ -167,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,
@@ -184,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) => {
+      await post({ url: `/api/canvas-management/roof-allocation-settings`, data: patternData }).then((res) => {
-    console.log('roof-allocation-settings res ', res)
+        console.log('roof-allocation-settings res ', res)
-      swalFire({ text: getMessage(res.returnMessage) })
+        swalFire({ text: getMessage(res.returnMessage) })
-    })
+      })
 
-    //Recoil 설정
+      //Recoil 설정
-    //setCanvasSetting({ ...basicSetting })
+      //setCanvasSetting({ ...basicSetting })
-    fetchBasicSettings()
+      fetchBasicSettings()
-  } catch (error) {
+    } catch (error) {
-    swalFire({ text: error.message, icon: 'error' })
+      swalFire({ text: error.message, icon: 'error' })
-  }
+    }
   }
 
   const onAddRoofMaterial = () => {
@@ -315,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 {
@@ -324,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,
+})