[Feat/#38] 리뷰생성완료 화면 UI 제작

package.json

@@ -19,6 +19,7 @@
     "@radix-ui/react-dialog": "^1.1.5",
     "@radix-ui/react-visually-hidden": "^1.1.1",
     "@tanstack/react-query": "^5.64.2",
+    "canvas-confetti": "^1.9.3",
     "classnames": "^2.5.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -38,6 +39,7 @@
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^16.2.0",
+    "@types/canvas-confetti": "^1",
     "@types/jest": "^29.5.14",
     "@types/node": "^22.10.7",
     "@types/react": "^18.3.18",

src/components/Home/Home.tsx

@@ -1,13 +1,8 @@
 import styles from "@/components/Home/Home.module.scss";
-import HomeNavigateConfirmModal from "@/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal";
 import IconButton from "@/components/ui/IconButton/IconButton";
 import Text from "@/components/ui/Text/Text";
 
-import { useOverlay } from "@/hooks/common/useOverlay";
-
 const Home = () => {
-  const { isOpen, handleClose, handleOpen } = useOverlay();
-
   return (
     <div className={styles.Home}>
       <div className={styles.HomeTitle}>
@@ -22,11 +17,9 @@ const Home = () => {
         <img src="/assets/img/img-graphic-logo.png" alt="mainLogo" />
       </div>
       <div className={styles.HomeBottom}>
-        <IconButton text="갤러리" iconName="gallery" onClick={handleOpen} />
+        <IconButton text="갤러리" iconName="gallery" />
         <IconButton text="카메라" iconName="camera" />
       </div>
-
-      <HomeNavigateConfirmModal isOpen={isOpen} handleClose={handleClose} />
     </div>
   );
 };

src/components/ReceiptResult/ReceiptResult.module.scss

@@ -0,0 +1,60 @@
+.ReceiptResult {
+  padding: 1.25rem;
+  padding-bottom: 2.5rem;
+  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: 6.15625rem;
+  margin-top: 0.625rem;
+  margin-left: auto;
+}

src/components/ReceiptResult/ReceiptResult.tsx

@@ -0,0 +1,67 @@
+import { useEffect } from "react";
+
+import confetti from "canvas-confetti";
+
+import HomeNavigateConfirmModal from "@/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal";
+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";
+
+import { useOverlay } from "@/hooks/common/useOverlay";
+
+import type { Options as ConfettiOptions } from "canvas-confetti";
+
+const ReceiptResult = () => {
+  const { isOpen, handleClose, handleOpen } = useOverlay();
+
+  const handleConfetti = () => {
+    const setting: ConfettiOptions = {
+      particleCount: 100,
+      spread: 100,
+      origin: { y: 0.2 },
+      colors: ["#f4abfe", "#cd90f2", "#eff0ff", "#6f91ff"],
+      ticks: 50,
+    };
+
+    confetti({
+      ...setting,
+    });
+  };
+
+  useEffect(() => {
+    handleConfetti();
+  }, []);
+
+  return (
+    <div className={styles.ReceiptResult}>
+      <div className={styles.Top}>
+        <div className={styles.ReceiptImage}>
+          <img src="/assets/img/img-style-cute-circle.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="홈으로 가기" onClick={handleOpen} />
+      </div>
+
+      <HomeNavigateConfirmModal isOpen={isOpen} handleClose={handleClose} />
+    </div>
+  );
+};
+
+export default ReceiptResult;

src/pages/ReceiptResultPage.tsx

@@ -0,0 +1,16 @@
+import Navbar from "@/components/common/Navbar/Navbar";
+import ReceiptResult from "@/components/ReceiptResult/ReceiptResult";
+import Icon from "@/components/ui/Icon/Icon";
+
+export default function ReceiptResultPage() {
+  return (
+    <>
+      <Navbar>
+        <Navbar.LeftButton>
+          <Icon name="leftArrow" />
+        </Navbar.LeftButton>
+      </Navbar>
+      <ReceiptResult />
+    </>
+  );
+}

src/router/AppRouter.tsx

@@ -5,6 +5,7 @@ import App from "@/App";
 import CreateReviewLoadingPage from "@/pages/CreateReviewLoadingPage/CreateReviewLoadingPage";
 import HomePage from "@/pages/HomePage";
 import ReceiptEditPage from "@/pages/ReceiptEditPage";
+import ReceiptResultPage from "@/pages/ReceiptResultPage";
 import RecognitionFailPage from "@/pages/RecognitionFailPage";
 import SelectStylePage from "@/pages/SelectStylePage";
 import SelectTagPage from "@/pages/SelectTagPage";
@@ -39,6 +40,10 @@ const AppRouter = () => {
           path: "/create-review-loading",
           element: <CreateReviewLoadingPage />,
         },
+        {
+          path: "/receipt-result",
+          element: <ReceiptResultPage />,
+        },
       ],
     },
   ]);

yarn.lock

@@ -2741,6 +2741,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/canvas-confetti@npm:^1":
+  version: 1.9.0
+  resolution: "@types/canvas-confetti@npm:1.9.0"
+  checksum: 10c0/ffe2c674d466b8e13472c81ab2a97056f3433fd40a3513dbc1bb76764e4e7c3ff0a2a58d37b16ea6a245c831077c553db321b069dda6572eab59f2be61137b2e
+  languageName: node
+  linkType: hard
+
 "@types/conventional-commits-parser@npm:^5.0.0":
   version: 5.0.1
   resolution: "@types/conventional-commits-parser@npm:5.0.1"
@@ -3866,6 +3873,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"canvas-confetti@npm:^1.9.3":
+  version: 1.9.3
+  resolution: "canvas-confetti@npm:1.9.3"
+  checksum: 10c0/94c6f16591660d5ed4a48afb8da65902826ce6b38edc7644d62521aa9bf9ef5b950aa4396e980e7fe0a38e5f41a991a6d984721412a54c9fba4de3682c1eead0
+  languageName: node
+  linkType: hard
+
 "caseless@npm:~0.12.0":
   version: 0.12.0
   resolution: "caseless@npm:0.12.0"
@@ -8115,13 +8129,15 @@ __metadata:
     "@testing-library/dom": "npm:^10.4.0"
     "@testing-library/jest-dom": "npm:^6.1.3"
     "@testing-library/react": "npm:^16.2.0"
+    "@types/canvas-confetti": "npm:^1"
     "@types/jest": "npm:^29.5.14"
     "@types/node": "npm:^22.10.7"
     "@types/react": "npm:^18.3.18"
     "@types/react-dom": "npm:^18.3.5"
     "@typescript-eslint/eslint-plugin": "npm:^8.20.0"
     "@typescript-eslint/parser": "npm:^8.20.0"
     "@vitejs/plugin-react": "npm:^4.3.4"
+    canvas-confetti: "npm:^1.9.3"
     chromatic: "npm:^11.25.1"
     classnames: "npm:^2.5.1"
     cypress: "npm:^14.0.0"