feat: 회원가입 완료 UI 구현

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: <LoginPage />,
   },
+  {
+    path: '/signup/complete',
+    element: <SignUpCompletePage />,
+  },
+  { path: '/home', element: <></> },
   {
     path: '*',
     element: <Navigate to="/" replace />,

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 (
     <Styled.LoginPage>
       <Styled.LoginContent>
@@ -17,13 +20,21 @@ const LoginPage = () => {
               티켓을 불티나게 팔아보세요!
             </Styled.CardContentTitle>
             <Styled.LoginButtonContainer>
-              <Styled.KakaoLoginButton>
+              <Styled.KakaoLoginButton
+                onClick={() => {
+                  navigate('/signup/complete');
+                }}
+              >
                 <Styled.LoginButtonIcon>
                   <img src={kakaoIconUrl} alt="카카오톡" />
                 </Styled.LoginButtonIcon>
                 카카오톡으로 시작하기
               </Styled.KakaoLoginButton>
-              <Styled.AppleLoginButton>
+              <Styled.AppleLoginButton
+                onClick={() => {
+                  navigate('/signup/complete');
+                }}
+              >
                 <Styled.LoginButtonIcon>
                   <img src={appleIconUrl} alt="Apple" />
                 </Styled.LoginButtonIcon>

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

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 (
+    <Styled.SignUpCompletePage>
+      <Styled.SignUpCompleteContent>
+        <Styled.Card>
+          <Styled.CardContent>
+            {/* Note: 추후 이미지 교체 */}
+            <div
+              style={{
+                width: '388px',
+                height: '230px',
+                backgroundColor: '#F2F3F5',
+                marginBottom: '28px',
+              }}
+            >
+              img
+            </div>
+            <Styled.CardContentTitle>어서오세요 %사용자명%님!</Styled.CardContentTitle>
+            <Styled.CardContentDescription>
+              원활한 이용을 위해{' '}
+              <Styled.CardContentLink to="https://naver.com">
+                서비스 이용약관
+              </Styled.CardContentLink>{' '}
+              확인 후 동의해주세요.
+            </Styled.CardContentDescription>
+            <Styled.StartButton
+              onClick={() => {
+                navigate('/home');
+              }}
+            >
+              약관 동의하고 시작하기
+            </Styled.StartButton>
+          </Styled.CardContent>
+        </Styled.Card>
+        {/* Note: 추후 로고로 교체 */}
+        <p style={{ textAlign: 'center' }}>Boolti logo</p>
+      </Styled.SignUpCompleteContent>
+    </Styled.SignUpCompletePage>
+  );
+};
+
+export default SignUpCompletePage;