[Feature] Create login and signup page

src/App.jsx

@@ -5,6 +5,8 @@ import { Switch, Route } from 'react-router-dom';
 import MainPage from './pages/MainPage';
 import WritePage from './pages/WritePage';
 import IntroducePage from './pages/IntroducePage';
+import LoginPage from './pages/LoginPage';
+import RegisterPage from './pages/RegisterPage';
 import HeaderContainer from './containers/common/HeaderContainer';
 
 const App = () => (
@@ -13,6 +15,8 @@ const App = () => (
     <Switch>
       <Route exact path="/" component={MainPage} />
       <Route path="/introduce/:id" component={IntroducePage} />
+      <Route component={LoginPage} path="/login" />
+      <Route component={RegisterPage} path="/register" />
       <Route path="/write" component={WritePage} />
     </Switch>
   </>

src/App.test.jsx

@@ -62,4 +62,20 @@ describe('App', () => {
       expect(container).toHaveTextContent('스터디 그룹 개설하기');
     });
   });
+
+  context('with path /login', () => {
+    it('renders the study login page', () => {
+      const { container } = renderApp({ path: '/login' });
+
+      expect(container).toHaveTextContent('Login');
+    });
+  });
+
+  context('with path /register', () => {
+    it('renders the study register page', () => {
+      const { container } = renderApp({ path: '/register' });
+
+      expect(container).toHaveTextContent('Register');
+    });
+  });
 });

src/components/auth/AuthForm.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import styled from '@emotion/styled';
+import Responsive from '../../styles/Responsive';
+
+const AuthFormWrapper = styled(Responsive)``;
+
+const AuthForm = ({ type }) => (
+  <AuthFormWrapper>
+    <h2>{type}</h2>
+    <input type="text" placeholder="이메일" />
+    <input type="password" placeholder="비밀번호" />
+    {type === 'Register' && (
+      <input type="password" placeholder="비밀번호 확인" />
+    )}
+
+  </AuthFormWrapper>
+);
+
+export default AuthForm;

src/components/auth/AuthForm.test.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import AuthForm from './AuthForm';
+
+describe('AuthForm', () => {
+  const renderAuthForm = ({ type }) => render((
+    <AuthForm type={type} />
+  ));
+
+  context('when type is login', () => {
+    const login = {
+      type: 'Login',
+    };
+
+    it('renders login form text', () => {
+      const { container, getByPlaceholderText } = renderAuthForm(login);
+
+      expect(container).toHaveTextContent('Login');
+      expect(getByPlaceholderText('이메일')).not.toBeNull();
+      expect(getByPlaceholderText('비밀번호')).not.toBeNull();
+    });
+  });
+
+  context('when type is register', () => {
+    const register = {
+      type: 'Register',
+    };
+
+    it('renders register form text', () => {
+      const { container, getByPlaceholderText } = renderAuthForm(register);
+
+      expect(container).toHaveTextContent('Register');
+      expect(getByPlaceholderText('이메일')).not.toBeNull();
+      expect(getByPlaceholderText('비밀번호')).not.toBeNull();
+      expect(getByPlaceholderText('비밀번호 확인')).not.toBeNull();
+    });
+  });
+});

src/components/common/Header.jsx

@@ -1,13 +1,61 @@
 import React from 'react';
 
+import { Link } from 'react-router-dom';
+
 import styled from '@emotion/styled';
 
