diff --git a/src/components/write/WriteButtons.jsx b/src/components/write/WriteButtons.jsx index 7a23c0b..30a9aa1 100644 --- a/src/components/write/WriteButtons.jsx +++ b/src/components/write/WriteButtons.jsx @@ -4,7 +4,7 @@ import styled from '@emotion/styled'; const WriteButtonsWrapper = styled.div``; -const WriteButtons = ({ onSubmit }) => ( +const WriteButtons = ({ onSubmit, onCancel }) => ( - + ); diff --git a/src/containers/write/WriteButtonsContainer.jsx b/src/containers/write/WriteButtonsContainer.jsx index a0f1caa..367def1 100644 --- a/src/containers/write/WriteButtonsContainer.jsx +++ b/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 ( ); }; diff --git a/src/containers/write/WriteButtonsContainer.test.jsx b/src/containers/write/WriteButtonsContainer.test.jsx index 0fe07ad..7188890 100644 --- a/src/containers/write/WriteButtonsContainer.test.jsx +++ b/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(); diff --git a/src/containers/write/WriteFormContainer.jsx b/src/containers/write/WriteFormContainer.jsx index abeb93e..843194d 100644 --- a/src/containers/write/WriteFormContainer.jsx +++ b/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 (