로그인 페이지 퍼블리싱

src/App.tsx

@@ -4,6 +4,7 @@ import Home from "pages/Home";
 import Quiz from "pages/Quiz";
 import Dict from "pages/Dict";
 import Survey from "pages/Survey";
+import Login from "pages/Login";
 
 function App() {
   return (
@@ -13,7 +14,8 @@ function App() {
         <Route path="/" element={<Home />} />
         <Route path="/quiz" element={<Quiz />} />
         <Route path="/dict" element={<Dict />} />
-        <Route path="/Survey" element={<Survey />} />
+        <Route path="/survey" element={<Survey />} />
+        <Route path="/login" element={<Login />} />
       </Routes>
     </Router>
   );

src/components/Header/index.tsx

@@ -14,8 +14,8 @@ function Header() {
         <S.Navigation to="/dict">검색기록&사전</S.Navigation>
       </S.NavigationBox>
       <S.AccountBox>
-        <S.Account>회원가입</S.Account>
-        <S.Account>로그인</S.Account>
+        <S.Navigation to="/login">로그인</S.Navigation>
+        <S.Navigation to="/register">회원가입</S.Navigation>
       </S.AccountBox>
     </S.Layout>
   );

src/components/Header/style.ts

@@ -13,6 +13,7 @@ export const LogoBox = styled(Link)`
   width: 15%;
   display: flex;
   justify-content: center;
+  align-items: center;
   gap: 0.5rem;
 `;
 
@@ -40,7 +41,3 @@ export const AccountBox = styled.div`
   display: flex;
   gap: 2rem;
 `;
-
-export const Account = styled.div`
-  cursor: pointer;
-`;

src/pages/Login/index.tsx

@@ -0,0 +1,16 @@
+import logo from "assets/logo.svg";
+import * as S from "./style";
+
+function Login() {
+  return (
+    <S.Layout>
+      <S.Logo src={logo} />
+      <S.LogoText>readable</S.LogoText>
+      <S.Input placeholder="아이디" />
+      <S.Input placeholder="비밀번호" />
+      <S.Login>로그인</S.Login>
+    </S.Layout>
+  );
+}
+
+export default Login;

src/pages/Login/style.ts

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+
+export const Layout = styled.form`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 80vh;
+  gap: 2rem;
+`;
+
+export const Logo = styled.img`
+  width: 6.5%;
+`;
+
+export const LogoText = styled.div`
+  font-size: 2.5rem;
+  font-weight: bold;
+  color: #314fdd;
+`;
+
+export const Input = styled.input`
+  width: 20%;
+  font-size: 1.1rem;
+  padding: 1rem 0.5rem;
+  border-radius: 5px;
+  border: 1px solid black;
+`;
+
+export const Login = styled.button`
+  border-radius: 5px;
+  padding: 1rem 2rem;
+  border: none;
+  background-color: #314fdd;
+  color: white;
+`;