From d1b6f8172c5210decc1acb5e6c14af1ee0ba684a Mon Sep 17 00:00:00 2001 From: yjnoh Date: Mon, 6 Jan 2025 16:45:53 +0900 Subject: [PATCH] =?UTF-8?q?=EB=AA=A8=EB=93=88=20=EC=84=A0=ED=83=9D=20?= =?UTF-8?q?=ED=83=AD=20=EA=B4=80=EB=A0=A8=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../floor-plan/modal/basic/step/Module.jsx | 56 ++-- .../floor-plan/modal/basic/step/Placement.jsx | 3 +- src/hooks/module/useModuleSelection.js | 251 ++++++++++-------- src/locales/ko.json | 3 +- src/store/canvasAtom.js | 6 - src/store/selectedModuleOptions.js | 48 ++++ 6 files changed, 227 insertions(+), 140 deletions(-) create mode 100644 src/store/selectedModuleOptions.js diff --git a/src/components/floor-plan/modal/basic/step/Module.jsx b/src/components/floor-plan/modal/basic/step/Module.jsx index edbba350..e686c020 100644 --- a/src/components/floor-plan/modal/basic/step/Module.jsx +++ b/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({}) {
{getMessage('modal.module.basic.setting.module.setting')}
- + {moduleList && ( + + )}
@@ -103,14 +104,16 @@ export default function Module({}) {
- + {roughnessCodes.length > 0 && ( + + )}
@@ -136,7 +139,7 @@ export default function Module({}) {
- {windSpeedCodes && managementState && ( + {windSpeedCodes.length > 0 && managementState && ( )}
@@ -231,15 +235,13 @@ export default function Module({}) {
{raftCodes.length > 0 && ( - <> - - + )}
@@ -273,7 +275,7 @@ export default function Module({}) {
{trestleList && ( {constMthdList && ( {roofBaseList && ( { const { getMessage } = useMessage() diff --git a/src/hooks/module/useModuleSelection.js b/src/hooks/module/useModuleSelection.js index 477776f9..84217e34 100644 --- a/src/hooks/module/useModuleSelection.js +++ b/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( - (prevState, nextState) => { - return { ...prevState, ...nextState } - }, - { - module: {}, - roofs: [], - }, - ) + const [selectedSurfaceType, setSelectedSurfaceType] = useState({}) //선택된 면조도 + const [installHeight, setInstallHeight] = useState('0') //설치 높이 + const [standardWindSpeed, setStandardWindSpeed] = useState('0') //기준풍속 + const [verticalSnowCover, setVerticalSnowCover] = useState('0') //수직적설량 + + const [selectedModuleOptions, setSelectedModuleOptions] = useRecoilState(selectedModuleOptionsState) const { getModuleTypeItemList, getTrestleList, getConstructionList } = useMasterController() - let optionParams = { - surfaceType: '', //면조도 - installHeight: '', //설치 노 ㅍ이 - standardWindSpeedId: '', //기준풍속 - verticalSnowCover: '', //수직적설량 - moduleTpCd: '', - roofMatlCd: '', - raftBaseCd: '', - trestleMkrCd: '', - constMthdCd: '', - roofBaseCd: '', - } + const globalPitch = useRecoilValue(pitchSelector) //피치 + const displayPitch = canvasSetting.roofAngleSet === 'slope' ? '寸' : '度' + + const [optionParams, setOptionParams] = useRecoilState(moduleSelectionOptionParamsState) + + const [commonParams, setCommonParams] = useState({}) + const [trestleListParams, setTrestleListParams] = useState({}) + const [constructionListParams, setConstructionListParams] = useState({}) + + const roofTabParams = useRef([]) 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 = { - roofMatlCd: roofMaterial.roofMatlCd, - moduleTpCd: selectedModules.itemTp, + setTrestleListParams({ + ...trestleListParams, raftBaseCd: option.clCode, - } - - getModuleOptionsListData(optionParams, 'trestleList') + }) } const handleChangeTrestle = (option) => { setSelectedTrestle(option) //선택값 저장 - optionParams = { - roofMatlCd: roofMaterial.roofMatlCd, - moduleTpCd: selectedModules.itemTp, - raftBaseCd: selectedRaftBase.clCode, + setTrestleListParams({ + ...trestleListParams, trestleMkrCd: option.trestleMkrCd, - } - - 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, + constMthdCd: '', + roofBaseCd: '', }) + setConstMthdList([]) + setRoofBaseList([]) } const handleChangeConstMthd = (option) => { setSelectedConstMthd(option) //선택된값 저장 - optionParams = { - roofMatlCd: roofMaterial.roofMatlCd, - moduleTpCd: selectedModules.itemTp, - raftBaseCd: selectedRaftBase.clCode, - trestleMkrCd: selectedTrestle.trestleMkrCd, + setTrestleListParams({ + ...trestleListParams, 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) - - optionParams = { - roofMatlCd: roofMaterial.roofMatlCd, + setConstructionListParams({ + ...commonParams, 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, } } diff --git a/src/locales/ko.json b/src/locales/ko.json index c772eebf..e8282e49 100644 --- a/src/locales/ko.json +++ b/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": "선택하세요." } diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js index 618893ec..3b49c782 100644 --- a/src/store/canvasAtom.js +++ b/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: [], diff --git a/src/store/selectedModuleOptions.js b/src/store/selectedModuleOptions.js new file mode 100644 index 00000000..ef208911 --- /dev/null +++ b/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, +})