refactor: CanvasLayout 컴포넌트 내 objNo 수정, 특정 plan에 포커싱되도록 수정

src/components/floor-plan/CanvasLayout.jsx

@@ -2,7 +2,7 @@
 
 import { useContext, useEffect, useState } from 'react'
 import { useRecoilValue } from 'recoil'
-import CanvasFrame from './CanvasFrame'
+import { FloorPlanContext } from '@/app/floor-plan/FloorPlanProvider'
 import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
 import { usePlan } from '@/hooks/usePlan'
@@ -14,7 +14,8 @@ export default function CanvasLayout({ children }) {
   // const { menuNumber } = props
   const { menuNumber } = useCanvasMenu()
   const { session } = useContext(SessionContext)
-  const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
+  const { floorPlanState } = useContext(FloorPlanContext)
+  const { objectNo, pid } = floorPlanState
   const globalLocaleState = useRecoilValue(globalLocaleStore)
 
   const { getMessage } = useMessage()
@@ -22,7 +23,7 @@ export default function CanvasLayout({ children }) {
   const { plans, modifiedPlans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
 
   useEffect(() => {
-    loadCanvasPlanData(session.userId, objectNo)
+    loadCanvasPlanData(session.userId, objectNo, pid)
   }, [])
 
   return (

src/hooks/usePlan.js

@@ -23,6 +23,9 @@ export function usePlan() {
   const { getMessage } = useMessage()
   const { get, promisePost, promisePut, promiseDel } = useAxios()
 
+  const planLabel = 'Plan '
+  const newPlanLabel = 'New Plan '
+
   /**
    * 마우스 포인터의 가이드라인을 제거합니다.
    */
@@ -184,7 +187,7 @@ export function usePlan() {
     return get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) =>
       res.map((item) => ({
         id: item.id,
-        name: item.objectNo + '-' + item.id, // tab button에 표출될 이름 (임시)
+        name: planLabel + item.id,
         userId: item.userId,
         canvasStatus: dbToCanvasFormat(item.canvasStatus),
         isCurrent: false,
@@ -213,7 +216,7 @@ export function usePlan() {
               ? {
                   ...plan,
                   id: res.data,
-                  name: currentCanvasPlan.objectNo + '-' + res.data,
+                  name: planLabel + res.data,
                   canvasStatus: canvasStatus,
                 }
               : plan,
@@ -318,7 +321,7 @@ export function usePlan() {
     const id = uuidv4()
     const newPlan = {
       id: id,
-      name: `Plan ${planNum + 1}`,
+      name: newPlanLabel + `${planNum + 1}`,
       objectNo: objectNo,
       userId: userId,
       canvasStatus: canvasStatus,
@@ -364,14 +367,13 @@ export function usePlan() {
   /**
    * plan 조회
    */
-  const loadCanvasPlanData = (userId, objectNo) => {
+  const loadCanvasPlanData = (userId, objectNo, pid) => {
     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)
+        updateCurrentPlan(Number(pid)) // last 데이터에 포커싱
       } else {
         addPlan(userId, objectNo)
       }