diff --git a/public/assets/img/img-loading.webp b/public/assets/img/img-loading.webp new file mode 100644 index 0000000..adaf722 Binary files /dev/null and b/public/assets/img/img-loading.webp differ diff --git a/src/pages/CreateReviewLoadingPage/CreateReviewLoadingPage.module.scss b/src/pages/CreateReviewLoadingPage/CreateReviewLoadingPage.module.scss new file mode 100644 index 0000000..ecc0349 --- /dev/null +++ b/src/pages/CreateReviewLoadingPage/CreateReviewLoadingPage.module.scss @@ -0,0 +1,45 @@ +.CreateReviewLoading { + padding-left: 1.25rem; + padding-right: 1.25rem; + padding-bottom: 2.5rem; + height: 100vh; + overflow: hidden; + background: var(--color-bg-gradient); + display: flex; + flex-direction: column; + + &::before { + content: ""; + background: url("/src/assets/svg/img-graphic-main.svg") center no-repeat; + background-size: 100% 16.375rem; + filter: blur(4.625rem); + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 0; + } +} + +.Title { + margin-top: 7.5rem; + z-index: 1; + + & > h2 { + margin-top: 0.625rem; + } +} + +.Image { + display: flex; + justify-content: center; + align-items: center; + margin-top: 6.25rem; + z-index: 1; + + & > img { + width: 13.125rem; + height: 13.125rem; + } +} diff --git a/src/pages/CreateReviewLoadingPage/CreateReviewLoadingPage.tsx b/src/pages/CreateReviewLoadingPage/CreateReviewLoadingPage.tsx new file mode 100644 index 0000000..7b121b3 --- /dev/null +++ b/src/pages/CreateReviewLoadingPage/CreateReviewLoadingPage.tsx @@ -0,0 +1,24 @@ +import Text from "@/components/ui/Text/Text"; + +import styles from "@/pages/CreateReviewLoadingPage/CreateReviewLoadingPage.module.scss"; + +const CreateReviewLoadingPage = () => { + return ( +
+
+ + 리뷰를 만들고 있어요 + + + 최대 30초까지 소요될 수 있어요 + +
+ +
+ createReviewImg +
+
+ ); +}; + +export default CreateReviewLoadingPage; diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx index db2dccc..5e6781b 100644 --- a/src/router/AppRouter.tsx +++ b/src/router/AppRouter.tsx @@ -2,6 +2,7 @@ import { RouterProvider, createBrowserRouter } from "react-router-dom"; import App from "@/App"; +import CreateReviewLoadingPage from "@/pages/CreateReviewLoadingPage/CreateReviewLoadingPage"; import HomePage from "@/pages/HomePage"; import ReceiptEditPage from "@/pages/ReceiptEditPage"; import RecognitionFailPage from "@/pages/RecognitionFailPage"; @@ -34,6 +35,10 @@ const AppRouter = () => { path: "/select-style", element: , }, + { + path: "/create-review-loading", + element: , + }, ], }, ]);