[javascript] Draft.js를 이용한 텍스트 에디터의 전체 화면 모드(풀스크린) 기능 구현하기

24 Nov 2023

javascript

Draft.js는 React 기반의 강력한 텍스트 에디터 라이브러리입니다. 이 라이브러리를 사용하여 텍스트 에디터를 개발할 때, 전체 화면 모드(풀스크린) 기능을 구현하고 싶을 수 있습니다. 이번 블로그 포스트에서는 Draft.js를 사용하여 텍스트 에디터의 풀스크린 기능을 구현하는 방법에 대해 알아보겠습니다.

1. 풀스크린 CSS 스타일 설정하기

풀스크린 모드를 위해 다음과 같은 CSS 스타일을 설정해야 합니다:

.fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
}

.editor {
  width: 100%;
  height: 100%;
}

위의 CSS 코드는 .fullscreen 클래스를 사용하여 요소의 크기를 화면 전체 크기로 설정하고, .editor 클래스를 사용하여 Draft.js 에디터의 크기를 조정합니다.

2. 풀스크린 모드 토글 버튼 추가하기

Draft.js 에디터를 풀스크린 모드로 전환하고 해제할 수 있는 토글 버튼을 추가해야 합니다. 아래는 예시 코드입니다:

import React, { useState } from 'react';

const Editor = () => {
  const [isFullscreen, setFullscreen] = useState(false);

  const toggleFullscreen = () => {
    setFullscreen(!isFullscreen);
  };

  return (
    <div className={isFullscreen ? 'fullscreen' : ''}>
      <button onClick={toggleFullscreen}>
        {isFullscreen ? '전체 화면 모드 해제' : '전체 화면 모드'}
      </button>
      <div className="editor">
        {/* Draft.js 에디터 컴포넌트 추가 */}
      </div>
    </div>
  );
};

위의 코드에서 isFullscreen 상태 변수를 사용하여 현재 풀스크린 모드인지를 추적하고, toggleFullscreen 함수를 사용하여 토글 버튼이 클릭될 때마다 풀스크린 모드를 전환합니다.

3. Draft.js 에디터 컴포넌트에 풀스크린 스타일 적용하기

Draft.js 에디터 컴포넌트에 풀스크린 스타일을 적용해야 합니다. 여기서는 Editor 컴포넌트에 draft-js-plugins 라이브러리를 사용하여 플러그인을 추가하는 예시를 들어보겠습니다:

import React, { useState } from 'react';
import { EditorState } from 'draft-js';
import Editor from 'draft-js-plugins-editor';
import createFullscreenPlugin from 'draft-js-fullscreen-plugin';
import 'draft-js-fullscreen-plugin/lib/plugin.css';

const fullscreenPlugin = createFullscreenPlugin();

const plugins = [fullscreenPlugin];

const FullscreenEditor = () => {
  const [editorState, setEditorState] = useState(() =>
    EditorState.createEmpty()
  );

  return (
    <div className={isFullscreen ? 'fullscreen' : ''}>
      <button onClick={toggleFullscreen}>
        {isFullscreen ? '전체 화면 모드 해제' : '전체 화면 모드'}
      </button>
      <div className="editor">
        <Editor
          editorState={editorState}
          onChange={setEditorState}
          plugins={plugins}
        />
      </div>
    </div>
  );
};

위의 코드에서 createFullscreenPlugin() 함수를 사용하여 풀스크린 플러그인을 생성하고, plugins 배열에 추가합니다. 그런 다음 Editor 컴포넌트의 plugins prop에 플러그인 배열을 전달하여 풀스크린 기능을 활성화합니다.

마무리

위의 단계들을 따라하면 Draft.js를 사용하여 텍스트 에디터의 풀스크린 모드를 구현할 수 있습니다. 텍스트 에디터에 풀스크린 기능을 추가하면 사용자는 텍스트를 편집할 때 더 많은 공간을 활용할 수 있게 됩니다.