refactor: planNo 적용

- canvas_status 추가/삭제 시 plan추가/삭제 api 호출 추가
- planNo 추가, ordering 제거 및 planNo로 변경

src/components/estimate/Estimate.jsx

@@ -135,7 +135,7 @@ export default function Estimate({}) {
 
   useEffect(() => {
     console.log('🚀 ~ Estimate ~ selectedPlan:', selectedPlan)
-    if (selectedPlan) initEstimate(selectedPlan.ordering)
+    if (selectedPlan) initEstimate(selectedPlan.planNo)
   }, [selectedPlan])
 
   useEffect(() => {

src/components/floor-plan/CanvasLayout.jsx

@@ -30,22 +30,22 @@ export default function CanvasLayout({ children }) {
     <div className="canvas-layout">
       <div className={`canvas-page-list ${menuNumber === 2 || menuNumber === 3 || menuNumber === 4 ? 'active' : ''}`}>
         <div className="canvas-plane-wrap">
-          {plans.map((plan) => (
+          {plans.map((plan, index) => (
             <button
               key={`plan-${plan.id}`}
               className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`}
               onClick={() => handleCurrentPlan(plan.id)}
             >
-              <span>{`Plan ${plan.ordering}`}</span>
+              <span>{`Plan ${plan.planNo}`}</span>
-              {plan.ordering !== 1 && (
+              {index !== 0 && (
                 <i
                   className="close"
                   onClick={(e) =>
                     swalFire({
-                      text: `Plan ${plan.ordering} ` + getMessage('plan.message.confirm.delete'),
+                      text: `Plan ${plan.planNo} ` + getMessage('plan.message.confirm.delete'),
                       type: 'confirm',
                       confirmFn: () => {
-                        handleDeletePlan(e, plan.id)
+                        handleDeletePlan(e, plan)
                       },
                     })
                   }

src/components/floor-plan/CanvasMenu.jsx

@@ -171,14 +171,14 @@ export default function CanvasMenu(props) {
         break
       case 5:
         // let pid = urlParams.get('pid')
-        promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan.ordering}/detail` }).then((res) => {
+        promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan.planNo}/detail` }).then((res) => {
           if (res.status === 200) {
             const estimateDetail = res.data
             if (estimateDetail.tempFlg === '0' && estimateDetail.estimateDate !== null) {
               setMenuNumber(menu.index)
               setCurrentMenu(menu.title)
               setFloorPlanObjectNo({ floorPlanObjectNo: objectNo })
-              router.push(`/floor-plan/estimate/${menu.index}?pid=${selectedPlan.ordering}&objectNo=${objectNo}`)
+              router.push(`/floor-plan/estimate/${menu.index}?pid=${selectedPlan.planNo}&objectNo=${objectNo}`)
             } else {
               swalFire({ text: getMessage('estimate.menu.move.valid1') })
             }
@@ -186,13 +186,13 @@ export default function CanvasMenu(props) {
         })
         break
       case 6:
-        promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan.ordering}/detail` }).then((res) => {
+        promiseGet({ url: `/api/estimate/${objectNo}/${selectedPlan.planNo}/detail` }).then((res) => {
           if (res.status === 200) {
             const estimateDetail = res.data
             if (estimateDetail.tempFlg === '0') {
               setMenuNumber(menu.index)
               setCurrentMenu(menu.title)
-              router.push(`/floor-plan/simulator/${menu.index}?pid=${selectedPlan.ordering}&objectNo=${objectNo}`)
+              router.push(`/floor-plan/simulator/${menu.index}?pid=${selectedPlan.planNo}&objectNo=${objectNo}`)
             } else {
               swalFire({ text: getMessage('simulator.menu.move.valid1') })
             }

src/components/simulator/Simulator.jsx

@@ -111,7 +111,7 @@ export default function Simulator() {
     setHatsudenryouPeakcutAllSnow([])
 
     if (objectNo && pid && selectedPlan) {
-      fetchObjectDetail(objectNo, selectedPlan.ordering)
+      fetchObjectDetail(objectNo, selectedPlan.planNo)
       fetchSimulatorNotice()
       setPwrGnrSimType('D')
       setPwrRecoil({ ...pwrRecoil, type: 'D' })

src/hooks/usePlan.js

@@ -4,7 +4,6 @@ import { useContext, useEffect, useState } from 'react'
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 
 import { useRecoilState } from 'recoil'
-import { v4 as uuidv4 } from 'uuid'
 
 import { canvasState, currentCanvasPlanState, plansState } from '@/store/canvasAtom'
 import { useAxios } from '@/hooks/useAxios'
@@ -18,7 +17,6 @@ import { useEstimateController } from '@/hooks/floorPlan/estimate/useEstimateCon
 export function usePlan(params = {}) {
   const { floorPlanState } = useContext(FloorPlanContext)
 
-  const [planNum, setPlanNum] = useState(0)
   const [selectedPlan, setSelectedPlan] = useState(null)
 
   const [canvas, setCanvas] = useRecoilState(canvasState)
@@ -131,35 +129,52 @@ export function usePlan(params = {}) {
    */
   const getCanvasByObjectNo = async (userId, objectNo) => {
     return await get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) =>
-      res.map((item, index) => ({
+      res.map((item) => ({
         id: item.id,
+        objectNo: item.objectNo,
+        planNo: item.planNo,
         userId: item.userId,
         canvasStatus: dbToCanvasFormat(item.canvasStatus),
         isCurrent: false,
         bgImageName: item.bgImageName,
         mapPositionAddress: item.mapPositionAddress,
-        ordering: index + 1,
       })),
     )
   }
 
+  /**
+   * 물건번호(object) plan 추가 (canvas 생성 전 planNo 할당)
+   */
+  const postObjectPlan = async (userId, objectNo) => {
+    return await promisePost({ url: '/api/object/add-plan', data: { userId: userId, objectNo: objectNo } })
+      .then((res) => {
+        return res.data.planNo
+      })
+      .catch((error) => {
+        swalFire({ text: error.response.data.message, icon: 'error' })
+        return null
+      })
+  }
+
   /**
    * 신규 canvas 데이터를 저장
    */
   const postCanvasStatus = async (userId, objectNo, canvasStatus) => {
+    const planNo = await postObjectPlan(userId, objectNo)
+    if (!planNo) return
+
     const planData = {
       userId: userId,
-      imageName: 'image_name', // api 필수항목이여서 임시로 넣음, 이후 삭제 필요
       objectNo: objectNo,
+      planNo: planNo,
       bgImageName: currentCanvasPlan?.bgImageName ?? null,
       mapPositionAddress: currentCanvasPlan?.mapPositionAddress ?? null,
       canvasStatus: canvasToDbFormat(canvasStatus),
     }
     await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
       .then((res) => {
-        setPlans((plans) => [...plans, { id: res.data, objectNo: objectNo, userId: userId, canvasStatus: canvasStatus, ordering: planNum + 1 }])
+        setPlans((plans) => [...plans, { id: res.data, objectNo: objectNo, planNo: planNo, userId: userId, canvasStatus: canvasStatus }])
         updateCurrentPlan(res.data)
-        setPlanNum(planNum + 1)
       })
       .catch((error) => {
         swalFire({ text: error.message, icon: 'error' })
@@ -204,12 +219,12 @@ export function usePlan(params = {}) {
    * 현재 plan의 작업상태를 저장 후 이동
    */
   const handleCurrentPlan = async (newCurrentId) => {
-    const orderingNo = plans?.find((obj) => obj.id === newCurrentId).ordering
+    const planNo = plans?.find((obj) => obj.id === newCurrentId).planNo
     const objectNo = floorPlanState.objectNo
     //견적서 or 발전시뮬
 
     if (pathname !== '/floor-plan') {
-      await promiseGet({ url: `/api/estimate/${objectNo}/${orderingNo}/detail` })
+      await promiseGet({ url: `/api/estimate/${objectNo}/${planNo}/detail` })
         .then((res) => {
           if (res.status === 200) {
             const estimateDetail = res.data
@@ -278,7 +293,7 @@ export function usePlan(params = {}) {
 
   const handleCurrentPlanUrl = () => {
     const currentPlan = plans.find((plan) => plan.isCurrent)
-    if (currentPlan) router.push(`${pathname}?pid=${currentPlan?.ordering}&objectNo=${floorPlanState?.objectNo}`)
+    if (currentPlan) router.push(`${pathname}?pid=${currentPlan?.planNo}&objectNo=${floorPlanState?.objectNo}`)
   }
 
   const setBgImage = () => {
@@ -295,7 +310,7 @@ export function usePlan(params = {}) {
     }
     JSON.parse(currentCanvasData()).objects.length > 0
       ? swalFire({
-          text: `Plan ${currentCanvasPlan.ordering} ` + getMessage('plan.message.confirm.copy'),
+          text: `Plan ${currentCanvasPlan.planNo} ` + getMessage('plan.message.confirm.copy'),
           type: 'confirm',
           confirmFn: async () => {
             await postCanvasStatus(userId, objectNo, currentCanvasData())
@@ -308,31 +323,31 @@ export function usePlan(params = {}) {
   }
 
   /**
-   * DB에 추가하지 않고 화면 상에서 plan을 추가하는 함수
+   * 물건번호(object) plan 삭제 (canvas 삭제 전 planNo 삭제)
    */
-  const addPlan = (userId, objectNo, canvasStatus) => {
+  const deleteObjectPlan = async (userId, objectNo, planNo) => {
-    const id = uuidv4()
+    return await promiseDel({ url: `/api/object/plan/${objectNo}/${planNo}?userId=${userId}` })
-    const newPlan = {
+      .then((res) => {
-      id: id,
+        return true
-      objectNo: objectNo,
+      })
-      userId: userId,
+      .catch((error) => {
-      canvasStatus: canvasStatus,
+        swalFire({ text: error.response.data.message, icon: 'error' })
-      ordering: planNum + 1,
+        return false
-    }
+      })
-    setPlans([...plans, newPlan])
-    handleCurrentPlan(id)
-    setPlanNum(planNum + 1)
   }
 
   /**
    * plan 삭제
    */
-  const handleDeletePlan = async (e, id) => {
+  const handleDeletePlan = async (e, targetPlan) => {
     e.stopPropagation() // 이벤트 버블링 방지
 
-    await delCanvasById(id)
+    const isSuccess = await deleteObjectPlan(targetPlan.id, targetPlan.objectNo, targetPlan.planNo)
+    if (!isSuccess) return
+
+    await delCanvasById(targetPlan.id)
       .then((res) => {
-        setPlans((plans) => plans.filter((plan) => plan.id !== id))
+        setPlans((plans) => plans.filter((plan) => plan.id !== targetPlan.id))
         removeImage(currentCanvasPlan.id)
         swalFire({ text: getMessage('plan.message.delete') })
       })
@@ -341,11 +356,10 @@ export function usePlan(params = {}) {
       })
 
     // 삭제 후 last 데이터에 포커싱
-    const lastPlan = plans.filter((plan) => plan.id !== id).at(-1)
+    const lastPlan = plans.filter((plan) => plan.id !== targetPlan.id).at(-1)
     if (!lastPlan) {
-      setPlanNum(0)
       setCurrentCanvasPlan(null)
-    } else if (id !== lastPlan.id) {
+    } else if (targetPlan.id !== lastPlan.id) {
       updateCurrentPlan(lastPlan.id)
     }
   }
@@ -353,13 +367,11 @@ export function usePlan(params = {}) {
   /**
    * plan 조회
    */
-  const loadCanvasPlanData = async (userId, objectNo, pid) => {
+  const loadCanvasPlanData = async (userId, objectNo, planNo) => {
     await getCanvasByObjectNo(userId, objectNo).then((res) => {
-      // console.log('canvas 목록 ', res)
       if (res.length > 0) {
         setPlans(res)
-        updateCurrentPlan(res[pid - 1].id)
+        updateCurrentPlan(res.find((plan) => plan.planNo === planNo).id)
-        setPlanNum(res.length)
       } else {
         postCanvasStatus(userId, objectNo, '')
       }
@@ -370,7 +382,7 @@ export function usePlan(params = {}) {
    * 현재 plan 이동 -> 새로운 링크로 이동
    */
   const handlePlanMove = () => {
-    router.push(`${pathname}?objectNo=${floorPlanState.objectNo}&pid=${currentCanvasPlan?.ordering}`)
+    router.push(`${pathname}?objectNo=${floorPlanState.objectNo}&pid=${currentCanvasPlan?.planNo}`)
   }
 
   return {