지붕재 선택 작업중

src/components/floor-plan/CanvasMenu.jsx

@@ -16,7 +16,13 @@ import { canvasSettingState, canvasState, canvasZoomState, currentMenuState, ver
 import { sessionStore } from '@/store/commonAtom'
 import { outerLinePointsState } from '@/store/outerLineAtom'
 import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
-import { settingModalFirstOptionsState } from '@/store/settingAtom'
+import {
+  addedRoofsSelector,
+  basicSettingState,
+  roofMaterialsSelector,
+  selectedRoofMaterialSelector,
+  settingModalFirstOptionsState,
+} from '@/store/settingAtom'
 
 import KO from '@/locales/ko.json'
 import JA from '@/locales/ja.json'
@@ -75,10 +81,14 @@ export default function CanvasMenu(props) {
   // const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useContext(EventContext)
   const commonUtils = useRecoilValue(commonUtilsState)
   const { commonFunctions } = useCommonUtils()
-  const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }]
+
+  const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
   const { floorPlanState, setFloorPlanState } = useContext(FloorPlanContext)
   const { restoreModuleInstArea } = useModuleBasicSetting()
 
+  const addedRoofs = useRecoilValue(addedRoofsSelector)
+  const [basicSetting, setBasicSetting] = useRecoilState(basicSettingState)
+
   //견적서버튼 노출용
   const [buttonStyle, setButtonStyle] = useState('')
 
@@ -112,6 +122,10 @@ export default function CanvasMenu(props) {
     if (pathname !== '/floor-plan') router.push('/floor-plan')
   }
 
