fix: 캔버스 화면에서 벗어난 뒤 기존과 다른 plan으로 진입 시 이전 캔버스 데이터가 표출되는 현상 수정

src/components/floor-plan/CanvasFrame.jsx

@@ -34,7 +34,7 @@ export default function CanvasFrame() {
   const currentMenu = useRecoilValue(currentMenuState)
   const { floorPlanState } = useContext(FloorPlanContext)
   const { contextMenu, handleClick } = useContextMenu()
-  const { plans, currentCanvasPlan } = usePlan()
+  const { plans, currentCanvasPlan, resetCanvasStatus } = usePlan()
   const totalDisplay = useRecoilValue(totalDisplaySelector) // 집계표 표시 여부
   const { setIsGlobalLoading } = useContext(QcastContext)
   const resetModuleStatisticsState = useResetRecoilState(moduleStatisticsState)
@@ -45,20 +45,21 @@ export default function CanvasFrame() {
   const resetSelectedModelsState = useResetRecoilState(selectedModelsState)
   const resetPcsCheckState = useResetRecoilState(pcsCheckState)
   const { handleModuleSelectionTotal } = useCanvasPopupStatusController()
+
   const loadCanvas = () => {
-    if (canvas) {
-      canvas?.clear() // 캔버스를 초기화합니다.
-      if (currentCanvasPlan) {
-        const plan = plans.find((plan) => plan.id === currentCanvasPlan.id)
-        if (plan?.canvasStatus && floorPlanState.objectNo === currentCanvasPlan.objectNo) {
-          canvas?.loadFromJSON(JSON.parse(plan.canvasStatus), function () {
-            canvasLoadInit() //config된 상태로 캔버스 객체를 그린다
-            canvas?.renderAll() // 캔버스를 다시 그립니다.
-          })
-        }
+    if (!canvas) return
+
+    canvas?.clear() // 캔버스를 초기화합니다.
+    if (currentCanvasPlan) {
+      const plan = plans.find((plan) => plan.id === currentCanvasPlan.id)
+      if (plan?.canvasStatus && floorPlanState.objectNo === currentCanvasPlan.objectNo) {
+        canvas?.loadFromJSON(JSON.parse(plan.canvasStatus), function () {
+          canvasLoadInit() //config된 상태로 캔버스 객체를 그린다
+          canvas?.renderAll() // 캔버스를 다시 그립니다.
+        })
       }
-      gridInit()
     }
+    gridInit()
   }
 
   useEffect(() => {
@@ -69,6 +70,11 @@ export default function CanvasFrame() {
 
   useEffect(() => {
     setIsGlobalLoading(false)
+
+    return () => {
+      canvas?.clear()
+      resetCanvasStatus()
+    }
   }, [])
 
   const resetRecoilData = () => {

src/hooks/usePlan.js

@@ -407,6 +407,14 @@ export function usePlan(params = {}) {
     })
   }
 
+  /**
+   * plan canvasStatus 초기화
+   */
+  const resetCanvasStatus = () => {
+    setCurrentCanvasPlan((prev) => ({ ...prev, canvasStatus: null }))
+    setPlans((plans) => plans.map((plan) => ({ ...plan, canvasStatus: null })))
+  }
+
   /**
    * 현재 plan 이동 -> 새로운 링크로 이동
    */
@@ -425,5 +433,6 @@ export function usePlan(params = {}) {
     handleAddPlan,
     handleDeletePlan,
     loadCanvasPlanData,
+    resetCanvasStatus,
   }
 }