모듈 선택 -> 탭 영역 작업

src/components/common/select/QSelectBox.jsx

@@ -59,8 +59,6 @@ export default function QSelectBox({
   const ref = useRef(null)
 
   const handleClickSelectOption = (option) => {
-    console.log('🚀 ~ handleClickSelectOption ~ option:', option)
-
     setSelected(showKey !== '' ? option[showKey] : option.name)
     onChange?.(option, params)
   }

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

@@ -1,13 +1,13 @@
 import { useEffect, useState, useReducer } from 'react'
 import { useRecoilValue, useRecoilState } from 'recoil'
 import { addedRoofsState } from '@/store/settingAtom'
-import { canvasSettingState, currentCanvasPlanState, pitchSelector } from '@/store/canvasAtom'
+import { currentCanvasPlanState } 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 { useDebounceValue } from 'usehooks-ts'
-import { moduleSelectionDataPlanListState, moduleSelectionDataState } from '@/store/selectedModuleOptions'
+import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
 
 export default function Module({ setTabNum }) {
   const { getMessage } = useMessage()
@@ -18,7 +18,6 @@ export default function Module({ setTabNum }) {
   const {
     moduleSelectionInitParams,
     selectedModules,
-    raftCodes,
     roughnessCodes,
     windSpeedCodes,
     managementState,
@@ -39,12 +38,14 @@ export default function Module({ setTabNum }) {
   const [debouncedVerticalSnowCover] = useDebounceValue(inputVerticalSnowCover, 500)
 
   const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터
-  const [moduleSelectionDataPlanList, setModuleSelectionDataPlanList] = useRecoilState(moduleSelectionDataPlanListState)
-
   const [tempModuleSelectionData, setTempModuleSelectionData] = useReducer((prevState, nextState) => {
     return { ...prevState, ...nextState }
   }, moduleSelectionData)
 
+  useEffect(() => {
+    setModuleSelectionData(tempModuleSelectionData)
+  }, [tempModuleSelectionData])
+
   useEffect(() => {
     handleChangeInstallHeight(debouncedInstallHeight)
   }, [debouncedInstallHeight])
@@ -53,11 +54,6 @@ export default function Module({ setTabNum }) {
     handleChangeVerticalSnowCover(debouncedVerticalSnowCover)
   }, [debouncedVerticalSnowCover])
 
-  useEffect(() => {
-    setInputInstallHeight(installHeight)
-    setInputVerticalSnowCover(verticalSnowCover)
-  }, [installHeight, verticalSnowCover])
-
   const moduleData = {
     header: [
       { name: getMessage('module'), width: 150, prop: 'module', type: 'color-box' },
@@ -231,10 +227,9 @@ export default function Module({ setTabNum }) {
                   index={index}
                   addRoof={roof}
                   roofTab={index}
-                  moduleConstructionSelectionData={moduleSelectionData?.roofConstructions[index]}
                   tempModuleSelectionData={tempModuleSelectionData}
                   setTempModuleSelectionData={setTempModuleSelectionData}
-                  selectedModule={selectedModules}
+                  moduleSelectionData={moduleSelectionData}
                   setModuleSelectionData={setModuleSelectionData}
                 />
               </div>

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

@@ -1,20 +1,19 @@
-import { useEffect, useState, useRef } from 'react'
+import { useEffect, useState, useRef, useReducer } from 'react'
-import { useRecoilValue } from 'recoil'
+import { useRecoilValue, useRecoilState } from 'recoil'
 import { currentCanvasPlanState, pitchTextSelector } from '@/store/canvasAtom'
 import { useMessage } from '@/hooks/useMessage'
 import { useMasterController } from '@/hooks/common/useMasterController'
 import { useCommonCode } from '@/hooks/common/useCommonCode'
-import { moduleSelectionInitParamsState } from '@/store/selectedModuleOptions'
+import { moduleSelectionDataState, moduleSelectionInitParamsState, selectedModuleState } from '@/store/selectedModuleOptions'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import QSelectBox from '@/components/common/select/QSelectBox'
 
 export default function ModuleTabContents({
   addRoof,
   roofTab,
-  moduleConstructionSelectionData,
   tempModuleSelectionData,
   setTempModuleSelectionData,
-  selectedModule,
+  moduleSelectionData,
   setModuleSelectionData,
 }) {
   const { getMessage } = useMessage()
@@ -24,6 +23,7 @@ export default function ModuleTabContents({
 
   const { findCommonCode } = useCommonCode()
   const [raftCodes, setRaftCodes] = useState([]) //가대 목록
+
   const [trestleList, setTrestleList] = useState([])
   const [constMthdList, setConstMthdList] = useState([])
   const [roofBaseList, setRoofBaseList] = useState([])
@@ -53,12 +53,17 @@ export default function ModuleTabContents({
 
   const [isExistData, setIsExistData] = useState(false)
 
+  const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈
+  const [moduleConstructionSelectionData, setModuleConstructionSelectionData] = useState()
+
+  useEffect(() => {
+    setModuleConstructionSelectionData(moduleSelectionData.roofConstructions[roofTab])
+  }, [moduleSelectionData])
+
   //서까래간격 변경
   const handleChangeRaftBase = (option) => {
     setSelectedRaftBase(option)
-    setTrestleParams({ ...trestleParams, raftBaseCd: option.clCode })
+    setTrestleParams({ ...trestleParams, raftBaseCd: option.clCode }) //가대메이커
-
-    setTrestleList([]) //가대메이커
     setConstMthdList([]) //공법 초기화
     setRoofBaseList([]) //지붕밑바탕 초기화
     setConstructionList([]) //공법 초기화
@@ -77,6 +82,7 @@ export default function ModuleTabContents({
   const handleChangeConstMthd = (option) => {
     setSelectedConstMthd(option) //선택된값 저장
     setRoofBaseParams({ ...trestleParams, trestleMkrCd: selectedTrestle.trestleMkrCd, constMthdCd: option.constMthdCd, roofBaseCd: '' })
+    setRoofBaseList([]) //지붕밑바탕 초기화
     setConstructionList([]) //공법 초기화
   }
 
@@ -92,45 +98,6 @@ export default function ModuleTabContents({
     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)
-        if (isExistData) {
-          setSelectedTrestle({ ...moduleConstructionSelectionData.trestle })
-        } else {
-          setConstMthdList([])
-          setRoofBaseList([])
-        }
-      }
-
-      if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd && optionsList.data[0].roofBaseCd === null) {
-        setConstMthdList(optionsList.data)
-        if (isExistData) {
-          setSelectedConstMthd({ ...moduleConstructionSelectionData.trestle })
-        } else {
-          setRoofBaseList([])
-        }
-      }
-
-      if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd && optionsList.data[0].roofBaseCd) {
-        setRoofBaseList(optionsList.data)
-        if (isExistData) {
-          setSelectedRoofBase({ ...moduleConstructionSelectionData.trestle })
-        }
-      }
-    }
-  }
-
-  const getConstructionListData = async (params) => {
-    if (params.trestleMkrCd && params.constMthdCd && params.roofBaseCd) {
-      const optionsList = await getConstructionList(params)
-      setConstructionList(optionsList.data)
-    }
-  }
-
   const handleConstruction = (index) => {
     if (index > -1) {
       const isPossibleIndex = constructionRef.current
@@ -162,6 +129,53 @@ export default function ModuleTabContents({
     }
   }
 
+  const handleCvrChecked = () => {
+    setCvrChecked(!cvrChecked)
+  }
+
+  const handleSnowGdChecked = () => {
+    setSnowGdChecked(!snowGdChecked)
+  }
+
+  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({ ...moduleConstructionSelectionData?.trestle })
+        } else {
+          setConstMthdList([])
+          setRoofBaseList([])
+        }
+      }
+
+      if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd && optionsList.data[0].roofBaseCd === null) {
+        setConstMthdList(optionsList.data)
+        if (isExistData) {
+          setSelectedConstMthd({ ...moduleConstructionSelectionData?.trestle })
+        } else {
+          setRoofBaseList([])
+        }
+      }
+
+      if (optionsList.data[0].trestleMkrCd && optionsList.data[0].constMthdCd && optionsList.data[0].roofBaseCd) {
+        setRoofBaseList(optionsList.data)
+        if (isExistData) {
+          setSelectedRoofBase({ ...moduleConstructionSelectionData?.trestle })
+        }
+      }
+    }
+  }
+
+  const getConstructionListData = async (params) => {
+    if (params.trestleMkrCd && params.constMthdCd && params.roofBaseCd) {
+      const optionsList = await getConstructionList(params)
+      setConstructionList(optionsList.data)
+    }
+  }
+
   useEffect(() => {
     if (isObjectNotEmpty(selectedRoofBase) && isObjectNotEmpty(selectedConstruction)) {
       const newRoofConstructions = {
@@ -186,14 +200,6 @@ export default function ModuleTabContents({
     }
   }, [selectedConstruction])
 
-  const handleCvrChecked = () => {
-    setCvrChecked(!cvrChecked)
-  }
-
-  const handleSnowGdChecked = () => {
-    setSnowGdChecked(!snowGdChecked)
-  }
-
   useEffect(() => {
     setSelectedConstruction({ ...selectedConstruction, setupCover: cvrChecked })
   }, [cvrChecked])
@@ -216,7 +222,13 @@ export default function ModuleTabContents({
   useEffect(() => {
     if (isExistData && constructionList.length > 0) {
       const selectedIndex = moduleConstructionSelectionData.construction.selectedIndex
-      handleConstruction(selectedIndex)
+      const construction = constructionList[selectedIndex]
+
+      console.log('construction', construction)
+
+      if (construction.constPossYn === 'Y') {
+        handleConstruction(selectedIndex)
+      }
     }
   }, [constructionList])
 
@@ -255,7 +267,7 @@ export default function ModuleTabContents({
       }
     }
 
-    setTempModuleSelectionData({ common: moduleSelectionInitParams, module: selectedModule })
+    setTempModuleSelectionData({ common: moduleSelectionInitParams, module: selectedModules })
   }, [moduleSelectionInitParams])
 
   useEffect(() => {
@@ -284,7 +296,6 @@ export default function ModuleTabContents({
 
   useEffect(() => {
     if (isObjectNotEmpty(tempModuleSelectionData)) {
-      // setModuleSelectionDataPlanList({ ...moduleSelectionDataPlanList, [currentCanvasPlan.id]: tempModuleSelectionData })
       setModuleSelectionData(tempModuleSelectionData)
     }
   }, [tempModuleSelectionData])

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, currentCanvasPlanState } from '@/store/canvasAtom'
 import { useRecoilValue, useSetRecoilState } from 'recoil'
-import { moduleSelectionDataPlanListState, moduleSelectionDataState } from '@/store/selectedModuleOptions'
+import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
 import { useModulePlace } from '@/hooks/module/useModulePlace'
 
 const Placement = forwardRef((props, refs) => {
@@ -20,14 +20,12 @@ const Placement = forwardRef((props, refs) => {
   const { selectedModules } = useModulePlace()
 
   const setCheckedModules = useSetRecoilState(checkedModuleState)
-  const moduleSelectionDataPlanList = useRecoilValue(moduleSelectionDataPlanListState)
   const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
 
   //모듈 배치면 생성
   useEffect(() => {
     makeModuleInstArea()
-
+    if (moduleSelectionData) {
-    if (moduleSelectionDataPlanList) {
       //1개라도 치도리 불가가 있으면 치도리 불가
       const isChidroriValue = moduleSelectionData.roofConstructions.some((item) => item.construction.plvrYn === 'N')
       if (isChidroriValue) {

src/hooks/module/useModulePlace.js

@@ -1,12 +1,11 @@
 import { useEffect, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
-import { moduleSelectionDataPlanListState, moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
+import { moduleSelectionDataState, selectedModuleState } from '@/store/selectedModuleOptions'
 import { useMasterController } from '@/hooks/common/useMasterController'
 import { canvasState, currentCanvasPlanState } from '@/store/canvasAtom'
 
 export function useModulePlace() {
   const canvas = useRecoilValue(canvasState)
-  const moduleSelectionDataPlanList = useRecoilValue(moduleSelectionDataPlanListState) //다음으로 넘어가는 최종 데이터
   const moduleSelectionData = useRecoilValue(moduleSelectionDataState)
   const currentCanvasPlan = useRecoilValue(currentCanvasPlanState)
   const [trestleDetailParams, setTrestleDetailParams] = useState([])
@@ -32,6 +31,7 @@ export function useModulePlace() {
           roofPitch: selectedModules.roofPchBase ? selectedModules.roofPchBase : null,
           inclCd: String(item.addRoof.pitch),
           roofIndex: item.addRoof.index,
+          workingWidth: item.addRoof.lenBase,
         }
       })
       setTrestleDetailParams(listParams)
@@ -70,8 +70,6 @@ export function useModulePlace() {
               })
           }
         })
-
-        console.log('roof', roof)
       })
   }, [trestleDetailList])
 

src/hooks/module/useModuleSelection.js

@@ -5,11 +5,9 @@ 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([]) //기준풍속 목록
@@ -17,9 +15,9 @@ export function useModuleSelection(props) {
 
   const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈
   const [selectedSurfaceType, setSelectedSurfaceType] = useState({}) //선택된 면조도
-  const [installHeight, setInstallHeight] = useState('0') //설치 높이
+  const [installHeight, setInstallHeight] = useState(managementState?.installHeight) //설치 높이
   const [standardWindSpeed, setStandardWindSpeed] = useState({}) //기준풍속
-  const [verticalSnowCover, setVerticalSnowCover] = useState('0') //수직적설량
+  const [verticalSnowCover, setVerticalSnowCover] = useState(managementState?.verticalSnowCover) //수직적설량
   const [moduleSelectionInitParams, setModuleSelectionInitParams] = useRecoilState(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등
 
   const { getModuleTypeItemList } = useMasterController()
@@ -76,12 +74,14 @@ export function useModuleSelection(props) {
 
   const getModuleData = async (roofsIds) => {
     const list = await getModuleTypeItemList(roofsIds)
-    //selectbox에 이름을 넣는다
+    if (list.data.length > 0) {
-    list.data.forEach((item) => {
+      //selectbox에 이름을 넣는다
-      item.name = item.itemNm
+      list.data.forEach((item) => {
-    })
+        item.name = item.itemNm
-    //셀렉트박스 데이터 초기화
+      })
-    setModuleList(list.data)
+      //셀렉트박스 데이터 초기화
+      setModuleList(list.data)
+    }
   }
 
   const handleChangeModule = (option) => {
@@ -112,7 +112,6 @@ export function useModuleSelection(props) {
 
   const handleChangeInstallHeight = (option) => {
     setInstallHeight(option)
-
     setModuleSelectionInitParams({
       ...moduleSelectionInitParams,
       instHt: option,

src/hooks/option/useCanvasSetting.js

@@ -120,6 +120,8 @@ export function useCanvasSetting() {
   const { closeAll } = usePopup()
 
   useEffect(() => {
+    console.log('correntObjectNo', correntObjectNo)
+
     setFetchRoofMaterials(!fetchRoofMaterials)
     if (fetchRoofMaterials) {
       addRoofMaterials()
@@ -165,11 +167,11 @@ export function useCanvasSetting() {
   useEffect(() => {
     //console.log('🚀 ~ useEffect ~ roofMaterials 22 :', previousRoofMaterialsYn, roofMaterials.length , JSON.stringify(previousRoofMaterialsRef.current) !== JSON.stringify(roofMaterials))
     // 지붕재 select 정보가 존재해야 배치면초기설정 DB 정보 비교 후 지붕재 정보를 가져올 수 있음
-    if (!previousObjectNoRef.current && !correntObjectNo && previousObjectNoRef.current !== correntObjectNo 
+    if (
-     || roofMaterials.length !== 0 && JSON.stringify(previousRoofMaterialsRef.current) !== JSON.stringify(roofMaterials)) {
+      (!previousObjectNoRef.current && !correntObjectNo && previousObjectNoRef.current !== correntObjectNo) ||
-      
+      (roofMaterials.length !== 0 && JSON.stringify(previousRoofMaterialsRef.current) !== JSON.stringify(roofMaterials))
-      // 1회만 실행
+    ) {
-      if (roofMaterials && previousRoofMaterialsYn === 'N') {
+      if (roofMaterials) {
         fetchBasicSettings()
         previousRoofMaterialsYn = 'Y'
       }

src/store/selectedModuleOptions.js

@@ -85,9 +85,3 @@ export const moduleSelectionDataState = atom({
   },
   dangerouslyAllowMutability: true,
 })
-
-export const moduleSelectionDataPlanListState = atom({
-  key: 'moduleSelectionDataPlanListState',
-  default: {},
-  dangerouslyAllowMutability: true,
-})