refactor: 캔버스 변경사항 확인 방법을 실시간 오브젝트 이벤트를 감지하도록 변경

src/components/floor-plan/CanvasFrame.jsx

@@ -4,6 +4,7 @@ import { useEffect, useRef } from 'react'
 
 import { useCanvas } from '@/hooks/useCanvas'
 import { useEvent } from '@/hooks/useEvent'
+import { usePlan } from '@/hooks/usePlan'
 import { useContextMenu } from '@/hooks/useContextMenu'
 import { useRecoilValue } from 'recoil'
 import { currentObjectState } from '@/store/canvasAtom'
@@ -19,6 +20,7 @@ export default function CanvasFrame({ plan }) {
       handleZoomClear,
     },
   })
+  const { checkCanvasObjectEvent, checkUnsavedCanvasPlan } = usePlan()
 
   const currentObject = useRecoilValue(currentObjectState)
 
@@ -36,7 +38,41 @@ export default function CanvasFrame({ plan }) {
   }
 
   useEffect(() => {
+    // const checkEventName = [
+    //   'object:modified',
+    //   'object:moving',
+    //   'object:scaling',
+    //   'object:rotating',
+    //   'object:skewing',
+    //   'object:resizing',
+    //   'object:selected',
+    //   'object:added',
+    //   'object:removed',
+    // ]
+    
+    canvas?.off('object:added')
+    canvas?.off('object:modified')
+    canvas?.off('object:removed')
+
     loadCanvas()
+
+    if (plan) {
+      canvas?.on('object:added', (e) => {
+        if (e?.target.name !== 'mouseLine') {
+          checkCanvasObjectEvent(e, plan.id)
+        }
+      })
+      canvas?.on('object:modified', (e) => {
+        if (e?.target.name !== 'mouseLine') {
+          checkCanvasObjectEvent(e, plan.id)
+        }
+      })
+      canvas?.on('object:removed', (e) => {
+        if (e?.target.name !== 'mouseLine') {
+          checkCanvasObjectEvent(e, plan.id)
+        }
+      })
+    }
   }, [plan, canvas])
 
   const onClickContextMenu = (index) => {}

src/components/floor-plan/CanvasLayout.jsx

