refactor: canvas plan 저장 시 데이터 동기화 로직 수정

src/components/floor-plan/CanvasLayout.jsx

@@ -7,15 +7,15 @@ import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
 import { usePlan } from '@/hooks/usePlan'
 import { globalLocaleStore } from '@/store/localeAtom'
-import { currentCanvasPlanState, initCanvasPlansState } from '@/store/canvasAtom'
+import { currentCanvasPlanState, initCanvasPlansState, plansState } from '@/store/canvasAtom'
 import { sessionStore } from '@/store/commonAtom'
 
 export default function CanvasLayout() {
   const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
-  const [plans, setPlans] = useState([])
   const [planNum, setPlanNum] = useState(0)
   const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
   const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
+  const [plans, setPlans] = useRecoilState(plansState)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const sessionState = useRecoilValue(sessionStore)
 
@@ -32,40 +32,25 @@ export default function CanvasLayout() {
           html: getMessage('common.message.confirm.save') + `</br>${currentCanvasPlan.name}`,
           type: 'confirm',
           confirmFn: async () => {
-            saveCanvas(sessionState.userId)
-            /**
-             * TODO: 신규 canvas plan 저장 시 id, name 등 데이터 동기화 필요 (40~51Line)
-             */
-            initCanvasPlans.map((initPlan) => {
-              if ('isNew' in initPlan) {
-                // console.log('================ isNew initPlan: ', initPlan)
-                setPlans((plans) =>
-                  plans.map((plan) => {
-                    initPlan.isNew === plan.id
-                      ? { ...plan, id: initPlan.id, name: initPlan.name, canvasStatus: initPlan.canvasStatus, isCurrent: plan.id === newCurrentId }
-                      : { ...plan, isCurrent: plan.id === newCurrentId }
-                  }),
-                )
-              }
-            })
+            await saveCanvas(sessionState.userId)
+            updateCurrentPlan(newCurrentId)
           },
           denyFn: () => {
-            setPlans((plans) =>
-              plans.map((plan) => {
-                return { ...plan, isCurrent: plan.id === newCurrentId }
-              }),
-            )
+            updateCurrentPlan(newCurrentId)
           },
         })
       } else {
-        setPlans((plans) =>
-          plans.map((plan) => {
-            return { ...plan, isCurrent: plan.id === newCurrentId }
-          }),
-        )
+        updateCurrentPlan(newCurrentId)
       }
     }
   }
+  const updateCurrentPlan = (newCurrentId) => {
+    setPlans((plans) =>
+      plans.map((plan) => {
+        return { ...plan, isCurrent: plan.id === newCurrentId }
+      }),
+    )
+  }
   useEffect(() => {
     setCurrentCanvasPlan(plans.find((plan) => plan.isCurrent) || null)
   }, [plans])
@@ -86,7 +71,7 @@ export default function CanvasLayout() {
           // console.error('[DELETE] canvas-statuses res error :::::::: %o', error)
         })
     } else {
-      setPlans(plans.filter((plan) => plan.id !== id))
+      setPlans((plans) => plans.filter((plan) => plan.id !== id))
       swalFire({ text: getMessage('common.message.delete') })
     }
 

src/hooks/usePlan.js

@@ -1,5 +1,5 @@
 import { useRecoilState } from 'recoil'
-import { canvasState, currentCanvasPlanState, initCanvasPlansState } from '@/store/canvasAtom'
+import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState } from '@/store/canvasAtom'
 import { useAxios } from '@/hooks/useAxios'
 import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
@@ -8,6 +8,7 @@ export function usePlan() {
   const [canvas, setCanvas] = useRecoilState(canvasState)
   const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
   const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
+  const [plans, setPlans] = useRecoilState(plansState)
   const { swalFire } = useSwal()
   const { getMessage } = useMessage()
   const { get, promisePost, promisePut, promiseDel } = useAxios()
@@ -77,11 +78,12 @@ export function usePlan() {
     removeMouseLines()
     const canvasStr = addCanvas()
     const canvasStatus = dbToCanvasFormat(canvasToDbFormat(canvasStr))
-    if (JSON.parse(canvasStr).objects.length === 0 && currentCanvasPlan.canvasStatus === undefined) {
-      // 빈 캔버스
+    const initPlanData = initCanvasPlans.find((plan) => plan.id === currentCanvasPlan.id)
+    if (JSON.parse(canvasStr).objects.length === 0 && initPlanData === undefined) {
+      // 저장 안 된 빈 캔버스
       return false
-    } else if (canvasStatus === currentCanvasPlan.canvasStatus) {
-      // 변경사항 없는 캔버스
+    } else if (initPlanData && canvasStatus === initPlanData.canvasStatus) {
+      // 저장 되어있고 변경사항 없는 캔버스
       return false
     } else {
       return true
@@ -121,13 +123,16 @@ export function usePlan() {
         canvasStatus: canvasToDbFormat(canvasStatus),
       }
 
-      await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
+      return await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
         .then((res) => {
           swalFire({ text: getMessage('common.message.save') })
           // console.log('[PUT] canvas-statuses res :::::::: %o', 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)),
+          )
         })
         .catch((error) => {
           swalFire({ text: error.message, icon: 'error' })
@@ -142,14 +147,34 @@ export function usePlan() {
         canvasStatus: canvasToDbFormat(canvasStatus),
       }
 
-      await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
+      return await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
         .then((res) => {
           swalFire({ text: getMessage('common.message.save') })
-          setInitCanvasPlans([
-            ...initCanvasPlans,
-            { id: res.data, name: currentCanvasPlan.objectNo + '-' + res.data, userId: userId, canvasStatus: canvasStatus, isNew: currentCanvasPlan.id },
-          ])
           // console.log('[POST] canvas-statuses response :::::::: %o', res)
+          setInitCanvasPlans((initCanvasPlans) => [
+            ...initCanvasPlans,
+            {
+              id: res.data,
+              name: currentCanvasPlan.objectNo + '-' + res.data,
+              userId: userId,
+              canvasStatus: canvasStatus,
+              isNew: currentCanvasPlan.id,
+            },
+          ])
+          setPlans((plans) =>
+            plans.map((plan) =>
+              plan.id === currentCanvasPlan.id
+                ? {
+                    ...plan,
+                    id: res.data,
+                    name: currentCanvasPlan.objectNo + '-' + res.data,
+                    userId: userId,
+                    canvasStatus: canvasStatus,
+                    isNew: currentCanvasPlan.id,
+                  }
+                : plan,
+            ),
+          )
         })
         .catch((error) => {
           swalFire({ text: error.message, icon: 'error' })

src/store/canvasAtom.js

@@ -264,6 +264,12 @@ export const currentCanvasPlanState = atom({
   default: {},
 })
 
+// 전체 canvas plan
+export const plansState = atom({
+  key: 'plan',
+  default: [],
+})
+
 export const tempGridModeState = atom({
   key: 'tempGridModeState',
   default: false,