From decec520c1206c20ca043a36094d7e6a30159665 Mon Sep 17 00:00:00 2001
From: Daseul Kim <amekimm@gmail.com>
Date: Sat, 8 Feb 2025 17:46:58 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EC=BA=94=EB=B2=84=EC=8A=A4=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=EC=97=90=EC=84=9C=20=EB=B2=97=EC=96=B4=EB=82=9C=20?=
 =?UTF-8?q?=EB=92=A4=20=EA=B8=B0=EC=A1=B4=EA=B3=BC=20=EB=8B=A4=EB=A5=B8=20?=
 =?UTF-8?q?plan=EC=9C=BC=EB=A1=9C=20=EC=A7=84=EC=9E=85=20=EC=8B=9C=20?=
 =?UTF-8?q?=EC=9D=B4=EC=A0=84=20=EC=BA=94=EB=B2=84=EC=8A=A4=20=EB=8D=B0?=
 =?UTF-8?q?=EC=9D=B4=ED=84=B0=EA=B0=80=20=ED=91=9C=EC=B6=9C=EB=90=98?=
 =?UTF-8?q?=EB=8A=94=20=ED=98=84=EC=83=81=20=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/CanvasFrame.jsx | 30 ++++++++++++++---------
 src/hooks/usePlan.js                      |  9 +++++++
 2 files changed, 27 insertions(+), 12 deletions(-)

diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx
index 52553529..f5ecb10d 100644
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/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 = () => {
diff --git a/src/hooks/usePlan.js b/src/hooks/usePlan.js
index e0853282..70f7e0db 100644
--- a/src/hooks/usePlan.js
+++ b/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,
   }
 }