모듈 선택 모듈 작업

src/components/floor-plan/modal/basic/step/Module.jsx

@@ -1,10 +1,13 @@
-import { useState } from 'react'
+import { useEffect, useState, useReducer } from 'react'
-import { useRecoilValue } from 'recoil'
+import { useRecoilValue, useRecoilState } from 'recoil'
 import { addedRoofsState } from '@/store/settingAtom'
 import { canvasSettingState, pitchSelector } from '@/store/canvasAtom'
 import { useMessage } from '@/hooks/useMessage'
 import QSelectBox from '@/components/common/select/QSelectBox'
 import { useModuleSelection } from '@/hooks/module/useModuleSelection'
+import ModuleTabContents from './ModuleTabContents'
+import { useDebounceCallback, useDebounceValue } from 'usehooks-ts'
+import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
 
 export default function Module({}) {
   const { getMessage } = useMessage()
@@ -12,28 +15,47 @@ export default function Module({}) {
   const [roofTab, setRoofTab] = useState(0) //지붕재 탭
 
   const {
-    roofMaterial,
+    moduleSelectionInitParams,
     selectedModules,
     raftCodes,
     roughnessCodes,
     windSpeedCodes,
     managementState,
     moduleList,
-    trestleList,
+    installHeight,
-    constMthdList,
+    verticalSnowCover,
-    roofBaseList,
-    globalPitch,
-    displayPitch,
-    handleRoofTab,
     handleChangeModule,
-    handleChangeRaftBase,
-    handleChangeTrestle,
-    handleChangeConstMthd,
-    handleChangeRoofBase,
     handleChangeSurfaceType,
     handleChangeWindSpeed,
+    handleChangeInstallHeight,
+    handleChangeVerticalSnowCover,
   } = useModuleSelection({ addedRoofs })
 
+  const [inputInstallHeight, setInputInstallHeight] = useState(installHeight)
+  const [inputVerticalSnowCover, setInputVerticalSnowCover] = useState(verticalSnowCover)
+
+  const [debouncedInstallHeight] = useDebounceValue(inputInstallHeight, 500)
+  const [debouncedVerticalSnowCover] = useDebounceValue(inputVerticalSnowCover, 500)
+
+  const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터
+
+  const [tempModuleSelectionData, setTempModuleSelectionData] = useReducer((prevState, nextState) => {
+    return { ...prevState, ...nextState }
+  }, moduleSelectionData)
+
+  useEffect(() => {
+    handleChangeInstallHeight(debouncedInstallHeight)
+  }, [debouncedInstallHeight])
+
+  useEffect(() => {
+    handleChangeVerticalSnowCover(debouncedVerticalSnowCover)
+  }, [debouncedVerticalSnowCover])
+
+  useEffect(() => {
+    setInputInstallHeight(installHeight)
+    setInputVerticalSnowCover(verticalSnowCover)
+  }, [installHeight, verticalSnowCover])
+
   const moduleData = {
     header: [
       { name: getMessage('module'), width: 150, prop: 'module', type: 'color-box' },
@@ -47,6 +69,12 @@ export default function Module({}) {
     rows: [],
   }
 
+  useEffect(() => {}, [roofTab])
+
+  const handleRoofTab = (tab) => {
+    setRoofTab(tab)
+  }
+
   return (
     <>
       <div className="module-table-flex-wrap mb10">
@@ -56,7 +84,14 @@ export default function Module({}) {
               <span className="mr10">{getMessage('modal.module.basic.setting.module.setting')}</span>
               <div className="grid-select">
                 {moduleList && (
-                  <QSelectBox title={getMessage('selectbox.title')} options={moduleList} value={moduleList} onChange={handleChangeModule} />
+                  <QSelectBox
+                    options={moduleList}
+                    value={moduleSelectionInitParams}
+                    targetKey={'moduleTpCd'}
+                    sourceKey={'itemTp'}
+                    showKey={'itemNm'}
+                    onChange={handleChangeModule}
+                  />
                 )}
               </div>
             </div>
@@ -126,8 +161,8 @@ export default function Module({}) {
                       <input
                         type="text"
                         className="input-origin block"
-                        value={managementState?.installHeight}
+                        value={inputInstallHeight}
-                        onChange={(e) => setInstallationHeight(e.target.value)}
+                        onChange={(e) => setInputInstallHeight(e.target.value)}
                       />
                     </div>
                     <span className="thin">mm</span>
@@ -163,8 +198,8 @@ export default function Module({}) {
                       <input
                         type="text"
                         className="input-origin block"
-                        value={managementState?.verticalSnowCover}
+                        value={inputVerticalSnowCover}
-                        onChange={(e) => setStandardSnowLoad(e.target.value)}
+                        onChange={(e) => setInputVerticalSnowCover(e.target.value)}
                       />
                     </div>
                     <span className="thin">mm</span>
@@ -179,168 +214,27 @@ export default function Module({}) {
         <div className="module-box-tab">
           {addedRoofs &&
             addedRoofs.map((roof, index) => (
-              <button
+              <button key={index} className={`module-btn ${roofTab === index ? 'act' : ''}`} onClick={() => (roof ? handleRoofTab(index) : null)}>
-                key={index}
-                className={`module-btn ${roofTab === index ? 'act' : ''}`}
-                onClick={() => setRoofTab(index)(roof ? handleRoofTab(index) : null)}
-              >
                 {roof !== undefined ? `屋根材${index + 1}` : '-'}
               </button>
             ))}
-          {/* <button className={`module-btn ${roofTab === 0 ? 'act' : ''}`} onClick={() => handleRoofTab(0)}>
-            {canvasSetting.roofs[0] !== undefined ? '屋根材1' : '-'}
-          </button>
-          <button className={`module-btn ${roofTab === 1 ? 'act' : ''}`} onClick={() => (canvasSetting.roofs[1] ? handleRoofTab(1) : null)}>
-            {canvasSetting.roofs[1] !== undefined ? '屋根材2' : '-'}
-          </button>
-          <button className={`module-btn ${roofTab === 2 ? 'act' : ''}`} onClick={() => (canvasSetting.roofs[2] ? handleRoofTab(2) : null)}>
-            {canvasSetting.roofs[2] !== undefined ? '屋根材3' : '-'}{' '}
-          </button>
-          <button className={`module-btn ${roofTab === 3 ? 'act' : ''}`} onClick={() => (canvasSetting.roofs[3] ? handleRoofTab(3) : null)}>
-            {canvasSetting.roofs[3] !== undefined ? '屋根材4' : '-'}
-          </button> */}
         </div>
-        <div className="module-table-inner">
+        {addedRoofs &&
-          <div className="module-table-flex-wrap tab2">
+          addedRoofs.map((roof, index) => (
-            <div className="module-flex-item">
+            <div style={{ display: roofTab === index ? 'block' : 'none' }} key={index}>
-              <div className="module-flex-item-tit">
+              <ModuleTabContents
-                {getMessage('modal.module.basic.setting.module.roof.material')}：{roofMaterial.nameJp}（{globalPitch}
+                key={index}
-                {displayPitch}）
+                index={index}
-              </div>
+                addRoof={roof}
-              <div className="eaves-keraba-table">
+                roofTab={roofTab}
-                <div className="eaves-keraba-item">
+                setModuleSelectionData={setModuleSelectionData}
-                  {roofMaterial && ['C'].includes(roofMaterial.lenAuth) && (
+                tempModuleSelectionData={tempModuleSelectionData}
-                    <>
+                setTempModuleSelectionData={setTempModuleSelectionData}
-                      <div className="eaves-keraba-th">L</div>
-                      <div className="eaves-keraba-td">
-                        <div className="keraba-flex">
-                          <div className="outline-form">
-                            <div className="grid-select">
-                              <input
-                                type="text"
-                                className="input-origin block"
-                                value={roofMaterial.lenBase}
-                                disabled={roofMaterial.lenAuth === 'R' ? true : false}
               />
             </div>
+          ))}
       </div>
-                        </div>
+
-                      </div>
-                    </>
-                  )}
-                  {roofMaterial && ['C', 'R'].includes(roofMaterial.raftAuth) && (
-                    <>
-                      <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.rafter.margin')}</div>
-                      <div className="eaves-keraba-td">
-                        <div className="keraba-flex">
-                          <div className="grid-select">
-                            {raftCodes.length > 0 && (
-                              <QSelectBox
-                                options={raftCodes}
-                                value={roofMaterial.raftBaseCd}
-                                showKey={'clCodeNm'}
-                                disabled={roofMaterial.raftAuth === 'R' ? true : false}
-                                onChange={handleChangeRaftBase}
-                              />
-                            )}
-                          </div>
-                        </div>
-                      </div>
-                    </>
-                  )}
-                  {roofMaterial && ['C', 'R'].includes(roofMaterial.roofPchAuth) && (
-                    <>
-                      <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.rafter.margin')}</div>
-                      <div className="eaves-keraba-td">
-                        <div className="keraba-flex">
-                          <div className="outline-form">
-                            <span>垂木の間隔</span>
-                            <div className="grid-select">
-                              <input
-                                type="text"
-                                className="input-origin block"
-                                value={roofMaterial.hajebichi}
-                                disabled={roofMaterial.roofPchAuth === 'R' ? true : false}
-                              />
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </>
-                  )}
-                </div>
-                <div className="eaves-keraba-item">
-                  <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.trestle.maker')}</div>
-                  <div className="eaves-keraba-td">
-                    <div className="grid-select">
-                      {trestleList && (
-                        <QSelectBox
-                          title={getMessage('selectbox.title')}
-                          options={trestleList}
-                          value={trestleList?.trestleMkrCd}
-                          showKey={'trestleMkrCdNm'}
-                          onChange={handleChangeTrestle}
-                        />
-                      )}
-                    </div>
-                  </div>
-                </div>
-                <div className="eaves-keraba-item">
-                  <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.construction.method')}</div>
-                  <div className="eaves-keraba-td">
-                    <div className="grid-select">
-                      {constMthdList && (
-                        <QSelectBox
-                          title={getMessage('selectbox.title')}
-                          options={constMthdList}
-                          value={constMthdList.constMthdCd}
-                          showKey={'constMthdCdNm'}
-                          onChange={handleChangeConstMthd}
-                        />
-                      )}
-                    </div>
-                  </div>
-                </div>
-                <div className="eaves-keraba-item">
-                  <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.under.roof')}</div>
-                  <div className="eaves-keraba-td">
-                    <div className="grid-select">
-                      {roofBaseList && (
-                        <QSelectBox
-                          title={getMessage('selectbox.title')}
-                          options={roofBaseList}
-                          value={roofBaseList.roofBaseCd}
-                          showKey={'roofBaseCdNm'}
-                          onChange={handleChangeRoofBase}
-                        />
-                      )}
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div className="module-flex-item non-flex">
-              <div className="flex-item-btn-wrap">
-                <button className="btn-frame roof blue">標準施工(I)</button>
-                <button className="btn-frame roof white">多設施工</button>
-                <button className="btn-frame roof">標準施工</button>
-                <button className="btn-frame roof">多設施工（II）</button>
-                <button className="btn-frame roof">強化施工</button>
-              </div>
-              <div className="grid-check-form">
-                <div className="d-check-box pop">
-                  <input type="checkbox" id="ch01" />
-                  <label htmlFor="ch01">{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
-                </div>
-                <div className="d-check-box pop">
-                  <input type="checkbox" id="ch02" />
-                  <label htmlFor="ch02">{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
       <div className="module-bottom">
         <div className="module-table-box ">
           <div className="warning-guide">

src/components/floor-plan/modal/basic/step/ModuleTabContents.jsx

@@ -0,0 +1,410 @@
+import { useEffect, useState, useRef, useReducer } from 'react'
+import { useRecoilValue, useRecoilState } from 'recoil'
+import { canvasSettingState, pitchSelector, pitchTextSelector } from '@/store/canvasAtom'
+import { useMessage } from '@/hooks/useMessage'
+import { useMasterController } from '@/hooks/common/useMasterController'
+import { useCommonCode } from '@/hooks/common/useCommonCode'
+import { moduleSelectionInitParamsState, selectedModuleState } from '@/store/selectedModuleOptions'
+import { isNotEmptyArray, isObjectNotEmpty } from '@/util/common-utils'
+import QSelectBox from '@/components/common/select/QSelectBox'
+
+export default function ModuleTabContents({ addRoof, roofTab, setModuleSelectionData, tempModuleSelectionData, setTempModuleSelectionData }) {
+  const { getMessage } = useMessage()
+  const canvasSetting = useRecoilValue(canvasSettingState) //캔버스 기본 셋팅
+  const [roofMaterial, setRoofMaterial] = useState(addRoof) //지붕재
+
+  const globalPitch = useRecoilValue(pitchSelector) //피치
+  const globalPitchText = useRecoilValue(pitchTextSelector) //피치 텍스트
+
+  const { findCommonCode } = useCommonCode()
+  const [raftCodes, setRaftCodes] = useState([]) //가대 목록
+  const [trestleList, setTrestleList] = useState([])
+  const [constMthdList, setConstMthdList] = useState([])
+  const [roofBaseList, setRoofBaseList] = useState([])
+  const [constructionList, setConstructionList] = useState([{}]) //공법 목록
+
+  const [selectedRaftBase, setSelectedRaftBase] = useState({}) //선택된 가대
+  const [selectedTrestle, setSelectedTrestle] = useState({}) //선택된 가대
+  const [selectedConstMthd, setSelectedConstMthd] = useState({}) //선택된 공법
+  const [selectedRoofBase, setSelectedRoofBase] = useState({}) //선택된 지붕밑바탕
+  const [selectedConstruction, setSelectedConstruction] = useState({}) //선택된 공법
+  const [constructionListParams, setConstructionListParams] = useState({})
+
+  const [trestleParams, setTrestleParams] = useState({}) //서까래, 가대메이커,공법,지붕밑바탕 관련  api호출 파라메터
+
+  const moduleSelectionInitParams = useRecoilValue(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등
+  const selectedModules = useRecoilValue(selectedModuleState) //선택된 모듈
+
+  const { getTrestleList, getConstructionList } = useMasterController()
+
+  const constructionRef = useRef([])
+  const [cvrYn, setCvrYn] = useState('N')
+  const [snowGdPossYn, setSnowGdPossYn] = useState('N')
+
+  const [cvrChecked, setCvrChecked] = useState(false)
+  const [snowGdChecked, setSnowGdChecked] = useState(false)
+
+  //서까래간격 변경
+  const handleChangeRaftBase = (option) => {
+    setSelectedRaftBase(option)
+    setTrestleParams({ ...trestleParams, raftBaseCd: option.clCode })
+  }
+
+  //가대메이커 변경
+  const handleChangeTrestle = (option) => {
+    setSelectedTrestle(option) //선택값  저장
+    setTrestleParams({ ...trestleParams, trestleMkrCd: option.trestleMkrCd, constMthdCd: '' })
+
+    setConstMthdList([]) //공법 초기화
+    setRoofBaseList([]) //지붕밑바탕 초기화
+  }
+
+  //공법 변경
+  const handleChangeConstMthd = (option) => {
+    setSelectedConstMthd(option) //선택된값 저장
+    setTrestleParams({ ...trestleParams, constMthdCd: option.constMthdCd, roofBaseCd: '' })
+    setRoofBaseList([])
+  }
+
+  //지붕밑바탕변경
+  const handleChangeRoofBase = (option) => {
+    setConstructionListParams({
+      ...moduleSelectionInitParams,
+      ...trestleParams,
+      roofBaseCd: option.roofBaseCd,
+    })
+
+    setSelectedRoofBase(option)
+  }
+
+  const getModuleOptionsListData = async (params) => {
+    const optionsList = await getTrestleList(params)
+    if (optionsList.data.length > 0) {
+      if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd === null) {
+        setTrestleList(optionsList.data)
+        setConstMthdList([])
+        setRoofBaseList([])
+      }
+
+      if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd && optionsList.data[0].roofBaseCd === null) {
+        setConstMthdList(optionsList.data)
+        setRoofBaseList([])
+      }
+
+      if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd && optionsList.data[0].roofBaseCd) {
+        setRoofBaseList(optionsList.data)
+      }
+    }
+  }
+
+  const getConstructionListData = async (params) => {
+    if (params.trestleMkrCd && params.constMthdCd && params.roofBaseCd) {
+      const optionsList = await getConstructionList(params)
+      setConstructionList(optionsList.data)
+    }
+  }
+
+  const handleConstruction = (index) => {
+    const isPossibleIndex = constructionRef.current
+      .map((el, i) => (el.classList.contains('white') || el.classList.contains('blue') ? i : -1))
+      .filter((index) => index !== -1)
+
+    isPossibleIndex.forEach((index) => {
+      if (constructionRef.current[index].classList.contains('blue')) {
+        constructionRef.current[index].classList.remove('blue')
+        constructionRef.current[index].classList.add('white')
+      }
+    })
+    constructionRef.current[index].classList.remove('white')
+    constructionRef.current[index].classList.add('blue')
+
+    const selectedConstruction = constructionList[index]
+    selectedConstruction.roofIndex = roofTab
+    selectedConstruction.setupCover = false //처마력바 설치 여부
+    selectedConstruction.setupSnowCover = false //눈막이금구 설치 여부
+
+    setCvrYn(selectedConstruction.cvrYn)
+    setSnowGdPossYn(selectedConstruction.snowGdPossYn)
+    setSelectedConstruction(selectedConstruction)
+  }
+
+  useEffect(() => {
+    if (isObjectNotEmpty(selectedRoofBase) && isObjectNotEmpty(selectedConstruction)) {
+      const newRoofConstructions = { roofIndex: roofTab, trestle: selectedRoofBase, construction: selectedConstruction }
+      const index = tempModuleSelectionData.roofConstructions.findIndex((obj) => obj.roofIndex === roofTab)
+
+      if (index > -1) {
+        const newArray = [
+          ...tempModuleSelectionData.roofConstructions.slice(0, index),
+          newRoofConstructions,
+          ...tempModuleSelectionData.roofConstructions.slice(index + 1),
+        ]
+        setTempModuleSelectionData({ roofConstructions: newArray })
+      } else {
+        setTempModuleSelectionData({ roofConstructions: [...tempModuleSelectionData.roofConstructions, { ...newRoofConstructions }] })
+      }
+    }
+  }, [selectedConstruction])
+
+  const handleCvrChecked = () => {
+    setCvrChecked(!cvrChecked)
+  }
+
+  const handleSnowGdChecked = () => {
+    setSnowGdChecked(!snowGdChecked)
+  }
+
+  useEffect(() => {
+    setSelectedConstruction({ ...selectedConstruction, setupCover: cvrChecked })
+  }, [cvrChecked])
+
+  useEffect(() => {
+    setSelectedConstruction({ ...selectedConstruction, setupSnowCover: snowGdChecked })
+  }, [snowGdChecked])
+
+  useEffect(() => {
+    // 202600 경사도
+    const raftCodeList = findCommonCode('203800')
+
+    console.log('addRoof', addRoof)
+    console.log('raftCodeList', raftCodeList)
+
+    //서까래 코드
+    raftCodeList.forEach((obj) => {
+      obj.name = obj.clCodeNm
+      obj.id = obj.clCode
+    })
+    setRaftCodes(raftCodeList)
+  }, [])
+
+  useEffect(() => {
+    //물건 상세의 데이터를 가지고 초기화 데이터를 만든다
+    if (
+      moduleSelectionInitParams.illuminationTp &&
+      moduleSelectionInitParams.instHt &&
+      moduleSelectionInitParams.stdSnowLd &&
+      moduleSelectionInitParams.stdWindSpeed
+    ) {
+      const isModuleLoaded = moduleSelectionInitParams.hasOwnProperty('moduleTpCd') //모듈컬럼이 있으면 모듈을 변경했다는 내용
+      if (isModuleLoaded) {
+        setTrestleParams({ moduleTpCd: moduleSelectionInitParams.moduleTpCd, roofMatlCd: addRoof.roofMatlCd, raftBaseCd: addRoof.raftBaseCd })
+        setConstructionList([])
+      }
+    }
+
+    setTempModuleSelectionData({ common: moduleSelectionInitParams })
+  }, [moduleSelectionInitParams])
+
+  useEffect(() => {
+    if (isObjectNotEmpty(trestleParams)) {
+      getModuleOptionsListData(trestleParams)
+    }
+  }, [trestleParams])
+
+  useEffect(() => {
+    if (isObjectNotEmpty(constructionListParams)) {
+      getConstructionListData(constructionListParams)
+    }
+  }, [constructionListParams])
+
+  useEffect(() => {
+    console.log('🚀 ~ useEffect ~ tempModuleSelectionData:', tempModuleSelectionData)
+
+    if (isObjectNotEmpty(tempModuleSelectionData)) {
+      setModuleSelectionData(tempModuleSelectionData)
+    }
+  }, [tempModuleSelectionData])
+
+  useEffect(() => {
+    console.log('addRoof', addRoof)
+  }, [])
+
+  return (
+    <>
+      <div className="module-table-inner">
+        <div className="module-table-flex-wrap tab2">
+          <div className="module-flex-item">
+            <div className="module-flex-item-tit">
+              {getMessage('modal.module.basic.setting.module.roof.material')}：{roofMaterial.nameJp}（{globalPitch}
+              {globalPitchText}）
+            </div>
+            <div className="eaves-keraba-table">
+              <div className="eaves-keraba-item">
+                {roofMaterial && ['C'].includes(roofMaterial.lenAuth) && (
+                  <>
+                    <div className="eaves-keraba-th">L</div>
+                    <div className="eaves-keraba-td">
+                      <div className="keraba-flex">
+                        <div className="outline-form">
+                          <div className="grid-select">
+                            <input
+                              type="text"
+                              className="input-origin block"
+                              value={roofMaterial.lenBase}
+                              disabled={roofMaterial.lenAuth === 'R' ? true : false}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </>
+                )}
+                {roofMaterial && ['C', 'R'].includes(roofMaterial.raftAuth) && (
+                  <>
+                    <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.rafter.margin')}</div>
+                    <div className="eaves-keraba-td">
+                      <div className="keraba-flex">
+                        <div className="grid-select">
+                          {raftCodes.length > 0 && (
+                            <QSelectBox
+                              options={raftCodes}
+                              value={addRoof}
+                              sourceKey={'clCode'}
+                              targetKey={'raftBaseCd'}
+                              showKey={'clCodeNm'}
+                              disabled={roofMaterial.raftAuth === 'R' ? true : false}
+                              onChange={handleChangeRaftBase}
+                            />
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </>
+                )}
+                {roofMaterial && ['C', 'R'].includes(roofMaterial.roofPchAuth) && (
+                  <>
+                    <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.rafter.margin')}</div>
+                    <div className="eaves-keraba-td">
+                      <div className="keraba-flex">
+                        <div className="outline-form">
+                          <span>垂木の間隔</span>
+                          <div className="grid-select">
+                            <input
+                              type="text"
+                              className="input-origin block"
+                              value={roofMaterial.hajebichi}
+                              disabled={roofMaterial.roofPchAuth === 'R' ? true : false}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </>
+                )}
+              </div>
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.trestle.maker')}</div>
+                <div className="eaves-keraba-td">
+                  <div className="grid-select">
+                    {trestleList && (
+                      <QSelectBox
+                        title={getMessage('selectbox.title')}
+                        options={trestleList}
+                        // value={roofTabParams[roofTab]}
+                        sourceKey={'trestleMkrCd'}
+                        targetKey={'trestleMkrCd'}
+                        showKey={'trestleMkrCdNm'}
+                        onChange={handleChangeTrestle}
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.construction.method')}</div>
+                <div className="eaves-keraba-td">
+                  <div className="grid-select">
+                    {constMthdList && (
+                      <QSelectBox
+                        title={getMessage('selectbox.title')}
+                        options={constMthdList}
+                        // value={roofTabParams[roofTab]}
+                        sourceKey={'constMthdCd'}
+                        targetKey={'constMthdCd'}
+                        showKey={'constMthdCdNm'}
+                        onChange={handleChangeConstMthd}
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+              <div className="eaves-keraba-item">
+                <div className="eaves-keraba-th">{getMessage('modal.module.basic.setting.module.under.roof')}</div>
+                <div className="eaves-keraba-td">
+                  <div className="grid-select">
+                    {roofBaseList && (
+                      <QSelectBox
+                        title={getMessage('selectbox.title')}
+                        options={roofBaseList}
+                        // value={roofTabParams[roofTab]}
+                        sourceKey={'roofBaseCd'}
+                        targetKey={'roofBaseCd'}
+                        showKey={'roofBaseCdNm'}
+                        onChange={handleChangeRoofBase}
+                      />
+                    )}
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="module-flex-item non-flex">
+            <div className="flex-item-btn-wrap">
+              <button
+                className={`btn-frame roof ${isObjectNotEmpty(constructionList[0]) && constructionList[0].constPossYn === 'Y' ? 'white' : ''}`}
+                ref={(el) => (constructionRef.current[0] = el)}
+                onClick={() => (isObjectNotEmpty(constructionList[0]) && constructionList[0].constPossYn === 'Y' ? handleConstruction(0) : null)}
+              >
+                標準施工(Ⅰ)
+              </button>
+              <button
+                className={`btn-frame roof ${isObjectNotEmpty(constructionList[3]) && constructionList[3].constPossYn === 'Y' ? 'white' : ''}`}
+                ref={(el) => (constructionRef.current[3] = el)}
+                onClick={() => (isObjectNotEmpty(constructionList[3]) && constructionList[3].constPossYn === 'Y' ? handleConstruction(3) : null)}
+              >
+                多設施工
+              </button>
+              <button
+                className={`btn-frame roof ${isObjectNotEmpty(constructionList[1]) && constructionList[1].constPossYn === 'Y' ? 'white' : ''}`}
+                ref={(el) => (constructionRef.current[1] = el)}
+                onClick={() => (isObjectNotEmpty(constructionList[1]) && constructionList[1].constPossYn === 'Y' ? handleConstruction(1) : null)}
+              >
+                標準施工
+              </button>
+              <button
+                className={`btn-frame roof ${isObjectNotEmpty(constructionList[4]) && constructionList[4].constPossYn === 'Y' ? 'white' : ''}`}
+                ref={(el) => (constructionRef.current[4] = el)}
+                onClick={() => (isObjectNotEmpty(constructionList[4]) && constructionList[4].constPossYn === 'Y' ? handleConstruction(4) : null)}
+              >
+                多設施工（II）
+              </button>
+              <button
+                className={`btn-frame roof ${isObjectNotEmpty(constructionList[2]) && constructionList[2].constPossYn === 'Y' ? 'white' : ''}`}
+                ref={(el) => (constructionRef.current[2] = el)}
+                onClick={() => (isObjectNotEmpty(constructionList[2]) && constructionList[2].constPossYn === 'Y' ? handleConstruction(2) : null)}
+              >
+                強化施工
+              </button>
+            </div>
+            <div className="grid-check-form">
+              <div className="d-check-box pop">
+                <input type="checkbox" id="ch01" disabled={cvrYn === 'N' ? true : false} checked={cvrChecked} onChange={handleCvrChecked} />
+                <label htmlFor="ch01">{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
+              </div>
+              <div className="d-check-box pop">
+                <input
+                  type="checkbox"
+                  id="ch02"
+                  disabled={snowGdPossYn === 'N' ? true : false}
+                  checked={snowGdChecked}
+                  onChange={handleSnowGdChecked}
+                />
+                <label htmlFor="ch02">{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

src/components/floor-plan/modal/basic/step/Placement.jsx

@@ -3,7 +3,7 @@ import { useMessage } from '@/hooks/useMessage'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
 import { checkedModuleState } from '@/store/canvasAtom'
 import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil'
-import { selectedModuleState } from '@/store/selectedModuleOptions'
+import { selectedModuleState, moduleSelectionDataState } from '@/store/selectedModuleOptions'
 
 const Placement = forwardRef((props, refs) => {
   const { getMessage } = useMessage()
@@ -15,8 +15,12 @@ const Placement = forwardRef((props, refs) => {
   const [selectedItems, setSelectedItems] = useState({})
   const setCheckedModules = useSetRecoilState(checkedModuleState)
 
+  const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
+
   //모듈 배치면 생성
   useEffect(() => {
+    console.log('🚀 ~ Placement ~ moduleSelectionData:', moduleSelectionData)
+    console.log('🚀 ~ Placement ~ selectedModules:', selectedModules)
     makeModuleInstArea()
   }, [])
 

src/hooks/module/useModuleBasicSetting.js

@@ -168,12 +168,12 @@ export function useModuleBasicSetting() {
    */
   const manualModuleSetup = () => {
     if (checkedModule.length === 0) {
-      swalFire({ text: '모듈을 선택해주세요.' })
+      swalFire({ text: getMessage('module.place.select.module') })
       return
     }
 
     if (checkedModule.length > 1) {
-      swalFire({ text: '모듈은 하나만 선택해주세요.' })
+      swalFire({ text: getMessage('module.place.select.one.module') })
       return
     }
 
@@ -435,7 +435,7 @@ export function useModuleBasicSetting() {
               const intersection = turf.intersect(turf.featureCollection([dormerTurfPolygon, tempTurfModule])) //겹치는지 확인
               //겹치면 안됨
               if (intersection) {
-                alert('도머위에 모듈을 올릴 수 없습니다.')
+                swalFire({ text: getMessage('module.place.overobject') })
                 isIntersection = false
               }
             })
@@ -457,10 +457,10 @@ export function useModuleBasicSetting() {
               canvas?.add(manualModule)
               manualDrawModules.push(manualModule)
             } else {
-              alert('셀끼리 겹치면 안되죠?')
+              swalFire({ text: getMessage('module.place.overlab') })
             }
           } else {
-            alert('나갔죠?!!')
+            swalFire({ text: getMessage('module.place.out') })
           }
         }
       })
@@ -472,7 +472,7 @@ export function useModuleBasicSetting() {
     initEvent() //마우스 이벤트 초기화
 
     if (checkedModule.length === 0) {
-      swalFire({ text: '모듈을 선택해주세요.' })
+      swalFire({ text: getMessage('module.place.select.module') })
       return
     }
 
@@ -496,7 +496,7 @@ export function useModuleBasicSetting() {
       ) //도머s 객체
 
     if (moduleSetupSurfaces.length === 0) {
-      alert('선택된 모듈 설치면이 없습니다.')
+      swalFire({ text: getMessage('module.place.no.surface') })
       return
     }
 
@@ -1972,7 +1972,7 @@ export function useModuleBasicSetting() {
               const intersection = turf.intersect(turf.featureCollection([dormerTurfPolygon, tempTurfModule])) //겹치는지 확인
               //겹치면 안됨
               if (intersection) {
-                alert('도머위에 모듈을 올릴 수 없습니다.')
+                swalFire({ text: getMessage('module.place.overobject') })
                 isIntersection = false
               }
             })
@@ -1989,10 +1989,10 @@ export function useModuleBasicSetting() {
               canvas?.add(manualModule)
               manualDrawModules.push(tempModule)
             } else {
-              alert('셀끼리 겹치면 안되죠?')
+              swalFire({ text: getMessage('module.place.overlab') })
             }
           } else {
-            alert('나갔죠?!!')
+            swalFire({ text: getMessage('module.place.out') })
           }
         }
       })

src/hooks/module/useModuleSelection.js

@@ -1,68 +1,48 @@
 import { useRecoilState, useRecoilValue } from 'recoil'
 import { useContext, useEffect, useReducer, useState, useRef } from 'react'
 import { GlobalDataContext } from '@/app/GlobalDataProvider'
-import { useCommonCode } from '../common/useCommonCode'
+import { useMasterController } from '@/hooks/common/useMasterController'
-import { useMasterController } from '../common/useMasterController'
+import { useCommonCode } from '@/hooks/common/useCommonCode'
-import { selectedModuleOptionsState, selectedModuleState, moduleSelectionOptionParamsState } from '@/store/selectedModuleOptions'
+
-import { canvasSettingState, pitchSelector } from '@/store/canvasAtom'
+import { selectedModuleState, moduleSelectionInitParamsState } from '@/store/selectedModuleOptions'
+import { pitchSelector } from '@/store/canvasAtom'
+import { useDebounceValue } from 'usehooks-ts'
 
 export function useModuleSelection(props) {
-  const canvasSetting = useRecoilValue(canvasSettingState) //캔버스 기본 셋팅
-  const [roofMaterial, setRoofMaterial] = useState(props.addedRoofs[0]) //지붕재
   const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
 
-  const { findCommonCode } = useCommonCode()
+  const globalPitch = useRecoilValue(pitchSelector) //피치
-  const [raftCodes, setRaftCodes] = useState([]) //가대 목록
+
   const [roughnessCodes, setRoughnessCodes] = useState([]) //면조도 목록
   const [windSpeedCodes, setWindSpeedCodes] = useState([]) //기준풍속 목록
-
   const [moduleList, setModuleList] = useState([{}]) //모듈 목록
-  const [constructionList, setConstructionList] = useState([{}]) //공법 목록
-  const [trestleList, setTrestleList] = useState([])
-  const [constMthdList, setConstMthdList] = useState([])
-  const [roofBaseList, setRoofBaseList] = useState([])
 
   const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈
-  const [selectedRaftBase, setSelectedRaftBase] = useState({}) //선택된 가대
-  const [selectedTrestle, setSelectedTrestle] = useState({}) //선택된 가대
-  const [selectedConstMthd, setSelectedConstMthd] = useState({}) //선택된 공법
-  const [selectedRoofBase, setSelectedRoofBase] = useState({}) //선택된 지붕밑바탕
-
   const [selectedSurfaceType, setSelectedSurfaceType] = useState({}) //선택된 면조도
   const [installHeight, setInstallHeight] = useState('0') //설치 높이
   const [standardWindSpeed, setStandardWindSpeed] = useState('0') //기준풍속
   const [verticalSnowCover, setVerticalSnowCover] = useState('0') //수직적설량
+  const [moduleSelectionInitParams, setModuleSelectionInitParams] = useRecoilState(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등
 
-  const [selectedModuleOptions, setSelectedModuleOptions] = useRecoilState(selectedModuleOptionsState)
+  const { getModuleTypeItemList } = useMasterController()
 
-  const { getModuleTypeItemList, getTrestleList, getConstructionList } = useMasterController()
+  const { findCommonCode } = useCommonCode()
-
-  const globalPitch = useRecoilValue(pitchSelector) //피치
-  const displayPitch = canvasSetting.roofAngleSet === 'slope' ? '寸' : '度'
-
-  const [optionParams, setOptionParams] = useRecoilState(moduleSelectionOptionParamsState)
-
-  const [commonParams, setCommonParams] = useState({})
-  const [trestleListParams, setTrestleListParams] = useState({})
-  const [constructionListParams, setConstructionListParams] = useState({})
-
-  const roofTabParams = useRef([])
 
+  //탭별 파라메터 초기화
   useEffect(() => {
     setInstallHeight(managementState?.installHeight)
     setStandardWindSpeed(managementState?.standardWindSpeedId)
     setVerticalSnowCover(managementState?.verticalSnowCover)
     setSelectedSurfaceType(managementState?.surfaceType)
 
-    roofTabParams.current[0] = {
+    const initParams = {
-      illuminationTp: managementState?.surfaceType, //면조도
+      illuminationTp: managementState?.surfaceTypeValue, //면조도
       instHt: managementState?.installHeight, //설치높이
       stdWindSpeed: managementState?.standardWindSpeedId, //기준풍속
       stdSnowLd: managementState?.verticalSnowCover, //기준적설량
       inclCd: globalPitch,
     }
-
+    setModuleSelectionInitParams(initParams)
-    console.log('roofTabParams', roofTabParams)
   }, [managementState])
 
   useEffect(() => {
@@ -71,27 +51,8 @@ export function useModuleSelection(props) {
       setManagementState(managementStateLoaded)
     }
 
-    setCommonParams({
-      illuminationTp: managementState?.surfaceType, //면조도
-      instHt: managementState?.installHeight, //설치높이
-      stdWindSpeed: managementState?.standardWindSpeedId, //기준풍속
-      stdSnowLd: managementState?.verticalSnowCover, //기준적설량
-      inclCd: globalPitch,
-    })
-
-    // 202600 경사도
-    const raftCodeList = findCommonCode('203800')
-
-    //서까래 코드
-    raftCodeList.forEach((obj) => {
-      obj.name = obj.clCodeNm
-      obj.id = obj.clCode
-    })
-    setRaftCodes(raftCodeList)
-
     // 113700 면조도
     const roughnessCodeList = findCommonCode('113700')
-
     roughnessCodeList.forEach((obj) => {
       obj.name = obj.clCodeNm
       obj.id = obj.clCode
@@ -100,7 +61,6 @@ export function useModuleSelection(props) {
 
     // 202000 풍속
     const windCodeList = findCommonCode('202000')
-
     windCodeList.forEach((obj) => {
       obj.name = obj.clCodeNm
       obj.id = obj.clCode
@@ -115,13 +75,6 @@ export function useModuleSelection(props) {
     }
     getModuleData(roofsIds)
   }, [])
-  console.log('🚀 ~ useEffect ~ roofTabParams:', roofTabParams)
-  console.log('🚀 ~ useEffect ~ roofTabParams:', roofTabParams)
-  console.log('🚀 ~ useEffect ~ roofTabParams:', roofTabParams)
-
-  const handleRoofTab = (tab) => {
-    setRoofMaterial(props.addedRoofs[tab])
-  }
 
   const getModuleData = async (roofsIds) => {
     const list = await getModuleTypeItemList(roofsIds)
@@ -133,154 +86,92 @@ export function useModuleSelection(props) {
     setModuleList(list.data)
   }
 
-  const handleChangeSurfaceType = (option) => {
-    setSelectedSurfaceType(option)
-    setCommonParams({
-      ...commonParams,
-      surfaceType: option.clCode,
-    })
-  }
-
-  const handleChangeWindSpeed = (option) => {
-    setStandardWindSpeed(option)
-    setCommonParams({
-      ...commonParams,
-      standardWindSpeedId: option.clCode,
-    })
-  }
-  //TODO: 설치높이, 기준적설량 debounce 적용해서 추가해야됨
-
   const handleChangeModule = (option) => {
     //선택된 모듈
     setSelectedModules(option) //선택값 저장
 
-    //리코일 데이터 저장
+    //init 데이터에 선택된 모듈 추가
-    setSelectedModuleOptions({
+    setModuleSelectionInitParams({
-      module: { ...option },
+      ...moduleSelectionInitParams,
-    })
-
-    //trestleList 파라메터
-    setTrestleListParams({
-      roofMatlCd: roofMaterial.roofMatlCd,
       moduleTpCd: option.itemTp,
-      raftBaseCd: roofMaterial.raftBaseCd,
-    })
-
-    setTrestleList([])
-    setConstMthdList([])
-    setRoofBaseList([])
-  }
-
-  const handleChangeRaftBase = (option) => {
-    setSelectedRaftBase(option)
-
-    setTrestleListParams({
-      ...trestleListParams,
-      raftBaseCd: option.clCode,
     })
   }
 
-  const handleChangeTrestle = (option) => {
+  const handleChangeSurfaceType = (option) => {
-    setSelectedTrestle(option) //선택값  저장
+    setModuleSelectionInitParams({
-
+      ...moduleSelectionInitParams,
-    setTrestleListParams({
+      illuminationTp: option.clCode,
-      ...trestleListParams,
-      trestleMkrCd: option.trestleMkrCd,
-      constMthdCd: '',
-      roofBaseCd: '',
     })
-    setConstMthdList([])
-    setRoofBaseList([])
   }
 
-  const handleChangeConstMthd = (option) => {
+  const handleChangeWindSpeed = (option) => {
-    setSelectedConstMthd(option) //선택된값 저장
+    setModuleSelectionInitParams({
-
+      ...moduleSelectionInitParams,
-    setTrestleListParams({
+      surfaceType: option.clCode,
-      ...trestleListParams,
-      constMthdCd: option.constMthdCd,
-      roofBaseCd: '',
     })
-    setRoofBaseList([])
   }
 
-  useEffect(() => {
+  const handleChangeInstallHeight = (option) => {
-    getModuleOptionsListData(trestleListParams)
+    setInstallHeight(option)
-  }, [trestleListParams])
 
-  const getModuleOptionsListData = async (params) => {
+    setModuleSelectionInitParams({
-    const optionsList = await getTrestleList(params)
+      ...moduleSelectionInitParams,
-    if (optionsList.data.length > 0) {
+      instHt: option,
-      if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd === null) {
-        setTrestleList(optionsList.data)
-        setConstMthdList([])
-        setRoofBaseList([])
-      }
-
-      if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd && optionsList.data[0].roofBaseCd === null) {
-        setConstMthdList(optionsList.data)
-        setRoofBaseList([])
-      }
-
-      if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd && optionsList.data[0].roofBaseCd) {
-        setRoofBaseList(optionsList.data)
-      }
-    } else {
-    }
-  }
-
-  const handleChangeRoofBase = (option) => {
-    setConstructionListParams({
-      ...commonParams,
-      moduleTpCd: selectedModules.itemTp,
-      roofMatlCd: roofMaterial.roofMatlCd,
-      trestleMkrCd: selectedTrestle.trestleMkrCd,
-      constMthdCd: selectedConstMthd.constMthdCd,
-      raftBaseCd: selectedRaftBase.clCode,
-      roofBaseCd: option.roofBaseCd,
     })
-
-    setSelectedRoofBase(option)
   }
 
-  useEffect(() => {
+  const handleChangeVerticalSnowCover = (option) => {
-    getConstructionListData(constructionListParams)
+    setVerticalSnowCover(option)
-  }, [constructionListParams])
 
-  const getConstructionListData = async (params) => {
+    setModuleSelectionInitParams({
-    const optionsList = await getConstructionList(params)
+      ...moduleSelectionInitParams,
-    console.log('optionsList', optionsList)
+      stdSnowLd: option,
-    setConstructionList(optionsList.data)
+    })
   }
 
+  //TODO: 설치높이, 기준적설량 debounce 적용해서 추가해야됨
+
+  // useEffect(() => {
+  //   getConstructionListData(constructionListParams)
+  // }, [constructionListParams])
+
+  // const getConstructionListData = async (params) => {
+  //   if (params.trestleMkrCd && params.constMthdCd && params.roofBaseCd) {
+  //     const optionsList = await getConstructionList(params)
+  //     console.log('optionsList', optionsList)
+  //     setConstructionList(optionsList.data)
+  //   }
+  // }
+
+  //state 배열에 데이터 추가 함수
+  // const addRoofTabParams = (key, value, excludeArray = []) => {
+  //   const index = roofTabParams.findIndex((obj) => obj.roofTab === roofTab)
+  //   if (index !== -1) {
+  //     roofTabParams[index][key] = value
+  //     if (excludeArray.length > 0) {
+  //       excludeArray.forEach((exclude) => {
+  //         roofTabParams[index][exclude] = ''
+  //       })
+  //     }
+  //     setRoofTabParams((prev) => [...prev.slice(0, index), roofTabParams[index], ...prev.slice(index + 1)])
+  //   }
+  // }
+
   return {
-    roofMaterial,
+    moduleSelectionInitParams,
     selectedModules,
-    selectedRaftBase,
-    selectedTrestle,
-    selectedConstMthd,
-    selectedRoofBase,
-    raftCodes,
     roughnessCodes,
     windSpeedCodes,
     managementState,
     moduleList,
-    trestleList,
-    constMthdList,
-    roofBaseList,
     selectedSurfaceType,
     installHeight,
     standardWindSpeed,
     verticalSnowCover,
-    globalPitch,
-    displayPitch,
-    handleRoofTab,
     handleChangeModule,
-    handleChangeRaftBase,
-    handleChangeTrestle,
-    handleChangeConstMthd,
-    handleChangeRoofBase,
     handleChangeSurfaceType,
     handleChangeWindSpeed,
+    handleChangeInstallHeight,
+    handleChangeVerticalSnowCover,
   }
 }

src/hooks/roofcover/useRoofShapeSetting.js

@@ -60,11 +60,11 @@ export function useRoofShapeSetting(id) {
 
   useEffect(() => {
     const outerLines = canvas.getObjects().filter((obj) => obj.name === 'outerLine')
-    if (!outerLineFix || outerLines.length === 0) {
+    // if (!outerLineFix || outerLines.length === 0) {
-      swalFire({ text: '외벽선이 없습니다.' })
+    //   swalFire({ text: '외벽선이 없습니다.' })
-      // setShowRoofShapeSettingModal(false)
+    //   // setShowRoofShapeSettingModal(false)
-      closePopup(id)
+    //   closePopup(id)
-    }
+    // }
 
     return () => {
       if (!isFixRef.current) {

src/locales/ko.json

@@ -965,5 +965,11 @@
   "can.not.remove.module": "모듈을 삭제할 수 없습니다.",
   "can.not.insert.module": "모듈을 삽입할 수 없습니다.",
   "selectbox.title": "선택하세요.",
-  "can.not.align.module": "모듈을 정렬할 수 없습니다."
+  "can.not.align.module": "모듈을 정렬할 수 없습니다.",
+  "module.place.overobject": "오브젝트 위에 모듈을 설치 할 수 없습니다.",
+  "module.place.overlab": "모듈을 겹쳐서 설치 할 수 없습니다.",
+  "module.place.out": "설치면 밖으로 모듈을 설치 할 수 없습니다.",
+  "module.place.no.surface": "선택된 모듈 설치면이 없습니다.",
+  "module.place.select.module": "모듈을 선택해주세요.",
+  "module.place.select.one.module": "모듈은 하나만 선택해주세요."
 }

src/store/selectedModuleOptions.js

@@ -46,3 +46,42 @@ export const moduleSelectionOptionParamsState = atom({
   },
   dangerouslyAllowMutability: true,
 })
+
+export const selectedConstructionListDataState = atom({
+  key: 'selectedConstructionListDataState',
+  default: [],
+  dangerouslyAllowMutability: true,
+})
+
+export const trestleListState = atom({
+  key: 'trestleListState',
+  default: [],
+  dangerouslyAllowMutability: true,
+})
+
+export const constMthdListState = atom({
+  key: 'constMthdListState',
+  default: [],
+  dangerouslyAllowMutability: true,
+})
+
+export const roofBaseListState = atom({
+  key: 'roofBaseListState',
+  default: [],
+  dangerouslyAllowMutability: true,
+})
+
+export const moduleSelectionInitParamsState = atom({
+  key: 'moduleSelectionInitParamsState',
+  default: {},
+  dangerouslyAllowMutability: true,
+})
+
+export const moduleSelectionDataState = atom({
+  key: 'moduleSelectionDataState',
+  default: {
+    common: {},
+    roofConstructions: [],
+  },
+  dangerouslyAllowMutability: true,
+})