diff --git a/src/components/floor-plan/modal/basic/step/ModuleTabContents.jsx b/src/components/floor-plan/modal/basic/step/ModuleTabContents.jsx index 2489df61..ad48695e 100644 --- a/src/components/floor-plan/modal/basic/step/ModuleTabContents.jsx +++ b/src/components/floor-plan/modal/basic/step/ModuleTabContents.jsx @@ -1,454 +1,42 @@ -import { useEffect, useState, useRef, useReducer } from 'react' -import { useRecoilValue, useRecoilState } from 'recoil' -import { currentCanvasPlanState, pitchTextSelector } from '@/store/canvasAtom' +import { useState } from 'react' import { useMessage } from '@/hooks/useMessage' -import { useMasterController } from '@/hooks/common/useMasterController' -import { useCommonCode } from '@/hooks/common/useCommonCode' -import { moduleSelectionDataState, moduleSelectionInitParamsState, selectedModuleState } from '@/store/selectedModuleOptions' -import { isObjectNotEmpty, isEqualObjects } from '@/util/common-utils' +import { isObjectNotEmpty } from '@/util/common-utils' import QSelectBox from '@/components/common/select/QSelectBox' -import { addedRoofsState } from '@/store/settingAtom' +import { useModuleTabContents } from '@/hooks/module/useModuleTabContents' export default function ModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab, tempModuleSelectionData, setTempModuleSelectionData }) { const { getMessage } = useMessage() const [roofMaterial, setRoofMaterial] = useState(addRoof) //지붕재` - const addRoofsArray = useRecoilValue(addedRoofsState) - - const globalPitchText = useRecoilValue(pitchTextSelector) //피치 텍스트 - const currentCanvasPlan = useRecoilValue(currentCanvasPlanState) - - 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 [constructionParams, setConstructionParams] = useState({}) //공법 관련 api호출 파라메터 - const [roofBaseParams, setRoofBaseParams] = useState({}) //지붕밑바탕 관련 api호출 파라메터 - - const moduleSelectionInitParams = useRecoilValue(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등 - const moduleSelectionInitOriginData = useRef(moduleSelectionInitParams) - - 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 [isExistData, setIsExistData] = useState(false) - - const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈 - const [moduleConstructionSelectionData, setModuleConstructionSelectionData] = useState() - - const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터 - - const [hajebichi, setHajebichi] = useState(0) - const [lengthBase, setLengthBase] = useState(0) - - const hajebichiRef = useRef() - const lengthRef = useRef() - - //서까래간격 변경 - const handleChangeRaftBase = (option) => { - setSelectedRaftBase(option) - setTrestleParams({ ...trestleParams, raftBaseCd: option.clCode }) //가대메이커 - setConstMthdList([]) //공법 초기화 - setRoofBaseList([]) //지붕밑바탕 초기화 - setConstructionList([]) //공법 초기화 - } - - //지붕밑바탕변경 - - //처마력바 체크 - const handleCvrChecked = () => { - setCvrChecked(!cvrChecked) - setSelectedConstruction({ ...selectedConstruction, setupCover: !cvrChecked }) - } - - //눈막이금구 체크 - const handleSnowGdChecked = () => { - setSnowGdChecked(!snowGdChecked) - setSelectedConstruction({ ...selectedConstruction, setupSnowCover: !snowGdChecked }) - } - - const getConstructionListData = async (params) => { - if (params.trestleMkrCd && params.constMthdCd && params.roofBaseCd) { - const optionsList = await getConstructionList(params) - setConstructionList(optionsList.data) - } - } - - useEffect(() => { - setHajebichi(addRoof.hajebichi) - setLengthBase(addRoof.lenBase) - - // 202600 경사도 - const raftCodeList = findCommonCode('203800') - //서까래 코드 - raftCodeList.forEach((obj) => { - obj.name = obj.clCodeNm - obj.id = obj.clCode - }) - setRaftCodes(raftCodeList) - }, []) - - //리코일에 데이터가 담기는 시점에 시작 - useEffect(() => { - if ( - isObjectNotEmpty(moduleSelectionData.roofConstructions[tabIndex]) && - isObjectNotEmpty(moduleSelectionData.roofConstructions[tabIndex].trestle) && - isObjectNotEmpty(moduleSelectionData.roofConstructions[tabIndex].construction) - ) { - setModuleConstructionSelectionData(moduleSelectionData.roofConstructions[tabIndex]) - } - }, [moduleSelectionData]) - - useEffect(() => { - if (isObjectNotEmpty(moduleConstructionSelectionData)) { - setIsExistData(true) - } - }, [moduleConstructionSelectionData]) - - //높이를 변경하면 addRoofs에 적용 - useEffect(() => { - // //가대 조회 api 파라메터 - // setTrestleParams({ ...trestleParams, workingWidth: lengthBase }) - - const copyAddRoof = { ...addRoof } - copyAddRoof.length = Number(lengthBase) - copyAddRoof.lenBase = lengthBase - const index = addRoof.index - const newArray = [...addRoofsArray.slice(0, index), copyAddRoof, ...addRoofsArray.slice(index + 1)] - setAddedRoofs(newArray) - }, [lengthBase]) - - //망둥어 피치를 변경하면 addRoof 변경 - useEffect(() => { - const copyAddRoof = { ...addRoof } - copyAddRoof.hajebichi = Number(hajebichi) - copyAddRoof.roofPchBase = hajebichi - const index = addRoof.index - const newArray = [...addRoofsArray.slice(0, index), copyAddRoof, ...addRoofsArray.slice(index + 1)] - setAddedRoofs(newArray) - }, [hajebichi]) - - useEffect(() => { - if (isExistData) { - setConstructionListParams({ - ...moduleSelectionInitParams, - ...roofBaseParams, - roofBaseCd: selectedRoofBase.roofBaseCd, - inclCd: addRoof.pitch, - roofPitch: hajebichiRef.current ? hajebichiRef.current.value : 0, - raftBaseCd: addRoof.raftBaseCd, - }) - } - }, [selectedRoofBase]) - - useEffect(() => { - if ( - isExistData && - constructionList.length > 0 && - isObjectNotEmpty(moduleConstructionSelectionData?.construction) && - moduleConstructionSelectionData?.construction.hasOwnProperty('constPossYn') ///키가 있으면 - ) { - const selectedIndex = moduleConstructionSelectionData.construction.selectedIndex - const construction = constructionList[selectedIndex] - if (construction.constPossYn === 'Y') { - handleConstruction(selectedIndex) - } - } - }, [constructionList]) - - //모듈 변경 - useEffect(() => { - //lengbase는 무조건 있다고 가정 하고 최초에 실행 방지 - if (selectedModules) { - //가대메이커 파라메터 만들기 - setTrestleParams({ - moduleTpCd: selectedModules.itemTp, - roofMatlCd: addRoof.roofMatlCd, - raftBaseCd: addRoof.raftBaseCd, - workingWidth: lengthBase, - }) - } - }, [selectedModules]) - - //가대메이커 api 호출 - useEffect(() => { - if (isObjectNotEmpty(trestleParams)) { - getModuleOptionsListData(trestleParams, 'trestle') - } - }, [trestleParams]) - - //가대메이커 변경 함수 - const handleChangeTrestle = (option) => { - setSelectedTrestle(option) //선택값 저장 - setConstructionParams({ ...trestleParams, trestleMkrCd: option.trestleMkrCd, constMthdCd: '', roofBaseCd: '' }) - // setConstMthdList([]) //공법 초기화 - // setRoofBaseList([]) //지붕밑바탕 초기화 - // setConstructionList([]) //공법 초기화 - } - - useEffect(() => { - if (isObjectNotEmpty(constructionParams)) { - getModuleOptionsListData(constructionParams, 'construction') - } - }, [constructionParams]) - - //공법 변경 - const handleChangeConstMthd = (option) => { - setSelectedConstMthd(option) //선택된값 저장 - setRoofBaseParams({ - ...trestleParams, - trestleMkrCd: selectedTrestle.trestleMkrCd, - constMthdCd: option.constMthdCd, - roofBaseCd: '', - }) - } - - useEffect(() => { - if (isObjectNotEmpty(roofBaseParams)) { - getModuleOptionsListData(roofBaseParams, 'roofBase') - } - }, [roofBaseParams]) - - const handleChangeRoofBase = (option) => { - setConstructionListParams({ - ...moduleSelectionInitParams, - trestleMkrCd: selectedTrestle.trestleMkrCd, - constMthdCd: selectedConstMthd.constMthdCd, - roofBaseCd: option.roofBaseCd, - inclCd: addRoof.pitch, - roofPitch: hajebichiRef.current ? hajebichiRef.current.value : 0, - raftBaseCd: addRoof.raftBaseCd, - roofMatlCd: addRoof.roofMatlCd, - }) - setSelectedRoofBase(option) - } - - //공법 리스트 변경 함수 - useEffect(() => { - if (isObjectNotEmpty(constructionListParams)) { - getConstructionListData(constructionListParams) - } - }, [constructionListParams]) - - //공법 선택 함수 - const handleConstruction = (index) => { - if (index > -1) { - 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 //눈막이금구 설치 여부 - selectedConstruction.selectedIndex = index - - setCvrYn(selectedConstruction.cvrYn) - setSnowGdPossYn(selectedConstruction.snowGdPossYn) - - //기존에 선택된 데이터가 있으면 체크한다 - if (moduleConstructionSelectionData && moduleConstructionSelectionData.construction) { - selectedConstruction.setupCover = moduleConstructionSelectionData.construction.setupCover || false - selectedConstruction.setupSnowCover = moduleConstructionSelectionData.construction.setupSnowCover || false - setCvrChecked(selectedConstruction.setupCover) - setSnowGdChecked(selectedConstruction.setupSnowCover) - } - - setSelectedConstruction(selectedConstruction) - } else { - constructionRef.current.forEach((ref) => { - ref.classList.remove('blue') - }) - } - } - - //공법 선택시 이후 프로세스 - useEffect(() => { - if (isObjectNotEmpty(selectedRoofBase) && isObjectNotEmpty(selectedConstruction)) { - if (tabIndex === roofTab) { - const common = { ...moduleSelectionInitParams } - const module = { ...selectedModules } - const newRoofConstructions = { - roofIndex: tabIndex, - addRoof: addRoof, - trestle: selectedRoofBase, - construction: selectedConstruction, - } - - const index = tempModuleSelectionData.roofConstructions.findIndex((obj) => obj.roofIndex === tabIndex) - - if (index > -1) { - const newArray = [ - ...tempModuleSelectionData.roofConstructions.slice(0, index), - newRoofConstructions, - ...tempModuleSelectionData.roofConstructions.slice(index + 1), - ] - setTempModuleSelectionData({ common: common, module: module, roofConstructions: newArray }) - } else { - setTempModuleSelectionData({ - common: common, - module: module, - roofConstructions: [...tempModuleSelectionData.roofConstructions, { ...newRoofConstructions }], - }) - } - } - } - }, [selectedConstruction]) - - const getModuleOptionsListData = async (params, type) => { - const optionsList = await getTrestleList(params) - - if (optionsList.data.length > 0) { - if (type === 'trestle') { - setTrestleList(optionsList.data) - if (isExistData) { - handleChangeTrestle(moduleConstructionSelectionData?.trestle) - } else { - setConstMthdList([]) - setRoofBaseList([]) - } - } else if (type === 'construction') { - setConstMthdList(optionsList.data) - if (isExistData) { - handleChangeConstMthd(moduleConstructionSelectionData?.trestle) - } else { - setRoofBaseList([]) - } - } else if (type === 'roofBase') { - setRoofBaseList(optionsList.data) - if (isExistData) { - handleChangeRoofBase(moduleConstructionSelectionData?.trestle) - } - } - } - } - - useEffect(() => { - //모듈이 선택되어있을때 - if (moduleSelectionInitOriginData.current.moduleItemId && moduleSelectionInitOriginData.current.moduleTpCd) { - //초기에 들어온 데이터가 수정된 데이터가 값이 다르다면` - if (!isEqualObjects(moduleSelectionInitOriginData.current, moduleSelectionInitParams)) { - //가대 선택 초기화 - setSelectedTrestle({}) - - //공법 선택 초기화 - setSelectedConstMthd({}) - - //지붕밑바탕 선택 초기화 - setSelectedRoofBase({}) - - //공법 리스트 초기화 - setConstructionList([]) - - // 기본 정보 초기화 - setModuleSelectionData({ - ...moduleSelectionData, - roofConstructions: [], - }) - - // 선택 데이터 초 기화 - setModuleConstructionSelectionData({ - addRoof: addRoof, - trestle: {}, - construction: {}, - }) - - //임시 데이터 초기화 - setTempModuleSelectionData({ - ...moduleSelectionData, - roofConstructions: [], - }) - - //처마커버 해제 - setCvrChecked(false) - //눈막이금구 해제 - setSnowGdChecked(false) - - // 데이터 없음으로 변경 - setIsExistData(false) - - //변경된 데이터를 ref에 저장 - moduleSelectionInitOriginData.current = moduleSelectionInitParams - } - } - }, [moduleSelectionInitParams]) - - // useEffect(() => { - // useEffect(() => { - // console.log('moduleSelectionInitParams', moduleSelectionInitParams) - - // //물건 상세의 데이터를 가지고 초기화 데이터를 만든다 - // if ( - // moduleSelectionInitParams.illuminationTp && - // moduleSelectionInitParams.instHt && - // moduleSelectionInitParams.stdSnowLd && - // moduleSelectionInitParams.stdWindSpeed - // ) { - // const isModuleLoaded = moduleSelectionInitParams.hasOwnProperty('moduleTpCd') //모듈컬럼이 있으면 모듈을 변경했다는 내용 - - // //모듈 이름이 있고 모듈이 선택되어있다면 - // if (isModuleLoaded && moduleSelectionInitParams.moduleTpCd) { - // setTrestleParams({ - // moduleTpCd: moduleSelectionInitParams.moduleTpCd, - // roofMatlCd: addRoof.roofMatlCd, - // raftBaseCd: addRoof.raftBaseCd, - // workingWidth: lengthBase, - // }) - // // setConstructionList([]) - - // if (isObjectNotEmpty(moduleConstructionSelectionData)) { - // //기존에 데이터가 있으면 파라메터를 넣는다 - // setConstructionParams({ ...moduleConstructionSelectionData.trestle, constMthdCd: '', roofBaseCd: '' }) - // setRoofBaseParams({ ...moduleConstructionSelectionData.trestle, roofBaseCd: '' }) - - // setIsExistData(true) - // } - // } - // } - - // setTempModuleSelectionData({ common: moduleSelectionInitParams, module: selectedModules }) - // }, []) - - // useEffect(() => { - // console.log('roofBaseParams', roofBaseParams) - - // if (isObjectNotEmpty(roofBaseParams)) { - // getModuleOptionsListData(roofBaseParams) - // } - // }, [roofBaseParams]) - - // useEffect(() => { - // if (isObjectNotEmpty(tempModuleSelectionData)) { - // setModuleSelectionData(tempModuleSelectionData) - // } - // }, [tempModuleSelectionData]) + const { + raftCodes, + trestleList, + constMthdList, + roofBaseList, + constructionList, + globalPitchText, + selectedTrestle, + selectedConstMthd, + selectedRoofBase, + constructionRef, + cvrYn, + cvrChecked, + snowGdPossYn, + snowGdChecked, + lengthBase, + hajebichi, + lengthRef, + hajebichiRef, + setLengthBase, + setHajebichi, + handleChangeRaftBase, + handleChangeTrestle, + handleChangeConstMthd, + handleChangeRoofBase, + handleConstruction, + handleCvrChecked, + handleSnowGdChecked, + } = useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab, tempModuleSelectionData, setTempModuleSelectionData }) return ( <> diff --git a/src/hooks/module/useModuleTabContents.js b/src/hooks/module/useModuleTabContents.js new file mode 100644 index 00000000..9b2fae92 --- /dev/null +++ b/src/hooks/module/useModuleTabContents.js @@ -0,0 +1,417 @@ +import { useEffect, useState, useRef } from 'react' +import { useRecoilValue, useRecoilState } from 'recoil' +import { pitchTextSelector } from '@/store/canvasAtom' +import { useMasterController } from '@/hooks/common/useMasterController' +import { useCommonCode } from '@/hooks/common/useCommonCode' +import { moduleSelectionDataState, moduleSelectionInitParamsState, selectedModuleState } from '@/store/selectedModuleOptions' +import { isObjectNotEmpty, isEqualObjects } from '@/util/common-utils' +import { addedRoofsState } from '@/store/settingAtom' + +export function useModuleTabContents({ tabIndex, addRoof, setAddedRoofs, roofTab, tempModuleSelectionData, setTempModuleSelectionData }) { + const addRoofsArray = useRecoilValue(addedRoofsState) + 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 [constructionParams, setConstructionParams] = useState({}) //공법 관련 api호출 파라메터 + const [roofBaseParams, setRoofBaseParams] = useState({}) //지붕밑바탕 관련 api호출 파라메터 + + const moduleSelectionInitParams = useRecoilValue(moduleSelectionInitParamsState) //모듈 기본 데이터 ex) 면조도, 높이등등 + const moduleSelectionInitOriginData = useRef(moduleSelectionInitParams) + + 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 [isExistData, setIsExistData] = useState(false) + + const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈 + const [moduleConstructionSelectionData, setModuleConstructionSelectionData] = useState() + + const [moduleSelectionData, setModuleSelectionData] = useRecoilState(moduleSelectionDataState) //다음으로 넘어가는 최종 데이터 + + const [hajebichi, setHajebichi] = useState(0) + const [lengthBase, setLengthBase] = useState(0) + + const hajebichiRef = useRef() + const lengthRef = useRef() + + //서까래간격 변경 + const handleChangeRaftBase = (option) => { + setSelectedRaftBase(option) + setTrestleParams({ ...trestleParams, raftBaseCd: option.clCode }) //가대메이커 + setConstMthdList([]) //공법 초기화 + setRoofBaseList([]) //지붕밑바탕 초기화 + setConstructionList([]) //공법 초기화 + } + + //처마력바 체크 + const handleCvrChecked = () => { + setCvrChecked(!cvrChecked) + setSelectedConstruction({ ...selectedConstruction, setupCover: !cvrChecked }) + } + + //눈막이금구 체크 + const handleSnowGdChecked = () => { + setSnowGdChecked(!snowGdChecked) + setSelectedConstruction({ ...selectedConstruction, setupSnowCover: !snowGdChecked }) + } + + const getConstructionListData = async (params) => { + if (params.trestleMkrCd && params.constMthdCd && params.roofBaseCd) { + const optionsList = await getConstructionList(params) + setConstructionList(optionsList.data) + } + } + + useEffect(() => { + setHajebichi(addRoof.hajebichi) + setLengthBase(addRoof.lenBase) + + // 202600 경사도 + const raftCodeList = findCommonCode('203800') + //서까래 코드 + raftCodeList.forEach((obj) => { + obj.name = obj.clCodeNm + obj.id = obj.clCode + }) + setRaftCodes(raftCodeList) + }, []) + + //리코일에 데이터가 담기는 시점에 시작 + useEffect(() => { + if ( + isObjectNotEmpty(moduleSelectionData.roofConstructions[tabIndex]) && + isObjectNotEmpty(moduleSelectionData.roofConstructions[tabIndex].trestle) && + isObjectNotEmpty(moduleSelectionData.roofConstructions[tabIndex].construction) + ) { + setModuleConstructionSelectionData(moduleSelectionData.roofConstructions[tabIndex]) + } + }, [moduleSelectionData]) + + useEffect(() => { + if (isObjectNotEmpty(moduleConstructionSelectionData)) { + setIsExistData(true) + } + }, [moduleConstructionSelectionData]) + + //높이를 변경하면 addRoofs에 적용 + useEffect(() => { + const copyAddRoof = { ...addRoof } + copyAddRoof.length = Number(lengthBase) + copyAddRoof.lenBase = lengthBase + const index = addRoof.index + const newArray = [...addRoofsArray.slice(0, index), copyAddRoof, ...addRoofsArray.slice(index + 1)] + setAddedRoofs(newArray) + }, [lengthBase]) + + //망둥어 피치를 변경하면 addRoof 변경 + useEffect(() => { + const copyAddRoof = { ...addRoof } + copyAddRoof.hajebichi = Number(hajebichi) + copyAddRoof.roofPchBase = hajebichi + const index = addRoof.index + const newArray = [...addRoofsArray.slice(0, index), copyAddRoof, ...addRoofsArray.slice(index + 1)] + setAddedRoofs(newArray) + }, [hajebichi]) + + useEffect(() => { + if (isExistData) { + setConstructionListParams({ + ...moduleSelectionInitParams, + ...roofBaseParams, + roofBaseCd: selectedRoofBase.roofBaseCd, + inclCd: addRoof.pitch, + roofPitch: hajebichiRef.current ? hajebichiRef.current.value : 0, + raftBaseCd: addRoof.raftBaseCd, + }) + } + }, [selectedRoofBase]) + + useEffect(() => { + if ( + isExistData && + constructionList.length > 0 && + isObjectNotEmpty(moduleConstructionSelectionData?.construction) && + moduleConstructionSelectionData?.construction.hasOwnProperty('constPossYn') ///키가 있으면 + ) { + const selectedIndex = moduleConstructionSelectionData.construction.selectedIndex + const construction = constructionList[selectedIndex] + if (construction.constPossYn === 'Y') { + handleConstruction(selectedIndex) + } + } + }, [constructionList]) + + //모듈 변경 + useEffect(() => { + //lengbase는 무조건 있다고 가정 하고 최초에 실행 방지 + if (selectedModules) { + //가대메이커 파라메터 만들기 + setTrestleParams({ + moduleTpCd: selectedModules.itemTp, + roofMatlCd: addRoof.roofMatlCd, + raftBaseCd: addRoof.raftBaseCd, + workingWidth: lengthBase, + }) + } + }, [selectedModules]) + + //가대메이커 api 호출 + useEffect(() => { + if (isObjectNotEmpty(trestleParams)) { + getModuleOptionsListData(trestleParams, 'trestle') + } + }, [trestleParams]) + + //가대메이커 변경 함수 + const handleChangeTrestle = (option) => { + setSelectedTrestle(option) //선택값 저장 + setConstructionParams({ ...trestleParams, trestleMkrCd: option.trestleMkrCd, constMthdCd: '', roofBaseCd: '' }) + } + + useEffect(() => { + if (isObjectNotEmpty(constructionParams)) { + getModuleOptionsListData(constructionParams, 'construction') + } + }, [constructionParams]) + + //공법 변경 + const handleChangeConstMthd = (option) => { + setSelectedConstMthd(option) //선택된값 저장 + setRoofBaseParams({ + ...trestleParams, + trestleMkrCd: selectedTrestle.trestleMkrCd, + constMthdCd: option.constMthdCd, + roofBaseCd: '', + }) + } + + useEffect(() => { + if (isObjectNotEmpty(roofBaseParams)) { + getModuleOptionsListData(roofBaseParams, 'roofBase') + } + }, [roofBaseParams]) + + const handleChangeRoofBase = (option) => { + setConstructionListParams({ + ...moduleSelectionInitParams, + trestleMkrCd: selectedTrestle.trestleMkrCd, + constMthdCd: selectedConstMthd.constMthdCd, + roofBaseCd: option.roofBaseCd, + inclCd: addRoof.pitch, + roofPitch: hajebichiRef.current ? hajebichiRef.current.value : 0, + raftBaseCd: addRoof.raftBaseCd, + roofMatlCd: addRoof.roofMatlCd, + }) + setSelectedRoofBase(option) + } + + //공법 리스트 변경 함수 + useEffect(() => { + if (isObjectNotEmpty(constructionListParams)) { + getConstructionListData(constructionListParams) + } + }, [constructionListParams]) + + //공법 선택 함수 + const handleConstruction = (index) => { + if (index > -1) { + 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 //눈막이금구 설치 여부 + selectedConstruction.selectedIndex = index + + setCvrYn(selectedConstruction.cvrYn) + setSnowGdPossYn(selectedConstruction.snowGdPossYn) + + //기존에 선택된 데이터가 있으면 체크한다 + if (moduleConstructionSelectionData && moduleConstructionSelectionData.construction) { + selectedConstruction.setupCover = moduleConstructionSelectionData.construction.setupCover || false + selectedConstruction.setupSnowCover = moduleConstructionSelectionData.construction.setupSnowCover || false + setCvrChecked(selectedConstruction.setupCover) + setSnowGdChecked(selectedConstruction.setupSnowCover) + } + + setSelectedConstruction(selectedConstruction) + } else { + constructionRef.current.forEach((ref) => { + ref.classList.remove('blue') + }) + } + } + + //공법 선택시 이후 프로세스 + useEffect(() => { + if (isObjectNotEmpty(selectedRoofBase) && isObjectNotEmpty(selectedConstruction)) { + if (tabIndex === roofTab) { + const common = { ...moduleSelectionInitParams } + const module = { ...selectedModules } + const newRoofConstructions = { + roofIndex: tabIndex, + addRoof: addRoof, + trestle: selectedRoofBase, + construction: selectedConstruction, + } + + const index = tempModuleSelectionData.roofConstructions.findIndex((obj) => obj.roofIndex === tabIndex) + + if (index > -1) { + const newArray = [ + ...tempModuleSelectionData.roofConstructions.slice(0, index), + newRoofConstructions, + ...tempModuleSelectionData.roofConstructions.slice(index + 1), + ] + setTempModuleSelectionData({ common: common, module: module, roofConstructions: newArray }) + } else { + setTempModuleSelectionData({ + common: common, + module: module, + roofConstructions: [...tempModuleSelectionData.roofConstructions, { ...newRoofConstructions }], + }) + } + } + } + }, [selectedConstruction]) + + const getModuleOptionsListData = async (params, type) => { + const optionsList = await getTrestleList(params) + + if (optionsList.data.length > 0) { + if (type === 'trestle') { + setTrestleList(optionsList.data) + if (isExistData) { + handleChangeTrestle(moduleConstructionSelectionData?.trestle) + } else { + setConstMthdList([]) + setRoofBaseList([]) + } + } else if (type === 'construction') { + setConstMthdList(optionsList.data) + if (isExistData) { + handleChangeConstMthd(moduleConstructionSelectionData?.trestle) + } else { + setRoofBaseList([]) + } + } else if (type === 'roofBase') { + setRoofBaseList(optionsList.data) + if (isExistData) { + handleChangeRoofBase(moduleConstructionSelectionData?.trestle) + } + } + } + } + + useEffect(() => { + //모듈이 선택되어있을때 + if (moduleSelectionInitOriginData.current.moduleItemId && moduleSelectionInitOriginData.current.moduleTpCd) { + //초기에 들어온 데이터가 수정된 데이터가 값이 다르다면` + if (!isEqualObjects(moduleSelectionInitOriginData.current, moduleSelectionInitParams)) { + //가대 선택 초기화 + setSelectedTrestle({}) + + //공법 선택 초기화 + setSelectedConstMthd({}) + + //지붕밑바탕 선택 초기화 + setSelectedRoofBase({}) + + //공법 리스트 초기화 + setConstructionList([]) + + // 기본 정보 초기화 + setModuleSelectionData({ + ...moduleSelectionData, + roofConstructions: [], + }) + + // 선택 데이터 초 기화 + setModuleConstructionSelectionData({ + addRoof: addRoof, + trestle: {}, + construction: {}, + }) + + //임시 데이터 초기화 + setTempModuleSelectionData({ + ...moduleSelectionData, + roofConstructions: [], + }) + + //처마커버 해제 + setCvrChecked(false) + //눈막이금구 해제 + setSnowGdChecked(false) + + // 데이터 없음으로 변경 + setIsExistData(false) + + //변경된 데이터를 ref에 저장 + moduleSelectionInitOriginData.current = moduleSelectionInitParams + } + } + }, [moduleSelectionInitParams]) + + return { + raftCodes, + trestleList, + constMthdList, + roofBaseList, + constructionList, + globalPitchText, + selectedTrestle, + selectedConstMthd, + selectedRoofBase, + constructionRef, + cvrYn, + cvrChecked, + snowGdPossYn, + snowGdChecked, + lengthBase, + hajebichi, + lengthRef, + hajebichiRef, + setLengthBase, + setHajebichi, + handleChangeRaftBase, + handleChangeTrestle, + handleChangeConstMthd, + handleChangeRoofBase, + handleConstruction, + handleCvrChecked, + handleSnowGdChecked, + } +}