refactor: current plan 이동 시 useEffect 호출 제거, 초기 plan 저장 시 팝업 미표출하도록 수정

src/components/floor-plan/CanvasFrame.jsx

@@ -24,15 +24,15 @@ export default function CanvasFrame() {
   const currentMenu = useRecoilValue(currentMenuState)
   const { floorPlanState } = useContext(FloorPlanContext)
   const { contextMenu, handleClick } = useContextMenu()
-  const { selectedPlan } = usePlan()
+  const { currentCanvasPlan } = usePlan()
   const totalDisplay = useRecoilValue(totalDisplaySelector) // 집계표 표시 여부
   const { setIsGlobalLoading } = useContext(QcastContext)
 
   const loadCanvas = () => {
     if (canvas) {
       canvas?.clear() // 캔버스를 초기화합니다.
-      if (selectedPlan?.canvasStatus && floorPlanState.objectNo === selectedPlan.objectNo) {
+      if (currentCanvasPlan?.canvasStatus && floorPlanState.objectNo === currentCanvasPlan.objectNo) {
-        canvas?.loadFromJSON(JSON.parse(selectedPlan.canvasStatus), function () {
+        canvas?.loadFromJSON(JSON.parse(currentCanvasPlan.canvasStatus), function () {
           canvasLoadInit() //config된 상태로 캔버스 객체를 그린다
           canvas?.renderAll() // 캔버스를 다시 그립니다.
         })
@@ -43,7 +43,7 @@ export default function CanvasFrame() {
 
   useEffect(() => {
     loadCanvas()
-  }, [selectedPlan, canvas])
+  }, [currentCanvasPlan, canvas])
 
   useEffect(() => {
     setIsGlobalLoading(false)

src/hooks/usePlan.js

@@ -128,7 +128,7 @@ export function usePlan(params = {}) {
   /**
    * objectNo에 해당하는 canvas 목록을 조회
    */
-  const getCanvasByObjectNo = async (userId, objectNo) => {
+  const getCanvasByObjectNo = async (userId, objectNo, planNo) => {
     return await get({ url: `/api/canvas-management/canvas-statuses/by-object/${objectNo}/${userId}` }).then((res) =>
       res.map((item) => ({
         id: item.id,
@@ -136,7 +136,7 @@ export function usePlan(params = {}) {
         planNo: item.planNo,
         userId: item.userId,
         canvasStatus: dbToCanvasFormat(item.canvasStatus),
-        isCurrent: false,
+        isCurrent: planNo === item.planNo,
         bgImageName: item.bgImageName,
         mapPositionAddress: item.mapPositionAddress,
       })),
@@ -174,14 +174,15 @@ export function usePlan(params = {}) {
     }
     await promisePost({ url: '/api/canvas-management/canvas-statuses', data: planData })
       .then((res) => {
+        const newPlan = { id: res.data, objectNo: objectNo, planNo: planNo, userId: userId, canvasStatus: canvasStatus, isCurrent: true }
+        setCurrentCanvasPlan(newPlan)
         if (isInitPlan) {
           // 초기 플랜 생성인 경우 플랜 목록 초기화
-          setPlans([{ id: res.data, objectNo: objectNo, planNo: planNo, userId: userId, canvasStatus: canvasStatus }])
+          setPlans([newPlan])
         } else {
-          setPlans((plans) => [...plans, { id: res.data, objectNo: objectNo, planNo: planNo, userId: userId, canvasStatus: canvasStatus }])
+          setPlans((plans) => [...plans.map((plan) => ({ ...plan, isCurrent: false })), newPlan])
-        }
-        updateCurrentPlan(res.data)
           swalFire({ text: getMessage('plan.message.save') })
+        }
       })
       .catch((error) => {
         swalFire({ text: error.message, icon: 'error' })
@@ -255,14 +256,16 @@ export function usePlan(params = {}) {
                 }
                 setEstimateContextState(res.data)
                 // 클릭한 플랜 탭으로 이동
-                updateCurrentPlan(newCurrentId)
+                setCurrentCanvasPlan(plans.find((plan) => plan.id === newCurrentId))
+                setPlans((plans) => plans.map((plan) => ({ ...plan, isCurrent: plan.id === newCurrentId })))
               } else {
                 swalFire({ text: getMessage('estimate.menu.move.valid1') })
               }
             } else {
               // 발전시뮬레이션
               if (estimateDetail.tempFlg === '0') {
-                updateCurrentPlan(newCurrentId)
+                setCurrentCanvasPlan(plans.find((plan) => plan.id === newCurrentId))
+                setPlans((plans) => plans.map((plan) => ({ ...plan, isCurrent: plan.id === newCurrentId })))
               } else {
                 swalFire({ text: getMessage('simulator.menu.move.valid1') })
               }
@@ -278,26 +281,18 @@ export function usePlan(params = {}) {
         })
     } else {
       if (!currentCanvasPlan || currentCanvasPlan.id !== newCurrentId) {
-        saveCanvas()
+        await saveCanvas()
       }
-      updateCurrentPlan(newCurrentId)
+      setCurrentCanvasPlan(plans.find((plan) => plan.id === newCurrentId))
+      setPlans((plans) => plans.map((plan) => ({ ...plan, isCurrent: plan.id === newCurrentId })))
     }
   }
 
-  const updateCurrentPlan = (newCurrentId) => {
-    setPlans((plans) =>
-      plans.map((plan) => {
-        return { ...plan, isCurrent: plan.id === newCurrentId }
-      }),
-    )
-  }
-
   useEffect(() => {
-    setCurrentCanvasPlan(plans.find((plan) => plan.isCurrent) || null)
+    setSelectedPlan(currentCanvasPlan)
-    setSelectedPlan(plans.find((plan) => plan.isCurrent))
     handleCurrentPlanUrl()
     // setBgImage()
-  }, [plans])
+  }, [currentCanvasPlan])
 
   const handleCurrentPlanUrl = () => {
     const currentPlan = plans.find((plan) => plan.isCurrent)
@@ -368,7 +363,8 @@ export function usePlan(params = {}) {
     if (!lastPlan) {
       setCurrentCanvasPlan(null)
     } else if (targetPlan.id !== lastPlan.id) {
-      updateCurrentPlan(lastPlan.id)
+      setCurrentCanvasPlan(lastPlan)
+      setPlans((plans) => plans.map((plan) => ({ ...plan, isCurrent: plan.id === lastPlan.id })))
     }
   }
 
@@ -377,10 +373,10 @@ export function usePlan(params = {}) {
    */
   const loadCanvasPlanData = async (userId, objectNo, planNo) => {
     console.log('🚀 ~ loadCanvasPlanData ~ userId, objectNo, planNo:', userId, objectNo, planNo)
-    await getCanvasByObjectNo(userId, objectNo).then((res) => {
+    await getCanvasByObjectNo(userId, objectNo, planNo).then((res) => {
       if (res.length > 0) {
+        setCurrentCanvasPlan(res.find((plan) => plan.planNo === planNo))
         setPlans(res)
-        updateCurrentPlan(res.find((plan) => plan.planNo === planNo).id)
       } else {
         postCanvasStatus(userId, objectNo, '', true)
       }
@@ -397,6 +393,7 @@ export function usePlan(params = {}) {
   return {
     canvas,
     plans,
+    currentCanvasPlan,
     selectedPlan,
     saveCanvas,
     handleCurrentPlan,