diff --git a/apps/client/src/components/coffeechat/CoffeechatAcceptConfirm/index.tsx b/apps/client/src/components/coffeechat/CoffeechatAcceptConfirm/index.tsx index b56d185a..b448ea95 100644 --- a/apps/client/src/components/coffeechat/CoffeechatAcceptConfirm/index.tsx +++ b/apps/client/src/components/coffeechat/CoffeechatAcceptConfirm/index.tsx @@ -3,7 +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 { useShowConfetti } from '@/hooks/common/useShowConfetti'; import { useLogAnalyticsEvent } from '@/libs/logging'; type CoffeechatAcceptConfirmProps = { @@ -17,7 +17,7 @@ const CoffeechatAcceptConfirm = ({ }: CoffeechatAcceptConfirmProps) => { const queryClient = useQueryClient(); const { logClickEvent } = useLogAnalyticsEvent(); - const { showConfettiEffect } = useShowConfettiEffect(); + const { showConfetti } = useShowConfetti(); const { mutate: acceptCoffeechatMutate } = useAcceptCoffeechat(coffeechatId, { onSuccess: () => { logClickEvent({ @@ -28,7 +28,7 @@ const CoffeechatAcceptConfirm = ({ }); queryClient.invalidateQueries({ queryKey: [RECEIVE_COFFEE_CHAT_LIST] }); queryClient.invalidateQueries({ queryKey: [USER_QUERY_KEY] }); - showConfettiEffect(); + showConfetti(); }, }); diff --git a/apps/client/src/components/coffeechat/CoffeechatSendConfirm/index.tsx b/apps/client/src/components/coffeechat/CoffeechatSendConfirm/index.tsx index 19c9f598..c4d342b9 100644 --- a/apps/client/src/components/coffeechat/CoffeechatSendConfirm/index.tsx +++ b/apps/client/src/components/coffeechat/CoffeechatSendConfirm/index.tsx @@ -7,7 +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 { useShowConfetti } from '@/hooks/common/useShowConfetti'; import { useLogAnalyticsEvent } from '@/libs/logging'; import { useToast } from '@/libs/toast'; @@ -25,7 +25,7 @@ const CoffeechatSendConfirm = ({ const router = useRouter(); const queryClient = useQueryClient(); const { toast } = useToast(); - const { showConfettiEffect } = useShowConfettiEffect(); + const { showConfetti } = useShowConfetti(); const { logClickEvent } = useLogAnalyticsEvent(); const { register, @@ -38,7 +38,7 @@ const CoffeechatSendConfirm = ({ logClickEvent({ name: 'click_send_coffeechat', params: sendCoffeechatRequest }); queryClient.invalidateQueries({ queryKey: [SEND_COFFEE_CHAT_LIST] }); router.replace('/profile'); - showConfettiEffect(); + showConfetti(); toast.info('커피챗 요청을 보냈어요!', { action: { label: '확인하러 가기', diff --git a/apps/client/src/hooks/common/useShowConfettiEffect.ts b/apps/client/src/hooks/common/useShowConfetti.ts similarity index 65% rename from apps/client/src/hooks/common/useShowConfettiEffect.ts rename to apps/client/src/hooks/common/useShowConfetti.ts index e0bd2c99..23e4afb4 100644 --- a/apps/client/src/hooks/common/useShowConfettiEffect.ts +++ b/apps/client/src/hooks/common/useShowConfetti.ts @@ -1,14 +1,14 @@ import JSConfetti from 'js-confetti'; -export const useShowConfettiEffect = () => { +export const useShowConfetti = () => { const jsConfetti = new JSConfetti(); - const showConfettiEffect = () => { + const showConfetti = () => { jsConfetti.addConfetti({ confettiColors: ['#7046F7', '#8D6BF9', '#A990FA', '#C6B5FC'], confettiNumber: 500, }); }; - return { showConfettiEffect }; + return { showConfetti }; }; diff --git a/packages/ui/src/Portal/hooks/useDidMount.ts b/packages/ui/src/Portal/hooks/useDidMount.ts index 59fe6d3e..76a12234 100644 --- a/packages/ui/src/Portal/hooks/useDidMount.ts +++ b/packages/ui/src/Portal/hooks/useDidMount.ts @@ -5,9 +5,12 @@ export const useDidMount = (callback: EffectCallback) => { const didMountRef = useRef(false); useEffect(() => { - if (didMountRef.current) return; + if (didMountRef.current) { + return; + } didMountRef.current = true; callback(); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); }; diff --git a/packages/ui/src/Portal/index.tsx b/packages/ui/src/Portal/index.tsx index 39f79d77..e8bc7d9d 100644 --- a/packages/ui/src/Portal/index.tsx +++ b/packages/ui/src/Portal/index.tsx @@ -17,7 +17,9 @@ const Portal = ({ isOpen, children }: PortalProps) => { } }); - if (!container) return null; + if (!container) { + return null; + } return createPortal(isOpen && children, container); };