feat: 리뷰 생성 로딩 UI 제작

Author: sikkzz

public/assets/img/img-loading.webp

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

src/pages/CreateReviewLoadingPage/CreateReviewLoadingPage.module.scss

@@ -0,0 +1,24 @@
+import Text from "@/components/ui/Text/Text";
+
+import styles from "@/pages/CreateReviewLoadingPage/CreateReviewLoadingPage.module.scss";
+
+const CreateReviewLoadingPage = () => {
+  return (
+    <div className={styles.CreateReviewLoading}>
+      <div className={styles.Title}>
+        <Text variant="titleM" color="gradient" align="center" as="h1">
+          리뷰를 만들고 있어요
+        </Text>
+        <Text variant="bodyLg" color="secondary" align="center" as="h2">
+          최대 30초까지 소요될 수 있어요
+        </Text>
+      </div>
+
+      <div className={styles.Image}>
+        <img src="/assets/img/img-loading.webp" alt="createReviewImg" />
+      </div>
+    </div>
+  );
+};
+
+export default CreateReviewLoadingPage;

src/pages/CreateReviewLoadingPage/CreateReviewLoadingPage.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: <SelectStylePage />,
         },
+        {
+          path: "/create-review-loading",
+          element: <CreateReviewLoadingPage />,
+        },
       ],
     },
   ]);