모듈 선택 중간 작업

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

@@ -71,6 +71,10 @@ export default function Module({}) {
 
   useEffect(() => {}, [roofTab])
 
+  useEffect(() => {
+    console.log('moduleSelectionData', moduleSelectionData)
+  }, [])
+
   const handleRoofTab = (tab) => {
     setRoofTab(tab)
   }
@@ -226,8 +230,9 @@ export default function Module({}) {
                 key={index}
                 index={index}
                 addRoof={roof}
-                roofTab={roofTab}
+                roofTab={index}
-                moduleSelectionData={moduleSelectionData}
+                moduleCommonSelectionData={moduleSelectionData.common}
+                moduleConstructionSelectionData={moduleSelectionData.roofConstructions[index]}
                 setModuleSelectionData={setModuleSelectionData}
                 tempModuleSelectionData={tempModuleSelectionData}
                 setTempModuleSelectionData={setTempModuleSelectionData}

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

@@ -1,24 +1,25 @@
-import { useEffect, useState, useRef, useReducer } from 'react'
+import { useEffect, useState, useRef } from 'react'
-import { useRecoilValue, useRecoilState } from 'recoil'
+import { useRecoilValue } 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 { isObjectNotEmpty } from '@/util/common-utils'
 import QSelectBox from '@/components/common/select/QSelectBox'
 
 export default function ModuleTabContents({
   addRoof,
   roofTab,
-  moduleSelectionData,
+  moduleCommonSelectionData,
+  moduleConstructionSelectionData,
   setModuleSelectionData,
   tempModuleSelectionData,
   setTempModuleSelectionData,
 }) {
   const { getMessage } = useMessage()
   const canvasSetting = useRecoilValue(canvasSettingState) //캔버스 기본 셋팅
-  const [roofMaterial, setRoofMaterial] = useState(addRoof) //지붕재
+  const [roofMaterial, setRoofMaterial] = useState(addRoof) //지붕재`
 
   const globalPitch = useRecoilValue(pitchSelector) //피치
   const globalPitchText = useRecoilValue(pitchTextSelector) //피치 텍스트
@@ -54,6 +55,10 @@ export default function ModuleTabContents({
 
   const [isExistData, setIsExistData] = useState(false)
 
+  useEffect(() => {
+    console.log('addRoof', addRoof)
+  }, [])
+
   //서까래간격 변경
   const handleChangeRaftBase = (option) => {
     setSelectedRaftBase(option)
@@ -89,11 +94,12 @@ export default function ModuleTabContents({
 
   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)
         if (isExistData) {
-          setSelectedTrestle({ ...moduleSelectionData.roofConstructions[roofTab].trestle })
+          setSelectedTrestle({ ...moduleConstructionSelectionData.trestle })
         } else {
           setConstMthdList([])
           setRoofBaseList([])
@@ -103,7 +109,7 @@ export default function ModuleTabContents({
       if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd && optionsList.data[0].roofBaseCd === null) {
         setConstMthdList(optionsList.data)
         if (isExistData) {
-          setSelectedConstMthd({ ...moduleSelectionData.roofConstructions[roofTab].trestle })
+          setSelectedConstMthd({ ...moduleConstructionSelectionData.trestle })
         } else {
           setRoofBaseList([])
         }
@@ -112,7 +118,7 @@ export default function ModuleTabContents({
       if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd && optionsList.data[0].roofBaseCd) {
         setRoofBaseList(optionsList.data)
         if (isExistData) {
-          setSelectedRoofBase({ ...moduleSelectionData.roofConstructions[roofTab].trestle })
+          setSelectedRoofBase({ ...moduleConstructionSelectionData.trestle })
         }
       }
     }
@@ -139,8 +145,6 @@ export default function ModuleTabContents({
     constructionRef.current[index].classList.remove('white')
     constructionRef.current[index].classList.add('blue')
 
-    debugger
-
     const selectedConstruction = constructionList[index]
     selectedConstruction.roofIndex = roofTab
     selectedConstruction.setupCover = false //처마력바 설치 여부
@@ -197,8 +201,8 @@ export default function ModuleTabContents({
   }, [selectedRoofBase])
 
   useEffect(() => {
-    if (isExistData) {
+    if (isExistData && constructionList.length > 0) {
-      const selectedIndex = moduleSelectionData.roofConstructions[roofTab].construction.selectedIndex
+      const selectedIndex = moduleConstructionSelectionData.construction.selectedIndex
       handleConstruction(selectedIndex)
     }
   }, [constructionList])
@@ -227,9 +231,11 @@ export default function ModuleTabContents({
         setTrestleParams({ moduleTpCd: moduleSelectionInitParams.moduleTpCd, roofMatlCd: addRoof.roofMatlCd, raftBaseCd: addRoof.raftBaseCd })
         setConstructionList([])
 
-        if (isObjectNotEmpty(moduleSelectionData.roofConstructions[roofTab])) {
+        if (isObjectNotEmpty(moduleConstructionSelectionData)) {
-          setConstructionParams({ ...moduleSelectionData.roofConstructions[roofTab].trestle, constMthdCd: '', roofBaseCd: '' })
+          setConstructionParams({ ...moduleConstructionSelectionData.trestle, constMthdCd: '', roofBaseCd: '' })
-          setRoofBaseParams({ ...moduleSelectionData.roofConstructions[roofTab].trestle, roofBaseCd: '' })
+          setRoofBaseParams({ ...moduleConstructionSelectionData.trestle, roofBaseCd: '' })
+          setCvrChecked(moduleConstructionSelectionData.construction.setupCover)
+          setSnowGdChecked(moduleConstructionSelectionData.construction.setupSnowCover)
           setIsExistData(true)
         }
       }
@@ -437,18 +443,24 @@ export default function ModuleTabContents({
             </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} />
+                <input
-                <label htmlFor="ch01">{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
+                  type="checkbox"
+                  id={`ch01_${roofTab}`}
+                  disabled={cvrYn === 'N' ? true : false}
+                  checked={cvrChecked}
+                  onChange={handleCvrChecked}
+                />
+                <label htmlFor={`ch01_${roofTab}`}>{getMessage('modal.module.basic.setting.module.eaves.bar.fitting')}</label>
               </div>
               <div className="d-check-box pop">
                 <input
                   type="checkbox"
-                  id="ch02"
+                  id={`ch02_${roofTab}`}
                   disabled={snowGdPossYn === 'N' ? true : false}
                   checked={snowGdChecked}
                   onChange={handleSnowGdChecked}
                 />
-                <label htmlFor="ch02">{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
+                <label htmlFor={`ch02_${roofTab}`}>{getMessage('modal.module.basic.setting.module.blind.metal.fitting')}</label>
               </div>
             </div>
           </div>

src/hooks/module/useModulePlace.js

@@ -0,0 +1,184 @@
+import { useRecoilState, useRecoilValue } from 'recoil'
+import { useContext, useEffect, useState } from 'react'
+import { GlobalDataContext } from '@/app/GlobalDataProvider'
+import { useMasterController } from '@/hooks/common/useMasterController'
+import { useCommonCode } from '@/hooks/common/useCommonCode'
+
+import { selectedModuleState, moduleSelectionInitParamsState } from '@/store/selectedModuleOptions'
+import { pitchSelector } from '@/store/canvasAtom'
+
+export function useModuleSelection(props) {
+  const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
+  const globalPitch = useRecoilValue(pitchSelector) //피치
+
+  const [roughnessCodes, setRoughnessCodes] = useState([]) //면조도 목록
+  const [windSpeedCodes, setWindSpeedCodes] = useState([]) //기준풍속 목록
+  const [moduleList, setModuleList] = useState([{}]) //모듈 목록
+
+  const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈
+  const [selectedSurfaceType, setSelectedSurfaceType] = useState({}) //선택된 면조도
+  const [installHeight, setInstallHeight] = useState('0') //설치 높이
+  const [standardWindSpeed, setStandardWindSpeed] = useState({}) //기준풍속
+  const [verticalSnowCover, setVerticalSnowCover] = useState('0') //수직적설량
+  const [moduleSelectionInitParams, setModuleSelectionInitParams] = useRecoilState(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등
+
+  const { getModuleTypeItemList } = useMasterController()
+
+  const { findCommonCode } = useCommonCode()
+
+  //탭별 파라메터 초기화
+  useEffect(() => {
+    setInstallHeight(managementState?.installHeight)
+    setStandardWindSpeed(managementState?.standardWindSpeedId)
+    setVerticalSnowCover(managementState?.verticalSnowCover)
+    setSelectedSurfaceType(managementState?.surfaceType)
+
+    const initParams = {
+      illuminationTp: managementState?.surfaceTypeValue, //면조도
+      instHt: managementState?.installHeight, //설치높이
+      stdWindSpeed: managementState?.standardWindSpeedId, //기준풍속
+      stdSnowLd: managementState?.verticalSnowCover, //기준적설량
+      inclCd: globalPitch,
+    }
+    setModuleSelectionInitParams(initParams)
+  }, [managementState])
+
+  useEffect(() => {
+    // 113700 면조도
+    const roughnessCodeList = findCommonCode('113700')
+    roughnessCodeList.forEach((obj) => {
+      obj.name = obj.clCodeNm
+      obj.id = obj.clCode
+    })
+    setRoughnessCodes(roughnessCodeList)
+
+    // 202000 풍속
+    const windCodeList = findCommonCode('202000')
+    windCodeList.forEach((obj) => {
+      obj.name = obj.clCodeNm
+      obj.id = obj.clCode
+    })
+    setWindSpeedCodes(windCodeList)
+
+    //지붕재 선택
+    const roofsIds = props.addedRoofs.filter((obj) => obj.roofMatlCd).map((obj) => obj.roofMatlCd)
+
+    if (roofsIds.length === 0) {
+      return
+    }
+
+    //새로고침시 데이터 날아가는거 방지
+    if (!managementState) {
+      setManagementState(managementStateLoaded)
+    }
+
+    getModuleData(roofsIds)
+  }, [])
+
+  const getModuleData = async (roofsIds) => {
+    const list = await getModuleTypeItemList(roofsIds)
+    //selectbox에 이름을 넣는다
+    list.data.forEach((item) => {
+      item.name = item.itemNm
+    })
+    //셀렉트박스 데이터 초기화
+    setModuleList(list.data)
+  }
+
+  const handleChangeModule = (option) => {
+    //선택된 모듈
+    setSelectedModules(option) //선택값 저장
+
+    //init 데이터에 선택된 모듈 추가
+    setModuleSelectionInitParams({
+      ...moduleSelectionInitParams,
+      moduleTpCd: option.itemTp,
+    })
+  }
+
+  const handleChangeSurfaceType = (option) => {
+    setModuleSelectionInitParams({
+      ...moduleSelectionInitParams,
+      illuminationTp: option.clCode,
+    })
+  }
+
+  const handleChangeWindSpeed = (option) => {
+    setModuleSelectionInitParams({
+      ...moduleSelectionInitParams,
+      surfaceType: option.clCode,
+    })
+  }
+
+  const handleChangeInstallHeight = (option) => {
+    setInstallHeight(option)
+
+    setModuleSelectionInitParams({
+      ...moduleSelectionInitParams,
+      instHt: option,
+    })
+  }
+
+  const handleChangeVerticalSnowCover = (option) => {
+    setVerticalSnowCover(option)
+
+    setModuleSelectionInitParams({
+      ...moduleSelectionInitParams,
+      stdSnowLd: option,
+    })
+  }
+
+  useEffect(() => {
+    console.log('installHeight', installHeight)
+  }, [installHeight])
+
+  useEffect(() => {
+    console.log('verticalSnowCover', verticalSnowCover)
+  }, [verticalSnowCover])
+
+  //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 {
+    moduleSelectionInitParams,
+    selectedModules,
+    roughnessCodes,
+    windSpeedCodes,
+    managementState,
+    moduleList,
+    selectedSurfaceType,
+    installHeight,
+    standardWindSpeed,
+    verticalSnowCover,
+    handleChangeModule,
+    handleChangeSurfaceType,
+    handleChangeWindSpeed,
+    handleChangeInstallHeight,
+    handleChangeVerticalSnowCover,
+  }
+}

src/hooks/module/useModuleSelection.js

@@ -1,16 +1,14 @@
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { useContext, useEffect, useReducer, useState, useRef } from 'react'
+import { useContext, useEffect, useState } from 'react'
 import { GlobalDataContext } from '@/app/GlobalDataProvider'
 import { useMasterController } from '@/hooks/common/useMasterController'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
 
 import { selectedModuleState, moduleSelectionInitParamsState } from '@/store/selectedModuleOptions'
 import { pitchSelector } from '@/store/canvasAtom'
-import { useDebounceValue } from 'usehooks-ts'
 
 export function useModuleSelection(props) {
   const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext)
-
   const globalPitch = useRecoilValue(pitchSelector) //피치
 
   const [roughnessCodes, setRoughnessCodes] = useState([]) //면조도 목록
@@ -20,7 +18,7 @@ export function useModuleSelection(props) {
   const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈
   const [selectedSurfaceType, setSelectedSurfaceType] = useState({}) //선택된 면조도
   const [installHeight, setInstallHeight] = useState('0') //설치 높이
-  const [standardWindSpeed, setStandardWindSpeed] = useState('0') //기준풍속
+  const [standardWindSpeed, setStandardWindSpeed] = useState({}) //기준풍속
   const [verticalSnowCover, setVerticalSnowCover] = useState('0') //수직적설량
   const [moduleSelectionInitParams, setModuleSelectionInitParams] = useRecoilState(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등
 
@@ -46,11 +44,6 @@ export function useModuleSelection(props) {
   }, [managementState])
 
   useEffect(() => {
-    //새로고침시 데이터 날아가는거 방지
-    if (!managementState) {
-      setManagementState(managementStateLoaded)
-    }
-
     // 113700 면조도
     const roughnessCodeList = findCommonCode('113700')
     roughnessCodeList.forEach((obj) => {
@@ -73,6 +66,12 @@ export function useModuleSelection(props) {
     if (roofsIds.length === 0) {
       return
     }
+
+    //새로고침시 데이터 날아가는거 방지
+    if (!managementState) {
+      setManagementState(managementStateLoaded)
+    }
+
     getModuleData(roofsIds)
   }, [])
 
@@ -129,6 +128,14 @@ export function useModuleSelection(props) {
     })
   }
 
+  useEffect(() => {
+    console.log('installHeight', installHeight)
+  }, [installHeight])
+
+  useEffect(() => {
+    console.log('verticalSnowCover', verticalSnowCover)
+  }, [verticalSnowCover])
+
   //TODO: 설치높이, 기준적설량 debounce 적용해서 추가해야됨
 
   // useEffect(() => {