feat: 로그인 페이지 UI 구현

- react-router 패키지 설정 - the-new-css-reset 패키지 설정
Nexters · Jan 25, 2024 · 94d51bc · 94d51bc
1 parent 67107f3
commit 94d51bc
Show file tree

Hide file tree

Showing 13 changed files with 323 additions and 16 deletions.
diff --git a/.pnp.cjs b/.pnp.cjs
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/apps/admin/index.html b/apps/admin/index.html
@@ -1,13 +1,15 @@
 <!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
+<html lang="ko">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>불티</title>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script type="module" src="/src/main.tsx"></script>
+</body>
+
 </html>
diff --git a/apps/admin/package.json b/apps/admin/package.json
@@ -15,7 +15,9 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.21.3",
+    "the-new-css-reset": "^1.11.2"
   },
   "devDependencies": {
     "@boolti/eslint-config": "*",

diff --git a/apps/admin/public/vite.svg b/apps/admin/public/vite.svg
diff --git a/apps/admin/src/App.tsx b/apps/admin/src/App.tsx
@@ -1,11 +1,33 @@
 import { QueryClientProvider } from '@boolti/api';
+import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom';
+import ThemeProvider from './styles/ThemeProvider';
+import LoginPage from './pages/Login/LoginPage';
+import 'the-new-css-reset/css/reset.css';
+import './index.css';
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Navigate to="/login" replace />, // Note: 이후 랜딩 페이지로 교체 필요
+  },
+  {
+    path: '/login',
+    element: <LoginPage />,
+  },
+  {
+    path: '*',
+    element: <Navigate to="/" replace />,
+  },
+]);
 
 const App = () => {
   // const { data } = useHelloQuery();
   // console.log(data?.hello)
   return (
     <QueryClientProvider>
-      <h1>Hello World</h1>
+      <ThemeProvider>
+        <RouterProvider router={router} />
+      </ThemeProvider>
     </QueryClientProvider>
   );
 };

diff --git a/apps/admin/src/assets/svg/apple.svg b/apps/admin/src/assets/svg/apple.svg
diff --git a/apps/admin/src/assets/svg/kakao.svg b/apps/admin/src/assets/svg/kakao.svg
diff --git a/apps/admin/src/main.tsx b/apps/admin/src/main.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import App from './App.tsx';
+import App from './App';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>

diff --git a/apps/admin/src/pages/Login/LoginPage.styles.ts b/apps/admin/src/pages/Login/LoginPage.styles.ts
@@ -0,0 +1,119 @@
+import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
+
+const LoginPage = styled.div`
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: ${({ theme }) => theme.palette.grey.g20};
+`;
+
+const LoginContent = styled.div``;
+
+const Card = styled.div`
+  width: 600px;
+  background-color: ${({ theme }) => theme.palette.grey.w};
+  box-shadow: 0px 8px 14px 0px #8b8b8b26;
+  margin-bottom: 40px;
+  border-radius: 8px;
+`;
+
+const CardHeader = styled.div`
+  height: 64px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 1px solid ${({ theme }) => theme.palette.grey.g20};
+`;
+
+const CardHeaderTitle = styled.h2`
+  ${({ theme }) => theme.typo.h2_m};
+  color: ${({ theme }) => theme.palette.grey.g70};
+`;
+
+const CardContent = styled.div`
+  padding-top: 60px;
+  padding-bottom: 40px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+
+const CardContentTitle = styled.h3`
+  ${({ theme }) => theme.typo.h3};
+  color: ${({ theme }) => theme.palette.grey.g90};
+  text-align: center;
+  margin-bottom: 48px;
+`;
+
+const LoginButtonContainer = styled.div`
+  width: 388px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  margin-bottom: 80px;
+`;
+
+const LoginButtonIcon = styled.div`
+  position: absolute;
+  left: 24px;
+  display: inline-flex;
+  align-items: center;
+`;
+
+const KakaoLoginButton = styled.button`
+  ${({ theme }) => theme.typo.sh1};
+  color: ${({ theme }) => theme.palette.grey.g100};
+  background-color: #ffe833;
+  height: 48px;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+`;
+
+const AppleLoginButton = styled.button`
+  ${({ theme }) => theme.typo.sh1};
+  color: ${({ theme }) => theme.palette.grey.w};
+  background-color: ${({ theme }) => theme.palette.grey.g100};
+  height: 48px;
+  border-radius: 4px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+`;
+
+const BottomLinkContainer = styled.div`
+  ${({ theme }) => theme.typo.b3};
+  color: ${({ theme }) => theme.palette.grey.g70};
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  text-align: center;
+`;
+
+const BottomLink = styled(Link)`
+  cursor: pointer;
+`;
+
+export default {
+  LoginPage,
+  LoginContent,
+  Card,
+  CardHeader,
+  CardHeaderTitle,
+  CardContent,
+  CardContentTitle,
+  LoginButtonContainer,
+  LoginButtonIcon,
+  KakaoLoginButton,
+  AppleLoginButton,
+  BottomLinkContainer,
+  BottomLink,
+};
diff --git a/apps/admin/src/pages/Login/LoginPage.tsx b/apps/admin/src/pages/Login/LoginPage.tsx
@@ -0,0 +1,47 @@
+import Styled from './LoginPage.styles';
+import kakaoIconUrl from '../../assets/svg/kakao.svg';
+import appleIconUrl from '../../assets/svg/apple.svg';
+
+const LoginPage = () => {
+  return (
+    <Styled.LoginPage>
+      <Styled.LoginContent>
+        <Styled.Card>
+          <Styled.CardHeader>
+            <Styled.CardHeaderTitle>로그인</Styled.CardHeaderTitle>
+          </Styled.CardHeader>
+          <Styled.CardContent>
+            <Styled.CardContentTitle>
+              지금 불티에서
+              <br />
+              티켓을 불티나게 팔아보세요!
+            </Styled.CardContentTitle>
+            <Styled.LoginButtonContainer>
+              <Styled.KakaoLoginButton>
+                <Styled.LoginButtonIcon>
+                  <img src={kakaoIconUrl} alt="카카오톡" />
+                </Styled.LoginButtonIcon>
+                카카오톡으로 시작하기
+              </Styled.KakaoLoginButton>
+              <Styled.AppleLoginButton>
+                <Styled.LoginButtonIcon>
+                  <img src={appleIconUrl} alt="Apple" />
+                </Styled.LoginButtonIcon>
+                Apple로 시작하기
+              </Styled.AppleLoginButton>
+            </Styled.LoginButtonContainer>
+            <Styled.BottomLinkContainer>
+              {/* Note: 추후 실제 링크로 교체 */}
+              <Styled.BottomLink to="https://naver.com">개인정보 처리방침</Styled.BottomLink>
+              <Styled.BottomLink to="https://naver.com">서비스 이용약관</Styled.BottomLink>
+            </Styled.BottomLinkContainer>
+          </Styled.CardContent>
+        </Styled.Card>
+        {/* Note: 추후 로고로 교체 */}
+        <p style={{ textAlign: 'center' }}>Boolti logo</p>
+      </Styled.LoginContent>
+    </Styled.LoginPage>
+  );
+};
+
+export default LoginPage;
diff --git a/apps/admin/vite.config.ts b/apps/admin/vite.config.ts
@@ -5,7 +5,6 @@ import react from '@vitejs/plugin-react';
 export default defineConfig({
   plugins: [
     react({
-      jsxRuntime: 'classic',
       jsxImportSource: '@emotion/react',
       babel: {
         plugins: ['@emotion/babel-plugin'],