5/feature register and login

src/App.tsx

@@ -1,22 +1,17 @@
 import React from 'react';
 import { Routes, Route } from 'react-router';
-import { About, Login, Main, ProfilePage, Register } from 'src/pages';
-import { Navbar } from 'src/components';
-import { Global } from '@emotion/react';
-import { globalPadding } from './styles/globalPadding';
+import { About, LoginPage, Main, ProfilePage, RegisterPage } from 'src/pages';
 
 export const App: React.FC = () => (
   <>
-    <Global styles={globalPadding} />
-    <Navbar />
     <Routes>
-      <Route index element={<Main />} />
+      <Route index path="/" element={<Main />} />
       <Route path="food" element={<Main />} />
       <Route path="clothes" element={<Main />} />
       <Route path="about" element={<About />} />
       <Route path="profile" element={<ProfilePage />} />
-      <Route path="register" element={<Register />} />
-      <Route path="login" element={<Login />} />
+      <Route path="register" element={<RegisterPage />} />
+      <Route path="login" element={<LoginPage />} />
     </Routes>
   </>
 );

src/components/common/Account/Login/index.tsx

@@ -2,5 +2,23 @@ import React from 'react';
 import * as S from './styled';
 
 export const Login: React.FC = () => {
-  return <></>;
+  return (
+    <>
+      <S.LoginBackground>
+        <S.LoginContainer>
+          <S.LoginTitle>로그인</S.LoginTitle>
+          <S.LoginText>아이디</S.LoginText>
+          <S.LoginInput required />
+          <S.LoginText>비밀번호</S.LoginText>
+          <S.LoginInput type="password" required />
+          <S.RegisterLink to="/register">
+            <S.LoginText>회원가입 하러가기</S.LoginText>
+          </S.RegisterLink>
+          <S.HomeLink to="/">
+            <S.LoginButton>로그인</S.LoginButton>
+          </S.HomeLink>
+        </S.LoginContainer>
+      </S.LoginBackground>
+    </>
+  );
 };

src/components/common/Account/Login/styled.ts

@@ -1 +1,73 @@
 import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
+
+export const LoginBackground = styled.div`
+  background-color: #e6e6e6;
+  width: 100%;
+  height: 100vh;
+`;
+
+export const LoginContainer = styled.div`
+  position: relative;
+  background-color: #f2f2f2;
+  left: 35%;
+  top: 20%;
+  width: 30%;
+  height: 45%;
+  border: 1px solid #848484;
+  box-shadow: 1em 1em 0.4em #848484;
+`;
+
+export const LoginTitle = styled.div`
+  text-align: center;
+  padding-top: 5rem;
+  font-size: 3.5rem;
+  font-weight: bold;
+`;
+
+export const LoginText = styled.div`
+  position: relative;
+  left: 10%;
+  top: 5.5%;
+  font-size: 1.5rem;
+`;
+
+export const LoginInput = styled.input`
+  margin-left: 5rem;
+  margin-top: 3rem;
+  width: 80%;
+  height: 4rem;
+  border: 1px solid #848484;
+  border-radius: 0.5rem;
+`;
+
+export const RegisterLink = styled(Link)`
+  position: relative;
+  bottom: 1.5rem;
+  text-decoration: none;
+  color: #4f7cfb;
+  &:hover {
+    color: #2f6dfb;
+  }
+`;
+
+export const LoginButton = styled.button`
+  position: relative;
+  background-color: #8aaae5;
+  margin-left: 5rem;
+  margin-top: 6rem;
+  font-size: 2rem;
+  font-weight: bold;
+  width: 80%;
+  height: 4rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  &:hover {
+    background-color: #7d9ffa;
+  }
+`;
+
+export const HomeLink = styled(Link)`
+  text-decoration: none;
+  color: #4f7cfb;
+`;

src/components/common/Account/Register/index.tsx

@@ -2,5 +2,29 @@ import React from 'react';
 import * as S from './styled';
 
 export const Register: React.FC = () => {
-  return <></>;
+  // const onRegisterClick = (e: React.MouseEvent<HTMLElement>) => {
+  //   e.preventDefault();
+  // };
+  return (
+    <>
+      <S.RegisterBackground>
+        <S.RegisterContainer>
+          <S.RegisterTitle>회원가입</S.RegisterTitle>
+          <S.RegisterText>아이디</S.RegisterText>
+          <S.RegisterInput required />
+          <S.RegisterText>비밀번호</S.RegisterText>
+          <S.RegisterInput type="password" required />
+          <S.RegisterText>비밀번호 확인</S.RegisterText>
+          <S.RegisterInput type="password" required />
+          <S.RegisterText>전화번호</S.RegisterText>
+          <S.RegisterInput required />
+          <S.RegisterText>이메일 주소</S.RegisterText>
+          <S.RegisterInput required />
+          <S.LoginLink to="/login">
+            <S.RegisterButton>가입</S.RegisterButton>
+          </S.LoginLink>
+        </S.RegisterContainer>
+      </S.RegisterBackground>
+    </>
+  );
 };

