main 최신화

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;

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<UseQueryOptions<CouponInfoType>, 'queryKey' | 'queryFn'>,
+  options?: Omit<
+    Parameters<typeof useQuery<CouponInfoType>>[0],
+    'queryKey' | 'queryFn'
+  >,
 ) => {
-  return useQuery<CouponInfoType>({
+  const [is404, setIs404] = useState(false);
+
+  const query = useQuery<CouponInfoType>({
     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,
+  };
 };

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) {