[javascript] Draft.js에서 텍스트 에디터의 소셜 미디어 공유 기능 추가하기

24 Nov 2023

javascript

이번 포스트에서는 Draft.js를 사용하여 텍스트 에디터에 소셜 미디어 공유 기능을 추가하는 방법에 대해 알아보겠습니다.

소셜 미디어 공유 기능이란?

소셜 미디어 공유 기능은 사용자가 에디터에서 작성한 텍스트를 소셜 미디어 플랫폼에 공유할 수 있는 기능을 말합니다. 사용자는 텍스트를 선택하고, 소셜 미디어 공유 버튼을 클릭하면 선택한 텍스트가 공유되는 것을 볼 수 있습니다.

Draft.js를 사용하여 소셜 미디어 공유 기능 추가하기

Draft.js는 React 기반의 텍스트 에디팅 라이브러리로, 텍스트 에디터를 구축하는 데 많이 사용됩니다. 소셜 미디어 공유 기능을 추가하기 위해 다음 단계를 따르세요.

Draft.js 프로젝트 설정하기

Draft.js를 사용하기 위해 프로젝트를 설정하세요. npm 또는 yarn을 사용하여 Draft.js를 프로젝트에 추가할 수 있습니다.

텍스트 에디터 컴포넌트 생성하기

Draft.js를 사용하여 텍스트 에디터 컴포넌트를 생성하세요. 이 컴포넌트에는 Draft.js의 Editor 컴포넌트를 사용하여 텍스트 입력을 관리합니다.

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

class TextEditor extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorState: EditorState.createEmpty(),
    };
  }

  onChange = (editorState) => {
    this.setState({ editorState });
  }

  render() {
    const { editorState } = this.state;
    return (
      <Editor
        editorState={editorState}
        onChange={this.onChange}
      />
    );
  }
}

소셜 미디어 공유 버튼 추가하기

텍스트 에디터 위에 소셜 미디어 공유 버튼을 추가하세요. 버튼을 클릭하면 현재 선택된 텍스트를 공유할 수 있도록 구현해야 합니다.

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

class TextEditor extends React.Component {
  ...

  shareText = () => {
    const { editorState } = this.state;
    const selectedText = editorState.getSelection().toString();
    // 소셜 미디어 공유 API를 호출해서 선택된 텍스트를 공유하세요.
  }

  render() {
    return (
      <div>
        <Editor ... />
        <button onClick={this.shareText}>소셜 미디어 공유</button>
      </div>
    );
  }
}

버튼을 클릭하면 shareText 메소드가 호출되어 선택된 텍스트를 가져와 소셜 미디어 공유를 진행합니다. 실제로는 선택된 텍스트를 공유하기 위해 해당 소셜 미디어 플랫폼의 API를 호출해야 합니다.

소셜 미디어 공유 API 호출하기

선택된 텍스트를 소셜 미디어에 공유하기 위해 해당 플랫폼의 공유 API를 호출하세요. 각 소셜 미디어 플랫폼은 별도의 API를 제공합니다. 예를 들어, 페이스북의 경우 window.open() 메소드를 사용하여 공유 대화상자를 열 수 있습니다.
```
shareText = () => {
  const { editorState } = this.state;
  const selectedText = editorState.getSelection().toString();

  // Facebook 공유 대화상자 열기
  window.open(`https://www.facebook.com/dialog/share?text=${selectedText}`);
}
```
페이스북의 경우 https://www.facebook.com/dialog/share 주소에 text 매개변수를 사용하여 선택된 텍스트를 전달합니다.

마무리

이제 Draft.js를 사용하여 텍스트 에디터에 소셜 미디어 공유 기능을 추가하는 방법에 대해 알아보았습니다. 이를 참고하여 자신의 프로젝트에 적용해보세요.