refactor: canvas status 조회 로직 함수로 분리, canvas data 포맷 함수 추가

src/components/floor-plan/CanvasLayout.jsx

@@ -3,18 +3,19 @@
 import { useEffect, useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
 import CanvasFrame from './CanvasFrame'
-import { useAxios } from '@/hooks/useAxios'
+import { usePlan } from '@/hooks/usePlan'
 import { globalLocaleStore } from '@/store/localeAtom'
 import { currentCanvasPlanState, initCanvasPlansState } from '@/store/canvasAtom'
 
 export default function CanvasLayout() {
   const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
   const [addCanvasPlans, setAddCanvasPlans] = useState([])
-  const [idxNum, setIdxNum] = useState(0)
+  const [planNum, setPlanNum] = useState(0)
   const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
   const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
-  const { get } = useAxios(globalLocaleState)
+
+  const { getObjectCanvasList } = usePlan()
 
   const handleCurrentPlan = (newCurrentId) => {
     if (!currentCanvasPlan?.id || currentCanvasPlan.id !== newCurrentId) {
@@ -46,7 +47,7 @@ export default function CanvasLayout() {
     const combinedPlans = [...filterInitPlans, ...filterAddPlans]
     if (combinedPlans.length === 0) {
       // 모든 데이터가 삭제된 경우
-      setIdxNum(0)
+      setPlanNum(0)
     } else {
       const lastPlanId = combinedPlans.at(-1).id
       if (id !== lastPlanId) {
@@ -56,29 +57,18 @@ export default function CanvasLayout() {
   }
 
   const addNewPlan = () => {
-    setAddCanvasPlans([...addCanvasPlans, { id: idxNum, name: `Plan ${idxNum + 1}`, objectNo: `${objectNo}` }])
+    setAddCanvasPlans([...addCanvasPlans, { id: planNum, name: `Plan ${planNum + 1}`, objectNo: `${objectNo}` }])
-    handleCurrentPlan(idxNum)
+    handleCurrentPlan(planNum)
-    setIdxNum(idxNum + 1)
+    setPlanNum(planNum + 1)
   }
 
   useEffect(() => {
-    get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}` }).then((res) => {
+    getObjectCanvasList(objectNo).then((res) => {
-      // console.log('canvas 목록 ', res)
+      console.log('canvas 목록 ', res)
-      const arrangeData = res.map((item) => {
+      if (res.length > 0) {
-        const test = item.canvasStatus.replace(/##/g, '"').replace(/\\/g, '')
+        setInitCanvasPlans(res)
-        const test2 = test.substring(1, test.length - 1)
+        handleCurrentPlan(res.at(-1).id) // last 데이터에 포커싱
-        return {
+        setPlanNum(res.length)
-          id: item.id,
-          name: item.objectNo + '-' + item.id, // tab button에 표출될 이름
-          userId: item.userId,
-          canvasStatus: JSON.stringify(test2),
-          isCurrent: false,
-        }
-      })
-      if (arrangeData.length > 0) {
-        setInitCanvasPlans(arrangeData)
-        handleCurrentPlan(arrangeData.at(-1).id) // last 데이터에 포커싱
-        setIdxNum(arrangeData.length)
       } else {
         addNewPlan()
       }

src/hooks/usePlan.js

@@ -1,4 +1,3 @@
-import { useState } from 'react'
 import { useRecoilState } from 'recoil'
 import { canvasState, currentCanvasPlanState, initCanvasPlansState } from '@/store/canvasAtom'
 import { useAxios } from '@/hooks/useAxios'
@@ -10,7 +9,7 @@ export function usePlan() {
   const [currentCanvasPlan, setcurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
   const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
   const { getMessage } = useMessage()
-  const { post, promisePost, put, promisePut } = useAxios()
+  const { get, promisePost, promisePut } = useAxios()
 
   /**
    * 마우스 포인터의 가이드라인을 제거합니다.
@@ -65,6 +64,20 @@ export function usePlan() {
     // }, 1000)
   }
 
+  /**
+   * DB에 저장된 데이터를 canvas에서 사용할 수 있도록 포맷화
+   */
+  const dbToCanvasFormat = (cs) => {
+    return JSON.stringify(cs.replace(/##/g, '"').replace(/\\/g, '').slice(1, -1))
+  }
+
+  /**
+   * canvas의 데이터를 DB에 저장할 수 있도록 포맷화
+   */
+  const canvasToDbFormat = (cs) => {
+    return JSON.stringify(cs).replace(/"/g, '##')
+  }
+
   /**
    * 페이지 내 캔버스를 저장하는 함수
    *
@@ -81,13 +94,16 @@ export function usePlan() {
       // canvas 수정
       const planData = {
         id: currentCanvasPlan.id,
-        canvasStatus: JSON.stringify(canvasStatus).replace(/"/g, '##'),
+        canvasStatus: canvasToDbFormat(canvasStatus),
       }
 
       await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
         .then((res) => {
           toastUp({ message: getMessage('res.message'), type: 'success' }) // 성공 시 메세지 없음
           console.log('[PUT] canvas-statuses res :::::::: %o', res)
+          setInitCanvasPlans((initCanvasPlans) =>
+            initCanvasPlans.map((plan) => (plan.id === currentCanvasPlan.id ? { ...plan, canvasStatus: canvasStatus } : plan)),
+          )
         })
         .catch((error) => {
           toastUp({ message: getMessage(error.message), type: 'error' })
@@ -99,7 +115,7 @@ export function usePlan() {
         userId: 'NEW016610', // userId,
         imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요
         objectNo: currentCanvasPlan.objectNo,
-        canvasStatus: JSON.stringify(canvasStatus).replace(/"/g, '##'),
+        canvasStatus: canvasToDbFormat(canvasStatus),
       }
 
       await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
@@ -114,10 +130,26 @@ export function usePlan() {
     }
   }
 
+  /**
+   * objectNo에 해당하는 canvas 목록을 조회하는 함수
+   */
+  const getObjectCanvasList = (objectNo) => {
+    return get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}` }).then((res) =>
+      res.map((item) => ({
+        id: item.id,
+        name: item.objectNo + '-' + item.id, // tab button에 표출될 이름 (임시)
+        userId: item.userId,
+        canvasStatus: dbToCanvasFormat(item.canvasStatus),
+        isCurrent: false,
+      })),
+    )
+  }
+
   return {
     canvas,
     removeMouseLines,
     saveCanvas,
     addCanvas,
+    getObjectCanvasList,
   }
 }