[Chore/#33] 로그인 완료 뷰 구현

src/Router.tsx

@@ -3,6 +3,7 @@ import { GoormLoader } from '@goorm-dev/gds-components';
 import { Suspense, lazy } from 'react';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 import Layout from './components/layout/Layout';
+import Welcome from './pages/\bsignUp/Welcome';
 
 // 레이지 로딩 적용
 const About = lazy(() => import('./pages/about/About'));
@@ -14,6 +15,7 @@ const SignUp = lazy(() => import('./pages/signUp/SignUp'));
 const Information = lazy(() => import('./pages/information/Information'));
 const MyPage = lazy(() => import('./pages/myPage/MyPage'));
 const UpdatePW = lazy(() => import('./pages/updatePW/UpdatePW'));
+const welcome = lazy(() => import('./pages/signUp/Welcome'));
 
 // GoormLoader 컴포넌트에 전달할 props 설정
 const loaderProps = {
@@ -78,7 +80,7 @@ const router = createBrowserRouter([
         ),
       },
       {
-        path: 'my-page',
+        path: 'mypage',
         element: (
           <Suspense fallback={<GoormLoader {...loaderProps} />}>
             <MyPage />
@@ -93,6 +95,14 @@ const router = createBrowserRouter([
           </Suspense>
         ),
       },
+      {
+        path: 'welcome',
+        element: (
+          <Suspense fallback={<GoormLoader {...loaderProps} />}>
+            <Welcome />
+          </Suspense>
+        ),
+      },
       {
         path: '*',
         element: (

src/components/information/Information.tsx

@@ -1,3 +1,4 @@
+import { useNavigate } from 'react-router-dom';
 import { BackPageIcon, PlusIcon, WarningIcon } from '@goorm-dev/gds-icons';
 import {
   Alert,
@@ -24,6 +25,7 @@ interface SeasonPartSelection {
 }
 
 export default function Information() {
+  const navigate = useNavigate();
   const [openSeasonIndex, setOpenSeasonIndex] = useState<number | null>(null);
   const [openPartIndex, setOpenPartIndex] = useState<number | null>(null);
   const [selections, setSelections] = useState<SeasonPartSelection[]>([
@@ -136,6 +138,7 @@ export default function Information() {
     if (validateForm()) {
       console.log('Form submitted');
       // API 호출
+      navigate('/welcome', { state: { name } });
     }
   };
 

src/pages/signUp/Welcome.tsx

@@ -0,0 +1,25 @@
+import { useLocation } from 'react-router-dom';
+import styles from './styles.module.scss';
+import completeImg from '../../assets/svgs/img-complete.svg';
+import { Button, Text } from '@goorm-dev/vapor-components';
+
+export default function Welcome() {
+  const location = useLocation();
+  const { name } = location.state || {};
+  return (
+    <div className={styles.welcomeContainer}>
+      <img className={styles.welcomeImg} src={completeImg} alt="Welcome" />
+      {name ? (
+        <Text typography="heading2">어서와요, {name} 미르미!</Text>
+      ) : (
+        <Text typography="heading2">어서와요, 미르미!</Text>
+      )}
+      <Text className={styles.welcomeText} color="gray-800">
+        구름톤 유니브에서의<br></br>특별한 성장을 응원해요!
+      </Text>
+      <Button className={styles.mainBtn} size="lg">
+        메인으로
+      </Button>
+    </div>
+  );
+}

src/pages/signUp/styles.module.scss

@@ -2,3 +2,28 @@
   margin-top: 9rem;
   margin-bottom: 6rem;
 }
+
+.welcomeContainer {
+  margin-top: 9rem;
+  margin-bottom: 6rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+
+.welcomeImg {
+  margin-bottom: var(--space-200);
+
+  width: 20rem;
+  height: 15rem;
+}
+
+.welcomeText {
+  font-size: 1rem;
+  margin-top: var(--space-100);
+}
+
+.mainBtn {
+  margin-top: var(--space-300);
+}