[Feature] Applying the editor

__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = 'test-file-stub';

__mocks__/styleMock.js

@@ -0,0 +1 @@
+module.exports = {};

jest.config.js

@@ -12,4 +12,8 @@ module.exports = {
       statements: 100,
     },
   },
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': '<rootDir>/__mocks__/fileMock.js',
+    '\\.(css|less)$': '<rootDir>/__mocks__/styleMock.js',
+  },
 };

package.json

@@ -28,11 +28,14 @@
     "@emotion/styled": "^11.0.0",
     "@reduxjs/toolkit": "^1.4.0",
     "axios": "^0.21.0",
+    "draft-js": "^0.11.7",
+    "draftjs-to-html": "^0.9.1",
     "moment": "^2.29.1",
     "moment-timezone": "^0.5.32",
     "qs": "^6.9.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-draft-wysiwyg": "^1.14.5",
     "react-moment": "^1.0.0",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
@@ -58,6 +61,7 @@
     "file-loader": "^6.2.0",
     "given2": "^2.1.7",
     "html-webpack-plugin": "^4.5.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^26.6.3",
     "jest-plugin-context": "^2.9.0",
     "json-server": "^0.16.3",

src/components/write/WriteEditor.jsx

@@ -0,0 +1,45 @@
+import React, { useState } from 'react';
+
+import styled from '@emotion/styled';
+
+import { EditorState, convertToRaw } from 'draft-js';
+import draftToHtml from 'draftjs-to-html';
+import { Editor } from 'react-draft-wysiwyg';
+
+import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
+
+const WriteEditorWrapper = styled.div``;
+
+const WriteEditor = ({ onChange }) => {
+  const [editorState, setEditorState] = useState(EditorState.createEmpty());
+
+  const handleChangeEditor = (state) => {
+    setEditorState(state);
+    onChange({
+      name: 'contents',
+      value: draftToHtml(convertToRaw(state.getCurrentContent())),
+    });
+  };
+
+  return (
+    <WriteEditorWrapper>
+      <Editor
+        editorState={editorState}
+        onEditorStateChange={handleChangeEditor}
+        ariaLabel="contents"
+        placeholder="내용을 작성해주세요."
+        localization={{
+          locale: 'ko',
+        }}
+        toolbar={{
+          list: { inDropdown: true },
+          textAlign: { inDropdown: true },
+          link: { inDropdown: true },
+          history: { inDropdown: true },
+        }}
+      />
+    </WriteEditorWrapper>
+  );
+};
+
+export default WriteEditor;

src/components/write/WriteEditor.test.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import WriteEditor from './WriteEditor';
+
+describe('WriteEditor', () => {
+  const handleChange = jest.fn();
+  const renderWriteButtons = () => render((
+    <WriteEditor
+      onChange={handleChange}
+    />
+  ));
+
+  it('render Write Editor', () => {
+    const { container } = renderWriteButtons();
+
+    expect(container).toHaveTextContent('내용을 작성해주세요.');
+  });
+});

src/components/write/WriteForm.jsx

@@ -6,7 +6,7 @@ const WriteFormWrapper = styled.div``;
 
 const WriteForm = ({ onChange, fields }) => {
   const {
-    title, applyEndDate, personnel, contents,
+    title, applyEndDate, personnel,
   } = fields;
 
   const handleChange = (e) => {
@@ -46,17 +46,6 @@ const WriteForm = ({ onChange, fields }) => {
           id="participants-number"
         />
       </div>
-      <div>
-        {/* TODO: 추후 draft.js를 사용하여 변경 예정 */}
-        <textarea
-          rows="10"
-          cols="100"
-          name="contents"
-          value={contents}
-          onChange={handleChange}
-          placeholder="내용"
-        />
-      </div>
     </WriteFormWrapper>
   );
 };

src/components/write/WriteForm.test.jsx

@@ -24,13 +24,12 @@ describe('WriteForm', () => {
     const { getByLabelText, getByPlaceholderText } = renderWriteForm(WRITE_FORM);
 
     const {
-      title, applyEndDate, personnel, contents,
+      title, applyEndDate, personnel,
     } = WRITE_FORM;
 
     expect(getByPlaceholderText('제목을 입력하세요')).toHaveValue(title);
     expect(getByLabelText('모집 마감 날짜')).toHaveValue(applyEndDate);
     expect(getByLabelText('참여 인원 수')).toHaveValue(personnel);
-    expect(getByPlaceholderText('내용')).toHaveTextContent(contents);
   });
 
   describe('listens change event', () => {