-const HeaderWrapper = styled.div``;
+import Responsive from '../../styles/Responsive';
+import palette from '../../styles/palette';
+
+const HeaderWrapper = styled.div`
+  position: fixed;
+  width: 100%;
+  background: white;
+  box-shadow: 0px 2px 4px ${palette.teal[2]};
+`;
+
+const Wrapper = styled(Responsive)`
+  height: 5rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  div{
+    margin-right: 4rem;
+  }
+`;
+
+const TitleWrapper = styled(Link)`
+  font-weight: bold;
+  font-size: 1.8rem;
+`;
+
+const LinkWrapper = styled(Link)`
+  :first-of-type{
+    margin-right: 1rem;
+  }
+  :hover {
+    color: ${palette.gray[6]};
+  }
+  font-weight: bold;
+`;
+
+const Spacer = styled.div`
+  height: 6rem;
+`;
 
 const Header = () => (
-  <HeaderWrapper>
-    <h1>헤더</h1>
-  </HeaderWrapper>
+  <>
+    <HeaderWrapper>
+      <Wrapper>
+        <TitleWrapper to="/">제목(미정)</TitleWrapper>
+        <div>
+          <LinkWrapper to="/login">로그인</LinkWrapper>
+          <LinkWrapper to="/register">회원가입</LinkWrapper>
+        </div>
+      </Wrapper>
+    </HeaderWrapper>
+    <Spacer />
+  </>
 );
 
 export default Header;

src/components/common/Header.test.jsx

@@ -1,17 +1,22 @@
 import React from 'react';
 
+import { MemoryRouter } from 'react-router-dom';
 import { render } from '@testing-library/react';
 
 import Header from './Header';
 
 describe('Header', () => {
-  const renderHeader = () => render(
-    <Header />,
-  );
+  const renderHeader = () => render((
+    <MemoryRouter>
+      <Header />
+    </MemoryRouter>
+  ));
 
-  it('renders Header Title', () => {
+  it('renders Header text', () => {
     const { container } = renderHeader();
 
-    expect(container).toHaveTextContent('헤더');
+    expect(container).toHaveTextContent('제목(미정)');
+    expect(container).toHaveTextContent('로그인');
+    expect(container).toHaveTextContent('회원가입');
   });
 });

src/containers/common/HeaderContainer.jsx

@@ -1,15 +1,10 @@
 import React from 'react';
 
-import styled from '@emotion/styled';
-
 import Header from '../../components/common/Header';
 
-const HeaderWrapper = styled.div``;
-
-const HeaderContainer = () => (
-  <HeaderWrapper>
-    <Header />
-  </HeaderWrapper>
+const HeaderContainer = () => ((
+  <Header />
+)
 );
 
 export default HeaderContainer;

src/containers/common/HeaderContainer.test.jsx

@@ -2,16 +2,19 @@ import React from 'react';
 
 import { render } from '@testing-library/react';
 
+import { MemoryRouter } from 'react-router-dom';
 import HeaderContainer from './HeaderContainer';
 
 describe('HeaderContainer', () => {
-  const renderHeaderContainer = () => render(
-    <HeaderContainer />,
-  );
+  const renderHeaderContainer = () => render((
+    <MemoryRouter>
+      <HeaderContainer />
+    </MemoryRouter>
+  ));
 
   it('renders Header Title', () => {
     const { container } = renderHeaderContainer();
 
-    expect(container).toHaveTextContent('헤더');
+    expect(container).toHaveTextContent('제목(미정)');
   });
 });

src/pages/LoginPage.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import AuthForm from '../components/auth/AuthForm';
+
+const LoginPage = () => (
+  <AuthForm type="Login" />
+);
+
+export default LoginPage;

src/pages/LoginPage.test.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import LoginPage from './LoginPage';
+
+describe('LoginPage', () => {
+  const renderLoginPage = () => render((
+    <LoginPage />
+  ));
+
+  describe('renders Login page text contents', () => {
+    it('renders Login page Title', () => {
+      const { container } = renderLoginPage();
+
+      expect(container).toHaveTextContent('Login');
+    });
+  });
+});

src/pages/RegisterPage.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import AuthForm from '../components/auth/AuthForm';
+
+const RegisterPage = () => (
+  <AuthForm type="Register" />
+);
+
+export default RegisterPage;

src/pages/RegisterPage.test.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { render } from '@testing-library/react';
+
+import RegisterPage from './RegisterPage';
+
+describe('RegisterPage', () => {
+  const renderRegisterPage = () => render((
+    <RegisterPage />
+  ));
+
+  describe('renders Register page text contents', () => {
+    it('renders Register page Title', () => {
+      const { container } = renderRegisterPage();
+
+      expect(container).toHaveTextContent('Register');
+    });
+  });
+});