From 400e5c7c95607ff694078e4119cfbae3fe1173ea Mon Sep 17 00:00:00 2001
From: saseungmin <dbd02169@naver.com>
Date: Mon, 23 Nov 2020 22:32:19 +0900
Subject: [PATCH] [Feature] Study group opening creation write page

- Implementation of the study recruitment creation only write page
---
 src/App.jsx                  |  2 ++
 src/App.test.jsx             |  8 ++++++++
 src/pages/MainPage.jsx       | 27 ++++++++++++++++++++++++++-
 src/pages/MainPage.test.jsx  | 35 +++++++++++++++++++++++------------
 src/pages/WritePage.jsx      | 22 ++++++++++++++++++++++
 src/pages/WritePage.test.jsx | 28 ++++++++++++++++++++++++++++
 6 files changed, 109 insertions(+), 13 deletions(-)
 create mode 100644 src/pages/WritePage.jsx
 create mode 100644 src/pages/WritePage.test.jsx

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 = () => (
     <Switch>
       <Route exact path="/" component={MainPage} />
       <Route path="/introduce/:id" component={IntroducePage} />
+      <Route path="/write" component={WritePage} />
     </Switch>
   </>
 );
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 = () => (
   <MainPageWrapper>
-    <h2>지금 바로 시작하세요!</h2>
+    <TitleHeader>
+      <h2>지금 바로 시작하세요!</h2>
+      <Link to="/write">스터디 개설하기</Link>
+    </TitleHeader>
     <StudyGroupsContainer />
   </MainPageWrapper>
 );
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', () => {
     </MemoryRouter>
   ));
 
-  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 = () => (
+  <Responsive>
+    <h1>스터디 그룹 개설하기</h1>
+    <div>
+      <input type="text" placeholder="제목을 입력하세요" />
+    </div>
+    <div>
+      <textarea rows="10" cols="100" placeholder="내용" />
+    </div>
+    <div>
+      <input type="text" placeholder="태그를 입력하세요" />
+    </div>
+    <div>
+      <button type="button">저장</button>
+    </div>
+  </Responsive>
+);
+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((
+    <WritePage />
+  ));
+
+  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();
+    });
+  });
+});