+  const changeSelectedRoofMaterial = (e) => {
+    setBasicSetting({ ...basicSetting, selectedRoofMaterial: e })
+  }
+
   const settingsModalOptions = useRecoilState(settingModalFirstOptionsState)
 
   useEffect(() => {
@@ -292,9 +306,11 @@ export default function CanvasMenu(props) {
                 <button className={`btn02 ${commonUtils.dimension ? 'active' : ''} `} onClick={() => commonFunctions('dimension')}></button>
                 <button className={`btn03 ${commonUtils.distance ? 'active' : ''} `} onClick={() => commonFunctions('distance')}></button>
               </div>
-              <div className="select-box">
+              {addedRoofs.length > 0 && (
-                <QSelectBox title={'瓦53A'} option={SelectOption} />
+                <div className="select-box">
-              </div>
+                  {<QSelectBox value={addedRoofs.find((roof) => roof.selected)} options={addedRoofs} onChange={changeSelectedRoofMaterial} />}
+                </div>
+              )}
               <div className="btn-from">
                 <button
                   className={`btn10 ${floorPlanState.refFileModalOpen && 'active'}`}

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

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import { useMessage } from '@/hooks/useMessage'
 import { usePopup } from '@/hooks/usePopup'
@@ -8,10 +8,15 @@ import MaterialGuide from '@/components/floor-plan/modal/placementShape/Material
 import WithDraggable from '@/components/common/draggable/WithDraggable'
 
 import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilValue } from 'recoil'
 import { roofMaterialsAtom } from '@/store/settingAtom'
 import { isObjectNotEmpty } from '@/util/common-utils'
+import { useCommonCode } from '@/hooks/common/useCommonCode'
 
+export const ROOF_MATERIAL_LAYOUT = {
+  PARALLEL: 'P',
+  STAIRS: 'S',
+}
 export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, setShowPlaceShapeModal }) {
   const [showSizeGuideModal, setShowSizeGuidModal] = useState(false)
   const [showMaterialGuideModal, setShowMaterialGuidModal] = useState(false)
@@ -20,25 +25,59 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
   const roofMaterials = useRecoilValue(roofMaterialsAtom)
 
   const { basicSetting, setBasicSettings, fetchBasicSettings, basicSettingSave } = useCanvasSetting()
+  const { findCommonCode } = useCommonCode()
+  const [raftCodes, setRaftCodes] = useState([])
   const [currentRoofMaterial, setCurrentRoofMaterial] = useState(
     isObjectNotEmpty(basicSetting.selectedRoofMaterial) ? basicSetting.selectedRoofMaterial : roofMaterials[0],
   )
 
+  const [roofLayout, setRoofLayout] = useState(ROOF_MATERIAL_LAYOUT.PARALLEL)
+
+  const roofRef = {
+    roofCd: useRef(null),
+    width: useRef(null),
+    length: useRef(null),
+    rafter: useRef(null),
+    hajebichi: useRef(null),
+  }
+
   // 데이터를 최초 한 번만 조회
   useEffect(() => {
     fetchBasicSettings()
+    const raftCodeList = findCommonCode('203800')
+    setRaftCodes(raftCodeList)
   }, [])
 
-  useEffect(() => {
-    console.log(currentRoofMaterial)
-  }, [roofMaterials])
-
   // Function to update the roofType and corresponding values
   const handleRoofTypeChange = (value) => {
     const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value)
     setCurrentRoofMaterial(selectedRoofMaterial)
-    /*const newBasicSetting = { ...basicSetting }
+  }
-    setBasicSettings({ ...newBasicSetting, selectedRoofMaterial: selectedRoofMaterial })*/
+
+  const handleSaveBtn = () => {
+    const roofInfo = {
+      ...currentRoofMaterial,
+      roofCd: roofRef.roofCd.current?.value,
+      width: roofRef.width.current?.value,
+      length: roofRef.length.current?.value,
+      hajebichi: roofRef.hajebichi.current?.value,
+      raft: roofRef.rafter.current?.value,
+      selected: true,
+      layout: roofLayout,
+    }
+
+    const addedRoofs = []
+    addedRoofs.push(roofInfo)
+
+    setBasicSettings({
+      ...basicSetting,
+      selectedRoofMaterial: {
+        // 선택된 지붕재 정보
+        roofInfo,
+      },
+      roofs: addedRoofs,
+    })
+    basicSettingSave()
   }
 
   return (
@@ -149,8 +188,11 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                         <select
                           className="select-light dark"
                           name="roofType"
+                          ref={roofRef.roofCd}
                           value={currentRoofMaterial.roofMatlCd}
-                          onChange={(e) => handleRoofTypeChange(e.target.value)}
+                          onChange={(e) => {
+                            handleRoofTypeChange(e.target.value)
+                          }}
                         >
                           {roofMaterials.map((roof, index) => {
                             return (
@@ -162,38 +204,22 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                         </select>
                       </div>
                       {['R', 'C'].includes(currentRoofMaterial.widAuth) && (
-                        <>
+                        <div className="flex-ment">
-                          <div className="flex-ment">
+                          <div className="outline-form">
-                            <span>W</span>
+                            <span className="mr10">W</span>
-                            <div className="select-wrap" style={{ width: '84px' }}>
+                            <div className="input-grid" style={{ width: '63px' }}>
-                              <select
+                              <input type="text" className="input-origin block" ref={roofRef.width} value={parseInt(currentRoofMaterial.width)} />
-                                className="select-light dark"
-                                name="roofWidth"
-                                onChange={(e) => {
-                                  // 상태 업데이트 함수 호출
-                                  setCurrentRoofMaterial({ ...currentRoofMaterial, roofWidth: e.target.value })
-                                }}
-                              >
-                                <option value={parseInt(currentRoofMaterial.widBase)}>{parseInt(currentRoofMaterial.widBase)}</option>
-                              </select>
                             </div>
                           </div>
-                        </>
+                        </div>
                       )}
                       {['R', 'C'].includes(currentRoofMaterial.lenAuth) && (
                         <div className="flex-ment">
-                          <span>L</span>
+                          <div className="outline-form">
-                          <div className="select-wrap" style={{ width: '84px' }}>
+                            <span className="mr10">L</span>
-                            <select
+                            <div className="input-grid" style={{ width: '63px' }}>
-                              className="select-light dark"
+                              <input type="text" className="input-origin block" ref={roofRef.length} value={parseInt(currentRoofMaterial.length)} />
-                              name="roofHeight"
+                            </div>
-                              onChange={(e) => {
-                                // 상태 업데이트 함수 호출
-                                setCurrentRoofMaterial({ ...currentRoofMaterial, roofHeight: e.target.value })
-                              }}
-                            >
-                              <option value={parseInt(currentRoofMaterial.lenBase)}>{parseInt(currentRoofMaterial.lenBase)}</option>
-                            </select>
                           </div>
                         </div>
                       )}
@@ -201,33 +227,30 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
                         <div className="flex-ment">
                           <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
                           <div className="select-wrap" style={{ width: '84px' }}>
-                            <select
+                            <select className="select-light dark" name="roofGap" ref={roofRef.rafter}>
-                              className="select-light dark"
+                              {raftCodes.map((raft, index) => {
-                              name="roofGap"
+                                return (
-                              onChange={(e) => {
+                                  <option key={index} value={raft.clCode}>
-                                // 상태 업데이트 함수 호출
+                                    {raft.clCodeNm}
-                                setCurrentRoofMaterial({ ...currentRoofMaterial, roofGap: e.target.value })
+                                  </option>
-                              }}
+                                )
-                            >
+                              })}
-                              <option>455</option>
                             </select>
                           </div>
                         </div>
                       )}
                       {['C', 'R'].includes(currentRoofMaterial.roofPchAuth) && (
                         <div className="flex-ment">
-                          <span>{getMessage('hajebichi')}</span>
+                          <div className="outline-form">
-                          <div className="grid-select no-flx" style={{ width: '84px' }}>
+                            <span className="mr10">{getMessage('hajebichi')}</span>
-                            <select
+                            <div className="input-grid" style={{ width: '63px' }}>
-                              className="select-light dark"
+                              <input
-                              name="roofHajebichi"
+                                type="text"
-                              onChange={(e) => {
+                                className="input-origin block"
-                                // 상태 업데이트 함수 호출
+                                ref={roofRef.hajebichi}
-                                setCurrentRoofMaterial({ ...currentRoofMaterial, roofHajebichi: e.target.value })
+                                value={parseInt(currentRoofMaterial.hajebichi)}
-                              }}
+                              />
-                            >
+                            </div>
-                              <option value={parseInt(currentRoofMaterial.roofPchBase)}>{parseInt(currentRoofMaterial.roofPchBase)}</option>
-                            </select>
                           </div>
                         </div>
                       )}
@@ -238,7 +261,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set
             </table>
           </div>
           <div className="grid-btn-wrap">
-            <button className="btn-frame modal act" onClick={() => basicSettingSave()}>
+            <button className="btn-frame modal act" onClick={handleSaveBtn}>
               {getMessage('modal.common.save')}
             </button>
           </div>

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

@@ -3,16 +3,27 @@ import WithDraggable from '@/components/common/draggable/WithDraggable'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useRoofAllocationSetting } from '@/hooks/roofcover/useRoofAllocationSetting'
 import { usePopup } from '@/hooks/usePopup'
-import { useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue } from 'recoil'
 import { contextPopupPositionState } from '@/store/popupAtom'
+import { useEffect, useState } from 'react'
+import { basicSettingState } from '@/store/settingAtom'
+import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting'
 
 export default function RoofAllocationSetting(props) {
   const contextPopupPosition = useRecoilValue(contextPopupPositionState)
   const { id, pos = contextPopupPosition } = props
   const { getMessage } = useMessage()
   const { closePopup } = usePopup()
-  const { handleSave, onAddRoofMaterial, onDeleteRoofMaterial, values, roofMaterials, selectedRoofMaterial, setSelectedRoofMaterial } =
+  const {
-    useRoofAllocationSetting(id)
+    handleSave,
+    onAddRoofMaterial,
+    onDeleteRoofMaterial,
+    roofMaterials,
+    setCurrentRoofMaterial,
+    roofList,
+    handleDefaultRoofMaterial,
+    handleChangeRoofMaterial,
+  } = useRoofAllocationSetting(id)
 
   return (
     <WithDraggable isShow={true} pos={pos}>
@@ -28,7 +39,13 @@ export default function RoofAllocationSetting(props) {
           <div className="allocation-select-wrap">
             <span>{getMessage('modal.roof.alloc.select.roof.material')}</span>
             <div className="grid-select">
-              <QSelectBox options={roofMaterials} value={selectedRoofMaterial} onChange={(e) => setSelectedRoofMaterial(e)} />
+              <QSelectBox
+                options={roofMaterials}
+                onChange={(e) => {
+                  const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id)
+                  setCurrentRoofMaterial(selected)
+                }}
+              />
             </div>
             <button
               className="allocation-edit"
@@ -41,25 +58,34 @@ export default function RoofAllocationSetting(props) {
             </button>
           </div>
           <div className="grid-option-wrap">
-            {values.map((value, index) => (
+            {roofList.map((roof, index) => {
-              <div className="grid-option-box" key={index}>
+              return (
-                <div className="d-check-radio pop no-text">
+                <div className="grid-option-box" key={index}>
-                  <input type="radio" name="radio01" />
+                  <div className="d-check-radio pop no-text">
-                  <label htmlFor="ra01"></label>
+                    <input type="radio" name="radio01" checked={roof.selected} readOnly={true} />
-                </div>
+                    <label
-                <div className="grid-option-block-form">
+                      htmlFor="ra01"
-                  <div className="block-box">
+                      onClick={(e) => {
-                    <div className="flex-ment">
+                        handleDefaultRoofMaterial(index)
-                      <div className="grid-select" style={{ width: '248px' }}>
+                      }}
-                        <QSelectBox options={roofMaterials} value={value} />
+                    ></label>
-                      </div>
-                      {index === 0 && <span className="dec">基本屋根材</span>}
-                      {index !== 0 && <button className="delete" onClick={() => onDeleteRoofMaterial(value.id)}></button>}
-                    </div>
                   </div>
-                  <div className="block-box">
+                  <div className="grid-option-block-form">
-                    {value.type === 'A' ? (
+                    <div className="block-box">
-                      <>
+                      <div className="flex-ment">
+                        <div className="grid-select" style={{ width: '248px' }}>
+                          <QSelectBox
+                            options={roofMaterials}
+                            value={roofMaterials.find((r) => r.id === roof.id)}
+                            onChange={(e) => handleChangeRoofMaterial(e, index)}
+                          />
+                        </div>
+                        {index === 0 && <span className="dec">基本屋根材</span>}
+                        {index !== 0 && <button className="delete" onClick={() => onDeleteRoofMaterial(index)}></button>}
+                      </div>
+                    </div>
+                    <div className="block-box">
+                      {roof.widAuth && (
                         <div className="flex-ment">
                           <span>W</span>
                           <div className="select-wrap" style={{ width: '84px' }}>
@@ -68,6 +94,8 @@ export default function RoofAllocationSetting(props) {
                             </select>
                           </div>
                         </div>
+                      )}
+                      {roof.lenAuth && (
                         <div className="flex-ment">
                           <span>L</span>
                           <div className="select-wrap" style={{ width: '84px' }}>
@@ -76,6 +104,8 @@ export default function RoofAllocationSetting(props) {
                             </select>
                           </div>
                         </div>
+                      )}
+                      {roof.raftAuth && (
                         <div className="flex-ment">
                           <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
                           <div className="select-wrap" style={{ width: '84px' }}>
@@ -84,9 +114,8 @@ export default function RoofAllocationSetting(props) {
                             </select>
                           </div>
                         </div>
-                      </>
+                      )}
-                    ) : value.type === 'B' ? (
+                      {roof.roofPchAuth && (
-                      <>
                         <div className="flex-ment">
                           <span>{getMessage('hajebichi')}</span>
                           <div className="grid-select no-flx" style={{ width: '84px' }}>
@@ -95,63 +124,23 @@ export default function RoofAllocationSetting(props) {
                             </select>
                           </div>
                         </div>
-                        <div className="flex-ment">
+                      )}
-                          <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
+                    </div>
-                          <div className="grid-select no-flx right" style={{ width: '84px' }}>
+                    <div className="block-box">
-                            <select className="select-light dark" name="" id="">
+                      <div className="icon-btn-wrap">
-                              <option>265</option>
+                        <button className={roof.layout === ROOF_MATERIAL_LAYOUT.PARALLEL ? 'act' : ''}>
-                            </select>
+                          {getMessage('modal.roof.alloc.select.parallel')}
-                          </div>
+                          <i className="allocation01"></i>
-                        </div>
+                        </button>
-                      </>
+                        <button className={roof.layout === ROOF_MATERIAL_LAYOUT.STAIRS ? 'act' : ''}>
-                    ) : value.type === 'C' ? (
+                          {getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
-                      <>
+                        </button>
-                        <div className="flex-ment">
+                      </div>
-                          <span>{getMessage('hajebichi')}</span>
-                          <div className="grid-select no-flx" style={{ width: '84px' }}>
-                            <select className="select-light dark" name="" id="">
-                              <option>265</option>
-                            </select>
-                          </div>
-                        </div>
-                      </>
-                    ) : value.type === 'D' ? (
-                      <>
-                        <div className="flex-ment">
-                          <span>L</span>
-                          <div className="grid-select no-flx" style={{ width: '84px' }}>
-                            <select className="select-light dark" name="" id="">
-                              <option>265</option>
-                            </select>
-                          </div>
-                        </div>
-                        <div className="flex-ment">
-                          <span>{getMessage('modal.placement.initial.setting.rafter')}</span>
-                          <div className="grid-select no-flx right" style={{ width: '84px' }}>
-                            <select className="select-light dark" name="" id="">
-                              <option>265</option>
-                            </select>
-                          </div>
-                        </div>
-                      </>
-                    ) : (
-                      ''
-                    )}
-                  </div>
-                  <div className="block-box">
-                    <div className="icon-btn-wrap">
-                      <button className={value.alignType === 'parallel' ? 'act' : ''}>
-                        {getMessage('modal.roof.alloc.select.parallel')}
-                        <i className="allocation01"></i>
-                      </button>
-                      <button className={value.alignType === 'stairs' ? 'act' : ''}>
-                        {getMessage('modal.roof.alloc.select.stairs')} <i className="allocation02"></i>
-                      </button>
                     </div>
                   </div>
                 </div>
-              </div>
+              )
-            ))}
+            })}
           </div>
           <div className="grid-btn-wrap">
             <button className="btn-frame modal act" onClick={handleSave}>

src/hooks/option/useCanvasSetting.js

@@ -106,9 +106,25 @@ export function useCanvasSetting() {
     addRoofMaterials()
   }, [])
 
+  //지붕재 초기세팅
   const addRoofMaterials = async () => {
     const { data } = await getRoofMaterialList()
-    setRoofMaterials(data)
+    const roofLists = data.map((item) => ({
+      ...item,
+      id: item.roofMatlCd,
+      name: item.roofMatlNm,
+      selected: false,
+      nameJp: item.roofMatlNmJp,
+      length: item.lenBase && parseInt(item.lenBase),
+      width: item.widBase && parseInt(item.widBase),
+      raft: item.raftBase && parseInt(item.raftBase),
+      hajebichi: item.roofPchBase && parseInt(item.roofPchBase),
+    }))
+    setRoofMaterials(roofLists)
+    const selectedRoofMaterial = roofLists[0]
+    const addRoofs = []
+    addRoofs.push({ ...selectedRoofMaterial, selected: true })
+    setBasicSettings({ ...basicSetting, roofMaterials: selectedRoofMaterial, roofs: addRoofs })
   }
 
   useEffect(() => {
@@ -144,6 +160,7 @@ export function useCanvasSetting() {
   // 배치면 초기설정 변경 시
   useEffect(() => {
     //console.log('useCanvasSetting canvasSetting 실행', canvasSetting)
+
     if (canvasSetting.flag) {
       basicSettingSave()
     }

src/hooks/roofcover/useRoofAllocationSetting.js

@@ -4,7 +4,7 @@ import { useEffect, useState } from 'react'
 import { setSurfaceShapePattern } from '@/util/canvas-util'
 import { useSwal } from '@/hooks/useSwal'
 import { usePolygon } from '@/hooks/usePolygon'
-import { roofDisplaySelector } from '@/store/settingAtom'
+import { basicSettingState, roofDisplaySelector, roofMaterialsSelector, selectedRoofMaterialSelector } from '@/store/settingAtom'
 import { usePopup } from '@/hooks/usePopup'
 import { POLYGON_TYPE } from '@/common/common'
 import { v4 as uuidv4 } from 'uuid'
@@ -26,69 +26,16 @@ export function useRoofAllocationSetting(id) {
   const { swalFire } = useSwal()
   const { setMenuNumber } = useCanvasMenu()
   const setMenuType = useSetRecoilState(menuTypeState)
-  const roofMaterials = [
+  const roofMaterials = useRecoilValue(roofMaterialsSelector)
-    {
+  const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector)
-      id: 'A',
+  const [basicSetting, setBasicSetting] = useRecoilState(basicSettingState)
-      name: '기와1',
+  const [currentRoofMaterial, setCurrentRoofMaterial] = useState(roofMaterials[0]) // 팝업 내 기준 지붕재
-      type: 'A',
+  const [roofList, setRoofList] = useState([])
-      width: '200',
-      length: '200',
-      alignType: 'parallel',
-    },
-    {
-      id: 'B',
-      name: '기와2',
-      type: 'B',
-      rafter: '200',
-      alignType: 'parallel',
-    },
-    {
-      id: 'C',
-      name: '기와3',
-      type: 'C',
-      hajebichi: '200',
-      alignType: 'stairs',
-    },
-    {
-      id: 'D',
-      name: '기와4',
-      type: 'D',
-      length: '200',
-      alignType: 'stairs',
-    },
-  ]
-  const widths = [
-    { name: '200', id: 'q' },
-    { name: '250', id: 'q1' },
-    { name: '300', id: 'q2' },
-  ]
-  const lengths = [
-    { name: '200', id: 'w' },
-    { name: '250', id: 'w1' },
-    { name: '300', id: 'w2' },
-  ]
-  const rafters = [
-    { name: '200', id: 'e' },
-    { name: '250', id: 'e1' },
-    { name: '300', id: 'e2' },
-  ]
-
-  const [values, setValues] = useState([
-    {
-      id: 'A',
-      type: 'A',
-      roofMaterial: { name: '기와1' },
-      width: { name: '200' },
-      length: { name: '250' },
-      rafter: { name: '300' },
-      alignType: 'stairs',
-    },
-  ])
-
-  const [radioValue, setRadioValue] = useState('A')
   const [editingLines, setEditingLines] = useState([])
 
-  const [selectedRoofMaterial, setSelectedRoofMaterial] = useState(roofMaterials[0])
+  useEffect(() => {
+    setRoofList(basicSetting.roofs)
+  }, [basicSetting])
 
   useEffect(() => {
     const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) // roofPolygon.innerLines
@@ -130,11 +77,15 @@ export function useRoofAllocationSetting(id) {
   }, [])
 
   const onAddRoofMaterial = () => {
-    setValues([...values, selectedRoofMaterial])
+    if (roofList.length >= 4) {
+      swalFire({ type: 'alert', icon: 'error', text: getMessage('지붕재는 4개까지 선택 가능합니다.') })
+      return
+    }
+    setRoofList([...roofList, { ...currentRoofMaterial, selected: false, id: currentRoofMaterial.roofMatlCd, name: currentRoofMaterial.roofMatlNm }])
   }
 
-  const onDeleteRoofMaterial = (id) => {
+  const onDeleteRoofMaterial = (idx) => {
-    setValues(values.filter((value) => value.id !== id))
+    setRoofList([...roofList.filter((_, index) => index !== idx)])
   }
 
   const { handleMenu } = useMenu()
@@ -207,6 +158,13 @@ export function useRoofAllocationSetting(id) {
       canvas.remove(wallLine)
     })
 
+    setBasicSetting((prev) => {
+      return {
+        ...prev,
+        roofs: roofList,
+      }
+    })
+
     const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof')
 
     roofs.forEach((roof) => {
@@ -246,25 +204,45 @@ export function useRoofAllocationSetting(id) {
     canvas?.renderAll()
   }
 
-  const handleRadioOnChange = (e) => {
+  //roof input값 변경
-    setRadioValue(e.target)
+  const handleChangeInput = (type, value, index) => {}
+
+  // 지붕재 변경
+  const handleChangeRoofMaterial = (value, index) => {
+    const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value.id)
+    const newRoofList = roofList.map((roof, idx) => {
+      if (idx === index) {
+        return { ...selectedRoofMaterial }
+      }
+      return roof
+    })
+
+    setRoofList(newRoofList)
+  }
+
+  // 기본 지붕재 radio값 변경
+  const handleDefaultRoofMaterial = (index) => {
+    const newRoofList = roofList.map((roof, idx) => {
+      return { ...roof, selected: idx === index }
+    })
+
+    setRoofList(newRoofList)
   }
 
   return {
     handleSave,
     onAddRoofMaterial,
     onDeleteRoofMaterial,
-    handleRadioOnChange,
     handleAlloc,
     setLineSize,
-    widths,
-    lengths,
-    rafters,
-    values,
     roofMaterials,
     selectedRoofMaterial,
-    setSelectedRoofMaterial,
+    basicSetting,
-    radioValue,
+    setBasicSetting,
-    setRadioValue,
+    currentRoofMaterial,
+    setCurrentRoofMaterial,
+    roofList,
+    handleDefaultRoofMaterial,
+    handleChangeRoofMaterial,
   }
 }

src/store/settingAtom.js

@@ -203,8 +203,10 @@ export const basicSettingState = atom({
   default: {
     roofSizeSet: 1,
     roofAngleSet: 'slope',
-    selectedRoofMaterial: {},
+    selectedRoofMaterial: {}, // 선택된 지붕재
+    roofs: [], // 지붕면 할당에서 추가된 지붕재 목록
   },
+  dangerouslyAllowMutability: true,
 })
 
 // db에 등록된 지붕재 목록
@@ -213,6 +215,35 @@ export const roofMaterialsAtom = atom({
   default: [],
 })
 
+//현재 선택된 지붕재
+export const selectedRoofMaterialSelector = selector({
+  key: 'selectedRoofMaterialSelector',
+  get: ({ get }) => {
+    const basicSetting = get(basicSettingState)
+    const roofMaterials = get(roofMaterialsAtom)
+    return basicSetting.selectedRoofMaterial ?? roofMaterials[0]
+  },
+})
+
+// QSelectBox에서 사용할 지붕재 목록
+export const roofMaterialsSelector = selector({
+  key: 'roofMaterialsSelector',
+  get: ({ get }) => {
+    const roofMaterials = get(roofMaterialsAtom)
+    return roofMaterials.map((material) => ({ ...material, id: material.roofMatlCd, name: material.roofMatlNm }))
+  },
+})
+
+// 지붕면 할당에서 추가된 지붕재 목록
+export const addedRoofsSelector = selector({
+  key: 'addedRoofsSelector',
+  get: ({ get }) => {
+    const basicSetting = get(basicSettingState)
+    return basicSetting.roofs
+  },
+  dangerouslyAllowMutability: true,
+})
+
 /**
  * 현재 선택된 물건 번호
  */