diff --git a/src/App.jsx b/src/App.jsx
index 51dd79a..f37bc9c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -3,6 +3,7 @@ import React from 'react';
import { Switch, Route } from 'react-router-dom';
import MainPage from './pages/MainPage';
+import WritePage from './pages/WritePage';
import IntroducePage from './pages/IntroducePage';
import HeaderContainer from './containers/common/HeaderContainer';
@@ -12,6 +13,7 @@ const App = () => (
+
>
);
diff --git a/src/App.test.jsx b/src/App.test.jsx
index 187ac15..22a4a58 100644
--- a/src/App.test.jsx
+++ b/src/App.test.jsx
@@ -48,4 +48,12 @@ describe('App', () => {
expect(container).toHaveTextContent('스터디를 소개합니다.2');
});
});
+
+ context('with path /write', () => {
+ it('renders the study write page', () => {
+ const { container } = renderApp({ path: '/write' });
+
+ expect(container).toHaveTextContent('스터디 그룹 개설하기');
+ });
+ });
});
diff --git a/src/pages/MainPage.jsx b/src/pages/MainPage.jsx
index b8c25b2..5a6b4de 100644
--- a/src/pages/MainPage.jsx
+++ b/src/pages/MainPage.jsx
@@ -2,16 +2,41 @@ import React from 'react';
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';
const MainPageWrapper = styled(Responsive)`
`;
+const TitleHeader = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ // TODO: Link 공통 style component 만들기
+ a {
+ margin-right: 4rem;
+ padding: .6rem .9rem .6rem .9rem;
+ border: 1px solid ${palette.gray[7]};
+ background: white;
+ color: ${palette.gray[7]};
+ font-weight: bold;
+ border-radius: .7rem;
+ :hover {
+ color: white;
+ background: ${palette.gray[7]};
+ }
+ }
+`;
+
const MainPage = () => (
- 지금 바로 시작하세요!
+
+ 지금 바로 시작하세요!
+ 스터디 개설하기
+
);
diff --git a/src/pages/MainPage.test.jsx b/src/pages/MainPage.test.jsx
index f1366e3..d647d86 100644
--- a/src/pages/MainPage.test.jsx
+++ b/src/pages/MainPage.test.jsx
@@ -2,7 +2,7 @@ import React from 'react';
import { useDispatch, useSelector } from 'react-redux';
-import { render, fireEvent } from '@testing-library/react';
+import { render } from '@testing-library/react';
import { MemoryRouter } from 'react-router-dom';
@@ -11,6 +11,7 @@ import STUDY_GROUPS from '../../fixtures/study-groups';
describe('MainPage', () => {
const dispatch = jest.fn();
+
beforeEach(() => {
dispatch.mockClear();
@@ -27,10 +28,28 @@ describe('MainPage', () => {
));
- it('renders Main Page Title', () => {
- const { container } = renderMainPage();
+ describe('renders Main Page text contents', () => {
+ it('renders Main Page Title', () => {
+ const { container } = renderMainPage();
+
+ expect(container).toHaveTextContent('지금 바로 시작하세요!');
+ });
+
+ it('renders Main Page Link text', () => {
+ const { container } = renderMainPage();
+
+ expect(container).toHaveTextContent('스터디 개설하기');
+ });
+
+ it('renders Main Page study group tags', () => {
+ const { container } = renderMainPage();
- expect(container).toHaveTextContent('지금 바로 시작하세요!');
+ STUDY_GROUPS.forEach(({ tags }) => {
+ tags.forEach((tag) => {
+ expect(container).toHaveTextContent(tag);
+ });
+ });
+ });
});
it('calls dispatch with loadStudyGroups action', () => {
@@ -41,12 +60,4 @@ describe('MainPage', () => {
expect(container).toHaveTextContent('스터디를 소개합니다.1');
expect(container).toHaveTextContent('스터디를 소개합니다.2');
});
-
- it('Click event to calls dispatch', () => {
- const { getByText } = renderMainPage();
-
- fireEvent.click(getByText('#JavaScript'));
-
- expect(dispatch).toBeCalled();
- });
});
diff --git a/src/pages/WritePage.jsx b/src/pages/WritePage.jsx
new file mode 100644
index 0000000..363e710
--- /dev/null
+++ b/src/pages/WritePage.jsx
@@ -0,0 +1,22 @@
+import React from 'react';
+
+import Responsive from '../styles/Responsive';
+
+const IntroducePage = () => (
+
+ 스터디 그룹 개설하기
+
+
+
+
+
+
+
+
+
+
+
+
+
+);
+export default IntroducePage;
diff --git a/src/pages/WritePage.test.jsx b/src/pages/WritePage.test.jsx
new file mode 100644
index 0000000..4796660
--- /dev/null
+++ b/src/pages/WritePage.test.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import WritePage from './WritePage';
+
+describe('WritePage', () => {
+ const renderWritePage = () => render((
+
+ ));
+
+ describe('render Write Page contents text', () => {
+ it('renders Write Page Title', () => {
+ const { container } = renderWritePage();
+
+ expect(container).toHaveTextContent('스터디 그룹 개설하기');
+ });
+
+ it('renders write form tag', () => {
+ const { getByPlaceholderText, getByText } = renderWritePage();
+
+ expect(getByPlaceholderText('제목을 입력하세요')).not.toBeNull();
+ expect(getByPlaceholderText('내용')).not.toBeNull();
+ expect(getByPlaceholderText('태그를 입력하세요')).not.toBeNull();
+ expect(getByText('저장')).not.toBeNull();
+ });
+ });
+});