refactor: canvas plan 데이터 조작 기능 관련된 로직들을 usePlan으로 이동 및 코드 정리

src/components/floor-plan/CanvasLayout.jsx

@@ -1,122 +1,26 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilValue } from 'recoil'
 import CanvasFrame from './CanvasFrame'
 import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
 import { usePlan } from '@/hooks/usePlan'
 import { globalLocaleStore } from '@/store/localeAtom'
-import { currentCanvasPlanState, initCanvasPlansState, plansState } from '@/store/canvasAtom'
 import { sessionStore } from '@/store/commonAtom'
 
 export default function CanvasLayout() {
   const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
-  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)
+  const globalLocaleState = useRecoilValue(globalLocaleStore)
 
   const { getMessage } = useMessage()
   const { swalFire } = useSwal()
-  const { getCanvasByObjectNo, delCanvasById, checkModifiedCanvasPlan, saveCanvas, currentCanvasData } = usePlan()
+  const { plans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
-
-  const handleCurrentPlan = (newCurrentId) => {
-    // console.log('currentPlan newCurrentId: ', newCurrentId)
-    if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) {
-      if (currentCanvasPlan?.id && checkModifiedCanvasPlan()) {
-        swalFire({
-          html: getMessage('common.message.confirm.save') + `</br>${currentCanvasPlan.name}`,
-          type: 'confirm',
-          confirmFn: async () => {
-            await saveCanvas(sessionState.userId)
-            updateCurrentPlan(newCurrentId)
-          },
-          denyFn: () => {
-            updateCurrentPlan(newCurrentId)
-          },
-        })
-      } else {
-        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])
-
-  const handleDeletePlan = (e, id) => {
-    e.stopPropagation() // 이벤트 버블링 방지
-
-    if (initCanvasPlans.some((plan) => plan.id === id)) {
-      delCanvasById(id)
-        .then((res) => {
-          swalFire({ text: getMessage('common.message.delete') })
-          // console.log('[DELETE] canvas-statuses res :::::::: %o', res)
-          setInitCanvasPlans((initCanvasPlans) => initCanvasPlans.filter((plan) => plan.id !== id))
-          setPlans((plans) => plans.filter((plan) => plan.id !== id))
-        })
-        .catch((error) => {
-          swalFire({ text: error.message, icon: 'error' })
-          // console.error('[DELETE] canvas-statuses res error :::::::: %o', error)
-        })
-    } else {
-      setPlans((plans) => plans.filter((plan) => plan.id !== id))
-      swalFire({ text: getMessage('common.message.delete') })
-    }
-
-    // 삭제 후 last 데이터에 포커싱
-    const lastPlan = plans.filter((plan) => plan.id !== id).at(-1)
-    if (!lastPlan) {
-      setPlanNum(0)
-      setCurrentCanvasPlan(null)
-    } else if (id !== lastPlan.id) {
-      handleCurrentPlan(lastPlan.id)
-    }
-  }
-
-  const addEmptyPlan = () => {
-    setPlans([...plans, { id: planNum, name: `Plan ${planNum + 1}`, objectNo: `${objectNo}` }])
-    handleCurrentPlan(planNum)
-    setPlanNum(planNum + 1)
-  }
-
-  const addCopyPlan = () => {
-    const copyPlan = {
-      id: planNum,
-      name: `Plan ${planNum + 1}`,
-      objectNo: `${objectNo}`,
-      userId: sessionState.userId,
-      canvasStatus: currentCanvasData(),
-    }
-    setPlans((plans) => [...plans, copyPlan])
-    handleCurrentPlan(planNum)
-    setPlanNum(planNum + 1)
-  }
 
   useEffect(() => {
-    if (!currentCanvasPlan) {
+    console.log('loadCanvasPlanData 실행, sessionState.userId >>> ', sessionState.userId)
-      getCanvasByObjectNo(sessionState.userId, objectNo).then((res) => {
+    loadCanvasPlanData(sessionState.userId, objectNo)
-        // console.log('canvas 목록 ', res)
-        if (res.length > 0) {
-          setInitCanvasPlans(res)
-          setPlans(res)
-          handleCurrentPlan(res.at(-1).id) // last 데이터에 포커싱
-          setPlanNum(res.length)
-        } else {
-          addEmptyPlan()
-        }
-      })
-    }
   }, [])
   
   return (
@@ -127,7 +31,7 @@ export default function CanvasLayout() {
             <button
               key={`plan-${plan.id}`}
               className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`}
-              onClick={() => handleCurrentPlan(plan.id)}
+              onClick={() => handleCurrentPlan(sessionState.userId, plan.id)}
             >
               <span>{plan.name}</span>
               <i
@@ -146,23 +50,7 @@ export default function CanvasLayout() {
           ))}
         </div>
         {plans.length < 10 && (
-          <button
+          <button className="plane-add" onClick={() => handleAddPlan(sessionState.userId, objectNo)}>
-            className="plane-add"
-            onClick={() =>
-              JSON.parse(currentCanvasData()).objects.length > 0
-                ? swalFire({
-                    html: `${currentCanvasPlan.name} 을 복제하시겠습니까?`,
-                    type: 'confirm',
-                    confirmFn: () => {
-                      addCopyPlan()
-                    },
-                    denyFn: () => {
-                      addEmptyPlan()
-                    },
-                  })
-                : addEmptyPlan()
-            }
-          >
             <span></span>
           </button>
         )}

src/components/floor-plan/CanvasMenu.jsx

@@ -127,8 +127,8 @@ export default function CanvasMenu(props) {
     swalFire({
       html: getMessage('common.message.confirm.save') + `</br>${currentCanvasPlan.name}`,
       type: 'confirm',
-      confirmFn: () => {
+      confirmFn: async () => {
-        saveCanvas(sessionState.userId)
+        await saveCanvas(sessionState.userId)
       },
     })
   }

src/hooks/usePlan.js

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react'
 import { useRecoilState } from 'recoil'
 import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState } from '@/store/canvasAtom'
 import { useAxios } from '@/hooks/useAxios'
@@ -5,10 +6,13 @@ import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
 
 export function usePlan() {
+  const [planNum, setPlanNum] = useState(0)
+
   const [canvas, setCanvas] = useRecoilState(canvasState)
   const [currentCanvasPlan, setCurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
-  const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
+  const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState) // DB에 저장된 plan
-  const [plans, setPlans] = useRecoilState(plansState)
+  const [plans, setPlans] = useRecoilState(plansState) // 전체 plan (DB에 저장된 plan + 저장 안된 새로운 plan)
+
   const { swalFire } = useSwal()
   const { getMessage } = useMessage()
   const { get, promisePost, promisePut, promiseDel } = useAxios()
@@ -72,6 +76,9 @@ export function usePlan() {
     // }, 1000)
   }
 
+  /**
+   * 현재 캔버스에 그려진 데이터를 추출
+   */
   const currentCanvasData = () => {
     removeMouseLines()
     return addCanvas()
@@ -81,8 +88,7 @@ export function usePlan() {
    * 실시간 캔버스 상태와 DB에 저장된 캔버스 상태를 비교하여 수정 여부를 판단
    */
   const checkModifiedCanvasPlan = () => {
-    removeMouseLines()
+    const canvasStatus = currentCanvasData()
-    const canvasStatus = addCanvas()
     const initPlanData = initCanvasPlans.find((plan) => plan.id === currentCanvasPlan.id)
 
     if (!initPlanData) {
@@ -90,15 +96,10 @@ export function usePlan() {
       return JSON.parse(canvasStatus).objects.length > 0
     } else {
       // 저장된 캔버스
-      if (canvasStatus === initPlanData.canvasStatus) {
+      // 각각 object들의 id 목록을 추출하여 비교
-        return false
+      const canvasObjsIds = getObjectIds(JSON.parse(canvasStatus).objects)
-      } else {
+      const dbObjsIds = getObjectIds(JSON.parse(initPlanData.canvasStatus).objects)
-        // 각각 object들의 id 목록을 추출하여 비교
+      return canvasObjsIds.length !== dbObjsIds.length || !canvasObjsIds.every((id, index) => id === dbObjsIds[index])
-        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) => {
@@ -112,9 +113,6 @@ export function usePlan() {
    * DB에 저장된 데이터를 canvas에서 사용할 수 있도록 포맷화
    */
   const dbToCanvasFormat = (cs) => {
-    // return JSON.stringify(cs.replace(/##/g, '"')) //.replace(/\\/g, ''))//.slice(1, -1))
-    // JSON.stringify()를 사용하면 "가 \"로 바뀐다. 따라서, JSON.stringify를 제거
-    // canvasToDbFormat()에서 \\의 상황을 없앴으므로 replace(/\\/g, '')를 제거
     return cs.replace(/##/g, '"')
   }
 
@@ -122,8 +120,6 @@ export function usePlan() {
    * canvas의 데이터를 DB에 저장할 수 있도록 포맷화
    */
   const canvasToDbFormat = (cs) => {
-    // return JSON.stringify(cs).replace(/"/g, '##')
-    // addCanvas()에서 JSON.stringify()를 거쳐서 나오는데, 또 감싸버려서 \가 \\로 된다. 따라서, JSON.stringify를 제거
     return cs.replace(/"/g, '##')
   }
 
@@ -136,78 +132,17 @@ export function usePlan() {
    *      param(body) : id, canvasStatus
    */
   const saveCanvas = async (userId) => {
-    removeMouseLines()
+    const canvasStatus = currentCanvasData()
-    const canvasStatus = addCanvas()
+    initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)
-
+      ? await putCanvasStatus(canvasStatus)
-    if (initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)) {
+      : await postCanvasStatus(userId, canvasStatus)
-      // canvas 수정
-      const planData = {
-        id: currentCanvasPlan.id,
-        canvasStatus: canvasToDbFormat(canvasStatus),
-      }
-
-      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' })
-          // console.error('[PUT] canvas-statuses error :::::::: %o', error)
-        })
-    } else {
-      // canvas 신규 등록
-      const planData = {
-        userId: userId,
-        imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요
-        objectNo: currentCanvasPlan.objectNo,
-        canvasStatus: canvasToDbFormat(canvasStatus),
-      }
-
-      return await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
-        .then((res) => {
-          swalFire({ text: getMessage('common.message.save') })
-          // 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' })
-          // console.error('[POST] canvas-statuses res error :::::::: %o', error)
-        })
-    }
   }
 
   /**
-   * objectNo에 해당하는 canvas 목록을 조회하는 함수
+   * 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,
@@ -220,27 +155,192 @@ export function usePlan() {
   }
 
   /**
-   * id에 해당하는 canvas 데이터를 삭제하는 함수
+   * canvas 데이터를 추가
+   */
+  const postCanvasStatus = async (userId, canvasStatus) => {
+    const planData = {
+      userId: userId,
+      imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요
+      objectNo: currentCanvasPlan.objectNo,
+      canvasStatus: canvasToDbFormat(canvasStatus),
+    }
+    await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
+      .then((res) => {
+        swalFire({ text: getMessage('common.message.save') })
+        setInitCanvasPlans((initCanvasPlans) => [...initCanvasPlans, { id: res.data, canvasStatus: canvasStatus }])
+        setPlans((plans) =>
+          plans.map((plan) =>
+            plan.id === currentCanvasPlan.id
+              ? {
+                  ...plan,
+                  id: res.data,
+                  name: currentCanvasPlan.objectNo + '-' + res.data,
+                  canvasStatus: canvasStatus,
+                }
+              : plan,
+          ),
+        )
+      })
+      .catch((error) => {
+        swalFire({ text: error.message, icon: 'error' })
+      })
+  }
+
+  /**
+   * id에 해당하는 canvas 데이터를 수정
+   */
+  const putCanvasStatus = async (canvasStatus) => {
+    const planData = {
+      id: currentCanvasPlan.id,
+      canvasStatus: canvasToDbFormat(canvasStatus),
+    }
+    await promisePut({ url: '/api/canvas-management/canvas-statuses', data: planData })
+      .then((res) => {
+        swalFire({ text: getMessage('common.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)))
+      })
+      .catch((error) => {
+        swalFire({ text: error.message, icon: 'error' })
+      })
+  }
+
+  /**
+   * id에 해당하는 canvas 데이터를 삭제
    */
   const delCanvasById = (id) => {
     return promiseDel({ url: `/api/canvas-management/canvas-statuses/by-id/${id}` })
   }
 
   /**
-   * objectNo에 해당하는 canvas 데이터들을 삭제하는 함수
+   * objectNo에 해당하는 canvas 데이터들을 삭제
    */
   const delCanvasByObjectNo = (objectNo) => {
     return promiseDel({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}` })
   }
 
