diff --git a/src/views/coupon/api/getMyCouponInfo.ts b/src/views/coupon/api/getMyCouponInfo.ts index a9faecef..b2d59a05 100644 --- a/src/views/coupon/api/getMyCouponInfo.ts +++ b/src/views/coupon/api/getMyCouponInfo.ts @@ -11,9 +11,12 @@ export const getMyCouponInfo = async ( ); return response.data; } catch (error) { - if (axios.isAxiosError(error) && error.response) { + if (axios.isAxiosError(error)) { + if (error.response?.status === 404) { + throw new Error('404'); + } throw new Error( - error.response.data.error || '내 쿠폰 정보 불러오기를 실패 했습니다.', + error.response?.data?.error || '내 쿠폰 정보 불러오기를 실패 했습니다.', ); } throw error; diff --git a/src/views/coupon/model/useGetMyCouponInfo.ts b/src/views/coupon/model/useGetMyCouponInfo.ts index bfb16b8f..69def625 100644 --- a/src/views/coupon/model/useGetMyCouponInfo.ts +++ b/src/views/coupon/model/useGetMyCouponInfo.ts @@ -1,17 +1,38 @@ -import { useQuery, UseQueryOptions } from '@tanstack/react-query'; +import { useQuery } from '@tanstack/react-query'; +import { useState } from 'react'; import { CouponInfoType } from '@/shared/types/coupon'; import minutesToMs from '@/shared/utils/minutesToms'; import { getMyCouponInfo } from '../api/getMyCouponInfo'; export const useGetMyCouponInfo = ( couponId: string, - options?: Omit, 'queryKey' | 'queryFn'>, + options?: Omit< + Parameters>[0], + 'queryKey' | 'queryFn' + >, ) => { - return useQuery({ + const [is404, setIs404] = useState(false); + + const query = useQuery({ queryKey: ['my', 'coupon', couponId], - queryFn: () => getMyCouponInfo(couponId), + queryFn: async () => { + try { + const data = await getMyCouponInfo(couponId); + return data; + } catch (err) { + if ((err as Error).message === '404') { + setIs404(true); + } + throw err; + } + }, staleTime: minutesToMs(5), gcTime: minutesToMs(5), ...options, }); + + return { + ...query, + is404, + }; }; diff --git a/src/views/coupon/ui/CouponPage/index.tsx b/src/views/coupon/ui/CouponPage/index.tsx index bf7cc871..d6e28f36 100644 --- a/src/views/coupon/ui/CouponPage/index.tsx +++ b/src/views/coupon/ui/CouponPage/index.tsx @@ -11,7 +11,7 @@ import { usePostMyCoupon } from '../../model/usePostMyCoupon'; const CouponPage = () => { const searchParams = useSearchParams(); const couponId = searchParams.get('couponId'); - const { data: couponInfo, isPending } = useGetMyCouponInfo(String(couponId), { + const { data: couponInfo, is404 } = useGetMyCouponInfo(String(couponId), { enabled: !!couponId, retry: false, }); @@ -43,10 +43,10 @@ const CouponPage = () => { }, [couponInfo]); useEffect(() => { - if (!isPending) { + if (is404 || couponInfo) { localStorage.removeItem('couponId'); } - }, [isPending]); + }, [is404, couponInfo]); useEffect(() => { if (couponData) {