From 9736e7ed5835a7163079035d8a716c3bcefa4a76 Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Wed, 11 Dec 2024 10:19:19 +0900 Subject: [PATCH] =?UTF-8?q?roofMaterials=20recoil=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../placementShape/PlacementShapeSetting.jsx | 317 +++++------------- src/hooks/option/useCanvasSetting.js | 9 + src/store/settingAtom.js | 19 +- 3 files changed, 92 insertions(+), 253 deletions(-) diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx index 1ce18a85..bc9fb401 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx @@ -8,68 +8,37 @@ import MaterialGuide from '@/components/floor-plan/modal/placementShape/Material import WithDraggable from '@/components/common/draggable/WithDraggable' import { useCanvasSetting } from '@/hooks/option/useCanvasSetting' +import { useRecoilState, useRecoilValue } from 'recoil' +import { roofMaterialsAtom } from '@/store/settingAtom' +import { isObjectNotEmpty } from '@/util/common-utils' export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, setShowPlaceShapeModal }) { const [showSizeGuideModal, setShowSizeGuidModal] = useState(false) const [showMaterialGuideModal, setShowMaterialGuidModal] = useState(false) const { closePopup } = usePopup() const { getMessage } = useMessage() + const roofMaterials = useRecoilValue(roofMaterialsAtom) const { basicSetting, setBasicSettings, fetchBasicSettings, basicSettingSave } = useCanvasSetting() + const [currentRoofMaterial, setCurrentRoofMaterial] = useState( + isObjectNotEmpty(basicSetting.selectedRoofMaterial) ? basicSetting.selectedRoofMaterial : roofMaterials[0], + ) // 데이터를 최초 한 번만 조회 useEffect(() => { fetchBasicSettings() }, []) + useEffect(() => { + console.log(currentRoofMaterial) + }, [roofMaterials]) + // Function to update the roofType and corresponding values - const handleRoofTypeChange = (index, value) => { - const updatedRoofs = [...basicSetting.roofs] - const roofType = parseInt(value, 10) - - // Reset other values based on the selected roofType - if (roofType === 1) { - updatedRoofs[index] = { - ...updatedRoofs[index], - roofType: 1, - roofWidth: 265, - roofHeight: 235, - roofGap: 455, - roofHajebichi: 0, - } - } else if (roofType === 2) { - updatedRoofs[index] = { - ...updatedRoofs[index], - roofType: 2, - roofGap: 265, - roofHajebichi: 265, - roofWidth: 0, - roofHeight: 0, - } - } else if (roofType === 3) { - updatedRoofs[index] = { - ...updatedRoofs[index], - roofType: 3, - roofHajebichi: 265, - roofGap: 0, - roofWidth: 0, - roofHeight: 0, - } - } else if (roofType === 4) { - updatedRoofs[index] = { - ...updatedRoofs[index], - roofType: 4, - roofHeight: 265, - roofGap: 265, - roofHajebichi: 0, - roofWidth: 0, - } - } - - setBasicSettings({ - ...basicSetting, - roofs: updatedRoofs, - }) + const handleRoofTypeChange = (value) => { + const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value) + setCurrentRoofMaterial(selectedRoofMaterial) + /*const newBasicSetting = { ...basicSetting } + setBasicSettings({ ...newBasicSetting, selectedRoofMaterial: selectedRoofMaterial })*/ } return ( @@ -180,16 +149,19 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set - {basicSetting.roofs[0].roofType === 1 ? ( + {['R', 'C'].includes(currentRoofMaterial.widAuth) && ( <>
W @@ -197,204 +169,67 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set -
- -
- L -
- -
-
-
- {getMessage('modal.placement.initial.setting.rafter')} -
-
- ) : basicSetting.roofs[0].roofType === 2 ? ( - <> -
- {getMessage('hajebichi')} -
- -
+ )} + {['R', 'C'].includes(currentRoofMaterial.lenAuth) && ( +
+ L +
+
-
- {getMessage('modal.placement.initial.setting.rafter')} -
- -
+
+ )} + {['C', 'R'].includes(currentRoofMaterial.raftAuth) && ( +
+ {getMessage('modal.placement.initial.setting.rafter')} +
+
- - ) : basicSetting.roofs[0].roofType === 3 ? ( - <> -
- {getMessage('hajebichi')} -
- -
+
+ )} + {['C', 'R'].includes(currentRoofMaterial.roofPchAuth) && ( +
+ {getMessage('hajebichi')} +
+
- - ) : basicSetting.roofs[0].roofType === 4 ? ( - <> -
- L -
- -
-
-
- {getMessage('modal.placement.initial.setting.rafter')} -
- -
-
- - ) : ( - '' +
)}
diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js index 220bdae4..660dcefa 100644 --- a/src/hooks/option/useCanvasSetting.js +++ b/src/hooks/option/useCanvasSetting.js @@ -20,6 +20,7 @@ import { settingModalGridOptionsState, basicSettingState, settingsState, + roofMaterialsAtom, } from '@/store/settingAtom' import { POLYGON_TYPE } from '@/common/common' import { globalFontAtom } from '@/store/fontAtom' @@ -91,6 +92,8 @@ export function useCanvasSetting() { const [canvasSetting, setCanvasSetting] = useRecoilState(canvasSettingState) const [basicSetting, setBasicSettings] = useRecoilState(basicSettingState) + const [roofMaterials, setRoofMaterials] = useRecoilState(roofMaterialsAtom) + const SelectOptions = [ { id: 1, name: getMessage('modal.canvas.setting.grid.dot.line.setting.line.origin'), value: 1 }, { id: 2, name: '1/2', value: 1 / 2 }, @@ -98,6 +101,12 @@ export function useCanvasSetting() { { id: 4, name: '1/10', value: 1 / 10 }, ] + useEffect(() => { + get({ url: `/api/v1/master/getRoofMaterialList` }).then((res) => { + setRoofMaterials(res.data) + }) + }, []) + useEffect(() => { if (!canvas) { return diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js index 9e64d72f..7a07175b 100644 --- a/src/store/settingAtom.js +++ b/src/store/settingAtom.js @@ -203,21 +203,16 @@ export const basicSettingState = atom({ default: { roofSizeSet: 1, roofAngleSet: 'slope', - roofs: [ - { - roofApply: true, - roofSeq: 1, - roofType: 1, - roofWidth: 200, - roofHeight: 200, - roofHajebichi: 200, - roofGap: 0, - roofLayout: 'parallel', - }, - ], + selectedRoofMaterial: {}, }, }) +// db에 등록된 지붕재 목록 +export const roofMaterialsAtom = atom({ + key: 'roofMaterialState', + default: [], +}) + /** * 현재 선택된 물건 번호 */