+  /**
+   * plan 이동
+   * 현재 plan의 작업상태를 확인, 저장 후 이동
+   */
+  const handleCurrentPlan = (userId, newCurrentId) => {
+    if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) {
+      if (currentCanvasPlan?.id && checkModifiedCanvasPlan()) {
+        swalFire({
+          html: getMessage('common.message.confirm.save') + `</br>${currentCanvasPlan.name}`,
+          type: 'confirm',
+          confirmFn: async () => {
+            await saveCanvas(userId)
+            updateCurrentPlan(newCurrentId)
+          },
+          denyFn: () => {
+            updateCurrentPlan(newCurrentId)
+          },
+        })
+      } else {
+        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])
+
+  /**
+   * 새로운 plan 생성
+   * 현재 plan의 데이터가 있을 경우 복제 여부를 확인
+   */
+  const handleAddPlan = (userId, objectNo) => {
+    JSON.parse(currentCanvasData()).objects.length > 0
+      ? swalFire({
+          html: `${currentCanvasPlan.name} PLAN을 복사하시겠습니까?`,
+          type: 'confirm',
+          confirmFn: () => {
+            addPlan(userId, objectNo, currentCanvasData())
+          },
+          denyFn: () => {
+            addPlan(userId, objectNo)
+          },
+        })
+      : addPlan(userId, objectNo)
+  }
+  const addPlan = (userId, objectNo, canvasStatus = '') => {
+    const newPlan = {
+      id: planNum,
+      name: `Plan ${planNum + 1}`,
+      objectNo: objectNo,
+      userId: userId,
+      canvasStatus: canvasStatus,
+    }
+    setPlans([...plans, newPlan])
+    handleCurrentPlan(userId, planNum)
+    setPlanNum(planNum + 1)
+  }
+
+  /**
+   * plan 삭제
+   */
+  const handleDeletePlan = (e, id) => {
+    e.stopPropagation() // 이벤트 버블링 방지
+
+    if (initCanvasPlans.some((plan) => plan.id === id)) {
+      delCanvasById(id)
+        .then((res) => {
+          swalFire({ text: getMessage('common.message.delete') })
+          setInitCanvasPlans((initCanvasPlans) => initCanvasPlans.filter((plan) => plan.id !== id))
+          setPlans((plans) => plans.filter((plan) => plan.id !== id))
+        })
+        .catch((error) => {
+          swalFire({ text: error.message, icon: 'error' })
+        })
+    } else {
+      setPlans((plans) => plans.filter((plan) => plan.id !== id))
+      swalFire({ text: getMessage('common.message.delete') })
+    }
+
+    // 삭제 후 last 데이터에 포커싱
+    const lastPlan = plans.filter((plan) => plan.id !== id).at(-1)
+    if (!lastPlan) {
+      setPlanNum(0)
+      setCurrentCanvasPlan(null)
+    } else if (id !== lastPlan.id) {
+      updateCurrentPlan(lastPlan.id)
+    }
+  }
+
+  /**
+   * plan 조회
+   */
+  const loadCanvasPlanData = (userId, objectNo) => {
+    getCanvasByObjectNo(userId, objectNo).then((res) => {
+      // console.log('canvas 목록 ', res)
+      if (res.length > 0) {
+        setInitCanvasPlans(res)
+        setPlans(res)
+        updateCurrentPlan(res.at(-1).id) // last 데이터에 포커싱
+        setPlanNum(res.length)
+      } else {
+        addPlan(userId, objectNo)
+      }
+    })
+  }
+
   return {
     canvas,
-    removeMouseLines,
+    plans,
-    currentCanvasData,
     saveCanvas,
-    addCanvas,
+    handleCurrentPlan,
-    checkModifiedCanvasPlan,
+    handleAddPlan,
-    getCanvasByObjectNo,
+    handleDeletePlan,
-    delCanvasById,
+    loadCanvasPlanData,
   }
 }