From b01fbd1fbdbd3508a3b6d5101908d63f5b67e7c2 Mon Sep 17 00:00:00 2001 From: yjnoh Date: Thu, 2 Jan 2025 15:34:25 +0900 Subject: [PATCH] =?UTF-8?q?useModuleSelection=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/GlobalDataProvider.js | 6 +- .../floor-plan/modal/basic/step/Module.jsx | 332 +++++++----------- src/hooks/common/useMasterController.js | 2 +- src/hooks/module/useModuleSelection.js | 245 +++++++++++++ src/hooks/object/useObjectBatch.js | 4 +- 5 files changed, 383 insertions(+), 206 deletions(-) create mode 100644 src/hooks/module/useModuleSelection.js diff --git a/src/app/GlobalDataProvider.js b/src/app/GlobalDataProvider.js index e4162cd1..d930bbed 100644 --- a/src/app/GlobalDataProvider.js +++ b/src/app/GlobalDataProvider.js @@ -10,12 +10,14 @@ export const GlobalDataContext = createContext({ }) const GlobalDataProvider = ({ children }) => { - const [managementState, setManagementState] = useState({}) + const [managementState, setManagementState] = useState(null) // TODO: 임시 조치이며 개발 완료시 삭제 예정 -> 잊지말기... const [managementStateLoaded, setManagementStateLoaded] = useLocalStorage('managementStateLoaded', null) useEffect(() => { - setManagementStateLoaded(managementState) + if (managementState !== null) { + setManagementStateLoaded(managementState) + } }, [managementState]) return {children} diff --git a/src/components/floor-plan/modal/basic/step/Module.jsx b/src/components/floor-plan/modal/basic/step/Module.jsx index 0e6750e7..edbba350 100644 --- a/src/components/floor-plan/modal/basic/step/Module.jsx +++ b/src/components/floor-plan/modal/basic/step/Module.jsx @@ -1,74 +1,39 @@ -import QSelectBox from '@/components/common/select/QSelectBox' -import { useMessage } from '@/hooks/useMessage' -import { canvasSettingState, selectedModuleState, checkedModuleState, pitchSelector } from '@/store/canvasAtom' -import { useEffect, useReducer, useState } from 'react' -import { useRecoilValue, useRecoilState } from 'recoil' -import { useMasterController } from '@/hooks/common/useMasterController' -import { useCommonCode } from '@/hooks/common/useCommonCode' +import { useState } from 'react' +import { useRecoilValue } from 'recoil' import { addedRoofsState } from '@/store/settingAtom' +import { canvasSettingState, pitchSelector } from '@/store/canvasAtom' +import { useMessage } from '@/hooks/useMessage' +import QSelectBox from '@/components/common/select/QSelectBox' +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, setGlobalPitch] = useRecoilState(pitchSelector) - - const [roofTab, setRoofTab] = useState(0) - const [moduleList, setModuleList] = useState([{}]) - const [roofMaterial, setRoofMaterial] = useState(addedRoofs[0]) - const [raftCodes, setRaftCodes] = useState([]) - - const { getModuleTypeItemList, getTrestleList } = useMasterController() - const { getMessage } = useMessage() - const { findCommonCode } = useCommonCode() - - const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈 - const [selectedTrestle, setSelectedTrestle] = useState({}) //선택된 가대 - const [selectedConstMthd, setSelectedConstMthd] = useState({}) //선택된 공법 - const [selectedRoofBase, setSelectedRoofBase] = useState({}) //선택된 지붕밑바탕 - - const [selectedOptions, dispatchSelectedOptions] = useReducer( - (prevState, nextState) => { - return { ...prevState, ...nextState } - }, - { - module: {}, - roofs: [], - }, - ) - + const globalPitch = useRecoilValue(pitchSelector) //피치 const displayPitch = canvasSetting.roofAngleSet === 'slope' ? '寸' : '度' - - const [trestleList, setTrestleList] = useState([]) - const [constMthdList, setConstMthdList] = useState([]) - const [roofBaseList, setRoofBaseList] = useState([]) - - let optionParams = { - moduleTpCd: '', - roofMatlCd: '', - raftBaseCd: '', - trestleMkrCd: '', - constMthdCd: '', - roofBaseCd: '', - } - - useEffect(() => { - //서까래 코드 - const raftCodeList = findCommonCode('203800') - - raftCodeList.forEach((obj) => { - obj.name = obj.clCodeNm - obj.id = obj.clCode - }) - setRaftCodes(raftCodeList) - - //지붕재 선택 - const roofsIds = addedRoofs.filter((obj) => obj.roofMatlCd).map((obj) => obj.roofMatlCd) - if (roofsIds.length === 0) { - return - } - getModuleData(roofsIds) - }, []) + const { + roofMaterial, + selectedModules, + raftCodes, + roughnessCodes, + windSpeedCodes, + managementState, + moduleList, + trestleList, + constMthdList, + roofBaseList, + selectedOptions, + handleRoofTab, + handleChangeModule, + handleChangeRaftBase, + handleChangeTrestle, + handleChangeConstMthd, + handleChangeRoofBase, + } = useModuleSelection({ addedRoofs }) const moduleData = { header: [ @@ -82,118 +47,6 @@ export default function Module({}) { ], rows: [], } - const surfaceTypes = [ - { id: 1, name: 'Ⅱ', value: 'Ⅱ' }, - { id: 2, name: 'Ⅲ ∙ Ⅳ', value: 'Ⅲ ∙ Ⅳ' }, - ] - const fiftingHeights = Array.from({ length: 16 }).map((data, index) => { - return { id: index, name: index + 5, value: index + 5 } - }) - const windSpeeds = Array.from({ length: 7 }).map((data, index) => { - return { id: index, name: index * 2 + 30, value: index * 2 + 30 } - }) - - const handleRoofTab = (tab) => { - setRoofMaterial(addedRoofs[tab]) - setRoofTab(tab) - } - - const handleChangeModule = (option) => { - setSelectedModules(option) //선택값 저장 - - optionParams = { - moduleTpCd: option.itemTp, - roofMatlCd: roofMaterial.roofMatlCd, - raftBaseCd: '', - } - - getModuleOptionsListData(optionParams, 'trestleList') - - dispatchSelectedOptions({ - module: option, - }) - } - - const handleChangeTrestle = (option) => { - setSelectedTrestle(option) //선택값 저장 - - optionParams = { - moduleTpCd: selectedModules.itemTp, - roofMatlCd: roofMaterial.roofMatlCd, - raftBaseCd: '', - 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, - }) - } - - const handleChangeConstMthd = (option) => { - setSelectedConstMthd(option) //선택된값 저장 - - optionParams = { - moduleTpCd: selectedModules.itemTp, - roofMatlCd: roofMaterial.roofMatlCd, - raftBaseCd: '', - trestleMkrCd: selectedTrestle.trestleMkrCd, - constMthdCd: option.constMthdCd, - } - - getModuleOptionsListData(optionParams, 'roofBaseList') - } - - useEffect(() => { - console.log('roofMaterial', roofMaterial) - }, [roofMaterial]) - - const getModuleData = async (roofsIds) => { - const list = await getModuleTypeItemList(roofsIds) - //selectbox에 이름을 넣는다 - list.data.forEach((item) => { - item.name = item.itemNm - }) - //셀렉트박스 데이터 초기화 - setModuleList(list.data) - setTrestleList([]) - setConstMthdList([]) - setRoofBaseList([]) - } - - 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) - } - } - - useEffect(() => { - console.log('selectedOptions', selectedOptions) - }, [selectedOptions]) return ( <> @@ -250,7 +103,14 @@ export default function Module({}) {
- +
@@ -260,7 +120,12 @@ export default function Module({}) {
- + setInstallationHeight(e.target.value)} + />
mm
@@ -271,7 +136,16 @@ export default function Module({}) {
- + {windSpeedCodes && managementState && ( + + )}
m/s
@@ -282,7 +156,12 @@ export default function Module({}) {
- + setStandardSnowLoad(e.target.value)} + />
mm
@@ -294,11 +173,16 @@ export default function Module({}) {
- {addedRoofs.map((roof, index) => ( - - ))} + {addedRoofs && + addedRoofs.map((roof, index) => ( + + ))} {/* @@ -321,6 +205,25 @@ export default function Module({}) {
+ {roofMaterial && ['C'].includes(roofMaterial.lenAuth) && ( + <> +
L
+
+
+
+
+ +
+
+
+
+ + )} {roofMaterial && ['C', 'R'].includes(roofMaterial.raftAuth) && ( <>
{getMessage('modal.module.basic.setting.module.rafter.margin')}
@@ -334,14 +237,29 @@ export default function Module({}) { value={roofMaterial.raftBaseCd} showKey={'clCodeNm'} disabled={roofMaterial.raftAuth === 'R' ? true : false} + onChange={handleChangeRaftBase} /> )}
+
+
+ + )} + {roofMaterial && ['C', 'R'].includes(roofMaterial.roofPchAuth) && ( + <> +
{getMessage('modal.module.basic.setting.module.rafter.margin')}
+
+
垂木の間隔
- +
@@ -353,13 +271,15 @@ export default function Module({}) {
{getMessage('modal.module.basic.setting.module.trestle.maker')}
- + {trestleList && ( + + )}
@@ -367,13 +287,15 @@ export default function Module({}) {
{getMessage('modal.module.basic.setting.module.construction.method')}
- + {constMthdList && ( + + )}
@@ -381,7 +303,15 @@ export default function Module({}) {
{getMessage('modal.module.basic.setting.module.under.roof')}
- + {roofBaseList && ( + + )}
diff --git a/src/hooks/common/useMasterController.js b/src/hooks/common/useMasterController.js index 6f7a8fb9..94f455c5 100644 --- a/src/hooks/common/useMasterController.js +++ b/src/hooks/common/useMasterController.js @@ -36,7 +36,7 @@ export function useMasterController() { } const paramString = `?${paramArr.map((item) => `arrRoofMatlCd=${item}`).join('&')}` return await get({ url: `/api/v1/master/getModuleTypeItemList${paramString}` }).then((res) => { - console.log('🚀🚀 ~ getModuleTypeItemList ~ res:', res) + // console.log('🚀🚀 ~ getModuleTypeItemList ~ res:', res) return res }) } diff --git a/src/hooks/module/useModuleSelection.js b/src/hooks/module/useModuleSelection.js new file mode 100644 index 00000000..477776f9 --- /dev/null +++ b/src/hooks/module/useModuleSelection.js @@ -0,0 +1,245 @@ +import { useRecoilState, useRecoilValue } from 'recoil' +import { useContext, useEffect, useReducer, useState } from 'react' +import { GlobalDataContext } from '@/app/GlobalDataProvider' +import { useCommonCode } from '../common/useCommonCode' +import { useMasterController } from '../common/useMasterController' +import { selectedModuleState } from '@/store/canvasAtom' + +export function useModuleSelection(props) { + const [roofMaterial, setRoofMaterial] = useState(props.addedRoofs[0]) //지붕재 + const { managementState, setManagementState, managementStateLoaded } = useContext(GlobalDataContext) + + const { findCommonCode } = useCommonCode() + const [raftCodes, setRaftCodes] = useState([]) //가대 목록 + const [roughnessCodes, setRoughnessCodes] = useState([]) //면조도 목록 + const [windSpeedCodes, setWindSpeedCodes] = useState([]) //기준풍속 목록 + + const [moduleList, setModuleList] = useState([{}]) //모듈 목록 + const [trestleList, setTrestleList] = useState([]) + const [constMthdList, setConstMthdList] = useState([]) + const [roofBaseList, setRoofBaseList] = useState([]) + + const [selectedModules, setSelectedModules] = useRecoilState(selectedModuleState) //선택된 모듈 + const [selectedRaftBase, setSelectedRaftBase] = useState({}) //선택된 가대 + const [selectedTrestle, setSelectedTrestle] = useState({}) //선택된 가대 + const [selectedConstMthd, setSelectedConstMthd] = useState({}) //선택된 공법 + const [selectedRoofBase, setSelectedRoofBase] = useState({}) //선택된 지붕밑바탕 + + const [selectedOptions, dispatchSelectedOptions] = useReducer( + (prevState, nextState) => { + return { ...prevState, ...nextState } + }, + { + module: {}, + roofs: [], + }, + ) + + const { getModuleTypeItemList, getTrestleList, getConstructionList } = useMasterController() + + let optionParams = { + surfaceType: '', //면조도 + installHeight: '', //설치 노 ㅍ이 + standardWindSpeedId: '', //기준풍속 + verticalSnowCover: '', //수직적설량 + moduleTpCd: '', + roofMatlCd: '', + raftBaseCd: '', + trestleMkrCd: '', + constMthdCd: '', + roofBaseCd: '', + } + + useEffect(() => { + console.log('managementState', managementState) + }, [managementState]) + + useEffect(() => { + //새로고침시 데이터 날아가는거 방지 + if (!managementState) { + setManagementState(managementStateLoaded) + } + // 202600 경사도 + const raftCodeList = findCommonCode('203800') + + //서까래 코드 + raftCodeList.forEach((obj) => { + obj.name = obj.clCodeNm + obj.id = obj.clCode + }) + setRaftCodes(raftCodeList) + + // 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 + } + getModuleData(roofsIds) + }, []) + + const handleRoofTab = (tab) => { + setRoofMaterial(props.addedRoofs[tab]) + } + + const getModuleData = async (roofsIds) => { + const list = await getModuleTypeItemList(roofsIds) + //selectbox에 이름을 넣는다 + list.data.forEach((item) => { + item.name = item.itemNm + }) + //셀렉트박스 데이터 초기화 + setModuleList(list.data) + 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, + raftBaseCd: option.clCode, + } + + getModuleOptionsListData(optionParams, 'trestleList') + } + + const handleChangeTrestle = (option) => { + setSelectedTrestle(option) //선택값 저장 + + optionParams = { + roofMatlCd: roofMaterial.roofMatlCd, + moduleTpCd: selectedModules.itemTp, + raftBaseCd: selectedRaftBase.clCode, + 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, + }) + } + + const handleChangeConstMthd = (option) => { + setSelectedConstMthd(option) //선택된값 저장 + + optionParams = { + roofMatlCd: roofMaterial.roofMatlCd, + moduleTpCd: selectedModules.itemTp, + raftBaseCd: selectedRaftBase.clCode, + trestleMkrCd: selectedTrestle.trestleMkrCd, + constMthdCd: option.constMthdCd, + } + + getModuleOptionsListData(optionParams, 'roofBaseList') + } + + const handleChangeRoofBase = (option) => { + setSelectedRoofBase(option) + + optionParams = { + roofMatlCd: roofMaterial.roofMatlCd, + moduleTpCd: selectedModules.itemTp, + raftBaseCd: selectedRaftBase.clCode, + trestleMkrCd: selectedTrestle.trestleMkrCd, + constMthdCd: selectedConstMthd.constMthdCd, + roofBaseCd: option.roofBaseCd, + } + } + + return { + roofMaterial, + selectedModules, + selectedRaftBase, + selectedTrestle, + selectedConstMthd, + selectedRoofBase, + raftCodes, + roughnessCodes, + windSpeedCodes, + managementState, + moduleList, + trestleList, + constMthdList, + roofBaseList, + selectedOptions, + handleRoofTab, + handleChangeModule, + handleChangeRaftBase, + handleChangeTrestle, + handleChangeConstMthd, + handleChangeRoofBase, + } +} diff --git a/src/hooks/object/useObjectBatch.js b/src/hooks/object/useObjectBatch.js index 6fd858a1..27676eab 100644 --- a/src/hooks/object/useObjectBatch.js +++ b/src/hooks/object/useObjectBatch.js @@ -36,10 +36,10 @@ export function useObjectBatch({ isHidden, setIsHidden }) { }, []) const dbClickEvent = () => { - console.log('dbClickEvent 실행') + // console.log('dbClickEvent 실행') const dormerObject = canvas.getObjects().filter((obj) => obj.name === BATCH_TYPE.TRIANGLE_DORMER || obj.name === BATCH_TYPE.PENTAGON_DORMER) - console.log('dormerObject', dormerObject) + // console.log('dormerObject', dormerObject) if (dormerObject) { canvas.off('mouse:dblclick')