feat: 키보드 동작 트리거를 위한 custom event

src/components/Keyboard/Key/index.tsx

@@ -1,10 +1,11 @@
 import { ThreeEvent, useFrame } from '@react-three/fiber'
-import React, { useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import KeyCap from './KeyCap'
 import KeyLegend from './KeyLegend'
 import { IkeyConfig } from '../../../types/KeyboardType'
 import { KEY_DOWN_DURATION, KEY_DOWN_POSITION } from './consts'
 import { Howl } from 'howler'
+import { ThreeEventType } from '../../../types/ThreeEvent'
 
 type KeyProps = { keyConfig: IkeyConfig }
 
@@ -13,19 +14,31 @@ export default (props: KeyProps) => {
   const [keyDownPosition, setKeyDownPosition] = useState<number>(0)
   const howl = useRef<Howl>(new Howl({ src: 'sample_audio.ogg' }))
 
+  useEffect(() => {
+    document.addEventListener('threekeyboardevent', keyboardEventHander)
+
+    return () => {
+      document.removeEventListener('threekeyboardevent', keyboardEventHander)
+    }
+  }, [])
+
   useFrame(() => {
     keyDownPosition < 0 &&
       setKeyDownPosition((prev) => prev + KEY_DOWN_DURATION)
   })
 
-  const onKeyClick = (evt: ThreeEvent<MouseEvent>) => {
-    evt.stopPropagation()
+  const onKeyClick = (evt?: ThreeEvent<MouseEvent>) => {
+    evt?.stopPropagation()
     setKeyDownPosition(KEY_DOWN_POSITION)
     howl.current?.play()
   }
 
+  const keyboardEventHander = (evt: CustomEvent<ThreeEventType>) => {
+    if (evt.detail?.keyId === keyConfig.legend?.text.toLowerCase()) onKeyClick()
+  }
+
   return (
-    <group onClick={onKeyClick} position={[0, keyDownPosition, 0]}>
+    <group position={[0, keyDownPosition, 0]}>
       <KeyCap
         config={keyConfig}
         position={[keyConfig.column, 0, keyConfig.row]}
@@ -37,3 +50,17 @@ export default (props: KeyProps) => {
     </group>
   )
 }
+
+export const genCustomKeyEventFromCharacter = (
+  char: string,
+): CustomEvent<ThreeEventType> => {
+  if (char.length !== 1) {
+    throw new Error(
+      `Invalid input for custom key event. Input should be single charater. Input is ${char}, though.`,
+    )
+  }
+
+  return new CustomEvent<ThreeEventType>('threekeyboardevent', {
+    detail: { keyId: char.toLowerCase() },
+  })
+}

src/index.tsx

@@ -1,9 +1,13 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import "./index.css";
-import App from "./App";
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import './index.css'
+import App from './App'
+import { genCustomKeyEventFromCharacter } from './components/Keyboard/Key'
 
-const root = ReactDOM.createRoot(
-  document.getElementById("root") as HTMLElement
-);
-root.render(<App />);
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement)
+root.render(<App />)
+
+document.addEventListener('keydown', (evt) => {
+  const event = genCustomKeyEventFromCharacter(evt.key)
+  document.dispatchEvent(event)
+})

src/types/ThreeEvent.d.ts

@@ -0,0 +1,24 @@
+export type ThreeEventType = {
+  keyId?: string
+}
+
+interface ThreeCustomEvent {
+  threekeyboardevent: CustomEvent<ThreeEventType>
+}
+declare global {
+  interface Document {
+    //adds definition to Document, but you can do the same with HTMLElement
+    addEventListener<K extends keyof ThreeCustomEvent>(
+      type: K,
+      listener: (this: Document, ev: ThreeCustomEvent[K]) => void,
+    ): void
+    removeEventListener<K extends keyof ThreeCustomEvent>(
+      type: K,
+      listener: (this: Document, ev: ThreeCustomEvent[K]) => void,
+    ): void
+    dispatchEvent<K extends keyof ThreeCustomEvent>(
+      ev: ThreeCustomEvent[K],
+    ): void
+  }
+}
+export {}

tsconfig.json

@@ -18,7 +18,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "typeRoots": ["src/types/ThreeEvent"]
   },
   "include": [
     "src"