[javascript] Draft.js로 구현된 에디터를 이용한 다크 모드(Dark mode) 지원하기

24 Nov 2023

javascript

Draft.js는 JavaScript로 구현된 React 기반의 리치 에디터입니다. 에디터에 다크 모드를 지원하는 것은 사용자에게 편의성을 제공하고, 시각적으로 매력적인 앱을 제작하는 데 도움이 될 수 있습니다. 이번 블로그 포스트에서는 Draft.js로 구현된 에디터에 다크 모드를 적용하는 방법에 대해 알아보겠습니다.

1. 에디터 스타일 변경하기

다크 모드를 구현하기 위해 먼저 에디터의 스타일을 변경해야 합니다. Draft.js에서는 Editor 컴포넌트를 사용하여 에디터를 초기화합니다. 이 컴포넌트에는 editor 클래스의 CSS 스타일이 적용되어 있습니다.

import { Editor } from 'draft-js';
import 'draft-js/dist/Draft.css'; 

// ...

<Editor
  // 에디터 설정
/>

다크 모드를 지원하기 위해서는 editor 클래스의 색상 테마를 변경해야 합니다. 이를 위해 CSS의 background-color, color 등과 같은 속성을 이용하여 스타일을 수정할 수 있습니다. 예를 들어, 다음과 같이 스타일을 변경할 수 있습니다.

.editor {
  background-color: #191919;
  color: #fff;
}

2. 토글 스위치 추가하기

다크 모드를 적용하기 위해서는 사용자가 모드를 변경할 수 있는 토글 스위치를 추가해야 합니다. React로 개발된 앱에서는 React Switch와 같은 외부 라이브러리를 사용하면 편리합니다.

import Switch from 'react-switch';

interface DarkModeToggleProps {
  darkMode: boolean;
  onDarkModeToggle: (value: boolean) => void;
}

const DarkModeToggle: React.FC<DarkModeToggleProps> = ({ darkMode, onDarkModeToggle }) => {
  return (
    <Switch
      checked={darkMode}
      onChange={onDarkModeToggle}
      onColor="#000"
      offColor="#ccc"
      // 스위치 스타일 등
    />
  );
};

// ...

<DarkModeToggle darkMode={darkMode} onDarkModeToggle={handleDarkModeToggle} />

darkMode 상태를 관리하기 위해 handleDarkModeToggle 함수를 작성해야 합니다. 이 함수는 사용자가 토글 스위치 값을 변경할 때 호출되며, darkMode 값을 수정하여 에디터의 스타일을 변경할 수 있습니다.

const handleDarkModeToggle = (value: boolean) => {
  setDarkMode(value);
  // 에디터의 스타일 변경 로직
};

3. 에디터의 스타일 변경 로직 추가하기

handleDarkModeToggle 함수에서 darkMode 값을 변경한 후, 에디터의 스타일을 변경하는 로직을 추가해야 합니다. 이를 위해서는 editor 클래스의 스타일을 동적으로 적용하거나, 에디터 컴포넌트를 새로 렌더링해야 합니다.

동적 스타일 변경

const handleDarkModeToggle = (value: boolean) => {
  setDarkMode(value);
  const editorElement = document.querySelector('.editor'); // 에디터 엘리먼트 선택
  editorElement.style.backgroundColor = value ? '#191919' : '#fff';
  editorElement.style.color = value ? '#fff' : '#000';
};

새로운 에디터 컴포넌트 렌더링

const handleDarkModeToggle = (value: boolean) => {
  setDarkMode(value);
};

// ...

return (
  <div>
    {darkMode ? (
      <Editor
        // 에디터 스타일 변경
        className="dark-mode"
        // 에디터 설정
      />
    ) : (
      <Editor
        // 에디터 설정
      />
    )}
  </div>
);

결론

이제 다크 모드를 지원하는 Draft.js 에디터를 구현할 수 있습니다. 에디터 스타일을 변경하고, 토글 스위치를 추가하여 사용자가 모드를 변경할 수 있도록 만들었습니다. 이를 통해 사용자 경험을 개선하고 시각적으로 매력적인 앱을 구현할 수 있습니다.