모듈 선택 탭 관련 작업

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

@@ -8,13 +8,9 @@ import { useModuleSelection } from '@/hooks/module/useModuleSelection'
 
 export default function Module({}) {
   const { getMessage } = useMessage()
-
-  const canvasSetting = useRecoilValue(canvasSettingState) //캔버스 기본 셋팅
   const addedRoofs = useRecoilValue(addedRoofsState) //지붕재 선택
   const [roofTab, setRoofTab] = useState(0) //지붕재 탭
 
-  const globalPitch = useRecoilValue(pitchSelector) //피치
-  const displayPitch = canvasSetting.roofAngleSet === 'slope' ? '寸' : '度'
   const {
     roofMaterial,
     selectedModules,
@@ -26,13 +22,16 @@ export default function Module({}) {
     trestleList,
     constMthdList,
     roofBaseList,
-    selectedOptions,
+    globalPitch,
+    displayPitch,
     handleRoofTab,
     handleChangeModule,
     handleChangeRaftBase,
     handleChangeTrestle,
     handleChangeConstMthd,
     handleChangeRoofBase,
+    handleChangeSurfaceType,
+    handleChangeWindSpeed,
   } = useModuleSelection({ addedRoofs })
 
   const moduleData = {
@@ -56,7 +55,9 @@ export default function Module({}) {
             <div className="outline-form mb10">
               <span className="mr10">{getMessage('modal.module.basic.setting.module.setting')}</span>
               <div className="grid-select">
-                <QSelectBox title={'모듈 선택'} options={moduleList} value={moduleList} onChange={handleChangeModule} />
+                {moduleList && (
+                  <QSelectBox title={getMessage('selectbox.title')} options={moduleList} value={moduleList} onChange={handleChangeModule} />
+                )}
               </div>
             </div>
             <div className="roof-module-table">
@@ -103,14 +104,16 @@ export default function Module({}) {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="grid-select" style={{ width: '95.77px', flex: 'none' }}>
-                      <QSelectBox
+                      {roughnessCodes.length > 0 && (
-                        title={'선택하세요'}
+                        <QSelectBox
-                        options={roughnessCodes}
+                          options={roughnessCodes}
-                        value={roughnessCodes.clCode}
+                          value={managementState}
-                        sourceKey={'clCode'}
+                          targetKey={'surfaceTypeValue'}
-                        targetKey={'clCode'}
+                          sourceKey={'clCode'}
-                        showKey={'clCodeNm'}
+                          showKey={'clCodeNm'}
-                      />
+                          onChange={handleChangeSurfaceType}
+                        />
+                      )}
                     </div>
                   </div>
                 </div>
@@ -136,7 +139,7 @@ export default function Module({}) {
                 <div className="eaves-keraba-td">
                   <div className="outline-form">
                     <div className="grid-select mr10">
-                      {windSpeedCodes && managementState && (
+                      {windSpeedCodes.length > 0 && managementState && (
                         <QSelectBox
                           title={''}
                           options={windSpeedCodes}
@@ -144,6 +147,7 @@ export default function Module({}) {
                           targetKey={'standardWindSpeedId'}
                           sourceKey={'clCode'}
                           showKey={'clCodeNm'}
+                          onChange={handleChangeWindSpeed}
                         />
                       )}
                     </div>
@@ -231,15 +235,13 @@ export default function Module({}) {
                         <div className="keraba-flex">
                           <div className="grid-select">
                             {raftCodes.length > 0 && (
-                              <>
+                              <QSelectBox
-                                <QSelectBox
+                                options={raftCodes}
-                                  options={raftCodes}
+                                value={roofMaterial.raftBaseCd}
-                                  value={roofMaterial.raftBaseCd}
+                                showKey={'clCodeNm'}
-                                  showKey={'clCodeNm'}
+                                disabled={roofMaterial.raftAuth === 'R' ? true : false}
-                                  disabled={roofMaterial.raftAuth === 'R' ? true : false}
+                                onChange={handleChangeRaftBase}
-                                  onChange={handleChangeRaftBase}
+                              />
-                                />
-                              </>
                             )}
                           </div>
                         </div>
@@ -273,7 +275,7 @@ export default function Module({}) {
                     <div className="grid-select">
                       {trestleList && (
                         <QSelectBox
-                          title={'선택하세요.'}
+                          title={getMessage('selectbox.title')}
                           options={trestleList}
                           value={trestleList?.trestleMkrCd}
                           showKey={'trestleMkrCdNm'}
@@ -289,7 +291,7 @@ export default function Module({}) {
                     <div className="grid-select">
                       {constMthdList && (
                         <QSelectBox
-                          title={'선택하세요'}
+                          title={getMessage('selectbox.title')}
                           options={constMthdList}
                           value={constMthdList.constMthdCd}
                           showKey={'constMthdCdNm'}
@@ -305,7 +307,7 @@ export default function Module({}) {
                     <div className="grid-select">
                       {roofBaseList && (
                         <QSelectBox
-                          title={'선택하세요'}
+                          title={getMessage('selectbox.title')}
                           options={roofBaseList}
                           value={roofBaseList.roofBaseCd}
                           showKey={'roofBaseCdNm'}

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

@@ -1,8 +1,9 @@
 import { forwardRef, useEffect, useState } from 'react'
 import { useMessage } from '@/hooks/useMessage'
 import { useModuleBasicSetting } from '@/hooks/module/useModuleBasicSetting'
-import { selectedModuleState, checkedModuleState } from '@/store/canvasAtom'
+import { checkedModuleState } from '@/store/canvasAtom'
 import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil'
+import { selectedModuleState } from '@/store/selectedModuleOptions'
 
 const Placement = forwardRef((props, refs) => {
   const { getMessage } = useMessage()

src/hooks/module/useModuleSelection.js

@@ -1,11 +1,13 @@
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { useContext, useEffect, useReducer, useState } from 'react'
+import { useContext, useEffect, useReducer, useState, useRef } from 'react'
 import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import { useCommonCode } from '../common/useCommonCode'
 import { useMasterController } from '../common/useMasterController'
-import { selectedModuleState } from '@/store/canvasAtom'
+import { selectedModuleOptionsState, selectedModuleState, moduleSelectionOptionParamsState } from '@/store/selectedModuleOptions'
+import { canvasSettingState, pitchSelector } from '@/store/canvasAtom'
 
 export function useModuleSelection(props) {
+  const canvasSetting = useRecoilValue(canvasSettingState) //캔버스 기본 셋팅
   const [roofMaterial, setRoofMaterial] = useState(props.addedRoofs[0]) //지붕재
   const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
 
@@ -15,6 +17,7 @@ export function useModuleSelection(props) {
   const [windSpeedCodes, setWindSpeedCodes] = useState([]) //기준풍속 목록
 
   const [moduleList, setModuleList] = useState([{}]) //모듈 목록
+  const [constructionList, setConstructionList] = useState([{}]) //공법 목록
   const [trestleList, setTrestleList] = useState([])
   const [constMthdList, setConstMthdList] = useState([])
   const [roofBaseList, setRoofBaseList] = useState([])
@@ -25,33 +28,41 @@ export function useModuleSelection(props) {
   const [selectedConstMthd, setSelectedConstMthd] = useState({}) //선택된 공법
   const [selectedRoofBase, setSelectedRoofBase] = useState({}) //선택된 지붕밑바탕
 
-  const [selectedOptions, dispatchSelectedOptions] = useReducer(
+  const [selectedSurfaceType, setSelectedSurfaceType] = useState({}) //선택된 면조도
-    (prevState, nextState) => {
+  const [installHeight, setInstallHeight] = useState('0') //설치 높이
-      return { ...prevState, ...nextState }
+  const [standardWindSpeed, setStandardWindSpeed] = useState('0') //기준풍속
-    },
+  const [verticalSnowCover, setVerticalSnowCover] = useState('0') //수직적설량
-    {
+
-      module: {},
+  const [selectedModuleOptions, setSelectedModuleOptions] = useRecoilState(selectedModuleOptionsState)
-      roofs: [],
-    },
-  )
 
   const { getModuleTypeItemList, getTrestleList, getConstructionList } = useMasterController()
 
-  let optionParams = {
+  const globalPitch = useRecoilValue(pitchSelector) //피치
-    surfaceType: '', //면조도
+  const displayPitch = canvasSetting.roofAngleSet === 'slope' ? '寸' : '度'
-    installHeight: '', //설치 노 ㅍ이
+
-    standardWindSpeedId: '', //기준풍속
+  const [optionParams, setOptionParams] = useRecoilState(moduleSelectionOptionParamsState)
-    verticalSnowCover: '', //수직적설량
+
-    moduleTpCd: '',
+  const [commonParams, setCommonParams] = useState({})
-    roofMatlCd: '',
+  const [trestleListParams, setTrestleListParams] = useState({})
-    raftBaseCd: '',
+  const [constructionListParams, setConstructionListParams] = useState({})
-    trestleMkrCd: '',
+
-    constMthdCd: '',
+  const roofTabParams = useRef([])
-    roofBaseCd: '',
-  }
 
   useEffect(() => {
-    console.log('managementState', managementState)
+    setInstallHeight(managementState?.installHeight)
+    setStandardWindSpeed(managementState?.standardWindSpeedId)
+    setVerticalSnowCover(managementState?.verticalSnowCover)
+    setSelectedSurfaceType(managementState?.surfaceType)
+
+    roofTabParams.current[0] = {
+      illuminationTp: managementState?.surfaceType, //면조도
+      instHt: managementState?.installHeight, //설치높이
+      stdWindSpeed: managementState?.standardWindSpeedId, //기준풍속
+      stdSnowLd: managementState?.verticalSnowCover, //기준적설량
+      inclCd: globalPitch,
+    }
+
+    console.log('roofTabParams', roofTabParams)
   }, [managementState])
 
   useEffect(() => {
@@ -59,6 +70,15 @@ export function useModuleSelection(props) {
     if (!managementState) {
       setManagementState(managementStateLoaded)
     }
+
+    setCommonParams({
+      illuminationTp: managementState?.surfaceType, //면조도
+      instHt: managementState?.installHeight, //설치높이
+      stdWindSpeed: managementState?.standardWindSpeedId, //기준풍속
+      stdSnowLd: managementState?.verticalSnowCover, //기준적설량
+      inclCd: globalPitch,
+    })
+
     // 202600 경사도
     const raftCodeList = findCommonCode('203800')
 
@@ -89,11 +109,15 @@ export function useModuleSelection(props) {
 
     //지붕재 선택
     const roofsIds = props.addedRoofs.filter((obj) => obj.roofMatlCd).map((obj) => obj.roofMatlCd)
+
     if (roofsIds.length === 0) {
       return
     }
     getModuleData(roofsIds)
   }, [])
+  console.log('🚀 ~ useEffect ~ roofTabParams:', roofTabParams)
+  console.log('🚀 ~ useEffect ~ roofTabParams:', roofTabParams)
+  console.log('🚀 ~ useEffect ~ roofTabParams:', roofTabParams)
 
   const handleRoofTab = (tab) => {
     setRoofMaterial(props.addedRoofs[tab])
@@ -107,116 +131,126 @@ 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) //선택값 저장
+
+    //리코일 데이터 저장
+    setSelectedModuleOptions({
+      module: { ...option },
+    })
+
+    //trestleList 파라메터
+    setTrestleListParams({
+      roofMatlCd: roofMaterial.roofMatlCd,
+      moduleTpCd: option.itemTp,
+      raftBaseCd: roofMaterial.raftBaseCd,
+    })
+
     setTrestleList([])
     setConstMthdList([])
     setRoofBaseList([])
   }
 
-  const getConstructionListData = async (params) => {
-    const optionsList = await getConstructionList(params)
-    console.log('optionsList', optionsList)
-    // setConstructionList(optionsList.data)
-  }
-
-  const getModuleOptionsListData = async (params, optionsName) => {
-    const optionsList = await getTrestleList(params)
-
-    if (optionsName === 'trestleList') {
-      setTrestleList(optionsList.data)
-      setConstMthdList([])
-      setRoofBaseList([])
-    }
-
-    if (optionsName === 'constMthdList') {
-      setConstMthdList(optionsList.data)
-      setRoofBaseList([])
-    }
-
-    if (optionsName === 'roofBaseList') {
-      setRoofBaseList(optionsList.data)
-    }
-  }
-
-  const handleChangeModule = (option) => {
-    setSelectedModules(option) //선택값 저장
-
-    optionParams = {
-      roofMatlCd: roofMaterial.roofMatlCd,
-      moduleTpCd: option.itemTp,
-      raftBaseCd: roofMaterial.raftBaseCd,
-    }
-
-    getModuleOptionsListData(optionParams, 'trestleList')
-
-    dispatchSelectedOptions({
-      module: option,
-    })
-  }
-
   const handleChangeRaftBase = (option) => {
     setSelectedRaftBase(option)
 
-    optionParams = {
+    setTrestleListParams({
-      roofMatlCd: roofMaterial.roofMatlCd,
+      ...trestleListParams,
-      moduleTpCd: selectedModules.itemTp,
       raftBaseCd: option.clCode,
-    }
+    })
-
-    getModuleOptionsListData(optionParams, 'trestleList')
   }
 
   const handleChangeTrestle = (option) => {
     setSelectedTrestle(option) //선택값  저장
 
-    optionParams = {
+    setTrestleListParams({
-      roofMatlCd: roofMaterial.roofMatlCd,
+      ...trestleListParams,
-      moduleTpCd: selectedModules.itemTp,
-      raftBaseCd: selectedRaftBase.clCode,
       trestleMkrCd: option.trestleMkrCd,
-    }
+      constMthdCd: '',
-
+      roofBaseCd: '',
-    getModuleOptionsListData(optionParams, 'constMthdList')
-
-    selectedOptions.roofs.map((roof) => {
-      if (roof.id === tab) {
-        roof.trestle = option
-      } else {
-        roof.trestle = {
-          id: tab,
-          trestle: option,
-        }
-      }
-    })
-    dispatchSelectedOptions({
-      roofs: selectedOptions.roofs,
     })
+    setConstMthdList([])
+    setRoofBaseList([])
   }
 
   const handleChangeConstMthd = (option) => {
     setSelectedConstMthd(option) //선택된값 저장
 
-    optionParams = {
+    setTrestleListParams({
-      roofMatlCd: roofMaterial.roofMatlCd,
+      ...trestleListParams,
-      moduleTpCd: selectedModules.itemTp,
-      raftBaseCd: selectedRaftBase.clCode,
-      trestleMkrCd: selectedTrestle.trestleMkrCd,
       constMthdCd: option.constMthdCd,
-    }
+      roofBaseCd: '',
+    })
+    setRoofBaseList([])
+  }
 
-    getModuleOptionsListData(optionParams, 'roofBaseList')
+  useEffect(() => {
+    getModuleOptionsListData(trestleListParams)
+  }, [trestleListParams])
+
+  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)
+      }
+    } else {
+    }
   }
 
   const handleChangeRoofBase = (option) => {
-    setSelectedRoofBase(option)
+    setConstructionListParams({
-
+      ...commonParams,
-    optionParams = {
-      roofMatlCd: roofMaterial.roofMatlCd,
       moduleTpCd: selectedModules.itemTp,
-      raftBaseCd: selectedRaftBase.clCode,
+      roofMatlCd: roofMaterial.roofMatlCd,
       trestleMkrCd: selectedTrestle.trestleMkrCd,
       constMthdCd: selectedConstMthd.constMthdCd,
+      raftBaseCd: selectedRaftBase.clCode,
       roofBaseCd: option.roofBaseCd,
-    }
+    })
+
+    setSelectedRoofBase(option)
+  }
+
+  useEffect(() => {
+    getConstructionListData(constructionListParams)
+  }, [constructionListParams])
+
+  const getConstructionListData = async (params) => {
+    const optionsList = await getConstructionList(params)
+    console.log('optionsList', optionsList)
+    setConstructionList(optionsList.data)
   }
 
   return {
@@ -234,12 +268,19 @@ export function useModuleSelection(props) {
     trestleList,
     constMthdList,
     roofBaseList,
-    selectedOptions,
+    selectedSurfaceType,
+    installHeight,
+    standardWindSpeed,
+    verticalSnowCover,
+    globalPitch,
+    displayPitch,
     handleRoofTab,
     handleChangeModule,
     handleChangeRaftBase,
     handleChangeTrestle,
     handleChangeConstMthd,
     handleChangeRoofBase,
+    handleChangeSurfaceType,
+    handleChangeWindSpeed,
   }
 }

src/locales/ko.json

@@ -947,5 +947,6 @@
   "can.not.move.module": "모듈을 이동할 수 없습니다.",
   "can.not.copy.module": "모듈을 복사할 수 없습니다.",
   "can.not.remove.module": "모듈을 삭제할 수 없습니다.",
-  "can.not.insert.module": "모듈을 삽입할 수 없습니다."
+  "can.not.insert.module": "모듈을 삽입할 수 없습니다.",
+  "selectbox.title": "선택하세요."
 }

src/store/canvasAtom.js

@@ -374,12 +374,6 @@ export const moduleIsSetupState = atom({
   dangerouslyAllowMutability: true,
 })
 
-export const selectedModuleState = atom({
-  key: 'selectedModuleState',
-  default: [],
-  dangerouslyAllowMutability: true,
-})
-
 export const checkedModuleState = atom({
   key: 'checkedModuleState',
   default: [],

src/store/selectedModuleOptions.js

@@ -0,0 +1,48 @@
+import { atom } from 'recoil'
+
+export const selectedModuleState = atom({
+  key: 'selectedModuleState',
+  default: [],
+  dangerouslyAllowMutability: true,
+})
+
+export const selectedModuleOptionsState = atom({
+  key: 'selectedModuleOptionsState',
+  default: {
+    module: {},
+    roofMaterials: [
+      {
+        surfaceType: '', //면조도
+        installHeight: '', //설치 노 ㅍ이
+        standardWindSpeedId: '', //기준풍속
+        verticalSnowCover: '', //수직적설량
+        moduleTpCd: '',
+        roofMatlCd: '',
+        raftBaseCd: '',
+        trestleMkrCd: '',
+        constMthdCd: '',
+        roofBaseCd: '',
+      },
+    ],
+  },
+  dangerouslyAllowMutability: true,
+})
+
+export const moduleSelectionOptionParamsState = atom({
+  key: 'moduleSelectionOptionParams',
+  default: {
+    moduleTpCd: '',
+    roofMatlCd: '',
+    raftBaseCd: '',
+    trestleMkrCd: '',
+    constMthdCd: '',
+    roofBaseCd: '',
+    illuminationTp: '',
+    instHt: '',
+    stdWindSpeed: '',
+    stdSnowLd: '',
+    inclCd: '',
+    roofMatlCd: '',
+  },
+  dangerouslyAllowMutability: true,
+})