useEvent 추가

src/components/common/context-menu/QContextMenu.jsx

@@ -14,7 +14,7 @@ export default function QContextMenu(props) {
   if (activeObject) {
     if (activeObject.initOptions) {
       //이건 바뀔 가능성이 있음
-      if (activeObject.initOptions.name.indexOf('guide') > -1) {
+      if (activeObject.initOptions?.name?.indexOf('guide') > -1) {
         contextType = 'surface' //면형상
       }
     }

src/components/floor-plan/CanvasFrame.jsx

@@ -1,7 +1,15 @@
-export default function CanvasFrame () {
-    return(
-        <div className="canvas-frame">
-            <canvas></canvas>
-        </div>
-    )
-}
+import { useCanvas } from '@/hooks/useCanvas'
+import { useRef } from 'react'
+import { useEvent } from '@/hooks/useEvent'
+
+export default function CanvasFrame() {
+  const canvasRef = useRef(null)
+  useCanvas('canvas')
+  useEvent()
+
+  return (
+    <div className="canvas-frame">
+      <canvas ref={canvasRef} id={'canvas'}></canvas>
+    </div>
+  )
+}

src/hooks/useEvent.js

@@ -0,0 +1,80 @@
+import { useEffect, useRef } from 'react'
+import { useRecoilValue } from 'recoil'
+import { canvasState, stepState } from '@/store/canvasAtom'
+
+export function useEvent() {
+  const canvas = useRecoilValue(canvasState)
+  const step = useRecoilValue(stepState)
+  const keyboardEventListeners = useRef([])
+
+  useEffect(() => {
+    if (!canvas) {
+      return
+    }
+    Object.keys(canvas.__eventListeners).forEach((key) => {
+      if (key.indexOf('mouse') > -1) {
+        canvas.off(key)
+      }
+    })
+    removeAllKeyboardEventListeners()
+    addEvent(step)
+  }, [step])
+
+  const addEvent = (step) => {
+    //default Event 추가
+    canvas?.on('mouse:move', defaultMouseMoveEvent)
+    addKeyboardEventListener('keydown', document, defaultKeyboardEvent)
+
+    if (step === 1) {
+      canvas?.on('mouse:down', (e) => {
+        canvas?.add(new fabric.Rect({ width: 100, height: 100, fill: 'red', left: e.pointer.x, top: e.pointer.y }))
+      })
+      addKeyboardEventListener('keydown', document, (e) => {
+        if (e.key === 'Escape') {
+          console.log(1111)
+        }
+      })
+    } else if (step === 2) {
+      canvas?.on('mouse:down', (e) => {
+        canvas?.add(new fabric.Circle({ radius: 50, fill: 'blue', left: e.pointer.x, top: e.pointer.y }))
+      })
+      addKeyboardEventListener('keydown', document, (e) => {
+        if (e.key === 'Escape') {
+          console.log(2222)
+        }
+      })
+    } else {
+      canvas?.on('mouse:down', (e) => {
+        canvas?.add(new fabric.Triangle({ width: 100, height: 100, fill: 'green', left: e.pointer.x, top: e.pointer.y }))
+      })
+      addKeyboardEventListener('keydown', document, (e) => {
+        if (e.key === 'Escape') {
+          console.log(333)
+        }
+      })
+    }
+  }
+
+  const defaultMouseMoveEvent = (e) => {
+    console.log('defaultMouseMoveEvent')
+  }
+
+  const defaultKeyboardEvent = (e) => {
+    if (e.key === 'Escape') {
+      console.log('defaultKeyboardEvent')
+    }
+  }
+
+  // 이벤트 리스너를 추가하는 함수
+  function addKeyboardEventListener(eventType, element, handler) {
+    element.addEventListener(eventType, handler)
+    keyboardEventListeners.current.push({ eventType, element, handler })
+  }
+  // 이벤트 리스너를 제거하는 함수
+  function removeAllKeyboardEventListeners() {
+    keyboardEventListeners.current.forEach(({ eventType, element, handler }) => {
+      element.removeEventListener(eventType, handler)
+    })
+    keyboardEventListeners.current.length = 0 // 배열 초기화
+  }
+}

src/store/canvasAtom.js

@@ -179,3 +179,8 @@ export const objectPlacementModeState = atom({
   key: 'objectPlacementMode',
   default: { width: 0, height: 0, areaBoundary: false, inputType: 'free', batchType: 'opening' },
 })
+
+export const stepState = atom({
+  key: 'step',
+  default: 0,
+})