feat: 리뷰 생성 결과 UI구현

Author: lgrin-byte

src/components/ReceiptResult/ReceiptResult.module.css

@@ -0,0 +1,56 @@
+.ReceiptResult {
+  padding: 1.25rem;
+  height: calc(100vh - 2.75rem);
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-bg-gradient);
+  justify-content: space-between;
+}
+.ReceiptResult::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;
+}
+
+.Top {
+  z-index: 1;
+}
+.Top .TitleBox {
+  display: flex;
+  justify-content: center;
+  margin: 1.875rem 0;
+}
+
+.Bottom {
+  align-items: center;
+  gap: 0.875rem;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 30% 1fr;
+}
+
+.ReceiptImage {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+}
+.ReceiptImage > img {
+  width: 7.5rem;
+  height: 7.5rem;
+}
+
+.IconBtn {
+  width: 98.5px;
+  margin-top: 10px;
+  margin-left: auto;
+}

src/components/ReceiptResult/ReceiptResult.module.scss

@@ -0,0 +1,59 @@
+.ReceiptResult {
+  padding: 1.25rem;
+
+  height: calc(100vh - 2.75rem);
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  background: var(--color-bg-gradient);
+  justify-content: space-between;
+  &::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;
+  }
+}
+
+.Top {
+  z-index: 1;
+
+  .TitleBox {
+    display: flex;
+    justify-content: center;
+    margin: 1.875rem 0;
+  }
+}
+
+.Bottom {
+  align-items: center;
+  gap: 0.875rem;
+  z-index: 1;
+  display: grid;
+  grid-template-columns: 30% 1fr;
+}
+
+.ReceiptImage {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1;
+
+  & > img {
+    width: 7.5rem;
+    height: 7.5rem;
+  }
+}
+
+.IconBtn {
+  width: 98.5px;
+  margin-top: 10px;
+  margin-left: auto;
+}

src/components/ReceiptResult/ReceiptResult.tsx

@@ -0,0 +1,42 @@
+import { handleConfetti } from "@/components/ReceiptResult/Confetti";
+import styles from "@/components/ReceiptResult/ReceiptResult.module.scss";
+import Button from "@/components/ui/Button/Button";
+import IconButton from "@/components/ui/IconButton/IconButton";
+import Text from "@/components/ui/Text/Text";
+
+const ReceiptResult = () => {
+  handleConfetti();
+
+  return (
+    <div className={styles.ReceiptResult}>
+      <div className={styles.Top}>
+        <div className={styles.ReceiptImage}>
+          <img src="/src/assets/img/img-grahic-receipt.png" alt="mainLogo" />
+        </div>
+        <div className={styles.TitleBox}>
+          <Text variant="titleM" color="gradient" as="h1" truncated>
+            리뷰를 만들었어요!
+          </Text>
+        </div>
+
+        <Text variant="bodyLg" color="primary">
+          오늘 처음으로 청담커피 앤 토스트에서 주문했어요.. 매장도 깔끔하고 직원들도 친절해요!
+          음료랑 토스트 세트 시켰는데 가성비가 좋네요… 맛도 좋고 양도 많아요!! 다음에도 또 시켜먹을
+          거예요.
+        </Text>
+        <div className={styles.IconBtn}>
+          <IconButton text="복사하기" iconName="paste" size="sm" />
+        </div>
+      </div>
+
+      <div className={styles.Bottom}>
+        <>
+          <Button text="다시생성" variant="secondary" />
+          <Button text="홈으로 가기" />
+        </>
+      </div>
+    </div>
+  );
+};
+
+export default ReceiptResult;

src/pages/ReceiptResultPage.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+import { handleConfetti } from "../components/ReceiptResult/Confetti";
+
+import ReceiptResult from "@/components/ReceiptResult/ReceiptResult";
+// import ArrowNavbar from "@/components/ui/ArrowNavbar/ArrowNavbar";
+
+export default function ReceiptResultPage() {
+  return (
+    <>
+      {/* <ArrowNavbar /> */}
+      <ReceiptResult />
+    </>
+  );
+}

src/router/AppRouter.tsx

@@ -4,6 +4,7 @@ import App from "@/App";
 
 import HomePage from "@/pages/HomePage";
 import ReceiptEditPage from "@/pages/ReceiptEditPage";
+import ReceiptResultPage from "@/pages/ReceiptResultPage";
 import RecognitionFailPage from "@/pages/RecognitionFailPage";
 
 const AppRouter = () => {
@@ -24,6 +25,10 @@ const AppRouter = () => {
           path: "/receipt-edit",
           element: <ReceiptEditPage />,
         },
+        {
+          path: "/receipt-result",
+          element: <ReceiptResultPage />,
+        },
       ],
     },
   ]);