feat: confetti 추가

package.json

@@ -19,6 +19,7 @@
     "@tanstack/react-query": "^5.64.2",
     "classnames": "^2.5.1",
     "react": "^18.3.1",
+    "react-canvas-confetti": "^2.0.7",
     "react-dom": "^18.3.1",
     "react-router-dom": "^7.1.3"
   },

src/components/ReceiptResult/Confetti.tsx

@@ -0,0 +1,17 @@
+import confetti from "canvas-confetti";
+
+import type { Options as ConfettiOptions } from "canvas-confetti";
+
+export const handleConfetti = () => {
+  const setting: ConfettiOptions = {
+    particleCount: 100,
+    spread: 100,
+    origin: { y: 0.2 },
+    colors: ["#f4abfe", "#cd90f2", "#eff0ff", "#6f91ff"],
+    ticks: 50,
+  };
+
+  confetti({
+    ...setting,
+  });
+};

src/pages/ReceiptResultPage.tsx

@@ -1,7 +1,3 @@
-import React from "react";
-
-import { handleConfetti } from "../components/ReceiptResult/Confetti";
-
 import ReceiptResult from "@/components/ReceiptResult/ReceiptResult";
 // import ArrowNavbar from "@/components/ui/ArrowNavbar/ArrowNavbar";
 

src/types/canvas-confetti.d.ts

@@ -0,0 +1,22 @@
+declare module "canvas-confetti" {
+  export interface Options {
+    particleCount?: number;
+    angle?: number;
+    spread?: number;
+    startVelocity?: number;
+    decay?: number;
+    gravity?: number;
+    drift?: number;
+    ticks?: number;
+    origin?: {
+      x?: number;
+      y?: number;
+    };
+    colors?: string[];
+    shapes?: Array<"square" | "circle">;
+    scalar?: number;
+    zIndex?: number;
+  }
+
+  export default function confetti(options?: Options): Promise<null>;
+}

yarn.lock

@@ -2455,6 +2455,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/canvas-confetti@npm:^1.6.4":
+  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"
@@ -3571,6 +3578,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"canvas-confetti@npm:^1.9.2":
+  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"
@@ -7826,6 +7840,7 @@ __metadata:
     lint-staged: "npm:^15.4.1"
     prettier: "npm:^3.4.2"
     react: "npm:^18.3.1"
+    react-canvas-confetti: "npm:^2.0.7"
     react-dom: "npm:^18.3.1"
     react-router-dom: "npm:^7.1.3"
     sass: "npm:^1.83.4"
@@ -8642,6 +8657,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-canvas-confetti@npm:^2.0.7":
+  version: 2.0.7
+  resolution: "react-canvas-confetti@npm:2.0.7"
+  dependencies:
+    "@types/canvas-confetti": "npm:^1.6.4"
+    canvas-confetti: "npm:^1.9.2"
+  peerDependencies:
+    react: "*"
+  checksum: 10c0/709a0f3c41748018e4c128f2c60db1360b8c5d973d7532d99554adf7bd4b3b377d271b4feab4f7cd9018c9e7baf54138fc324fa1cca2322b89e2d2784f2b06be
+  languageName: node
+  linkType: hard
+
 "react-docgen-typescript@npm:^2.2.2":
   version: 2.2.2
   resolution: "react-docgen-typescript@npm:2.2.2"