From b5b907040963227e3c97701fc1768208536c8359 Mon Sep 17 00:00:00 2001
From: Daseul Kim <amekimm@gmail.com>
Date: Tue, 3 Dec 2024 16:26:32 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20plan=20=EC=83=9D=EC=84=B1=20?=
 =?UTF-8?q?=EC=8B=9C=20=EB=B9=88=EC=BA=94=EB=B2=84=EC=8A=A4=20=EB=B0=94?=
 =?UTF-8?q?=EB=A1=9C=20=EC=A0=80=EC=9E=A5=ED=95=98=EB=8F=84=EB=A1=9D=20?=
 =?UTF-8?q?=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

canvas plan 생성 시 빈 캔버스 데이터를 DB에 저장 후 표출되도록 로직 변경
initCanvasPlans 삭제
---
 src/app/QcastProvider.js                   |   2 +-
 src/components/floor-plan/CanvasLayout.jsx |  10 +-
 src/components/floor-plan/CanvasMenu.jsx   |  10 +-
 src/hooks/usePlan.js                       | 127 +++++++--------------
 src/locales/ja.json                        |   1 +
 src/locales/ko.json                        |   1 +
 src/store/canvasAtom.js                    |   6 -
 7 files changed, 52 insertions(+), 105 deletions(-)