@@ -17,7 +17,7 @@ export default function CanvasLayout(props) {
 
   const { getMessage } = useMessage()
   const { swalFire } = useSwal()
-  const { plans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
+  const { plans, modifiedPlans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
 
   useEffect(() => {
     loadCanvasPlanData(session.userId, objectNo)
@@ -33,7 +33,10 @@ export default function CanvasLayout(props) {
               className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`}
               onClick={() => handleCurrentPlan(session.userId, plan.id)}
             >
-              <span>{plan.name}</span>
+              <span>
+                {plan.name}
+                {modifiedPlans.some((modifiedPlan) => modifiedPlan === plan.id) && ' [ M ]'}
+              </span>
               <i
                 className="close"
                 onClick={(e) =>

src/hooks/usePlan.js

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useRecoilState } from 'recoil'
 import { v4 as uuidv4 } from 'uuid'
-import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState } from '@/store/canvasAtom'
+import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState, modifiedPlansState } from '@/store/canvasAtom'
 import { useAxios } from '@/hooks/useAxios'
 import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
@@ -13,6 +13,7 @@ export function usePlan() {
   const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
   const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState) // DB에 저장된 plan
   const [plans, setPlans] = useRecoilState(plansState) // 전체 plan (DB에 저장된 plan + 저장 안된 새로운 plan)
+  const [modifiedPlans, setModifiedPlans] = useRecoilState(modifiedPlansState) // 변경된 canvas plan
 
   const { swalFire } = useSwal()
   const { getMessage } = useMessage()
@@ -87,11 +88,20 @@ export function usePlan() {
   }
 
   /**
-   * 실시간 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단
+   * 캔버스에서 발생하는 실시간 오브젝트 이벤트를 감지하여 수정 여부를 판단
    */
-  const checkModifiedCanvasPlan = () => {
+  const checkCanvasObjectEvent = (e, planId) => {
+    if (!modifiedPlans.some((modifiedPlan) => modifiedPlan === planId) && checkModifiedCanvasPlan(planId)) {
+      setModifiedPlans([...modifiedPlans, planId])
+    }
+  }
+
+  /**
+   * 현재 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단
+   */
+  const checkModifiedCanvasPlan = (planId) => {
     const canvasStatus = currentCanvasData()
-    const initPlanData = initCanvasPlans.find((plan) => plan.id === currentCanvasPlan.id)
+    const initPlanData = initCanvasPlans.find((plan) => plan.id === planId)
 
     if (!initPlanData) {
       // 새로운 캔버스
@@ -110,6 +120,21 @@ export function usePlan() {
       .map((obj) => obj.id)
       .sort()
   }
+  /**
+   * 캔버스에 저장되지 않은 변경사항이 있는 경우 저장 여부를 확인 후 저장
+   */
+  const checkUnsavedCanvasPlan = async () => {
+    if (modifiedPlans.length > 0) {
+      swalFire({
+        text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.save'),
+        type: 'confirm',
+        confirmFn: async () => {
+          await saveCanvas(userId)
+        },
+      })
+      setModifiedPlans([])
+    }
+  }
 
   /**
    * DB에 저장된 데이터를 canvas에서 사용할 수 있도록 포맷화
@@ -139,7 +164,6 @@ export function usePlan() {
    * objectNo에 해당하는 canvas 목록을 조회
    */
   const getCanvasByObjectNo = async (userId, objectNo) => {
-    // console.log(`[GET] objectNo: ${objectNo}  /  userId: ${userId}`)
     return get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) =>
       res.map((item) => ({
         id: item.id,
@@ -163,7 +187,6 @@ export function usePlan() {
     }
     await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
       .then((res) => {
-        swalFire({ text: getMessage('plan.message.save') })
         setInitCanvasPlans((initCanvasPlans) => [...initCanvasPlans, { id: res.data, canvasStatus: canvasStatus }])
         setPlans((plans) =>
           plans.map((plan) =>
@@ -177,6 +200,8 @@ export function usePlan() {
               : plan,
           ),
         )
+        setModifiedPlans((modifiedPlans) => modifiedPlans.filter((planId) => planId !== currentCanvasPlan.id))
+        swalFire({ text: getMessage('plan.message.save') })
       })
       .catch((error) => {
         swalFire({ text: error.message, icon: 'error' })
@@ -193,11 +218,12 @@ export function usePlan() {
     }
     await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
       .then((res) => {
-        swalFire({ text: getMessage('plan.message.save') })
         setInitCanvasPlans((initCanvasPlans) =>
           initCanvasPlans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)),
         )
         setPlans((plans) => plans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)))
+        setModifiedPlans((modifiedPlans) => modifiedPlans.filter((planId) => planId !== currentCanvasPlan.id))
+        swalFire({ text: getMessage('plan.message.save') })
       })
       .catch((error) => {
         swalFire({ text: error.message, icon: 'error' })
@@ -222,23 +248,23 @@ export function usePlan() {
    * plan 이동
    * 현재 plan의 작업상태를 확인, 저장 후 이동
    */
-  const handleCurrentPlan = (userId, newCurrentId) => {
+  const handleCurrentPlan = async (userId, newCurrentId) => {
     if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) {
-      if (currentCanvasPlan?.id && checkModifiedCanvasPlan()) {
+      if (currentCanvasPlan?.id && modifiedPlans.some((modifiedPlan) => modifiedPlan === currentCanvasPlan.id)) {
-        swalFire({
+        // swalFire({
-          text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.save'),
+        //   text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.save'),
-          type: 'confirm',
+        //   type: 'confirm',
-          confirmFn: async () => {
+        //   confirmFn: async () => {
-            await saveCanvas(userId)
+        //     await saveCanvas(userId)
-            updateCurrentPlan(newCurrentId)
+        //     updateCurrentPlan(newCurrentId)
-          },
+        //   },
-          denyFn: () => {
+        //   denyFn: () => {
-            updateCurrentPlan(newCurrentId)
+        //     updateCurrentPlan(newCurrentId)
-          },
+        //   },
-        })
+        // })
-      } else {
+        await saveCanvas(userId)
-        updateCurrentPlan(newCurrentId)
       }
+      updateCurrentPlan(newCurrentId)
     }
   }
   const updateCurrentPlan = (newCurrentId) => {
@@ -293,15 +319,17 @@ export function usePlan() {
     if (initCanvasPlans.some((plan) => plan.id === id)) {
       delCanvasById(id)
         .then((res) => {
-          swalFire({ text: getMessage('plan.message.delete') })
           setInitCanvasPlans((initCanvasPlans) => initCanvasPlans.filter((plan) => plan.id !== id))
           setPlans((plans) => plans.filter((plan) => plan.id !== id))
+          setModifiedPlans((modifiedPlans) => modifiedPlans.filter((planId) => planId !== currentCanvasPlan.id))
+          swalFire({ text: getMessage('plan.message.delete') })
         })
         .catch((error) => {
           swalFire({ text: error.message, icon: 'error' })
         })
     } else {
       setPlans((plans) => plans.filter((plan) => plan.id !== id))
+      setModifiedPlans((modifiedPlans) => modifiedPlans.filter((planId) => planId !== currentCanvasPlan.id))
       swalFire({ text: getMessage('plan.message.delete') })
     }
 
@@ -335,6 +363,9 @@ export function usePlan() {
   return {
     canvas,
     plans,
+    modifiedPlans,
+    checkCanvasObjectEvent,
+    checkUnsavedCanvasPlan,
     saveCanvas,
     handleCurrentPlan,
     handleAddPlan,

src/store/canvasAtom.js

@@ -270,6 +270,12 @@ export const plansState = atom({
   default: [],
 })
 
+// 변경된 canvas plan 목록
+export const modifiedPlansState = atom({
+  key: 'modifiedPlansState',
+  default: [],
+})
+
 export const tempGridModeState = atom({
   key: 'tempGridModeState',
   default: false,