From 96ec93412de1122138b0b23356f51b65d42cb7a3 Mon Sep 17 00:00:00 2001 From: "hyojun.choi" Date: Mon, 30 Dec 2024 10:46:51 +0900 Subject: [PATCH] =?UTF-8?q?=EC=A7=80=EB=B6=95=EB=A9=B4=20=ED=95=A0?= =?UTF-8?q?=EB=8B=B9=20=EC=9E=91=EC=97=85=EC=A4=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/floor-plan/CanvasMenu.jsx | 11 +- .../ContextRoofAllocationSetting.jsx | 133 +++++++++--------- .../roofAllocation/RoofAllocationSetting.jsx | 3 +- .../roofcover/useRoofAllocationSetting.js | 58 ++++---- src/store/settingAtom.js | 4 +- 5 files changed, 107 insertions(+), 102 deletions(-) diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index 9a420b01..b211b420 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -51,8 +51,8 @@ export default function CanvasMenu(props) { const canvasMenus = useRecoilValue(menusState) const [type, setType] = useRecoilState(menuTypeState) const [verticalHorizontalMode, setVerticalHorizontalMode] = useRecoilState(verticalHorizontalModeState) - const [setAppMessageState] = useRecoilState(appMessageStore) - const [setCurrentMenu] = useRecoilState(currentMenuState) + const setAppMessageState = useSetRecoilState(appMessageStore) + const setCurrentMenu = useSetRecoilState(currentMenuState) const setOuterLinePoints = useSetRecoilState(outerLinePointsState) const setPlacementPoints = useSetRecoilState(placementShapeDrawingPointsState) const canvasSetting = useRecoilValue(canvasSettingState) @@ -116,13 +116,6 @@ export default function CanvasMenu(props) { if (pathname !== '/floor-plan') router.push('/floor-plan') } - useEffect(() => { - console.log('addedRoofs', addedRoofs) - }, [addedRoofs]) - useEffect(() => { - console.log('selectedRoofMaterial', selectedRoofMaterial) - }, [selectedRoofMaterial]) - const changeSelectedRoofMaterial = (e) => { setBasicSetting({ ...basicSetting, selectedRoofMaterial: e }) } diff --git a/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx b/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx index cba18953..23993cb0 100644 --- a/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx +++ b/src/components/floor-plan/modal/roofAllocation/ContextRoofAllocationSetting.jsx @@ -28,6 +28,7 @@ export default function ContextRoofAllocationSetting(props) { handleChangeRaft, handleChangeLayout, handleSaveContext, + currentRoofList, } = useRoofAllocationSetting(id) const { findCommonCode } = useCommonCode() @@ -39,7 +40,7 @@ export default function ContextRoofAllocationSetting(props) { return ( -
+

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

- {roofList.map((roof, index) => { + {currentRoofList.map((roof, index) => { return (
@@ -88,78 +93,74 @@ export default function ContextRoofAllocationSetting(props) {
r.id === roof.id)} + value={roof} + showKey={'roofMatlNm'} + sourceKey={'roofMatlCd'} + targetKey={'roofMatlCd'} onChange={(e) => handleChangeRoofMaterial(e, index)} />
- {index === 0 && 基本屋根材} + {index === 0 && {getMessage('modal.roof.alloc.default.roof.material')}} {index !== 0 && }
-
- {roof.widAuth && ( -
- W -
- + {(roof.widAuth || roof.lenAuth) && ( +
+ {roof.widAuth && ( +
+ W +
+ +
- {/*
- -
*/} -
- )} - {roof.lenAuth && ( -
- L -
- + )} + {roof.lenAuth && ( +
+ L +
+ +
- {/*
- -
*/} -
- )} - {roof.raftAuth && ( -
- {getMessage('modal.placement.initial.setting.rafter')} -
- {raftCodes.length > 0 && ( - ({ name: raft.clCodeNm, value: raft.clCode }))} - onChange={(e) => handleChangeRaft(e, index)} - value={raftCodes.find((r) => r.value === roof.raft)} - /> - )} - {/* */} + )} +
+ )} + {(roof.raftAuth || roof.roofPchAuth) && ( +
+ {roof.raftAuth && ( +
+
+ {getMessage('modal.placement.initial.setting.rafter')} + {raftCodes.length > 0 && ( +
+ +
+ )} +
-
- )} - {roof.roofPchAuth && ( -
- {getMessage('hajebichi')} -
- + )} + {roof.roofPchAuth && ( +
+
+ {getMessage('hajebichi')} +
+ +
+
- {/*
- -
*/} -
- )} -
+ )} +
+ )}
- {roofList.map((roof, index) => { + {currentRoofList.map((roof, index) => { return (
diff --git a/src/hooks/roofcover/useRoofAllocationSetting.js b/src/hooks/roofcover/useRoofAllocationSetting.js index a2c7b483..c48a8d7a 100644 --- a/src/hooks/roofcover/useRoofAllocationSetting.js +++ b/src/hooks/roofcover/useRoofAllocationSetting.js @@ -13,6 +13,7 @@ import useMenu from '@/hooks/common/useMenu' import { useCanvasMenu } from '@/hooks/common/useCanvasMenu' import { menuTypeState } from '@/store/menuAtom' import { useRoofFn } from '@/hooks/common/useRoofFn' +import { ROOF_MATERIAL_LAYOUT } from '@/components/floor-plan/modal/placementShape/PlacementShapeSetting' // 지붕면 할당 export function useRoofAllocationSetting(id) { @@ -32,7 +33,7 @@ export function useRoofAllocationSetting(id) { const [currentRoofMaterial, setCurrentRoofMaterial] = useState(roofMaterials[0]) // 팝업 내 기준 지붕재 const [roofList, setRoofList] = useRecoilState(addedRoofsState) // 배치면 초기설정에서 선택한 지붕재 배열 const [editingLines, setEditingLines] = useState([]) - const isFirstRef = useRef(0) + const [currentRoofList, setCurrentRoofList] = useState(roofList) const { setSurfaceShapePattern } = useRoofFn() @@ -76,20 +77,25 @@ export function useRoofAllocationSetting(id) { }, []) const onAddRoofMaterial = () => { - if (roofList.length >= 4) { + if (currentRoofList.length >= 4) { swalFire({ type: 'alert', icon: 'error', text: getMessage('지붕재는 4개까지 선택 가능합니다.') }) return } - setRoofList([...roofList, { ...currentRoofMaterial, selected: false, id: currentRoofMaterial.roofMatlCd, name: currentRoofMaterial.roofMatlNm }]) + setCurrentRoofList([ + ...currentRoofList, + { ...currentRoofMaterial, selected: false, id: currentRoofMaterial.roofMatlCd, name: currentRoofMaterial.roofMatlNm }, + ]) } const onDeleteRoofMaterial = (idx) => { - setRoofList([...roofList.filter((_, index) => index !== idx)]) + const isSelected = currentRoofList[idx].selected + const newRoofList = [...currentRoofList].filter((_, index) => index !== idx) + if (isSelected) { + newRoofList[0].selected = true + } + setCurrentRoofList(newRoofList) } - const { handleMenu } = useMenu() - const [currentMenu, setCurrentMenu] = useRecoilState(currentMenuState) - // 선택한 지붕재로 할당 const handleSave = () => { // 모두 actualSize 있으면 바로 적용 없으면 actualSize 설정 @@ -102,7 +108,7 @@ export function useRoofAllocationSetting(id) { // 지붕재 오른쪽 마우스 클릭 후 단일로 지붕재 변경 필요한 경우 const handleSaveContext = () => { - const selectedRoofMaterial = roofList.find((roof) => roof.selected) + const selectedRoofMaterial = currentRoofList.find((roof) => roof.selected) setSurfaceShapePattern(currentObject, roofDisplay.column, false, selectedRoofMaterial) closeAll() } @@ -169,11 +175,11 @@ export function useRoofAllocationSetting(id) { setBasicSetting((prev) => { return { ...prev, - selectedRoofMaterial: roofList.find((roof) => roof.selected), + selectedRoofMaterial: currentRoofList.find((roof) => roof.selected), } }) - setRoofList(roofList) + setRoofList(currentRoofList) const roofs = canvas.getObjects().filter((obj) => obj.name === 'roof') @@ -182,7 +188,12 @@ export function useRoofAllocationSetting(id) { roof.set({ isFixed: true, }) - setSurfaceShapePattern(roof, roofDisplay.column) + setSurfaceShapePattern( + roof, + roofDisplay.column, + false, + currentRoofList.find((roof) => roof.selected), + ) drawDirectionArrow(roof) }) @@ -216,54 +227,53 @@ export function useRoofAllocationSetting(id) { // 지붕재 변경 const handleChangeRoofMaterial = (value, index) => { - if (isFirstRef.current === 0) { - isFirstRef.current++ - return - } + const selectedIndex = roofMaterials.findIndex((roof) => roof.selected) const selectedRoofMaterial = roofMaterials.find((roof) => roof.roofMatlCd === value.id) - const newRoofList = roofList.map((roof, idx) => { + const newRoofList = currentRoofList.map((roof, idx) => { if (idx === index) { return { ...selectedRoofMaterial } } return roof }) - setRoofList(newRoofList) + newRoofList[selectedIndex].selected = true + + setCurrentRoofList(newRoofList) } // 기본 지붕재 radio값 변경 const handleDefaultRoofMaterial = (index) => { - const newRoofList = roofList.map((roof, idx) => { + const newRoofList = currentRoofList.map((roof, idx) => { return { ...roof, selected: idx === index } }) - setRoofList(newRoofList) + setCurrentRoofList(newRoofList) } // 서까래 변경 const handleChangeRaft = (e, index) => { const raftValue = e.value - const newRoofList = roofList.map((roof, idx) => { + const newRoofList = currentRoofList.map((roof, idx) => { if (idx === index) { return { ...roof, raft: raftValue } } return roof }) - setRoofList(newRoofList) + setCurrentRoofList(newRoofList) } const handleChangeLayout = (layoutValue, index) => { - const newRoofList = roofList.map((roof, idx) => { + const newRoofList = currentRoofList.map((roof, idx) => { if (idx === index) { return { ...roof, layout: layoutValue } } return roof }) - setRoofList(newRoofList) + setCurrentRoofList(newRoofList) } return { @@ -278,11 +288,11 @@ export function useRoofAllocationSetting(id) { setBasicSetting, currentRoofMaterial, setCurrentRoofMaterial, - roofList, handleDefaultRoofMaterial, handleChangeRoofMaterial, handleChangeRaft, handleChangeLayout, handleSaveContext, + currentRoofList, } } diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js index 2350b0f5..df5022a7 100644 --- a/src/store/settingAtom.js +++ b/src/store/settingAtom.js @@ -224,9 +224,9 @@ export const roofMaterialsAtom = atom({ export const selectedRoofMaterialSelector = selector({ key: 'selectedRoofMaterialSelector', get: ({ get }) => { - const basicSetting = get(basicSettingState) + const addedRoofs = get(addedRoofsState) - return { ...basicSetting.selectedRoofMaterial } + return addedRoofs.find((roof) => roof.selected) }, })