diff --git a/src/app/QcastProvider.js b/src/app/QcastProvider.js
index 23ad5a75..16a62d63 100644
--- a/src/app/QcastProvider.js
+++ b/src/app/QcastProvider.js
@@ -34,7 +34,7 @@ export const QcastProvider = ({ children }) => {
     const targetElement = document.getElementById('canvas')
     if (!targetElement && currentCanvasPlan?.id && planSave) {
       setPlanSave((prev) => !prev)
-      checkUnsavedCanvasPlan(currentCanvasPlan.userId)
+      checkUnsavedCanvasPlan()
     } else if (targetElement && currentCanvasPlan?.id) {
       setPlanSave(true)
     }
diff --git a/src/components/floor-plan/CanvasLayout.jsx b/src/components/floor-plan/CanvasLayout.jsx
index fcaabb6f..9e48873e 100644
--- a/src/components/floor-plan/CanvasLayout.jsx
+++ b/src/components/floor-plan/CanvasLayout.jsx
@@ -20,7 +20,7 @@ export default function CanvasLayout({ children }) {
 
   const { getMessage } = useMessage()
   const { swalFire } = useSwal()
-  const { plans, initCanvasPlans, modifiedPlans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
+  const { plans, modifiedPlans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
 
   useEffect(() => {
     loadCanvasPlanData(session.userId, objectNo, pid)
@@ -34,10 +34,9 @@ export default function CanvasLayout({ children }) {
             <button
               key={`plan-${plan.id}`}
               className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`}
-              onClick={() => handleCurrentPlan(session.userId, plan.id)}
+              onClick={() => handleCurrentPlan(plan.id)}
             >
               <span>
-                {!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === plan.id) && 'New '}
                 {`Plan ${plan.ordering}`}
                 {modifiedPlans.some((modifiedPlan) => modifiedPlan === plan.id) && ' [ M ]'}
               </span>
@@ -45,10 +44,7 @@ export default function CanvasLayout({ children }) {
                 className="close"
                 onClick={(e) =>
                   swalFire({
-                    text:
-                      (!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === plan.id) ? 'New ' : '') +
-                      `Plan ${plan.ordering} ` +
-                      getMessage('plan.message.confirm.delete'),
+                    text: `Plan ${plan.ordering} ` + getMessage('plan.message.confirm.delete'),
                     type: 'confirm',
                     confirmFn: () => {
                       handleDeletePlan(e, plan.id)
diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx
index 3fcdfd44..ed9257a4 100644
--- a/src/components/floor-plan/CanvasMenu.jsx
+++ b/src/components/floor-plan/CanvasMenu.jsx
@@ -68,7 +68,7 @@ export default function CanvasMenu(props) {
   const [estimateCopyPopupOpen, setEstimateCopyPopupOpen] = useState(false)
 
   const { getMessage } = useMessage()
-  const { currentCanvasPlan, saveCanvas } = usePlan()
+  const { saveCanvas } = usePlan()
   const { swalFire } = useSwal()
   const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useEvent()
   // const { initEvent, addCanvasMouseEventListener, addDocumentEventListener } = useContext(EventContext)
@@ -118,13 +118,7 @@ export default function CanvasMenu(props) {
 
   // 저장버튼(btn08) 클릭 시 호출되는 함수
   const handleSaveCanvas = async () => {
-    // swalFire({
-    //   text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.save'),
-    //   type: 'confirm',
-    //   confirmFn: async () => {
-    await saveCanvas(sessionState.userId)
-    //   },
-    // })
+    await saveCanvas()
   }
 
   const [placementInitialId, setPlacementInitialId] = useState(uuidv4())
diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js
index 3f3ad1a0..7e76cac5 100644
--- a/src/hooks/usePlan.js
+++ b/src/hooks/usePlan.js
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react'
 import { useRecoilState } from 'recoil'
 import { v4 as uuidv4, validate as isValidUUID } from 'uuid'
-import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState, modifiedPlansState, modifiedPlanFlagState } from '@/store/canvasAtom'
+import { canvasState, currentCanvasPlanState, plansState, modifiedPlansState, modifiedPlanFlagState } from '@/store/canvasAtom'
 import { useAxios } from '@/hooks/useAxios'
 import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
@@ -15,8 +15,7 @@ export function usePlan() {
 
   const [canvas, setCanvas] = useRecoilState(canvasState)
   const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
-  const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState) // DB에 저장된 plan
-  const [plans, setPlans] = useRecoilState(plansState) // 전체 plan (DB에 저장된 plan + 저장 안된 새로운 plan)
+  const [plans, setPlans] = useRecoilState(plansState) // 전체 plan
   const [modifiedPlans, setModifiedPlans] = useRecoilState(modifiedPlansState) // 변경된 canvas plan
   const [modifiedPlanFlag, setModifiedPlanFlag] = useRecoilState(modifiedPlanFlagState) // 캔버스 실시간 오브젝트 이벤트 감지 flag
 
@@ -109,22 +108,22 @@ export function usePlan() {
       setCurrentCanvasPlan((prev) => ({ ...prev, canvasStatus: currentCanvasStatus }))
     }
   }, [currentCanvasStatus])
+
   /**
    * 현재 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단
    */
   const checkModifiedCanvasPlan = (planId) => {
-    const canvasStatus = currentCanvasData()
-    if (isValidUUID(planId)) {
-      // 새로운 캔버스
-      return JSON.parse(canvasStatus).objects.length > 0
-    } else {
-      // 저장된 캔버스
-      // 각각 object들의 uuid 목록을 추출하여 비교
-      const canvasObjsUuids = getObjectUuids(JSON.parse(canvasStatus).objects)
-      const initPlanData = initCanvasPlans.find((plan) => plan.id === planId)
-      const dbObjsUuids = getObjectUuids(JSON.parse(initPlanData.canvasStatus).objects)
-      return canvasObjsUuids.length !== dbObjsUuids.length || !canvasObjsUuids.every((uuid, index) => uuid === dbObjsUuids[index])
+    const planData = plans.find((plan) => plan.id === planId)
+    if (planData.canvasStatus === '') {
+      // 빈 상태로 저장된 캔버스
+      return true
     }
+
+    // 각각 object들의 uuid 목록을 추출하여 비교
+    const canvasStatus = currentCanvasData()
+    const canvasObjsUuids = getObjectUuids(JSON.parse(canvasStatus).objects)
+    const dbObjsUuids = getObjectUuids(JSON.parse(planData.canvasStatus).objects)
+    return canvasObjsUuids.length !== dbObjsUuids.length || !canvasObjsUuids.every((uuid, index) => uuid === dbObjsUuids[index])
   }
   const getObjectUuids = (objects) => {
     return objects
@@ -141,16 +140,12 @@ export function usePlan() {
   /**
    * 캔버스에 저장되지 않은 변경사항이 있을때 저장 여부를 확인 후 저장
    */
-  const checkUnsavedCanvasPlan = async (userId) => {
+  const checkUnsavedCanvasPlan = async () => {
     swalFire({
-      text:
-        (!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === currentCanvasPlan.id) ? 'New ' : '') +
-        `Plan ${currentCanvasPlan.ordering}의 변경 사항을 저장하시겠습니까?`,
+      text: `Plan ${currentCanvasPlan.ordering} ` + getMessage('plan.message.confirm.save.modified'),
       type: 'confirm',
       confirmFn: async () => {
-        initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)
-          ? await putCanvasStatus(currentCanvasPlan.canvasStatus)
-          : await postCanvasStatus(userId, currentCanvasPlan.canvasStatus)
+        await putCanvasStatus(currentCanvasPlan.canvasStatus)
       },
     })
     resetModifiedPlans()
@@ -173,11 +168,9 @@ export function usePlan() {
   /**
    * 페이지 내 캔버스를 저장
    */
-  const saveCanvas = async (userId) => {
+  const saveCanvas = async () => {
     const canvasStatus = currentCanvasData('save')
-    initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)
-      ? await putCanvasStatus(canvasStatus)
-      : await postCanvasStatus(userId, canvasStatus)
+    await putCanvasStatus(canvasStatus)
   }
 
   /**
@@ -200,29 +193,19 @@ export function usePlan() {
   /**
    * 신규 canvas 데이터를 저장
    */
-  const postCanvasStatus = async (userId, canvasStatus) => {
+  const postCanvasStatus = async (userId, objectNo, canvasStatus) => {
     const planData = {
       userId: userId,
       imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요
-      objectNo: currentCanvasPlan.objectNo,
+      objectNo: objectNo,
       mapPositionAddress: currentCanvasPlan.mapPositionAddress,
       canvasStatus: canvasToDbFormat(canvasStatus),
     }
     await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
       .then((res) => {
-        setInitCanvasPlans((initCanvasPlans) => [...initCanvasPlans, { id: res.data, canvasStatus: canvasStatus }])
-        setPlans((plans) =>
-          plans.map((plan) =>
-            plan.id === currentCanvasPlan.id
-              ? {
-                  ...plan,
-                  id: res.data,
-                  canvasStatus: canvasStatus,
-                }
-              : plan,
-          ),
-        )
-        setModifiedPlans((modifiedPlans) => modifiedPlans.filter((planId) => planId !== currentCanvasPlan.id))
+        setPlans([...plans, { id: res.data, objectNo: objectNo, userId: userId, canvasStatus: canvasStatus, ordering: planNum + 1 }])
+        handleCurrentPlan(res.data)
+        setPlanNum(planNum + 1)
       })
       .catch((error) => {
         swalFire({ text: error.message, icon: 'error' })
@@ -240,9 +223,6 @@ export function usePlan() {
     }
     await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
       .then((res) => {
-        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))
       })
@@ -269,21 +249,10 @@ export function usePlan() {
    * plan 이동
    * 현재 plan의 작업상태를 확인, 저장 후 이동
    */
-  const handleCurrentPlan = async (userId, newCurrentId) => {
+  const handleCurrentPlan = async (newCurrentId) => {
     if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) {
       if (currentCanvasPlan?.id && modifiedPlans.some((modifiedPlan) => modifiedPlan === currentCanvasPlan.id)) {
-        // swalFire({
-        //   text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.save'),
-        //   type: 'confirm',
-        //   confirmFn: async () => {
-        //     await saveCanvas(userId)
-        //     updateCurrentPlan(newCurrentId)
-        //   },
-        //   denyFn: () => {
-        //     updateCurrentPlan(newCurrentId)
-        //   },
-        // })
-        await saveCanvas(userId)
+        await saveCanvas()
       }
       updateCurrentPlan(newCurrentId)
     }
@@ -313,20 +282,21 @@ export function usePlan() {
   const handleAddPlan = (userId, objectNo) => {
     JSON.parse(currentCanvasData()).objects.length > 0
       ? swalFire({
-          text:
-            (!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === currentCanvasPlan.id) ? 'New ' : '') +
-            `Plan ${currentCanvasPlan.ordering} ` +
-            getMessage('plan.message.confirm.copy'),
+          text: `Plan ${currentCanvasPlan.ordering} ` + getMessage('plan.message.confirm.copy'),
           type: 'confirm',
           confirmFn: () => {
-            addPlan(userId, objectNo, currentCanvasData())
+            postCanvasStatus(userId, objectNo, currentCanvasData())
           },
           denyFn: () => {
-            addPlan(userId, objectNo, '')
+            postCanvasStatus(userId, objectNo, '')
           },
         })
-      : addPlan(userId, objectNo, '')
+      : postCanvasStatus(userId, objectNo, '')
   }
+
+  /**
+   * DB에 추가하지 않고 화면 상에서 plan을 추가하는 함수
+   */
   const addPlan = (userId, objectNo, canvasStatus) => {
     const id = uuidv4()
     const newPlan = {
@@ -337,7 +307,7 @@ export function usePlan() {
       ordering: planNum + 1,
     }
     setPlans([...plans, newPlan])
-    handleCurrentPlan(userId, id)
+    handleCurrentPlan(id)
     setPlanNum(planNum + 1)
   }
 
@@ -347,22 +317,15 @@ export function usePlan() {
   const handleDeletePlan = (e, id) => {
     e.stopPropagation() // 이벤트 버블링 방지
 
-    if (initCanvasPlans.some((plan) => plan.id === id)) {
-      delCanvasById(id)
-        .then((res) => {
-          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') })
-    }
+    delCanvasById(id)
+      .then((res) => {
+        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' })
+      })
 
     // 삭제 후 last 데이터에 포커싱
     const lastPlan = plans.filter((plan) => plan.id !== id).at(-1)
@@ -381,12 +344,11 @@ export function usePlan() {
     getCanvasByObjectNo(userId, objectNo).then((res) => {
       // console.log('canvas 목록 ', res)
       if (res.length > 0) {
-        setInitCanvasPlans(res)
         setPlans(res)
         updateCurrentPlan(res[pid - 1].id)
         setPlanNum(res.length)
       } else {
-        addPlan(userId, objectNo, '')
+        postCanvasStatus(userId, objectNo, '')
       }
     })
   }
@@ -394,7 +356,6 @@ export function usePlan() {
   return {
     canvas,
     plans,
-    initCanvasPlans,
     selectedPlan,
     currentCanvasPlan,
     modifiedPlans,
diff --git a/src/locales/ja.json b/src/locales/ja.json
index d41ca44a..7276c6c0 100644
--- a/src/locales/ja.json
+++ b/src/locales/ja.json
@@ -294,6 +294,7 @@
   "modal.actual.size.setting.plane.size.length": "廊下の寸法の長さ",
   "modal.actual.size.setting.actual.size.length": "実寸長",
   "plan.message.confirm.save": "PLAN을 저장하시겠습니까?",
+  "plan.message.confirm.save.modified": "PLAN의 변경사항을 저장하시겠습니까?",
   "plan.message.confirm.copy": "PLAN을 복사하시겠습니까?",
   "plan.message.confirm.delete": "PLAN을 삭제하시겠습니까?",
   "plan.message.save": "저장되었습니다.",
diff --git a/src/locales/ko.json b/src/locales/ko.json
index 7287c914..42bcd69b 100644
--- a/src/locales/ko.json
+++ b/src/locales/ko.json
@@ -299,6 +299,7 @@
   "modal.actual.size.setting.plane.size.length": "복도치수 길이",
   "modal.actual.size.setting.actual.size.length": "실제치수 길이",
   "plan.message.confirm.save": "PLAN을 저장하시겠습니까?",
+  "plan.message.confirm.save.modified": "PLAN의 변경사항을 저장하시겠습니까?",
   "plan.message.confirm.copy": "PLAN을 복사하시겠습니까?",
   "plan.message.confirm.delete": "PLAN을 삭제하시겠습니까?",
   "plan.message.save": "저장되었습니다.",
diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js
index 9be9f402..b0e21d41 100644
--- a/src/store/canvasAtom.js
+++ b/src/store/canvasAtom.js
@@ -260,12 +260,6 @@ export const dotLineIntervalSelector = selector({
   },
 })
 
-// canvas plan 초기 목록
-export const initCanvasPlansState = atom({
-  key: 'initCanvasPlans',
-  default: [],
-})
-
 // 현재 canvas plan
 export const currentCanvasPlanState = atom({
   key: 'currentCanvasPlan',