From de282fd9691df0052ff413051b2293d956c624a0 Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Wed, 15 Jan 2025 20:17:07 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B0=B0=EC=B9=98=EB=A9=B4=20=EC=B4=88?= =?UTF-8?q?=EA=B8=B0=EC=84=A4=EC=A0=95=20=EC=9A=B0=EC=84=A0=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/CanvasMenu.jsx | 11 +- src/components/floor-plan/FloorPlan.jsx | 1 + .../placementShape/PlacementShapeSetting.jsx | 65 ++-- .../roofAllocation/RoofAllocationSetting.jsx | 336 +++++++++--------- src/hooks/option/useCanvasSetting.js | 14 +- .../roofcover/useRoofAllocationSetting.js | 49 ++- src/store/settingAtom.js | 5 + 7 files changed, 256 insertions(+), 225 deletions(-) diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index c314dd2a..13cfd956 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -308,9 +308,10 @@ export default function CanvasMenu(props) { } }, [type, globalLocale]) - useEffect(() => { - if (!selectedRoofMaterial) return - //if (Object.keys(basicSetting).length === 0 || !basicSetting.roofSizeSet) return + /*useEffect(() => { + if (menuNumber === 1) { + return + } setMenuNumber(1) // if ([2, 3].some((num) => num === canvasSetting?.roofSizeSet)) { // setMenuNumber(3) @@ -321,8 +322,8 @@ export default function CanvasMenu(props) { // setType('outline') // setCurrentMenu(MENU.ROOF_COVERING.EXTERIOR_WALL_LINE) // } - }, [selectedRoofMaterial]) - + }, [basicSetting])*/ + const checkMenuState = (menu) => { return (['2', '3'].includes(canvasSetting?.roofSizeSet) && menu.index === 2) || (menuNumber === 4 && menu.index === 2) } diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index fe95d46b..0769af0a 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/src/components/floor-plan/FloorPlan.jsx @@ -25,6 +25,7 @@ export default function FloorPlan({ children }) { useEffect(() => { ///setCorrentObjectNo(floorPlanState.objectNo) //console.log('FloorPlan objectNo ', floorPlanState.objectNo, correntObjectNo) + setMenuNumber(1) fetchSettings() return () => { closeAll() diff --git a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx index f2bb0103..0a539ac2 100644 --- a/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx +++ b/src/components/floor-plan/modal/placementShape/PlacementShapeSetting.jsx @@ -8,8 +8,8 @@ import MaterialGuide from '@/components/floor-plan/modal/placementShape/Material import WithDraggable from '@/components/common/draggable/WithDraggable' import { useCanvasSetting } from '@/hooks/option/useCanvasSetting' -import { useRecoilValue } from 'recoil' -import { roofMaterialsAtom } from '@/store/settingAtom' +import { useRecoilState, useRecoilValue } from 'recoil' +import { addedRoofsState, roofMaterialsAtom } from '@/store/settingAtom' import { useCommonCode } from '@/hooks/common/useCommonCode' import QSelectBox from '@/components/common/select/QSelectBox' import { globalLocaleStore } from '@/store/localeAtom' @@ -28,10 +28,11 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set const roofMaterials = useRecoilValue(roofMaterialsAtom) const globalLocale = useRecoilValue(globalLocaleStore) - const { basicSetting, setBasicSettings, basicSettingSave, addedRoofs, setAddedRoofs } = useCanvasSetting() + const { basicSetting, setBasicSettings, basicSettingSave } = useCanvasSetting() + const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState) const { findCommonCode } = useCommonCode() const [raftCodes, setRaftCodes] = useState([]) // 서까래 정보 - const [currentRoof, setCurrentRoof] = useState(addedRoofs[0]) // 현재 선택된 지붕재 정보 + const [currentRoof, setCurrentRoof] = useState(null) // 현재 선택된 지붕재 정보 const roofRef = { roofCd: useRef(null), @@ -50,7 +51,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set //지붕각도 설정(경사/각도) const roofAngleSetArray = [ - { id: 'ra04', name: 'roofAngleSet', value: 'slope', message: 'modal.placement.initial.setting.roof.pitch'}, + { id: 'ra04', name: 'roofAngleSet', value: 'slope', message: 'modal.placement.initial.setting.roof.pitch' }, { id: 'ra05', name: 'roofAngleSet', value: 'flat', message: 'modal.placement.initial.setting.roof.angle' }, ] @@ -59,7 +60,7 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set if (!basicSetting || !currentRoof || Object.keys(currentRoof).length === 0 || Object.keys(basicSetting).length === 0) return const raftCodeList = findCommonCode('203800') setRaftCodes(raftCodeList) - + if (addedRoofs[0].roofAngleSet && addedRoofs[0].roofAngleSet?.length > 0) { setCurrentRoof({ ...currentRoof, roofSizeSet: String(addedRoofs[0].roofSizeSet), roofAngleSet: addedRoofs[0].roofAngleSet }) } else if (basicSetting.roofAngleSet && basicSetting.roofAngleSet?.length > 0) { @@ -67,9 +68,15 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set } }, []) + useEffect(() => { + if (addedRoofs.length > 0) { + setCurrentRoof({ ...addedRoofs[0] }) + } + }, [addedRoofs]) + useEffect(() => { console.log('🚀 ~ fetchBasicSettings ~ currentRoof :', currentRoof) - if(!currentRoof) return + if (!currentRoof) return setBasicSettings({ ...basicSetting, roofSizeSet: String(currentRoof.roofSizeSet), @@ -196,42 +203,42 @@ export default function PlacementShapeSetting({ id, pos = { x: 50, y: 180 }, set -
+
{currentRoof && roofSizeSetArray.map((item) => (
- setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })} - /> - + setCurrentRoof({ ...currentRoof, roofSizeSet: e.target.value })} + /> +
- )) - } + ))}
{getMessage('modal.placement.initial.setting.roof.angle.setting')} -
+
{currentRoof && roofAngleSetArray.map((item) => (
- setCurrentRoof({ ...currentRoof, roofAngleSet: e.target.value })} - /> - + setCurrentRoof({ ...currentRoof, roofAngleSet: e.target.value })} + /> +
- )) - } + ))}
diff --git a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx index eabe825b..4118db79 100644 --- a/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx +++ b/src/components/floor-plan/modal/roofAllocation/RoofAllocationSetting.jsx @@ -47,190 +47,194 @@ export default function RoofAllocationSetting(props) { return (
-
-

{getMessage('plan.menu.estimate.roof.alloc')}

- -
-
-
{getMessage('modal.roof.alloc.info')}
-
- {getMessage('modal.roof.alloc.select.roof.material')} -
- { - // const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id) - setCurrentRoofMaterial(e) - }} - showKey={'roofMatlNm'} - sourceKey={'roofMatlCd'} - targetKey={'roofMatlCd'} - /> + {currentRoofList && ( + <> +
+

{getMessage('plan.menu.estimate.roof.alloc')}

+
- -
-
-
- {currentRoofList.map((roof, index) => { - return ( -
-
- - -
-
-
-
-
- handleChangeRoofMaterial(e, index)} - /> -
- {index === 0 && {getMessage('modal.roof.alloc.default.roof.material')}} - {index !== 0 && } +
+
{getMessage('modal.roof.alloc.info')}
+
+ {getMessage('modal.roof.alloc.select.roof.material')} +
+ { + // const selected = roofMaterials.find((roofMaterial) => roofMaterial.roofMatlCd === e.id) + setCurrentRoofMaterial(e) + }} + showKey={'roofMatlNm'} + sourceKey={'roofMatlCd'} + targetKey={'roofMatlCd'} + /> +
+ +
+
+
+ {currentRoofList.map((roof, index) => { + return ( +
+
+ +
-
-
-
- {getMessage('slope')} -
- { - handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index) - }} - defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle} - /> -
- {pitchText} -
-
- {(roof.widAuth || roof.lenAuth) && ( -
- {roof.widAuth && ( +
+
- W -
+
+ handleChangeRoofMaterial(e, index)} + /> +
+ {index === 0 && {getMessage('modal.roof.alloc.default.roof.material')}} + {index !== 0 && } +
+
+
+
+ {getMessage('slope')} +
handleChangeInput(e, 'width', index)} - readOnly={roof.widAuth === 'R'} + onChange={(e) => { + handleChangeInput(e, currentAngleType === 'slope' ? 'pitch' : 'angle', index) + }} + defaultValue={currentAngleType === 'slope' ? roof.pitch : roof.angle} />
+ {pitchText}
- )} - {roof.lenAuth && ( -
- L -
- handleChangeInput(e, 'length', index)} - readOnly={roof.lenAuth === 'R'} - /> -
-
- )} -
- )} - {(roof.raftAuth || roof.roofPchAuth) && ( -
- {roof.raftAuth && ( +
+ {(roof.widAuth || roof.lenAuth) && (
-
- {getMessage('modal.placement.initial.setting.rafter')} - {raftCodes.length > 0 && ( -
- handleChangeRaft(e, index)} + {roof.widAuth && ( +
+ W +
+ handleChangeInput(e, 'width', index)} + readOnly={roof.widAuth === 'R'} />
- )} -
-
- )} - {roof.roofPchAuth && ( -
-
- {getMessage('hajebichi')} -
- handleChangeInput(e, 'hajebichi', index)} - value={parseInt(roof.hajebichi)} - readOnly={roof.roofPchAuth === 'R'} - />
-
+ )} + {roof.lenAuth && ( +
+ L +
+ handleChangeInput(e, 'length', index)} + readOnly={roof.lenAuth === 'R'} + /> +
+
+ )}
)} -
- )} -
-
- - + {(roof.raftAuth || roof.roofPchAuth) && ( +
+ {roof.raftAuth && ( +
+
+ {getMessage('modal.placement.initial.setting.rafter')} + {raftCodes.length > 0 && ( +
+ handleChangeRaft(e, index)} + /> +
+ )} +
+
+ )} + {roof.roofPchAuth && ( +
+
+ {getMessage('hajebichi')} +
+ handleChangeInput(e, 'hajebichi', index)} + value={parseInt(roof.hajebichi)} + readOnly={roof.roofPchAuth === 'R'} + /> +
+
+
+ )} +
+ )} +
+
+ + +
+
-
-
- ) - })} + ) + })} +
+
+
+ +
-
-
- -
-
+ + )}
) diff --git a/src/hooks/option/useCanvasSetting.js b/src/hooks/option/useCanvasSetting.js index 8594bd4e..6d576a30 100644 --- a/src/hooks/option/useCanvasSetting.js +++ b/src/hooks/option/useCanvasSetting.js @@ -23,6 +23,7 @@ import { roofMaterialsAtom, selectedRoofMaterialSelector, addedRoofsState, + fetchRoofMaterialsState, } from '@/store/settingAtom' import { MENU, POLYGON_TYPE } from '@/common/common' import { globalFontAtom } from '@/store/fontAtom' @@ -77,6 +78,7 @@ export function useCanvasSetting() { const [gridColor, setGridColor] = useRecoilState(gridColorState) const [color, setColor] = useColor(gridColor ?? '#FF0000') const { menuNumber, setMenuNumber } = useCanvasMenu() + const [settingsData, setSettingsData] = useState({ ...settingModalFirstOptions, ...settingModalSecondOptions, @@ -102,6 +104,7 @@ export function useCanvasSetting() { const { getRoofMaterialList, getModuleTypeItemList } = useMasterController() const [roofMaterials, setRoofMaterials] = useRecoilState(roofMaterialsAtom) const [addedRoofs, setAddedRoofs] = useRecoilState(addedRoofsState) + const [fetchRoofMaterials, setFetchRoofMaterials] = useRecoilState(fetchRoofMaterialsState) const [type, setType] = useRecoilState(menuTypeState) const setCurrentMenu = useSetRecoilState(currentMenuState) const SelectOptions = [ @@ -114,10 +117,10 @@ export function useCanvasSetting() { const selectedRoofMaterial = useRecoilValue(selectedRoofMaterialSelector) useEffect(() => { - if (roofMaterials.length !== 0) { - return + setFetchRoofMaterials(!fetchRoofMaterials) + if (fetchRoofMaterials) { + addRoofMaterials() } - addRoofMaterials() }, []) //지붕재 초기세팅 @@ -326,7 +329,7 @@ export function useCanvasSetting() { ] } - // 데이터 설정 + // 데이터 설정 const addRoofs = [] for (let i = 0; i < roofsArray.length; i++) { roofMaterials?.map((material) => { @@ -344,7 +347,7 @@ export function useCanvasSetting() { roofAngleSet: roofsRow[i].roofAngleSet, pitch: roofsArray[i].roofPitch, angle: roofsArray[i].roofAngle, - }) + }) } }) } @@ -404,7 +407,6 @@ export function useCanvasSetting() { ], } - await post({ url: `/api/canvas-management/canvas-basic-settings`, data: patternData }).then((res) => { swalFire({ text: getMessage(res.returnMessage) }) }) diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js index 39487361..546ebe0b 100644 --- a/src/hooks/roofcover/useRoofAllocationSetting.js +++ b/src/hooks/roofcover/useRoofAllocationSetting.js @@ -33,7 +33,7 @@ export function useRoofAllocationSetting(id) { const { drawDirectionArrow, addLengthText, splitPolygonWithLines, splitPolygonWithSeparate } = usePolygon() const [popupId, setPopupId] = useState(uuidv4()) const { addPopup, closePopup, closeAll } = usePopup() - const currentObject = useRecoilValue(currentObjectState) + const currentObject = useRecoilValue(currentObjectState) const { setMenuNumber } = useCanvasMenu() const setMenuType = useSetRecoilState(menuTypeState) const roofMaterials = useRecoilValue(roofMaterialsSelector) @@ -42,15 +42,20 @@ export function useRoofAllocationSetting(id) { const [currentRoofMaterial, setCurrentRoofMaterial] = useState(roofMaterials[0]) // 팝업 내 기준 지붕재 const [roofList, setRoofList] = useRecoilState(addedRoofsState) // 배치면 초기설정에서 선택한 지붕재 배열 const [editingLines, setEditingLines] = useState([]) - const [currentRoofList, setCurrentRoofList] = useState(roofList) + const [currentRoofList, setCurrentRoofList] = useState(null) const currentAngleType = useRecoilValue(currentAngleTypeSelector) const globalLocaleState = useRecoilValue(globalLocaleStore) + const [basicInfo, setBasicInfo] = useState(null) const { get, post } = useAxios(globalLocaleState) const { getMessage } = useMessage() const { swalFire } = useSwal() const { setSurfaceShapePattern } = useRoofFn() + useEffect(() => { + setCurrentRoofList(roofList) + }, []) + useEffect(() => { const roofBases = canvas.getObjects().filter((obj) => obj.name === POLYGON_TYPE.ROOF) // roofPolygon.innerLines @@ -133,6 +138,8 @@ export function useRoofAllocationSetting(id) { console.log('fetchBasicSettings roofsArray', roofsArray) + console.log(roofsArray) + // 데이터 설정 const selectRoofs = [] for (let i = 0; i < roofsArray.length; i++) { @@ -154,8 +161,8 @@ export function useRoofAllocationSetting(id) { } }) } - - setCurrentRoofList(selectRoofs) + + // setCurrentRoofList(selectRoofs) //setBasicSetting({ ...basicSetting, roofsData: roofsArray }) setBasicSetting({ ...basicSetting, @@ -163,6 +170,10 @@ export function useRoofAllocationSetting(id) { roofAngleSet: res[0].roofAngleSet, roofsData: roofsArray, }) + setBasicInfo({ + roofSizeSet: '' + res[0].roofSizeSet, + roofAngleSet: '' + res[0].roofAngleSet, + }) }) } catch (error) { console.error('Data fetching error:', error) @@ -173,10 +184,10 @@ export function useRoofAllocationSetting(id) { const basicSettingSave = async () => { try { const patternData = { - objectNo: correntObjectNo, + objectNo: correntObjectNo, roofSizeSet: Number(basicSetting.roofSizeSet), roofAngleSet: basicSetting.roofAngleSet, - roofAllocationList: currentRoofList.map((item, index) => ({ + roofAllocationList: currentRoofList.map((item, index) => ({ roofApply: item.selected === null || item.selected === undefined ? 'true' : item.selected, roofSeq: index, roofMatlCd: item.roofMatlCd === null || item.roofMatlCd === undefined ? 'ROOF_ID_WA_53A' : item.roofMatlCd, @@ -190,19 +201,19 @@ export function useRoofAllocationSetting(id) { })), } - console.log('🚀 ~ basicSettingSave ~ patternData >>>>>>>>>>>>> :', patternData) + console.log('🚀 ~ basicSettingSave ~ patternData >>>>>>>>>>>>> :', patternData) - await post({ url: `/api/canvas-management/roof-allocation-settings`, data: patternData }).then((res) => { - console.log('roof-allocation-settings res ', res) - swalFire({ text: getMessage(res.returnMessage) }) - }) + await post({ url: `/api/canvas-management/roof-allocation-settings`, data: patternData }).then((res) => { + console.log('roof-allocation-settings res ', res) + swalFire({ text: getMessage(res.returnMessage) }) + }) - //Recoil 설정 - //setCanvasSetting({ ...basicSetting }) - fetchBasicSettings() - } catch (error) { - swalFire({ text: error.message, icon: 'error' }) - } + //Recoil 설정 + //setCanvasSetting({ ...basicSetting }) + fetchBasicSettings() + } catch (error) { + swalFire({ text: error.message, icon: 'error' }) + } } const onAddRoofMaterial = () => { @@ -321,8 +332,9 @@ export function useRoofAllocationSetting(id) { }) const newRoofList = currentRoofList.map((roof, idx) => { - return { ...roof, index: idx } + return { ...roof, index: idx, ...basicInfo } }) + console.log('basicInfo', newRoofList) setBasicSetting((prev) => { return { @@ -330,7 +342,6 @@ export function useRoofAllocationSetting(id) { selectedRoofMaterial: newRoofList.find((roof) => roof.selected), } }) - setRoofList(newRoofList) const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof') diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js index 305bcb57..023458b4 100644 --- a/src/store/settingAtom.js +++ b/src/store/settingAtom.js @@ -244,3 +244,8 @@ export const correntObjectNoState = atom({ key: 'correntObjectNoState', default: '', }) + +export const fetchRoofMaterialsState = atom({ + key: 'fetchRoofMaterialsState', + default: false, +})