feat : 편지 작성 시 폭죽 터트리기 (#221)

* env : canvas confetti 설치

* feat : 폭죽 애니메이션 생성

package.json

@@ -19,6 +19,7 @@
         "@tanstack/react-query": "^5.60.2",
         "@turf/turf": "^7.1.0",
         "axios": "^1.7.7",
+        "canvas-confetti": "^1.9.3",
         "classnames": "^2.5.1",
         "maplibre-gl": "^4.7.1",
         "postcss-custom-properties-fallback": "^1.0.2",
@@ -48,6 +49,7 @@
         "@storybook/react-vite": "8.4.4",
         "@storybook/test": "8.4.4",
         "@types/axios": "^0.14.4",
+        "@types/canvas-confetti": "^1",
         "@types/eslint-plugin-jsx-a11y": "^6",
         "@types/node": "^22.9.1",
         "@types/react": "^18.3.12",

src/pages/Letter/Success/SuccessLetterPage.tsx

@@ -1,5 +1,6 @@
 import { CreateButton } from '@/components/Letter/CreateButton/CreateButton';
 import { SuccessModal } from '@/components/Letter/SuccessModal/SuccessModal';
+import confetti from 'canvas-confetti';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
@@ -9,6 +10,21 @@ export const SuccessLetterPage = () => {
     const handleClick = () => {
         navigate('/');
     };
+
+    confetti({
+        angle: 130,
+        particleCount: 50,
+        spread: 50,
+        origin: { x: 0.5, y: 0.7 }
+    });
+
+    confetti({
+        angle: 50,
+        particleCount: 50,
+        spread: 50,
+        origin: { x: 0.5, y: 0.7 }
+    });
+
     return (
         <div className="relative flex flex-col justify-between h-screen">
             <div className="absolute inset-0 flex items-center justify-center">

yarn.lock

@@ -4943,6 +4943,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/canvas-confetti@npm:^1":
+  version: 1.6.4
+  resolution: "@types/canvas-confetti@npm:1.6.4"
+  checksum: 10c0/4a821690f0b9cdd81b0d02c0946c5b4e9e80f189e868fd8a159884d5eb9da0bdf0bfc380a61c971cc5d7b9ca2521625d46bcb5e4653988375118f57523ebe5a4
+  languageName: node
+  linkType: hard
+
 "@types/cookie@npm:^0.6.0":
   version: 0.6.0
   resolution: "@types/cookie@npm:0.6.0"
@@ -6278,6 +6285,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
+
 "chai@npm:^5.1.1":
   version: 5.1.2
   resolution: "chai@npm:5.1.2"
@@ -12955,6 +12969,7 @@ __metadata:
     "@tanstack/react-query": "npm:^5.60.2"
     "@turf/turf": "npm:^7.1.0"
     "@types/axios": "npm:^0.14.4"
+    "@types/canvas-confetti": "npm:^1"
     "@types/eslint-plugin-jsx-a11y": "npm:^6"
     "@types/node": "npm:^22.9.1"
     "@types/react": "npm:^18.3.12"
@@ -12967,6 +12982,7 @@ __metadata:
     "@yarnpkg/sdks": "npm:^3.2.0"
     autoprefixer: "npm:^10.4.20"
     axios: "npm:^1.7.7"
+    canvas-confetti: "npm:^1.9.3"
     chromatic: "npm:^11.18.1"
     classnames: "npm:^2.5.1"
     eslint: "npm:^9.15.0"