[javascript] Draft.js를 사용한 텍스트 에디터의 트랜스클루전트(투명) 효과 구현하기

24 Nov 2023

javascript

Draft.js는 React 기반의 오픈 소스 라이브러리로, 풍부한 텍스트 편집 기능을 제공하는 웹 에디터를 구현하는 데 사용됩니다. 이번 글에서는 Draft.js를 사용하여 텍스트 에디터에 트랜스클루전트(투명) 효과를 구현하는 방법을 알아보겠습니다.

1. Draft.js 설정하기

먼저, Draft.js를 설치하고 기본 설정을 해야 합니다. 다음 명령어를 사용하여 Draft.js를 설치합니다.

npm install draft-js

그리고 다음과 같이 Editor 컴포넌트를 생성하여 텍스트 에디터를 만들 수 있습니다.

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

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

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

  return (
    <Editor editorState={editorState} onChange={handleChange} />
  );
};

export default MyEditor;

2. 투명 효과를 위한 스타일 적용하기

Draft.js 에디터에 투명 효과를 적용하기 위해 Editor 컴포넌트를 스타일링해야 합니다. 다음과 같은 CSS 코드를 작성해주세요.

.editor {
  background-color: transparent;
}

그리고 Editor 컴포넌트에 className prop을 추가하여 스타일을 적용합니다.

<Editor editorState={editorState} onChange={handleChange} className="editor" />

3. 반투명 효과 구현하기

만약, 에디터의 배경이 효과적으로 투명하지 않다면, 반투명 효과를 구현할 수 있습니다. 이를 위해서는 에디터 밖에 있는 요소에 배경이미지를 추가하고, 에디터에는 배경색을 반투명하게 설정하는 작업이 필요합니다.

.editor-container {
  background-image: url('your-background-image.jpg');
}

.editor {
  background-color: rgba(255, 255, 255, 0.8); /* 반투명 배경색 */
}

위와 같이 배경 이미지를 넣고, rgba로 배경색을 설정합니다. 이제 .editor-container에 해당하는 컨테이너 요소를 만들어 에디터 컴포넌트를 감싸면 투명하고 반투명한 효과를 동시에 구현할 수 있습니다.

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

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

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

  return (
    <div className="editor-container">
      <Editor editorState={editorState} onChange={handleChange} className="editor" />
    </div>
  );
};

export default MyEditor;

마무리

이제 Draft.js를 사용하여 텍스트 에디터에 투명 효과를 구현하는 방법을 알아보았습니다. 텍스트 에디터에 다양한 효과를 추가하는 것은 사용자 경험을 향상시키고 콘텐츠를 시각적으로 더욱 흥미롭게 만들어줄 수 있습니다.