From 0f97344d0a701eb24ddfbb4f8a1fbeded1c4578b Mon Sep 17 00:00:00 2001
From: Daseul Kim <amekimm@gmail.com>
Date: Fri, 18 Oct 2024 10:30:06 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20CanvasLayout=20=EC=BB=B4=ED=8F=AC?=
 =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=82=B4=20sesion=20=EC=88=98=EC=A0=95,?=
 =?UTF-8?q?=20=EC=8B=A0=EA=B7=9C=20plan=20id=EB=A5=BC=20uuid=EB=A1=9C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/CanvasLayout.jsx | 10 +++-------
 src/hooks/usePlan.js                       |  6 ++++--
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/floor-plan/CanvasLayout.jsx b/src/components/floor-plan/CanvasLayout.jsx
index 7c84705c..405d5106 100644
--- a/src/components/floor-plan/CanvasLayout.jsx
+++ b/src/components/floor-plan/CanvasLayout.jsx
@@ -7,14 +7,11 @@ import { useMessage } from '@/hooks/useMessage'
 import { useSwal } from '@/hooks/useSwal'
 import { usePlan } from '@/hooks/usePlan'
 import { globalLocaleStore } from '@/store/localeAtom'
-import { sessionStore } from '@/store/commonAtom'
 import { SessionContext } from '@/app/SessionProvider'
 
 export default function CanvasLayout() {
   const { session } = useContext(SessionContext)
-  console.log('session >>> ', session)
   const [objectNo, setObjectNo] = useState('test123240822001') // 이후 삭제 필요
-  const sessionState = useRecoilValue(sessionStore)
   const globalLocaleState = useRecoilValue(globalLocaleStore)
 
   const { getMessage } = useMessage()
@@ -22,8 +19,7 @@ export default function CanvasLayout() {
   const { plans, loadCanvasPlanData, handleCurrentPlan, handleAddPlan, handleDeletePlan } = usePlan()
 
   useEffect(() => {
-    console.log('loadCanvasPlanData 실행, sessionState.userId >>> ', sessionState.userId)
-    loadCanvasPlanData(sessionState.userId, objectNo)
+    loadCanvasPlanData(session.userId, objectNo)
   }, [])
 
   return (
@@ -34,7 +30,7 @@ export default function CanvasLayout() {
             <button
               key={`plan-${plan.id}`}
               className={`canvas-page-box ${plan.isCurrent === true ? 'on' : ''}`}
-              onClick={() => handleCurrentPlan(sessionState.userId, plan.id)}
+              onClick={() => handleCurrentPlan(session.userId, plan.id)}
             >
               <span>{plan.name}</span>
               <i
@@ -53,7 +49,7 @@ export default function CanvasLayout() {
           ))}
         </div>
         {plans.length < 10 && (
-          <button className="plane-add" onClick={() => handleAddPlan(sessionState.userId, objectNo)}>
+          <button className="plane-add" onClick={() => handleAddPlan(session.userId, objectNo)}>
             <span></span>
           </button>
         )}
diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js
index 8afb2060..b1273d82 100644
--- a/src/hooks/usePlan.js
+++ b/src/hooks/usePlan.js
@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'react'
 import { useRecoilState } from 'recoil'
+import { v4 as uuidv4 } from 'uuid'
 import { canvasState, currentCanvasPlanState, initCanvasPlansState, plansState } from '@/store/canvasAtom'
 import { useAxios } from '@/hooks/useAxios'
 import { useMessage } from '@/hooks/useMessage'
@@ -269,15 +270,16 @@ export function usePlan() {
       : addPlan(userId, objectNo)
   }
   const addPlan = (userId, objectNo, canvasStatus = '') => {
+    const id = uuidv4()
     const newPlan = {
-      id: planNum,
+      id: id,
       name: `Plan ${planNum + 1}`,
       objectNo: objectNo,
       userId: userId,
       canvasStatus: canvasStatus,
     }
     setPlans([...plans, newPlan])
-    handleCurrentPlan(userId, planNum)
+    handleCurrentPlan(userId, id)
     setPlanNum(planNum + 1)
   }