From 4b602d74c002ca2a2ae6fe03397a49086530710c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=84=9D=EC=A7=84=28maru=29?= <102217654+SEOKKAMONI@users.noreply.github.com> Date: Wed, 1 May 2024 11:17:54 +0900 Subject: [PATCH] =?UTF-8?q?feat(client):=20=EC=BB=A4=ED=94=BC=EC=B1=97=20?= =?UTF-8?q?=EC=9A=94=EC=B2=AD,=20=EC=88=98=EB=9D=BD=EC=8B=9C=20=EC=BD=98?= =?UTF-8?q?=ED=8E=98=ED=8B=B0=20=EC=9D=B4=ED=8E=99=ED=8A=B8=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80=20(#390)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/client/package.json | 1 + .../coffeechat/CoffeechatAcceptConfirm/index.tsx | 4 +++- .../coffeechat/CoffeechatSendConfirm/index.tsx | 3 +++ .../src/hooks/common/useShowConfettiEffect.ts | 14 ++++++++++++++ pnpm-lock.yaml | 7 +++++++ 5 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 apps/client/src/hooks/common/useShowConfettiEffect.ts diff --git a/apps/client/package.json b/apps/client/package.json index 6bbe19ce..4c649767 100644 --- a/apps/client/package.json +++ b/apps/client/package.json @@ -23,6 +23,7 @@ "axios": "^1.6.0", "framer-motion": "^10.16.4", "jotai": "^2.6.0", + "js-confetti": "^0.12.0", "lodash": "^4.17.21", "next": "14.0.2", "react": "^18.2.0", diff --git a/apps/client/src/components/coffeechat/CoffeechatAcceptConfirm/index.tsx b/apps/client/src/components/coffeechat/CoffeechatAcceptConfirm/index.tsx index 2606000a..b56d185a 100644 --- a/apps/client/src/components/coffeechat/CoffeechatAcceptConfirm/index.tsx +++ b/apps/client/src/components/coffeechat/CoffeechatAcceptConfirm/index.tsx @@ -3,6 +3,7 @@ import { useQueryClient } from '@tanstack/react-query'; import { useAcceptCoffeechat } from '@/hooks/api/coffeechat/useAcceptCoffeechat'; import { RECEIVE_COFFEE_CHAT_LIST } from '@/hooks/api/coffeechat/useGetReceiveCoffeechatList'; import { USER_QUERY_KEY } from '@/hooks/api/user/useGetUser'; +import { useShowConfettiEffect } from '@/hooks/common/useShowConfettiEffect'; import { useLogAnalyticsEvent } from '@/libs/logging'; type CoffeechatAcceptConfirmProps = { @@ -16,7 +17,7 @@ const CoffeechatAcceptConfirm = ({ }: CoffeechatAcceptConfirmProps) => { const queryClient = useQueryClient(); const { logClickEvent } = useLogAnalyticsEvent(); - + const { showConfettiEffect } = useShowConfettiEffect(); const { mutate: acceptCoffeechatMutate } = useAcceptCoffeechat(coffeechatId, { onSuccess: () => { logClickEvent({ @@ -27,6 +28,7 @@ const CoffeechatAcceptConfirm = ({ }); queryClient.invalidateQueries({ queryKey: [RECEIVE_COFFEE_CHAT_LIST] }); queryClient.invalidateQueries({ queryKey: [USER_QUERY_KEY] }); + showConfettiEffect(); }, }); diff --git a/apps/client/src/components/coffeechat/CoffeechatSendConfirm/index.tsx b/apps/client/src/components/coffeechat/CoffeechatSendConfirm/index.tsx index 4d3c4f4d..19c9f598 100644 --- a/apps/client/src/components/coffeechat/CoffeechatSendConfirm/index.tsx +++ b/apps/client/src/components/coffeechat/CoffeechatSendConfirm/index.tsx @@ -7,6 +7,7 @@ import { useForm } from 'react-hook-form'; import { SEND_COFFEE_CHAT_LIST } from '@/hooks/api/coffeechat/useGetSendCoffeechatList'; import { useSendCoffeechat } from '@/hooks/api/coffeechat/useSendCoffeechat'; import type { SendCoffeechatRequest } from '@/hooks/api/coffeechat/useSendCoffeechat'; +import { useShowConfettiEffect } from '@/hooks/common/useShowConfettiEffect'; import { useLogAnalyticsEvent } from '@/libs/logging'; import { useToast } from '@/libs/toast'; @@ -24,6 +25,7 @@ const CoffeechatSendConfirm = ({ const router = useRouter(); const queryClient = useQueryClient(); const { toast } = useToast(); + const { showConfettiEffect } = useShowConfettiEffect(); const { logClickEvent } = useLogAnalyticsEvent(); const { register, @@ -36,6 +38,7 @@ const CoffeechatSendConfirm = ({ logClickEvent({ name: 'click_send_coffeechat', params: sendCoffeechatRequest }); queryClient.invalidateQueries({ queryKey: [SEND_COFFEE_CHAT_LIST] }); router.replace('/profile'); + showConfettiEffect(); toast.info('커피챗 요청을 보냈어요!', { action: { label: '확인하러 가기', diff --git a/apps/client/src/hooks/common/useShowConfettiEffect.ts b/apps/client/src/hooks/common/useShowConfettiEffect.ts new file mode 100644 index 00000000..e0bd2c99 --- /dev/null +++ b/apps/client/src/hooks/common/useShowConfettiEffect.ts @@ -0,0 +1,14 @@ +import JSConfetti from 'js-confetti'; + +export const useShowConfettiEffect = () => { + const jsConfetti = new JSConfetti(); + + const showConfettiEffect = () => { + jsConfetti.addConfetti({ + confettiColors: ['#7046F7', '#8D6BF9', '#A990FA', '#C6B5FC'], + confettiNumber: 500, + }); + }; + + return { showConfettiEffect }; +}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 90a8355f..a4d21331 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -86,6 +86,9 @@ importers: jotai: specifier: ^2.6.0 version: 2.6.0(@types/react@18.2.79)(react@18.2.0) + js-confetti: + specifier: ^0.12.0 + version: 0.12.0 lodash: specifier: ^4.17.21 version: 4.17.21 @@ -10762,6 +10765,10 @@ packages: react: 18.2.0 dev: false + /js-confetti@0.12.0: + resolution: {integrity: sha512-1R0Akxn3Zn82pMqW65N1V2NwKkZJ75bvBN/VAb36Ya0YHwbaSiAJZVRr/19HBxH/O8x2x01UFAbYI18VqlDN6g==} + dev: false + /js-tokens@4.0.0: resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}