feat: canvas plan 삭제 기능 추가

src/components/floor-plan/CanvasLayout.jsx

@@ -3,6 +3,8 @@
 import { useEffect, useState } from 'react'
 import { useRecoilState, 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 } from '@/store/canvasAtom'
@@ -17,7 +19,9 @@ export default function CanvasLayout() {
   const globalLocaleState = useRecoilValue(globalLocaleStore)
   const sessionState = useRecoilValue(sessionStore)
 
-  const { getCanvasByObjectNo } = usePlan()
+  const { getMessage } = useMessage()
+  const { swalFire } = useSwal()
+  const { getCanvasByObjectNo, delCanvasById } = usePlan()
 
   const handleCurrentPlan = (newCurrentId) => {
     if (!currentCanvasPlan?.id || currentCanvasPlan.id !== newCurrentId) {
@@ -40,21 +44,29 @@ export default function CanvasLayout() {
   const handleDeletePlan = (e, id) => {
     e.stopPropagation() // 이벤트 버블링 방지
 
-    // 삭제할 아이디와 다른 아이템만 남김
+    if (initCanvasPlans.some((plan) => plan.id === id)) {
-    const filterInitPlans = initCanvasPlans.filter((plan) => plan.id !== id)
+      delCanvasById(id)
-    setInitCanvasPlans(filterInitPlans)
+        .then((res) => {
-    const filterAddPlans = addCanvasPlans.filter((plan) => plan.id !== id)
+          swalFire({ text: getMessage('common.message.delete') })
-    setAddCanvasPlans(filterAddPlans)
+          console.log('[DELETE] canvas-statuses res :::::::: %o', res)
-
+          setInitCanvasPlans((initCanvasPlans) => initCanvasPlans.filter((plan) => plan.id !== id))
-    const combinedPlans = [...filterInitPlans, ...filterAddPlans]
+        })
-    if (combinedPlans.length === 0) {
+        .catch((error) => {
-      // 모든 데이터가 삭제된 경우
+          swalFire({ text: error.message, icon: 'error' })
-      setPlanNum(0)
+          console.error('[DELETE] canvas-statuses res error :::::::: %o', error)
+        })
     } else {
-      const lastPlanId = combinedPlans.at(-1).id
+      setAddCanvasPlans(addCanvasPlans.filter((plan) => plan.id !== id))
-      if (id !== lastPlanId) {
+      swalFire({ text: getMessage('common.message.delete') })
-        handleCurrentPlan(lastPlanId)
+    }
-      }
+
+    // 삭제 후 last 데이터에 포커싱
+    const lastPlan = [...initCanvasPlans, ...addCanvasPlans].filter((plan) => plan.id !== id).at(-1)
+    if (!lastPlan) {
+      setPlanNum(0)
+      setCurrentCanvasPlan(null)
+    } else if (id !== lastPlan.id) {
+      handleCurrentPlan(lastPlan.id)
     }
   }
 
@@ -84,7 +96,18 @@ export default function CanvasLayout() {
           {[...initCanvasPlans, ...addCanvasPlans].map((plan) => (
             <button key={plan.id} className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`} onClick={() => handleCurrentPlan(plan.id)}>
               <span>{plan.name}</span>
-              <i className="close" onClick={(e) => handleDeletePlan(e, plan.id)}></i>
+              <i
+                className="close"
+                onClick={(e) =>
+                  swalFire({
+                    html: getMessage('common.message.confirm.delete') + `</br>${plan.name}`,
+                    type: 'confirm',
+                    confirmFn: () => {
+                      handleDeletePlan(e, plan.id)
+                    },
+                  })
+                }
+              ></i>
             </button>
           ))}
         </div>

src/hooks/useAxios.js

@@ -79,5 +79,9 @@ export function useAxios(lang = '') {
       .catch(console.error)
   }
 
-  return { get, promiseGet, post, promisePost, put, promisePut, patch, del }
+  const promiseDel = async ({ url }) => {
+    return await getInstances(url).delete(url)
+  }
+
+  return { get, promiseGet, post, promisePost, put, promisePut, patch, del, promiseDel }
 }

src/hooks/usePlan.js

@@ -11,7 +11,7 @@ export function usePlan() {
   const [currentCanvasPlan, setcurrentCanvasPlan] = useRecoilState(currentCanvasPlanState)
   const [initCanvasPlans, setInitCanvasPlans] = useRecoilState(initCanvasPlansState)
   const { getMessage } = useMessage()
-  const { get, promisePost, promisePut } = useAxios()
+  const { get, promisePost, promisePut, promiseDel } = useAxios()
 
   /**
    * 마우스 포인터의 가이드라인을 제거합니다.
@@ -147,11 +147,26 @@ export function usePlan() {
     )
   }
 
+  /**
+   * id에 해당하는 canvas 데이터를 삭제하는 함수
+   */
+  const delCanvasById = (id) => {
+    return promiseDel({ url: `/api/canvas-management/canvas-statuses/by-id/${id}` })
+  }
+
+  /**
+   * objectNo에 해당하는 canvas 데이터들을 삭제하는 함수
+   */
+  const delCanvasByObjectNo = (objectNo) => {
+    return promiseDel({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}` })
+  }
+
   return {
     canvas,
     removeMouseLines,
     saveCanvas,
     addCanvas,
     getCanvasByObjectNo,
+    delCanvasById,
   }
 }