canvas => recoil로 수정

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()

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,

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',