From be3580c7b97a8c27f3f996129356cdff423ba9c5 Mon Sep 17 00:00:00 2001 From: Daseul Kim Date: Wed, 30 Oct 2024 18:15:15 +0900 Subject: [PATCH] =?UTF-8?q?feat:=20canvas=20plan=EC=9D=84=20=EC=A0=80?= =?UTF-8?q?=EC=9E=A5=ED=95=98=EC=A7=80=20=EC=95=8A=EA=B3=A0=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EB=A5=BC=20=EB=B2=97=EC=96=B4=EB=82=AC?= =?UTF-8?q?=EC=9D=84=20=EA=B2=BD=EC=9A=B0=20=ED=99=95=EC=9D=B8=ED=95=98?= =?UTF-8?q?=EB=8A=94=20=EB=A1=9C=EC=A7=81=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/QcastProvider.js | 15 ++++++++- src/components/floor-plan/CanvasFrame.jsx | 8 ++++- src/components/floor-plan/CanvasLayout.jsx | 2 +- src/hooks/usePlan.js | 37 +++++++++++++++------- 4 files changed, 48 insertions(+), 14 deletions(-) diff --git a/src/app/QcastProvider.js b/src/app/QcastProvider.js index e03ad186..b88dd63c 100644 --- a/src/app/QcastProvider.js +++ b/src/app/QcastProvider.js @@ -1,15 +1,28 @@ 'use client' -// import { useEffect } from 'react' +import { useEffect, useState } from 'react' import { ErrorBoundary } from 'next/dist/client/components/error-boundary' import { useCommonCode } from '@/hooks/common/useCommonCode' +import { usePlan } from '@/hooks/usePlan' import ServerError from './error' import '@/styles/common.scss' export const QcastProvider = ({ children }) => { + const [planSave, setPlanSave] = useState(false) + const { currentCanvasPlan, modifiedPlans, checkUnsavedCanvasPlan } = usePlan() const { commonCode, findCommonCode } = useCommonCode() + useEffect(() => { + const targetElement = document.getElementById('canvas') + if (!targetElement && currentCanvasPlan?.id && planSave) { + setPlanSave((prev) => !prev) + checkUnsavedCanvasPlan(currentCanvasPlan.userId) + } else if (targetElement && currentCanvasPlan?.id) { + setPlanSave(true) + } + }, [modifiedPlans]) + // useEffect(() => { // console.log('commonCode', commonCode) // console.log(findCommonCode(113600)) diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx index a75040b7..c259f50c 100644 --- a/src/components/floor-plan/CanvasFrame.jsx +++ b/src/components/floor-plan/CanvasFrame.jsx @@ -41,10 +41,16 @@ export default function CanvasFrame() { useEffect(() => { if (modifiedPlanFlag && selectedPlan?.id) { - // checkCanvasObjectEvent(selectedPlan.id) + checkCanvasObjectEvent(selectedPlan.id) } }, [modifiedPlanFlag]) + useEffect(() => { + return () => { + resetModifiedPlans() + } + }, []) + useEffect(() => { loadCanvas() resetModifiedPlans() diff --git a/src/components/floor-plan/CanvasLayout.jsx b/src/components/floor-plan/CanvasLayout.jsx index 1604a28f..af405dd2 100644 --- a/src/components/floor-plan/CanvasLayout.jsx +++ b/src/components/floor-plan/CanvasLayout.jsx @@ -14,7 +14,7 @@ export default function CanvasLayout({ children }) { // const { menuNumber } = props const { menuNumber } = useCanvasMenu() const { session } = useContext(SessionContext) - const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요 + const [objectNo, setObjectNo] = useState('test123241010001') // 이후 삭제 필요 const globalLocaleState = useRecoilValue(globalLocaleStore) const { getMessage } = useMessage() diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js index 015d1046..8c126582 100644 --- a/src/hooks/usePlan.js +++ b/src/hooks/usePlan.js @@ -10,6 +10,7 @@ import { SAVE_KEY } from '@/common/common' export function usePlan() { const [planNum, setPlanNum] = useState(0) const [selectedPlan, setSelectedPlan] = useState(null) + const [currentCanvasStatus, setCurrentCanvasStatus] = useState(null) const [canvas, setCanvas] = useRecoilState(canvasState) const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState) @@ -88,11 +89,17 @@ export function usePlan() { * 캔버스에서 발생하는 실시간 오브젝트 이벤트를 감지하여 수정 여부를 확인 후 관리 */ const checkCanvasObjectEvent = (planId) => { + setCurrentCanvasStatus(currentCanvasData()) if (!modifiedPlans.some((modifiedPlan) => modifiedPlan === planId) && checkModifiedCanvasPlan(planId)) { setModifiedPlans((prev) => [...prev, planId]) setModifiedPlanFlag(false) } } + useEffect(() => { + if (currentCanvasStatus) { + setCurrentCanvasPlan((prev) => ({ ...prev, canvasStatus: currentCanvasStatus })) + } + }, [currentCanvasStatus]) /** * 현재 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단 */ @@ -121,17 +128,21 @@ export function usePlan() { setModifiedPlans([]) setModifiedPlanFlag(false) } - const checkUnsavedCanvasPlan = (str) => { - if (modifiedPlans.length > 0) { - swalFire({ - text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.save'), - type: 'confirm', - confirmFn: async () => { - await saveCanvas(userId) - }, - }) - setModifiedPlans([]) - } + + /** + * 캔버스에 저장되지 않은 변경사항이 있을때 저장 여부를 확인 후 저장 + */ + const checkUnsavedCanvasPlan = async (userId) => { + swalFire({ + text: `저장 안된 ${currentCanvasPlan.name} PLAN을 저장하시겠습니까? `, + type: 'confirm', + confirmFn: async () => { + initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id) + ? await putCanvasStatus(currentCanvasPlan.canvasStatus) + : await postCanvasStatus(userId, currentCanvasPlan.canvasStatus) + }, + }) + resetModifiedPlans() } /** @@ -361,8 +372,12 @@ export function usePlan() { canvas, plans, selectedPlan, + currentCanvasPlan, modifiedPlans, + modifiedPlanFlag, + setModifiedPlanFlag, checkCanvasObjectEvent, + checkUnsavedCanvasPlan, resetModifiedPlans, saveCanvas, handleCurrentPlan,