fix: lottery winner 목록 fetch 예외처리 추가

softeerbootcamp4th · Aug 21, 2024 · 0c3c64a · 0c3c64a
1 parent 48eb267
commit 0c3c64a
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 1 deletion.
diff --git a/admin/src/constants/common.ts b/admin/src/constants/common.ts
@@ -12,4 +12,5 @@ export const STATUS_MAP = {
 
 export const ERROR_MAP = {
     CONFLICT: "409",
+    NOT_FOUND: "404",
 } as const;
diff --git a/admin/src/hooks/useInfiniteFetch.ts b/admin/src/hooks/useInfiniteFetch.ts
@@ -7,6 +7,7 @@ interface UseInfiniteFetchProps<R> {
     initialPageParam?: number;
     getNextPageParam: (currentPageParam: number, lastPage: R) => number | undefined;
     startFetching?: boolean;
+    showError?: boolean;
 }
 
 interface InfiniteScrollData<T> {
@@ -17,13 +18,15 @@ interface InfiniteScrollData<T> {
     hasNextPage: boolean;
     isSuccess: boolean;
     isError: boolean;
+    errorStatus: string | null;
 }
 
 export default function useInfiniteFetch<T, R>({
     fetch,
     initialPageParam = 0,
     getNextPageParam,
     startFetching = true,
+    showError = true,
 }: UseInfiniteFetchProps<R>): InfiniteScrollData<T> {
     const { showBoundary } = useErrorBoundary();
 
@@ -32,6 +35,8 @@ export default function useInfiniteFetch<T, R>({
     const [isLoading, setIsLoading] = useState<boolean>(false);
     const [isSuccess, setIsSuccess] = useState<boolean>(false);
     const [isError, setIsError] = useState<boolean>(false);
+    const [errorStatus, setErrorStatus] = useState<string | null>(null);
+
     const [hasNextPage, setHasNextPage] = useState<boolean>(true);
     const [totalLength, setTotalLength] = useState<number>(0);
 
@@ -53,6 +58,7 @@ export default function useInfiniteFetch<T, R>({
         setIsLoading(true);
         setIsError(false);
         setIsSuccess(false);
+        setErrorStatus(null);
         try {
             const lastPage = await fetch(currentPageParam);
             const nextPageParam = getNextPageParam(currentPageParam, lastPage);
@@ -62,9 +68,14 @@ export default function useInfiniteFetch<T, R>({
             setHasNextPage(nextPageParam !== undefined);
             setIsSuccess(true);
         } catch (error) {
-            showBoundary(error);
             setIsError(true);
             setIsSuccess(false);
+            if (error instanceof Error) {
+                setErrorStatus(error.message);
+            }
+            if (showError) {
+                showBoundary(error);
+            }
         } finally {
             setIsLoading(false);
         }
@@ -91,5 +102,6 @@ export default function useInfiniteFetch<T, R>({
         hasNextPage,
         isSuccess,
         isError,
+        errorStatus,
     };
 }
diff --git a/admin/src/pages/LotteryWinnerList/index.tsx b/admin/src/pages/LotteryWinnerList/index.tsx
@@ -5,6 +5,7 @@ import { LotteryAPI } from "@/apis/lotteryAPI";
 import Button from "@/components/Button";
 import TabHeader from "@/components/TabHeader";
 import Table from "@/components/Table";
+import { ERROR_MAP } from "@/constants/common";
 import { COOKIE_KEY } from "@/constants/cookie";
 import { LOTTERY_EXPECTATIONS_HEADER, LOTTERY_WINNER_HEADER } from "@/constants/lottery";
 import useFetch from "@/hooks/useFetch";
@@ -30,6 +31,8 @@ export default function LotteryWinnerList() {
     const {
         data: winnerInfo,
         isSuccess: isSuccessGetLotteryWinner,
+        isError: isErrorGetLotteryWinner,
+        errorStatus: lotteryWinnerGetErrorStatus,
         fetchNextPage: getWinnerInfo,
         refetch: refetchWinnerInfo,
     } = useInfiniteFetch<LotteryWinnerType, GetLotteryWinnerResponse>({
@@ -46,6 +49,7 @@ export default function LotteryWinnerList() {
         getNextPageParam: (currentPageParam: number, lastPage: GetLotteryWinnerResponse) => {
             return lastPage.isLastPage ? undefined : currentPageParam + 1;
         },
+        showError: false,
     });
 
     const {
@@ -103,6 +107,12 @@ export default function LotteryWinnerList() {
             refetchLotteryExpectation();
         }
     }, [isSuccessPatchLotteryExpectation]);
+    useEffect(() => {
+        if (isErrorGetLotteryWinner && lotteryWinnerGetErrorStatus === ERROR_MAP.NOT_FOUND) {
+            alert("아직 추첨되지 않은 이벤트입니다.");
+            navigate("/");
+        }
+    }, [isErrorGetLotteryWinner, lotteryWinnerGetErrorStatus]);
 
     const handleRefetch = () => {
         phoneNumberRef.current = phoneNumberInputRef.current?.value || "";