From 4fe2de627d5fea228dfdf4b2c7d9bd32e6318442 Mon Sep 17 00:00:00 2001
From: "hyojun.choi" <chlgkwk123@nate.com>
Date: Tue, 10 Sep 2024 16:54:46 +0900
Subject: [PATCH] =?UTF-8?q?canvas=20=3D>=20recoil=EB=A1=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useCanvas.js  |  4 ++--
 src/hooks/useMode.js    | 16 +++++++---------
 src/store/canvasAtom.js |  6 ++++++
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/hooks/useCanvas.js b/src/hooks/useCanvas.js
index e6ae4dbf..044a5e58 100644
--- a/src/hooks/useCanvas.js
+++ b/src/hooks/useCanvas.js
@@ -4,7 +4,7 @@ import { fabric } from 'fabric'
 import { actionHandler, anchorWrapper, polygonPositionHandler } from '@/util/canvas-util'
 
 import { useRecoilState } from 'recoil'
-import { canvasSizeState, fontSizeState } from '@/store/canvasAtom'
+import { canvasSizeState, canvasState, fontSizeState } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { QPolygon } from '@/components/fabric/QPolygon'
 import { defineQLine } from '@/util/qline-utils'
@@ -14,7 +14,7 @@ import { useCanvasEvent } from '@/hooks/useCanvasEvent'
 import { post } from '@/lib/Axios'
 
 export function useCanvas(id) {
-  const [canvas, setCanvas] = useState()
+  const [canvas, setCanvas] = useRecoilState(canvasState)
   const [isLocked, setIsLocked] = useState(false)
   const [history, setHistory] = useState([])
   const [backImg, setBackImg] = useState()
diff --git a/src/hooks/useMode.js b/src/hooks/useMode.js
index 7e1efe4a..0287c592 100644
--- a/src/hooks/useMode.js
+++ b/src/hooks/useMode.js
@@ -14,25 +14,26 @@ import { useRecoilState, useRecoilValue } from 'recoil'
 
 import {
   canvasSizeState,
+  canvasState,
   compassState,
   drewRoofCellsState,
   fontSizeState,
+  guideLineState,
+  horiGuideLinesState,
   modeState,
+  objectPlacementModeState,
   roofPolygonArrayState,
   roofPolygonPatternArrayState,
   roofState,
   sortedPolygonArray,
   templateTypeState,
-  wallState,
-  guideLineState,
-  horiGuideLinesState,
   vertGuideLinesState,
-  objectPlacementModeState,
+  wallState,
 } from '@/store/canvasAtom'
 import { QLine } from '@/components/fabric/QLine'
 import { fabric } from 'fabric'
 import { QPolygon } from '@/components/fabric/QPolygon'
-import offsetPolygon, { inPolygon } from '@/util/qpolygon-utils'
+import offsetPolygon from '@/util/qpolygon-utils'
 import { isObjectNotEmpty } from '@/util/common-utils'
 import * as turf from '@turf/turf'
 import { INPUT_TYPE, Mode } from '@/common/common'
@@ -43,7 +44,7 @@ export function useMode() {
   const historyPoints = useRef([])
   const historyLines = useRef([])
   const startPoint = useRef()
-  const [canvas, setCanvas] = useState(null)
+  const [canvas, setCanvas] = useRecoilState(canvasState)
   const [zoom, setZoom] = useState(100)
   const [fontSize] = useRecoilState(fontSizeState)
   const [sortedArray, setSortedArray] = useRecoilState(sortedPolygonArray)
@@ -83,7 +84,6 @@ export function useMode() {
     //   return
     // }
     if (!canvas) return
-    setCanvas(canvas)
     canvas?.off('mouse:out', removeMouseLines)
     canvas?.on('mouse:out', removeMouseLines)
     canvas?.off('mouse:move')
@@ -685,7 +685,6 @@ export function useMode() {
     mouseAndkeyboardEventClear()
     addCommonMouseEvent()
     setMode(mode)
-    setCanvas(canvas)
 
     // mode별 이벤트 변경
 
@@ -5119,7 +5118,6 @@ export function useMode() {
     mode,
     setMode,
     changeMode,
-    setCanvas,
     handleClear,
     zoomIn,
     zoomOut,
diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js
index ae020901..44f29df5 100644
--- a/src/store/canvasAtom.js
+++ b/src/store/canvasAtom.js
@@ -1,5 +1,11 @@
 import { atom } from 'recoil'
 
+export const canvasState = atom({
+  key: 'canvasState',
+  default: null,
+  dangerouslyAllowMutability: true,
+})
+
 export const textState = atom({
   key: 'textState',
   default: 'test text',