refactor: plan의 표출 name 변경

src/components/floor-plan/CanvasLayout.jsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { useContext, useEffect, useState } from 'react'
+import { useContext, useEffect } from 'react'
 import { useRecoilValue } from 'recoil'
 import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
 import { useMessage } from '@/hooks/useMessage'
@@ -20,7 +20,7 @@ export default function CanvasLayout({ children }) {
 
   const { getMessage } = useMessage()
   const { swalFire } = useSwal()
-  const { plans, modifiedPlans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
+  const { plans, initCanvasPlans, modifiedPlans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
 
   useEffect(() => {
     loadCanvasPlanData(session.userId, objectNo, pid)
@@ -37,14 +37,18 @@ export default function CanvasLayout({ children }) {
               onClick={() => handleCurrentPlan(session.userId, plan.id)}
             >
               <span>
-                {plan.name}
+                {!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === plan.id) && 'New '}
+                {`Plan ${plan.ordering}`}
                 {modifiedPlans.some((modifiedPlan) => modifiedPlan === plan.id) && ' [ M ]'}
               </span>
               <i
                 className="close"
                 onClick={(e) =>
                   swalFire({
-                    text: `${plan.name} ` + getMessage('plan.message.confirm.delete'),
+                    text:
+                      (!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === plan.id) ? 'New ' : '') +
+                      `Plan ${plan.ordering} ` +
+                      getMessage('plan.message.confirm.delete'),
                     type: 'confirm',
                     confirmFn: () => {
                       handleDeletePlan(e, plan.id)

src/hooks/usePlan.js

@@ -23,9 +23,6 @@ export function usePlan() {
   const { getMessage } = useMessage()
   const { get, promisePost, promisePut, promiseDel } = useAxios()
 
-  const planLabel = 'Plan '
-  const newPlanLabel = 'New Plan '
-
   /**
    * 마우스 포인터의 가이드라인을 제거합니다.
    */
@@ -145,7 +142,9 @@ export function usePlan() {
    */
   const checkUnsavedCanvasPlan = async (userId) => {
     swalFire({
-      text: `저장 안된 ${currentCanvasPlan.name} PLAN을 저장하시겠습니까? `,
+      text:
+        (!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === plan.id) ? 'New ' : '') +
+        `Plan ${plan.ordering}의 변경 사항을 저장하시겠습니까?`,
       type: 'confirm',
       confirmFn: async () => {
         initCanvasPlans.some((plan) => plan.id === currentCanvasPlan.id)
@@ -185,20 +184,20 @@ export function usePlan() {
    */
   const getCanvasByObjectNo = async (userId, objectNo) => {
     return get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) =>
-      res.map((item) => ({
+      res.map((item, index) => ({
         id: item.id,
-        name: planLabel + item.id,
         userId: item.userId,
         canvasStatus: dbToCanvasFormat(item.canvasStatus),
         isCurrent: false,
         bgImageName: item.bgImageName,
         mapPositionAddress: item.mapPositionAddress,
+        ordering: index + 1,
       })),
     )
   }
 
   /**
-   * canvas 데이터를 추가
+   * 신규 canvas 데이터를 저장
    */
   const postCanvasStatus = async (userId, canvasStatus) => {
     const planData = {
@@ -216,7 +215,6 @@ export function usePlan() {
               ? {
                   ...plan,
                   id: res.data,
-                  name: planLabel + res.data,
                   canvasStatus: canvasStatus,
                 }
               : plan,
@@ -306,7 +304,10 @@ export function usePlan() {
   const handleAddPlan = (userId, objectNo) => {
     JSON.parse(currentCanvasData()).objects.length > 0
       ? swalFire({
-          text: `${currentCanvasPlan.name} ` + getMessage('plan.message.confirm.copy'),
+          text:
+            (!initCanvasPlans.some((initCanvasPlans) => initCanvasPlans.id === plan.id) ? 'New ' : '') +
+            `Plan ${currentCanvasPlan.ordering} ` +
+            getMessage('plan.message.confirm.copy'),
           type: 'confirm',
           confirmFn: () => {
             addPlan(userId, objectNo, currentCanvasData())
@@ -321,10 +322,10 @@ export function usePlan() {
     const id = uuidv4()
     const newPlan = {
       id: id,
-      name: newPlanLabel + `${planNum + 1}`,
       objectNo: objectNo,
       userId: userId,
       canvasStatus: canvasStatus,
+      ordering: planNum + 1,
     }
     setPlans([...plans, newPlan])
     handleCurrentPlan(userId, id)
@@ -373,9 +374,10 @@ export function usePlan() {
       if (res.length > 0) {
         setInitCanvasPlans(res)
         setPlans(res)
-        updateCurrentPlan(Number(pid)) // last 데이터에 포커싱
+        updateCurrentPlan(Number(pid))
+        setPlanNum(res.length)
       } else {
-        addPlan(userId, objectNo)
+        addPlan(userId, objectNo, '')
       }
     })
   }
@@ -383,6 +385,7 @@ export function usePlan() {
   return {
     canvas,
     plans,
+    initCanvasPlans,
     selectedPlan,
     currentCanvasPlan,
     modifiedPlans,