diff --git a/apps/admin/src/App.tsx b/apps/admin/src/App.tsx index 831a8292..40c6d13b 100644 --- a/apps/admin/src/App.tsx +++ b/apps/admin/src/App.tsx @@ -2,6 +2,7 @@ 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 SignUpCompletePage from './pages/SignUpComplete/SignUpCompletePage'; import 'the-new-css-reset/css/reset.css'; import './index.css'; @@ -14,6 +15,11 @@ const router = createBrowserRouter([ path: '/login', element: , }, + { + path: '/signup/complete', + element: , + }, + { path: '/home', element: <> }, { path: '*', element: , diff --git a/apps/admin/src/pages/Login/LoginPage.tsx b/apps/admin/src/pages/Login/LoginPage.tsx index 4039708b..db3ae5a3 100644 --- a/apps/admin/src/pages/Login/LoginPage.tsx +++ b/apps/admin/src/pages/Login/LoginPage.tsx @@ -1,8 +1,11 @@ import Styled from './LoginPage.styles'; import kakaoIconUrl from '../../assets/svg/kakao.svg'; import appleIconUrl from '../../assets/svg/apple.svg'; +import { useNavigate } from 'react-router-dom'; const LoginPage = () => { + const navigate = useNavigate(); + return ( @@ -17,13 +20,21 @@ const LoginPage = () => { 티켓을 불티나게 팔아보세요! - + { + navigate('/signup/complete'); + }} + > 카카오톡 카카오톡으로 시작하기 - + { + navigate('/signup/complete'); + }} + > Apple diff --git a/apps/admin/src/pages/SignUpComplete/SignUpCompletePage.styles.ts b/apps/admin/src/pages/SignUpComplete/SignUpCompletePage.styles.ts new file mode 100644 index 00000000..5af028e3 --- /dev/null +++ b/apps/admin/src/pages/SignUpComplete/SignUpCompletePage.styles.ts @@ -0,0 +1,72 @@ +import styled from '@emotion/styled'; +import { Link } from 'react-router-dom'; + +const SignUpCompletePage = styled.div` + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-color: ${({ theme }) => theme.palette.grey.g20}; +`; + +const SignUpCompleteContent = 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 CardContent = styled.div` + padding: 60px 0; + 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: 4px; +`; + +const CardContentDescription = styled.p` + ${({ theme }) => theme.typo.b3}; + color: ${({ theme }) => theme.palette.grey.g70}; + margin-bottom: 40px; +`; + +const CardContentLink = styled(Link)` + ${({ theme }) => theme.typo.b3}; + color: ${({ theme }) => theme.palette.grey.g70}; + font-weight: 600; + text-decoration: underline; + margin-bottom: 40px; +`; + +const StartButton = styled.button` + width: 388px; + height: 48px; + display: inline-flex; + justify-content: center; + align-items: center; + background-color: ${({ theme }) => theme.palette.primary.o1}; + color: ${({ theme }) => theme.palette.grey.w}; + border-radius: 4px; + cursor: pointer; +`; + +export default { + SignUpCompletePage, + SignUpCompleteContent, + Card, + CardContent, + CardContentTitle, + CardContentDescription, + CardContentLink, + StartButton, +}; diff --git a/apps/admin/src/pages/SignUpComplete/SignUpCompletePage.tsx b/apps/admin/src/pages/SignUpComplete/SignUpCompletePage.tsx new file mode 100644 index 00000000..9a70b18d --- /dev/null +++ b/apps/admin/src/pages/SignUpComplete/SignUpCompletePage.tsx @@ -0,0 +1,47 @@ +import { useNavigate } from 'react-router-dom'; +import Styled from './SignUpCompletePage.styles'; + +const SignUpCompletePage = () => { + const navigate = useNavigate(); + + return ( + + + + + {/* Note: 추후 이미지 교체 */} +
+ img +
+ 어서오세요 %사용자명%님! + + 원활한 이용을 위해{' '} + + 서비스 이용약관 + {' '} + 확인 후 동의해주세요. + + { + navigate('/home'); + }} + > + 약관 동의하고 시작하기 + +
+
+ {/* Note: 추후 로고로 교체 */} +

Boolti logo

+
+
+ ); +}; + +export default SignUpCompletePage;