From 838b2e9e83f4da89ce92b1f14d986939ae471187 Mon Sep 17 00:00:00 2001
From: chaeyeon LEE <98521882+colorkite10@users.noreply.github.com>
Date: Tue, 24 Oct 2023 16:18:23 +0900
Subject: [PATCH] =?UTF-8?q?SKRF-111=20design:=20Login=20Page=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20(#10)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* design: Login Page 디자인

* refactor: 코드리뷰 반영

* refactor: 코드리뷰 반영
---
 src/constants/LoginPage.ts             |  9 ++++
 src/pages/LoginPage/LoginPage.style.ts | 71 ++++++++++++++++++++++++++
 src/pages/LoginPage/LoginPage.tsx      | 28 ++++++++++
 src/pages/MainPage.tsx                 |  2 -
 src/routes/index.tsx                   |  5 ++
 5 files changed, 113 insertions(+), 2 deletions(-)
 create mode 100644 src/constants/LoginPage.ts
 create mode 100644 src/pages/LoginPage/LoginPage.style.ts
 create mode 100644 src/pages/LoginPage/LoginPage.tsx

diff --git a/src/constants/LoginPage.ts b/src/constants/LoginPage.ts
new file mode 100644
index 00000000..52b0349a
--- /dev/null
+++ b/src/constants/LoginPage.ts
@@ -0,0 +1,9 @@
+const LogoText = {
+  SPACE_CLUB: 'Space Club',
+};
+
+const Message = {
+  WELCOME: '스페이스 클럽에 오신 걸 환영합니다!',
+};
+
+export { LogoText, Message };
diff --git a/src/pages/LoginPage/LoginPage.style.ts b/src/pages/LoginPage/LoginPage.style.ts
new file mode 100644
index 00000000..7a3e25a9
--- /dev/null
+++ b/src/pages/LoginPage/LoginPage.style.ts
@@ -0,0 +1,71 @@
+import styled from '@emotion/styled';
+
+import Theme from '@styles/Theme';
+
+const PageContainerStyled = styled.div`
+  display: flex;
+  height: 100vh;
+`;
+
+const LogoAreaStyled = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50%;
+  min-width: 30rem;
+  height: 100vh;
+  min-height: 30rem;
+`;
+
+const LogoCircleStyled = styled.div`
+  width: 28rem;
+  height: 28rem;
+  border-radius: 50%;
+  background: linear-gradient(
+    139deg,
+    #012a36 10.1%,
+    rgba(50, 51, 96, 0.78) 46.84%,
+    rgba(113, 42, 124, 0.51) 69.53%,
+    rgba(0, 221, 49, 0.15) 88.79%
+  );
+  overflow: hidden;
+`;
+
+const LogoTextStyled = styled.h1`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  top: 1rem;
+  right: 3rem;
+  color: ${Theme.color.logoTextColor};
+  text-align: end;
+  font-size: 6.25rem;
+  font-family: 'LogoFont';
+`;
+
+const LoginAreaStyled = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  width: 50%;
+  min-width: 30rem;
+  height: 100vh;
+  min-height: 30rem;
+  font-family: 'MainBold';
+`;
+
+const TitleStyled = styled.h1`
+  padding: 0 10% 3rem 10%;
+  font-weight: bold;
+  font-size: large;
+`;
+
+export {
+  PageContainerStyled,
+  LogoAreaStyled,
+  LogoCircleStyled,
+  LogoTextStyled,
+  LoginAreaStyled,
+  TitleStyled,
+};
diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx
new file mode 100644
index 00000000..d0b23365
--- /dev/null
+++ b/src/pages/LoginPage/LoginPage.tsx
@@ -0,0 +1,28 @@
+import { LogoText, Message } from '@/constants/LoginPage';
+
+import {
+  LoginAreaStyled,
+  LogoAreaStyled,
+  LogoCircleStyled,
+  LogoTextStyled,
+  PageContainerStyled,
+  TitleStyled,
+} from './LoginPage.style';
+
+const LoginPage = () => {
+  return (
+    <PageContainerStyled>
+      <LogoAreaStyled>
+        <LogoCircleStyled>
+          <LogoTextStyled>{LogoText.SPACE_CLUB}</LogoTextStyled>
+        </LogoCircleStyled>
+      </LogoAreaStyled>
+      <LoginAreaStyled>
+        <TitleStyled>{Message.WELCOME}</TitleStyled>
+        <button>Login with Kakao</button>
+      </LoginAreaStyled>
+    </PageContainerStyled>
+  );
+};
+
+export default LoginPage;
diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx
index 400cba81..fd51a4b8 100644
--- a/src/pages/MainPage.tsx
+++ b/src/pages/MainPage.tsx
@@ -1,5 +1,3 @@
-import React from 'react';
-
 const MainPage = () => {
   return <div>main</div>;
 };
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 3ca9df3b..9bf556d9 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -1,5 +1,6 @@
 import App from '@/App';
 import Layout from '@/pages/Layout';
+import LoginPage from '@/pages/LoginPage/LoginPage';
 import MainPage from '@/pages/MainPage';
 import NotFoundPage from '@/pages/NotFoundPage';
 import ProfilePage from '@/pages/ProfilePage';
@@ -26,6 +27,10 @@ const router = createBrowserRouter([
         path: 'register',
         element: <RegisterPage />,
       },
+      {
+        path: 'login',
+        element: <LoginPage />,
+      },
       {
         path: '',
         element: <Layout />,