SKRF-111 design: Login Page 디자인

package.json

@@ -16,6 +16,7 @@
   "dependencies": {
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@tanstack/react-query": "^4.36.1",
     "axios": "^1.5.1",
     "react": "^18.2.0",

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,69 @@
+import styled from '@emotion/styled';
+
+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: #ffffff;
+  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 as ContainerStyled,
+  LogoAreaStyled,
+  LogoCircleStyled,
+  LogoTextStyled,
+  LoginAreaStyled,
+  TitleStyled,
+};

src/pages/LoginPage/LoginPage.tsx

@@ -0,0 +1,28 @@
+import { LogoText, Message } from '@/constants/LoginPage';
+
+import {
+  ContainerStyled,
+  LoginAreaStyled,
+  LogoAreaStyled,
+  LogoCircleStyled,
+  LogoTextStyled,
+  TitleStyled,
+} from './LoginPage.style';
+
+const LoginPage = () => {
+  return (
+    <ContainerStyled>
+      <LogoAreaStyled>
+        <LogoCircleStyled>
+          <LogoTextStyled>{LogoText.SPACE_CLUB}</LogoTextStyled>
+        </LogoCircleStyled>
+      </LogoAreaStyled>
+      <LoginAreaStyled>
+        <TitleStyled>{Message.WELCOME}</TitleStyled>
+        <button>Login with Kakao</button>
+      </LoginAreaStyled>
+    </ContainerStyled>
+  );
+};
+
+export default LoginPage;

src/pages/MainPage.tsx

@@ -1,7 +1,13 @@
 import React from 'react';
 
+import LoginPage from './LoginPage/LoginPage';
+
 const MainPage = () => {
-  return <div>main</div>;
+  return (
+    <div>
+      <LoginPage />
+    </div>
+  );
 };
 
 export default MainPage;

src/pages/RegisterPage.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 const RegisterPage = () => {
-  return <div></div>;
+  return <div>register</div>;
 };
 
 export default RegisterPage;

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