diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx index 6722fea8..eb8e7bea 100644 --- a/src/components/floor-plan/CanvasFrame.jsx +++ b/src/components/floor-plan/CanvasFrame.jsx @@ -24,15 +24,15 @@ export default function CanvasFrame() { const currentMenu = useRecoilValue(currentMenuState) const { floorPlanState } = useContext(FloorPlanContext) const { contextMenu, handleClick } = useContextMenu() - const { selectedPlan } = usePlan() + const { currentCanvasPlan } = usePlan() const totalDisplay = useRecoilValue(totalDisplaySelector) // 집계표 표시 여부 const { setIsGlobalLoading } = useContext(QcastContext) const loadCanvas = () => { if (canvas) { canvas?.clear() // 캔버스를 초기화합니다. - if (selectedPlan?.canvasStatus && floorPlanState.objectNo === selectedPlan.objectNo) { - canvas?.loadFromJSON(JSON.parse(selectedPlan.canvasStatus), function () { + if (currentCanvasPlan?.canvasStatus && floorPlanState.objectNo === currentCanvasPlan.objectNo) { + canvas?.loadFromJSON(JSON.parse(currentCanvasPlan.canvasStatus), function () { canvasLoadInit() //config된 상태로 캔버스 객체를 그린다 canvas?.renderAll() // 캔버스를 다시 그립니다. }) @@ -43,7 +43,7 @@ export default function CanvasFrame() { useEffect(() => { loadCanvas() - }, [selectedPlan, canvas]) + }, [currentCanvasPlan, canvas]) useEffect(() => { setIsGlobalLoading(false) diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js index 36d619c8..6b468405 100644 --- a/src/hooks/usePlan.js +++ b/src/hooks/usePlan.js @@ -128,7 +128,7 @@ export function usePlan(params = {}) { /** * objectNo에 해당하는 canvas 목록을 조회 */ - const getCanvasByObjectNo = async (userId, objectNo) => { + const getCanvasByObjectNo = async (userId, objectNo, planNo) => { return await get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) => res.map((item) => ({ id: item.id, @@ -136,7 +136,7 @@ export function usePlan(params = {}) { planNo: item.planNo, userId: item.userId, canvasStatus: dbToCanvasFormat(item.canvasStatus), - isCurrent: false, + isCurrent: planNo === item.planNo, bgImageName: item.bgImageName, mapPositionAddress: item.mapPositionAddress, })), @@ -174,14 +174,15 @@ export function usePlan(params = {}) { } await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData }) .then((res) => { + const newPlan = { id: res.data, objectNo: objectNo, planNo: planNo, userId: userId, canvasStatus: canvasStatus, isCurrent: true } + setCurrentCanvasPlan(newPlan) if (isInitPlan) { // 초기 플랜 생성인 경우 플랜 목록 초기화 - setPlans([{ id: res.data, objectNo: objectNo, planNo: planNo, userId: userId, canvasStatus: canvasStatus }]) + setPlans([newPlan]) } else { - setPlans((plans) => [...plans, { id: res.data, objectNo: objectNo, planNo: planNo, userId: userId, canvasStatus: canvasStatus }]) + setPlans((plans) => [...plans.map((plan) => ({ ...plan, isCurrent: false })), newPlan]) + swalFire({ text: getMessage('plan.message.save') }) } - updateCurrentPlan(res.data) - swalFire({ text: getMessage('plan.message.save') }) }) .catch((error) => { swalFire({ text: error.message, icon: 'error' }) @@ -255,14 +256,16 @@ export function usePlan(params = {}) { } setEstimateContextState(res.data) // 클릭한 플랜 탭으로 이동 - updateCurrentPlan(newCurrentId) + setCurrentCanvasPlan(plans.find((plan) => plan.id === newCurrentId)) + setPlans((plans) => plans.map((plan) => ({ ...plan, isCurrent: plan.id === newCurrentId }))) } else { swalFire({ text: getMessage('estimate.menu.move.valid1') }) } } else { // 발전시뮬레이션 if (estimateDetail.tempFlg === '0') { - updateCurrentPlan(newCurrentId) + setCurrentCanvasPlan(plans.find((plan) => plan.id === newCurrentId)) + setPlans((plans) => plans.map((plan) => ({ ...plan, isCurrent: plan.id === newCurrentId }))) } else { swalFire({ text: getMessage('simulator.menu.move.valid1') }) } @@ -278,26 +281,18 @@ export function usePlan(params = {}) { }) } else { if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) { - saveCanvas() + await saveCanvas() } - updateCurrentPlan(newCurrentId) + setCurrentCanvasPlan(plans.find((plan) => plan.id === newCurrentId)) + setPlans((plans) => plans.map((plan) => ({ ...plan, isCurrent: plan.id === newCurrentId }))) } } - const updateCurrentPlan = (newCurrentId) => { - setPlans((plans) => - plans.map((plan) => { - return { ...plan, isCurrent: plan.id === newCurrentId } - }), - ) - } - useEffect(() => { - setCurrentCanvasPlan(plans.find((plan) => plan.isCurrent) || null) - setSelectedPlan(plans.find((plan) => plan.isCurrent)) + setSelectedPlan(currentCanvasPlan) handleCurrentPlanUrl() // setBgImage() - }, [plans]) + }, [currentCanvasPlan]) const handleCurrentPlanUrl = () => { const currentPlan = plans.find((plan) => plan.isCurrent) @@ -368,7 +363,8 @@ export function usePlan(params = {}) { if (!lastPlan) { setCurrentCanvasPlan(null) } else if (targetPlan.id !== lastPlan.id) { - updateCurrentPlan(lastPlan.id) + setCurrentCanvasPlan(lastPlan) + setPlans((plans) => plans.map((plan) => ({ ...plan, isCurrent: plan.id === lastPlan.id }))) } } @@ -377,10 +373,10 @@ export function usePlan(params = {}) { */ const loadCanvasPlanData = async (userId, objectNo, planNo) => { console.log('🚀 ~ loadCanvasPlanData ~ userId, objectNo, planNo:', userId, objectNo, planNo) - await getCanvasByObjectNo(userId, objectNo).then((res) => { + await getCanvasByObjectNo(userId, objectNo, planNo).then((res) => { if (res.length > 0) { + setCurrentCanvasPlan(res.find((plan) => plan.planNo === planNo)) setPlans(res) - updateCurrentPlan(res.find((plan) => plan.planNo === planNo).id) } else { postCanvasStatus(userId, objectNo, '', true) } @@ -397,6 +393,7 @@ export function usePlan(params = {}) { return { canvas, plans, + currentCanvasPlan, selectedPlan, saveCanvas, handleCurrentPlan,