From 26047df3c8c8f7bfc351a9f04b58d354441c5252 Mon Sep 17 00:00:00 2001
From: yoosangwook <swyoo@interplug.co.kr>
Date: Fri, 21 Mar 2025 11:28:16 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=ED=95=AB=ED=82=A4=20=EC=9D=B4=EB=B2=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EB=93=B1=EB=A1=9D=20=EC=83=98=ED=94=8C=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/floor-plan/CanvasFrame.jsx | 33 +++++++++++++++++++++++
 src/store/hotkeyAtom.js                   |  6 +++++
 2 files changed, 39 insertions(+)
 create mode 100644 src/store/hotkeyAtom.js

diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx
index ddce32a6..1167bd97 100644
--- a/src/components/floor-plan/CanvasFrame.jsx
+++ b/src/components/floor-plan/CanvasFrame.jsx
@@ -30,6 +30,7 @@ import { useCanvasSetting } from '@/hooks/option/useCanvasSetting'
 import { useCanvasMenu } from '@/hooks/common/useCanvasMenu'
 import { useEvent } from '@/hooks/useEvent'
 import { compasDegAtom } from '@/store/orientationAtom'
+import { hotkeyStore } from '@/store/hotkeyAtom'
 
 export default function CanvasFrame() {
   const canvasRef = useRef(null)
@@ -110,6 +111,38 @@ export default function CanvasFrame() {
     resetPcsCheckState()
   }
 
+  /**
+   * 캔버스가 있을 경우 핫키 이벤트 처리
+   * hotkeyStore에 핫키 이벤트 리스너 추가
+   * 
+   * const hotkeys = [
+      { key: 'c', fn: () => asdf() },
+      { key: 'v', fn: () => qwer() },
+    ]
+    setHotkeyStore(hotkeys)
+   */
+  const [hotkeyState, setHotkeyState] = useRecoilState(hotkeyStore)
+  const hotkeyHandlerRef = useRef(null)
+
+  useEffect(() => {
+    hotkeyHandlerRef.current = (e) => {
+      hotkeyState.forEach((hotkey) => {
+        if (e.key === hotkey.key) {
+          hotkey.fn()
+        }
+      })
+    }
+
+    document.addEventListener('keyup', hotkeyHandlerRef.current)
+
+    return () => {
+      if (hotkeyHandlerRef.current) {
+        document.removeEventListener('keyup', hotkeyHandlerRef.current)
+      }
+    }
+  }, [hotkeyState])
+  /** 핫키 이벤트 처리 끝 */
+
   return (
     <div className="canvas-frame">
       <canvas ref={canvasRef} id="canvas" style={{ position: 'relative' }}></canvas>
diff --git a/src/store/hotkeyAtom.js b/src/store/hotkeyAtom.js
new file mode 100644
index 00000000..1ad0d43c
--- /dev/null
+++ b/src/store/hotkeyAtom.js
@@ -0,0 +1,6 @@
+import { atom } from 'recoil'
+
+export const hotkeyStore = atom({
+  key: 'hotkeyState',
+  default: [],
+})