feat: canvas plan을 저장하지 않고 페이지를 벗어났을 경우 확인하는 로직 추가

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))

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()

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()

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,