[javascript] Draft.js에서 텍스트 에디터의 소리 추가하기

24 Nov 2023

javascript

Draft.js는 React 기반의 텍스트 에디팅 프레임워크로, 풍부한 텍스트 편집 기능을 제공합니다. 그러나 기본적으로 Draft.js는 텍스트 입력에 대한 소리 효과를 지원하지 않습니다. 이번 블로그 포스트에서는 Draft.js에 소리를 추가하는 방법을 알아보겠습니다.

1. 사운드 파일 준비

먼저, 에디터에 사용할 사운드 파일을 준비해야 합니다. 원하는 음향 효과의 사운드 파일을 찾거나 만들어서, 프로젝트 폴더에 저장합니다. 이 예제에서는 typing-sound.mp3라는 사운드 파일을 사용하도록 하겠습니다.

2. Draft.js 컴포넌트 작성

Draft.js에서 소리를 추가하기 위해서는 에디터 컴포넌트를 커스텀해야 합니다. 다음은 SoundAwareEditor라는 컴포넌트의 예시입니다.

import React from 'react';
import { Editor } from 'draft-js';

class SoundAwareEditor extends React.Component {
  handleBeforeInput = (chars, editorState) => {
    // 사운드 재생 로직 구현
    const typingSound = new Audio('/path/to/typing-sound.mp3');
    typingSound.play();
    
    // 기존 Draft.js 에디터 로직 실행
    return 'not-handled';
  };

  render() {
    return <Editor editorState={this.props.editorState} handleBeforeInput={this.handleBeforeInput} />;
  }
}

export default SoundAwareEditor;

SoundAwareEditor 컴포넌트의 handleBeforeInput 메소드에서는 사운드를 재생하는 로직을 구현합니다. 이 예제에서는 사운드 파일 경로를 /path/to/typing-sound.mp3로 가정하고 사운드를 재생하는데, 실제 경로는 프로젝트 구조에 맞게 수정해야 합니다.

3. 소리를 추가한 에디터 사용

이제 SoundAwareEditor 컴포넌트를 사용하여 소리를 추가한 Draft.js 텍스트 에디터를 사용할 수 있습니다.

import React, { useState } from 'react';
import { EditorState } from 'draft-js';
import SoundAwareEditor from './SoundAwareEditor';

function App() {
  const [editorState, setEditorState] = useState(EditorState.createEmpty());

  const handleEditorChange = (newEditorState) => {
    setEditorState(newEditorState);
  };

  return (
    <div>
      <h1>텍스트 에디터</h1>
      <SoundAwareEditor editorState={editorState} onEditorChange={handleEditorChange} />
    </div>
  );
}

export default App;

위의 예시에서는 SoundAwareEditor를 App 컴포넌트에서 사용하고, editorState와 onEditorChange props를 전달하여 Draft.js의 기능을 활용할 수 있습니다.

이제 텍스트를 입력할 때마다 사운드 파일이 재생되는 텍스트 에디터를 사용할 수 있게 되었습니다. 소리 재생 로직은 필요에 따라 커스터마이징하여 다양한 소리 효과를 추가할 수도 있습니다.

이상으로 Draft.js에 텍스트 에디터의 소리를 추가하는 방법에 대해 알아보았습니다. 참고가 되셨기를 바랍니다.