From 3698839673b38cd551c30dad213beb73e0d6fdc6 Mon Sep 17 00:00:00 2001 From: jaminleee Date: Thu, 5 Sep 2024 17:50:55 +0900 Subject: [PATCH] =?UTF-8?q?[Chore/#33]=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C=20=EB=B7=B0=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/Router.tsx | 12 +++++++- src/assets/svgs/img-complete.svg | 32 ++++++++++++++++++++++ src/components/information/Information.tsx | 3 ++ "src/pages/\bsignUp/Welcome.tsx" | 25 +++++++++++++++++ "src/pages/\bsignUp/styles.module.scss" | 25 +++++++++++++++++ 5 files changed, 96 insertions(+), 1 deletion(-) create mode 100644 src/assets/svgs/img-complete.svg create mode 100644 "src/pages/\bsignUp/Welcome.tsx" diff --git a/src/Router.tsx b/src/Router.tsx index 584cd91..4310987 100644 --- a/src/Router.tsx +++ b/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: ( }> @@ -93,6 +95,14 @@ const router = createBrowserRouter([ ), }, + { + path: 'welcome', + element: ( + }> + + + ), + }, { path: '*', element: ( diff --git a/src/assets/svgs/img-complete.svg b/src/assets/svgs/img-complete.svg new file mode 100644 index 0000000..667266e --- /dev/null +++ b/src/assets/svgs/img-complete.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/information/Information.tsx b/src/components/information/Information.tsx index 6192753..86c9d56 100644 --- a/src/components/information/Information.tsx +++ b/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(null); const [openPartIndex, setOpenPartIndex] = useState(null); const [selections, setSelections] = useState([ @@ -136,6 +138,7 @@ export default function Information() { if (validateForm()) { console.log('Form submitted'); // API 호출 + navigate('/welcome', { state: { name } }); } }; diff --git "a/src/pages/\bsignUp/Welcome.tsx" "b/src/pages/\bsignUp/Welcome.tsx" new file mode 100644 index 0000000..7f279a4 --- /dev/null +++ "b/src/pages/\bsignUp/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 ( +
+ Welcome + {name ? ( + 어서와요, {name} 미르미! + ) : ( + 어서와요, 미르미! + )} + + 구름톤 유니브에서의

특별한 성장을 응원해요! + + +
+ ); +} diff --git "a/src/pages/\bsignUp/styles.module.scss" "b/src/pages/\bsignUp/styles.module.scss" index 635dc62..517aaca 100644 --- "a/src/pages/\bsignUp/styles.module.scss" +++ "b/src/pages/\bsignUp/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); +}