Merge pull request #9 from Febase/feature/play-editor

feature: 에디터의 text를 활용해 커스텀 이벤트 생성&연동

src/components/Panel/Items.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import styled from '@emotion/styled'
 import PlayButton from './PlayButton'
+import usePlayText from '../../hooks/usePlayText'
 
 export default function Items() {
   return <Item />
@@ -27,7 +28,12 @@ function Item() {
         onKeyDown={handleKeyDown}
         onChange={handleChange}
       />
-      <PlayButton />
+      {
+        <PlayButton
+          isPlaying={isPlaying}
+          onClick={isPlaying ? stop : () => play(value)}
+        />
+      }
     </ItemContainer>
   )
 }

src/components/Panel/PlayButton.tsx

@@ -2,8 +2,14 @@ import styled from '@emotion/styled'
 import { useState } from 'react'
 import { buttonStyle } from './styles'
 import { ReactComponent as PlayIcon } from '../../res/play.svg'
+import { ReactComponent as StopIcon } from '../../res/stop.svg'
 
-export default function PlayButton() {
+interface IPlayButtonProps {
+  isPlaying: boolean
+  onClick: () => void
+}
+
+export default function PlayButton({ isPlaying, onClick }: IPlayButtonProps) {
   const [isHovered, setIsHovered] = useState(false)
   const handleMouseEnter = () => {
     setIsHovered(true)
@@ -13,13 +19,20 @@ export default function PlayButton() {
   }
 
   return (
-    <Button onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
-      <PlayIcon fill={isHovered ? '#d65a31' : '#ffffff'} />
+    <Button role="button" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
+      {isPlaying ? (
+        <StopIcon onClick={onClick} />
+      ) : (
+        <PlayIcon fill={isHovered ? '#d65a31' : '#ffffff'} onClick={onClick} />
+      )}
     </Button>
   )
 }
 
 const Button = styled.div`
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
   ${buttonStyle}
   margin-top: 0.5rem;
 `

src/hooks/usePlayText.ts

@@ -0,0 +1,55 @@
+import { useState, useRef } from 'react'
+
+interface IUsePlayText {
+  play: (text: string) => void
+  stop: () => void
+  isPlaying: boolean
+}
+
+const usePlayText = (): IUsePlayText => {
+  const [isPlaying, setIsPlaying] = useState<boolean>(false)
+  const intervalIdRef = useRef<NodeJS.Timeout | null>(null)
+
+  const play = (text: string) => {
+    if (text === '') {
+      return
+    }
+
+    setIsPlaying(true)
+
+    let index = 0
+    const textArray = text.split('')
+    const id = setInterval(() => {
+      const keyId = textArray[index].toLowerCase()
+      const event = new CustomEvent('threekeyboardevent', {
+        detail: {
+          keyId,
+        },
+      })
+      document.dispatchEvent(event)
+
+      index++
+
+      if (index === textArray.length) {
+        clearInterval(id)
+        setIsPlaying(false)
+        intervalIdRef.current = null
+      }
+    }, 200)
+
+    intervalIdRef.current = id
+  }
+
+  const stop = () => {
+    if (intervalIdRef.current) {
+      clearInterval(intervalIdRef.current)
+
+      intervalIdRef.current = null
+      setIsPlaying(false)
+    }
+  }
+
+  return { play, stop, isPlaying }
+}
+
+export default usePlayText

src/types/ThreeEvent.d.ts

@@ -1,5 +1,5 @@
 export type ThreeEventType = {
-  keyId?: string
+  keyId?: string | null
 }
 
 interface ThreeCustomEvent {