SKRF-111 design: Login Page 디자인 (#10)

* design: Login Page 디자인

* refactor: 코드리뷰 반영

* refactor: 코드리뷰 반영

src/constants/LoginPage.ts

@@ -0,0 +1,9 @@
+const LogoText = {
+  SPACE_CLUB: 'Space Club',
+};
+
+const Message = {
+  WELCOME: '스페이스 클럽에 오신 걸 환영합니다!',
+};
+
+export { LogoText, Message };

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,
+};

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;

src/pages/MainPage.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 const MainPage = () => {
   return <div>main</div>;
 };

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 />,