diff --git a/src/App.jsx b/src/App.jsx index f37bc9c..c41d189 100644 --- a/src/App.jsx +++ b/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 = () => ( + + diff --git a/src/App.test.jsx b/src/App.test.jsx index dcf46a6..7a1393d 100644 --- a/src/App.test.jsx +++ b/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'); + }); + }); }); diff --git a/src/components/auth/AuthForm.jsx b/src/components/auth/AuthForm.jsx new file mode 100644 index 0000000..66679ef --- /dev/null +++ b/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 }) => ( + +

{type}

+ + + {type === 'Register' && ( + + )} + + +); + +export default AuthForm; diff --git a/src/components/auth/AuthForm.test.jsx b/src/components/auth/AuthForm.test.jsx new file mode 100644 index 0000000..fdf6256 --- /dev/null +++ b/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(( + + )); + + 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(); + }); + }); +}); diff --git a/src/components/common/Header.jsx b/src/components/common/Header.jsx index c407a77..eaa9008 100644 --- a/src/components/common/Header.jsx +++ b/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 = () => ( - -

헤더

- + <> + + + 제목(미정) +
+ 로그인 + 회원가입 +
+ + + + ); export default Header; diff --git a/src/components/common/Header.test.jsx b/src/components/common/Header.test.jsx index f6a5b47..b453f41 100644 --- a/src/components/common/Header.test.jsx +++ b/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( -
, - ); + const renderHeader = () => render(( + +
+ + )); - it('renders Header Title', () => { + it('renders Header text', () => { const { container } = renderHeader(); - expect(container).toHaveTextContent('헤더'); + expect(container).toHaveTextContent('제목(미정)'); + expect(container).toHaveTextContent('로그인'); + expect(container).toHaveTextContent('회원가입'); }); }); diff --git a/src/containers/common/HeaderContainer.jsx b/src/containers/common/HeaderContainer.jsx index 2d3b7eb..108fc19 100644 --- a/src/containers/common/HeaderContainer.jsx +++ b/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 = () => ( - -
- +const HeaderContainer = () => (( +
+) ); export default HeaderContainer; diff --git a/src/containers/common/HeaderContainer.test.jsx b/src/containers/common/HeaderContainer.test.jsx index 9807b46..0900540 100644 --- a/src/containers/common/HeaderContainer.test.jsx +++ b/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( - , - ); + const renderHeaderContainer = () => render(( + + + + )); it('renders Header Title', () => { const { container } = renderHeaderContainer(); - expect(container).toHaveTextContent('헤더'); + expect(container).toHaveTextContent('제목(미정)'); }); }); diff --git a/src/pages/LoginPage.jsx b/src/pages/LoginPage.jsx new file mode 100644 index 0000000..2e55beb --- /dev/null +++ b/src/pages/LoginPage.jsx @@ -0,0 +1,9 @@ +import React from 'react'; + +import AuthForm from '../components/auth/AuthForm'; + +const LoginPage = () => ( + +); + +export default LoginPage; diff --git a/src/pages/LoginPage.test.jsx b/src/pages/LoginPage.test.jsx new file mode 100644 index 0000000..a5de1f8 --- /dev/null +++ b/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(( + + )); + + describe('renders Login page text contents', () => { + it('renders Login page Title', () => { + const { container } = renderLoginPage(); + + expect(container).toHaveTextContent('Login'); + }); + }); +}); diff --git a/src/pages/RegisterPage.jsx b/src/pages/RegisterPage.jsx new file mode 100644 index 0000000..ab98c1b --- /dev/null +++ b/src/pages/RegisterPage.jsx @@ -0,0 +1,9 @@ +import React from 'react'; + +import AuthForm from '../components/auth/AuthForm'; + +const RegisterPage = () => ( + +); + +export default RegisterPage; diff --git a/src/pages/RegisterPage.test.jsx b/src/pages/RegisterPage.test.jsx new file mode 100644 index 0000000..98cb5b2 --- /dev/null +++ b/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(( + + )); + + describe('renders Register page text contents', () => { + it('renders Register page Title', () => { + const { container } = renderRegisterPage(); + + expect(container).toHaveTextContent('Register'); + }); + }); +});