src/components/common/Account/Register/styled.ts

@@ -1 +1,63 @@
 import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
+
+export const RegisterBackground = styled.div`
+  background-color: #e6e6e6;
+  width: 100%;
+  height: 100vh;
+`;
+
+export const RegisterContainer = styled.div`
+  position: relative;
+  background-color: #f2f2f2;
+  left: 35%;
+  top: 10%;
+  width: 30%;
+  height: 70%;
+  border: 1px solid #848484;
+  box-shadow: 1em 1em 0.4em #848484;
+`;
+
+export const RegisterTitle = styled.div`
+  text-align: center;
+  padding-top: 5rem;
+  font-size: 3.5rem;
+  font-weight: bold;
+`;
+
+export const RegisterText = styled.div`
+  position: relative;
+  left: 10%;
+  top: 3.5%;
+  font-size: 1.5rem;
+`;
+
+export const RegisterInput = styled.input`
+  margin-left: 5rem;
+  margin-top: 2.5rem;
+  width: 80%;
+  height: 4rem;
+  border: 1px solid #848484;
+  border-radius: 0.5rem;
+`;
+
+export const RegisterButton = styled.button`
+  position: relative;
+  background-color: #8aaae5;
+  margin-left: 5rem;
+  margin-top: 6rem;
+  font-size: 2rem;
+  font-weight: bold;
+  width: 80%;
+  height: 4rem;
+  border-radius: 0.5rem;
+  cursor: pointer;
+  &:hover {
+    background-color: #7d9ffa;
+  }
+`;
+
+export const LoginLink = styled(Link)`
+  text-decoration: none;
+  color: black;
+`;

src/components/common/Navbar/index.tsx

@@ -36,7 +36,7 @@ export const Navbar: React.FC = () => {
           <S.MenuLink>카테고리</S.MenuLink>
           <S.MenuLink>상품</S.MenuLink>
           <S.MenuLink>
-            <S.NavLink to="about">About us</S.NavLink>
+            <S.NavLink to="/about">About us</S.NavLink>
           </S.MenuLink>
         </S.MenusLinkContainer>
         {isProfile ? (
@@ -66,7 +66,7 @@ export const Navbar: React.FC = () => {
             <S.Wish></S.Wish>
             <S.Basket></S.Basket>
             <S.HelloUser>
-              <S.ProfileLink to="profile">프로필</S.ProfileLink>
+              <S.ProfileLink to="/profile">프로필</S.ProfileLink>
             </S.HelloUser>
             <S.Profile></S.Profile>
           </S.ProfileContainer>

src/pages/About/index.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
-import { AboutUs } from 'src/components';
+import { AboutUs, Navbar } from 'src/components';
+import { Global } from '@emotion/react';
+import { globalPadding } from 'src/styles/globalPadding';
 
 export const About: React.FC = () => {
   return (
     <>
+      <Global styles={globalPadding} />
+      <Navbar />
       <AboutUs />
     </>
   );

src/pages/Account/Login/index.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
+import { Login } from 'src/components';
 
-export const Login: React.FC = () => {
-  return <></>;
+export const LoginPage: React.FC = () => {
+  return (
+    <>
+      <Login />
+    </>
+  );
 };

src/pages/Account/Register/index.tsx

@@ -1,5 +1,10 @@
 import React from 'react';
+import { Register } from 'src/components';
 
-export const Register: React.FC = () => {
-  return <></>;
+export const RegisterPage: React.FC = () => {
+  return (
+    <>
+      <Register />
+    </>
+  );
 };

src/pages/Main/index.tsx

@@ -1,9 +1,13 @@
 import React from 'react';
-import { Banner } from 'src/components';
+import { Banner, Navbar } from 'src/components';
 import { CategoryTemplate } from 'src/Template';
+import { Global } from '@emotion/react';
+import { globalPadding } from 'src/styles/globalPadding';
 export const Main: React.FC = () => {
   return (
     <>
+      <Global styles={globalPadding} />
+      <Navbar />
       <Banner />
       <CategoryTemplate />
     </>

src/pages/Profile/index.tsx

@@ -1,6 +1,14 @@
 import React from 'react';
-import { Profile } from 'src/components';
+import { Navbar, Profile } from 'src/components';
+import { Global } from '@emotion/react';
+import { globalPadding } from 'src/styles/globalPadding';
 
 export const ProfilePage: React.FC = () => {
-  return <Profile />;
+  return (
+    <>
+      <Global styles={globalPadding} />
+      <Navbar />
+      <Profile />;
+    </>
+  );
 };