feat(client): 커피챗 요청, 수락시 콘페티 이펙트 추가 (#390)

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",

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();
     },
   });
 

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: '확인하러 가기',

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 };
+};