[Feature] Click the cancel button and clear redux store

src/components/write/WriteButtons.jsx

@@ -4,15 +4,20 @@ import styled from '@emotion/styled';
 
 const WriteButtonsWrapper = styled.div``;
 
-const WriteButtons = ({ onSubmit }) => (
+const WriteButtons = ({ onSubmit, onCancel }) => (
   <WriteButtonsWrapper>
     <button
       type="button"
       onClick={onSubmit}
     >
       등록하기
     </button>
-    <button type="button">취소</button>
+    <button
+      type="button"
+      onClick={onCancel}
+    >
+      취소
+    </button>
   </WriteButtonsWrapper>
 );
 

src/containers/write/WriteButtonsContainer.jsx

@@ -1,7 +1,6 @@
 import React, { useEffect, useCallback } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
-
 import { useHistory } from 'react-router-dom';
 
 import { get } from '../../util/utils';
@@ -28,10 +27,15 @@ const WriteButtonsContainer = () => {
     }
   }, [history, group]);
 
+  const onCancel = () => {
+    history.push('/');
+  };
+
   return (
     <WriteButtons
       fields={writeField}
       onSubmit={onSubmit}
+      onCancel={onCancel}
     />
   );
 };

src/containers/write/WriteButtonsContainer.test.jsx

@@ -47,10 +47,23 @@ describe('WriteButtonsContainer', () => {
     expect(container).toHaveTextContent('취소');
   });
 
+  describe('when click cancel button', () => {
+    given('group', () => (null));
+
+    it('Go to the main page', () => {
+      const { getByText } = renderWriteButtonsContainer();
+
+      fireEvent.click(getByText('취소'));
+
+      expect(mockPush).toBeCalledWith('/');
+    });
+  });
+
   describe('when click submit button', () => {
     context('with group', () => {
       given('group', () => (STUDY_GROUP));
-      it('dispatch action submit event', () => {
+
+      it('dispatch action writeStudyGroup event', () => {
         const { getByText } = renderWriteButtonsContainer();
 
         fireEvent.click(getByText('등록하기'));
@@ -63,6 +76,7 @@ describe('WriteButtonsContainer', () => {
 
     context('without group', () => {
       given('group', () => (null));
+
       it('dispatch action submit event', () => {
         const { getByText } = renderWriteButtonsContainer();
 

src/containers/write/WriteFormContainer.jsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { useDispatch, useSelector } from 'react-redux';
 
 import { get } from '../../util/utils';
 import WriteForm from '../../components/write/WriteForm';
 
-import { changeWriteField } from '../../reducers/slice';
+import { changeWriteField, clearWriteFields } from '../../reducers/slice';
 
 const WriteFormContainer = () => {
   const dispatch = useDispatch();
@@ -21,6 +21,10 @@ const WriteFormContainer = () => {
     );
   };
 
+  useEffect(() => () => {
+    dispatch(clearWriteFields());
+  }, [dispatch]);
+
   return (
     <WriteForm
       fields={writeField}

src/pages/MainPage.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 
+import { Link } from 'react-router-dom';
+
 import styled from '@emotion/styled';
 
-import { Link } from 'react-router-dom';
 import StudyGroupsContainer from '../containers/groups/StudyGroupsContainer';
 import Responsive from '../styles/Responsive';
 import palette from '../styles/palette';