refactor: canvas plan 변경사항 확인하는 함수 수정, canvas와 db간 저장포맷 수정

src/hooks/usePlan.js

@@ -54,6 +54,7 @@ export function usePlan() {
       'y2',
       'attributes',
       'stickeyPoint',
+      'text',
     ])
 
     const str = JSON.stringify(objs)
@@ -76,32 +77,49 @@ export function usePlan() {
    */
   const checkModifiedCanvasPlan = () => {
     removeMouseLines()
-    const canvasStr = addCanvas()
-    const canvasStatus = dbToCanvasFormat(canvasToDbFormat(canvasStr))
+    const canvasStatus = addCanvas()
     const initPlanData = initCanvasPlans.find((plan) => plan.id === currentCanvasPlan.id)
-    if (JSON.parse(canvasStr).objects.length === 0 && initPlanData === undefined) {
-      // 저장 안 된 빈 캔버스
-      return false
-    } else if (initPlanData && canvasStatus === initPlanData.canvasStatus) {
-      // 저장 되어있고 변경사항 없는 캔버스
-      return false
+
+    if (!initPlanData) {
+      // 새로운 캔버스
+      return JSON.parse(canvasStatus).objects.length > 0
     } else {
-      return true
+      // 저장된 캔버스
+      if (canvasStatus === initPlanData.canvasStatus) {
+        return false
+      } else {
+        // 각각 object들의 id 목록을 추출하여 비교
+        const canvasObjsIds = getObjectIds(JSON.parse(canvasStatus).objects)
+        const dbObjsIds = getObjectIds(JSON.parse(initPlanData.canvasStatus).objects)
+
+        return canvasObjsIds.length !== dbObjsIds.length || !canvasObjsIds.every((id, index) => id === dbObjsIds[index])
+      }
     }
   }
+  const getObjectIds = (objects) => {
+    return objects
+      .filter((obj) => obj.hasOwnProperty('id'))
+      .map((obj) => obj.id)
+      .sort()
+  }
 
   /**
    * DB에 저장된 데이터를 canvas에서 사용할 수 있도록 포맷화
    */
   const dbToCanvasFormat = (cs) => {
-    return JSON.stringify(cs.replace(/##/g, '"').replace(/\\/g, '').slice(1, -1))
+    // return JSON.stringify(cs.replace(/##/g, '"')) //.replace(/\\/g, ''))//.slice(1, -1))
+    // JSON.stringify()를 사용하면 "가 \"로 바뀐다. 따라서, JSON.stringify를 제거
+    // canvasToDbFormat()에서 \\의 상황을 없앴으므로 replace(/\\/g, '')를 제거
+    return cs.replace(/##/g, '"')
   }
 
   /**
    * canvas의 데이터를 DB에 저장할 수 있도록 포맷화
    */
   const canvasToDbFormat = (cs) => {
-    return JSON.stringify(cs).replace(/"/g, '##')
+    // return JSON.stringify(cs).replace(/"/g, '##')
+    // addCanvas()에서 JSON.stringify()를 거쳐서 나오는데, 또 감싸버려서 \가 \\로 된다. 따라서, JSON.stringify를 제거
+    return cs.replace(/"/g, '##')
   }
 
   /**
@@ -130,9 +148,7 @@ export function usePlan() {
           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)),
-          )
+          setPlans((plans) => plans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)))
         })
         .catch((error) => {
           swalFire({ text: error.message, icon: 'error' })