diff --git a/src/components/floor-plan/modal/basic/step/Module.jsx b/src/components/floor-plan/modal/basic/step/Module.jsx index 5d3456c2..32b85e56 100644 --- a/src/components/floor-plan/modal/basic/step/Module.jsx +++ b/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} - moduleSelectionData={moduleSelectionData} + roofTab={index} + moduleCommonSelectionData={moduleSelectionData.common} + moduleConstructionSelectionData={moduleSelectionData.roofConstructions[index]} setModuleSelectionData={setModuleSelectionData} tempModuleSelectionData={tempModuleSelectionData} setTempModuleSelectionData={setTempModuleSelectionData} diff --git a/src/components/floor-plan/modal/basic/step/ModuleTabContents.jsx b/src/components/floor-plan/modal/basic/step/ModuleTabContents.jsx index 598d52d6..24f76a35 100644 --- a/src/components/floor-plan/modal/basic/step/ModuleTabContents.jsx +++ b/src/components/floor-plan/modal/basic/step/ModuleTabContents.jsx @@ -1,24 +1,25 @@ -import { useEffect, useState, useRef, useReducer } from 'react' -import { useRecoilValue, useRecoilState } from 'recoil' +import { useEffect, useState, useRef } from 'react' +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) { - const selectedIndex = moduleSelectionData.roofConstructions[roofTab].construction.selectedIndex + if (isExistData && constructionList.length > 0) { + 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])) { - setConstructionParams({ ...moduleSelectionData.roofConstructions[roofTab].trestle, constMthdCd: '', roofBaseCd: '' }) - setRoofBaseParams({ ...moduleSelectionData.roofConstructions[roofTab].trestle, roofBaseCd: '' }) + if (isObjectNotEmpty(moduleConstructionSelectionData)) { + setConstructionParams({ ...moduleConstructionSelectionData.trestle, constMthdCd: '', roofBaseCd: '' }) + setRoofBaseParams({ ...moduleConstructionSelectionData.trestle, roofBaseCd: '' }) + setCvrChecked(moduleConstructionSelectionData.construction.setupCover) + setSnowGdChecked(moduleConstructionSelectionData.construction.setupSnowCover) setIsExistData(true) } } @@ -437,18 +443,24 @@ export default function ModuleTabContents({
- - + +
- +
diff --git a/src/hooks/module/useModulePlace.js b/src/hooks/module/useModulePlace.js new file mode 100644 index 00000000..73343547 --- /dev/null +++ b/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, + } +} diff --git a/src/hooks/module/useModuleSelection.js b/src/hooks/module/useModuleSelection.js index 13fc543e..73343547 100644 --- a/src/hooks/module/useModuleSelection.js +++ b/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(() => {