From 9212e8cef348c929a0db9c3c2035479dd91efba5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=82=A8=EC=A0=95=EC=9A=B1?= <113816822+HelloWook@users.noreply.github.com> Date: Wed, 4 Dec 2024 11:38:28 +0900 Subject: [PATCH] =?UTF-8?q?feat=20:=20=ED=8E=B8=EC=A7=80=20=EC=9E=91?= =?UTF-8?q?=EC=84=B1=20=EC=8B=9C=20=ED=8F=AD=EC=A3=BD=20=ED=84=B0=ED=8A=B8?= =?UTF-8?q?=EB=A6=AC=EA=B8=B0=20(#221)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * env : canvas confetti 설치 * feat : 폭죽 애니메이션 생성 --- .pnp.cjs | 22 +++++++++++++++++++ package.json | 2 ++ .../Letter/Success/SuccessLetterPage.tsx | 16 ++++++++++++++ yarn.lock | 16 ++++++++++++++ 4 files changed, 56 insertions(+) diff --git a/.pnp.cjs b/.pnp.cjs index bfa55f6d..b1b0bb4c 100644 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -40,6 +40,7 @@ const RAW_RUNTIME_STATE = ["@tanstack/react-query", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:5.61.3"],\ ["@turf/turf", "npm:7.1.0"],\ ["@types/axios", "npm:0.14.4"],\ + ["@types/canvas-confetti", "npm:1.6.4"],\ ["@types/eslint-plugin-jsx-a11y", "npm:6.10.0"],\ ["@types/node", "npm:22.9.3"],\ ["@types/react", "npm:18.3.12"],\ @@ -52,6 +53,7 @@ const RAW_RUNTIME_STATE = ["@yarnpkg/sdks", "npm:3.2.0"],\ ["autoprefixer", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:10.4.20"],\ ["axios", "npm:1.7.7"],\ + ["canvas-confetti", "npm:1.9.3"],\ ["chromatic", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:11.18.1"],\ ["classnames", "npm:2.5.1"],\ ["eslint", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:9.15.0"],\ @@ -7171,6 +7173,15 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["@types/canvas-confetti", [\ + ["npm:1.6.4", {\ + "packageLocation": "../../../../AppData/Local/Yarn/Berry/cache/@types-canvas-confetti-npm-1.6.4-270404d6fb-10c0.zip/node_modules/@types/canvas-confetti/",\ + "packageDependencies": [\ + ["@types/canvas-confetti", "npm:1.6.4"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["@types/cookie", [\ ["npm:0.6.0", {\ "packageLocation": "../../../../AppData/Local/Yarn/Berry/cache/@types-cookie-npm-0.6.0-1f4c3f48f0-10c0.zip/node_modules/@types/cookie/",\ @@ -8856,6 +8867,15 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["canvas-confetti", [\ + ["npm:1.9.3", {\ + "packageLocation": "../../../../AppData/Local/Yarn/Berry/cache/canvas-confetti-npm-1.9.3-b7b2362f3e-10c0.zip/node_modules/canvas-confetti/",\ + "packageDependencies": [\ + ["canvas-confetti", "npm:1.9.3"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["chai", [\ ["npm:5.1.2", {\ "packageLocation": "../../../../AppData/Local/Yarn/Berry/cache/chai-npm-5.1.2-6b92587dbf-10c0.zip/node_modules/chai/",\ @@ -16681,6 +16701,7 @@ const RAW_RUNTIME_STATE = ["@tanstack/react-query", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:5.61.3"],\ ["@turf/turf", "npm:7.1.0"],\ ["@types/axios", "npm:0.14.4"],\ + ["@types/canvas-confetti", "npm:1.6.4"],\ ["@types/eslint-plugin-jsx-a11y", "npm:6.10.0"],\ ["@types/node", "npm:22.9.3"],\ ["@types/react", "npm:18.3.12"],\ @@ -16693,6 +16714,7 @@ const RAW_RUNTIME_STATE = ["@yarnpkg/sdks", "npm:3.2.0"],\ ["autoprefixer", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:10.4.20"],\ ["axios", "npm:1.7.7"],\ + ["canvas-confetti", "npm:1.9.3"],\ ["chromatic", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:11.18.1"],\ ["classnames", "npm:2.5.1"],\ ["eslint", "virtual:36c06c4e37fdf793891feac58570500604df33eee2d8c2eaa4782293cabbc727cc7bc1fdcc74ec32f218adfc0c394cc8a6d0f0708e0e7af7878a387954da3af7#npm:9.15.0"],\ diff --git a/package.json b/package.json index 556d0e42..a29fe546 100644 --- a/package.json +++ b/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", diff --git a/src/pages/Letter/Success/SuccessLetterPage.tsx b/src/pages/Letter/Success/SuccessLetterPage.tsx index 19ddad6e..2fe13d3f 100644 --- a/src/pages/Letter/Success/SuccessLetterPage.tsx +++ b/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 (
diff --git a/yarn.lock b/yarn.lock index 535e0879..8be9abd4 100644 --- a/yarn.lock +++ b/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"