fix: react query 재시도 1회 제한 및 로딩 ux 개선

[manNomi]

• react query 재시도 횟수를 3회에서 1회로 제한
• query 실패 시 전역 에러 토스트 추가 (401 제외)
• 로딩 스피너에 반투명 배경 및 cursor-wait 추가로 인터랙션 차단
• ScorePageContent의 retry: false 옵션 제거하여 전역 설정 적용

관련 이슈

• resolves: 리액트 쿼리 3번 호출 , 3번 호출 실패시 애러 토스트 없는 버그 #368

작업 내용

특이 사항

리뷰 요구사항 (선택)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
solid-connection-web	Ready	Preview, Comment	Jan 23, 2026 3:51pm

[coderabbitai]

Walkthrough

1. ScorePageContent.tsx: useGetApplicationsList 훅 호출에서 명시적 retry: false 옵션을 제거하여 기본 재시도 동작으로 복원했습니다.
2. ClientModal: isFetching 상태일 때 로딩 오버레이에 반투명 검은색 배경과 cursor-wait 스타일을 추가해 시각적 표시를 변경했습니다.
3. queryClient.ts: QueryCache와 MutationCache의 전역 onError 핸들러를 추가하고 쿼리 재시도 최대 횟수를 3회에서 1회로 축소했으며, 쿼리 에러 중 401은 토스트 표시에서 제외하도록 했습니다.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

• wibaek

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	PR 제목은 핵심 변경사항인 React Query 재시도 횟수 제한과 로딩 UX 개선을 명확하게 요약합니다.
Description check	✅ Passed	PR 설명은 주요 변경사항 4가지를 명확히 나열하고, 관련 이슈를 명시하여 템플릿 요구사항을 충족합니다.
Linked Issues check	✅ Passed	모든 코드 변경사항이 #368 이슈의 요구사항을 충족합니다: 재시도 횟수 감소, 전역 에러 토스트 추가, UX 개선.
Out of Scope Changes check	✅ Passed	모든 변경사항이 React Query 재시도 제한 및 로딩 UX 개선과 직접 관련되어 있으며, 이슈 범위를 벗어나지 않습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (2)

src/app/university/application/ScorePageContent.tsx (2)

46-50: 4. Prettier 포매팅 오류로 CI가 실패하고 있어요.

hook 호출 부분의 포매팅을 수정해주세요.

🔧 수정 제안

-  const {
-    data: scoreResponseData = initialData,
-    isError,
-    isLoading,
-  } = useGetApplicationsList();
+  const { data: scoreResponseData = initialData, isError, isLoading } = useGetApplicationsList();

---

125-131: 5. 에러 토스트가 중복 표시될 수 있어요.

전역 에러 핸들링(QueryCache.onError)이 추가되었으므로, 이 로컬 toast.error 호출과 함께 에러 시 두 개의 토스트가 표시될 수 있습니다.

고려할 옵션:

• 로컬 토스트를 제거하고 리다이렉트만 유지
• 또는 이 쿼리만 전역 에러 핸들링에서 제외 (meta 옵션 활용)

🔧 로컬 토스트 제거 제안

   useEffect(() => {
     if (isLoading) return;
     if (isError) {
-      toast.error("지원 현황을 불러오는 중에 오류가 발생했습니다. 지원 절차를 진행해주세요.");
       router.replace("/university/application/apply");
     }
   }, [isError, isLoading, router]);

🤖 Fix all issues with AI agents

In `@src/components/layout/GlobalLayout/ui/ClientModal/index.tsx`:
- Line 36: Prettier flagged the single-line JSX opening tag in the ClientModal
component; reformat the <div aria-live="polite" aria-busy="true"
className="fixed inset-0 z-50 flex items-center justify-center bg-black/30
cursor-wait"> into a multi-line tag so each prop is on its own line (e.g. <div
aria-live="polite" aria-busy="true" className="..." /> -> <div
aria-live="polite" aria-busy="true" className="..." > with aria-live, aria-busy,
and className each on separate lines) to satisfy ESLint/Prettier in the
ClientModal/index.tsx file.

🧹 Nitpick comments (1)

src/lib/react-query/queryClient.ts (1)

7-27: 2. 전역 에러 핸들링 구현이 잘 되었네요! 다만 몇 가지 개선점이 있어요.

구현이 전반적으로 좋습니다. 몇 가지 사항을 확인해주세요:

1. 401 처리 일관성: QueryCache에서는 401을 제외하는데, MutationCache에서는 401도 토스트를 표시합니다. 의도된 동작인가요?

2. 중복 코드: 에러 메시지 추출 로직이 반복됩니다. 헬퍼 함수로 추출하면 유지보수가 편해집니다.

♻️ 중복 로직 추출 제안 (선택사항)

+const extractErrorMessage = (error: unknown): string => {
+  const axiosError = error as AxiosError<{ message?: string }>;
+  return axiosError?.response?.data?.message || axiosError?.message || "오류가 발생했습니다. 다시 시도해주세요.";
+};
+
 const queryClient = new QueryClient({
   queryCache: new QueryCache({
     onError: (error) => {
-      // query 실패 시 전역 에러 토스트 (401 제외)
       const axiosError = error as AxiosError<{ message?: string }>;
-      const status = axiosError?.response?.status;
-      if (status === 401) return; // 인증 오류는 토스트 표시 X
-
-      const errorMessage =
-        axiosError?.response?.data?.message || axiosError?.message || "오류가 발생했습니다. 다시 시도해주세요.";
-      toast.error(errorMessage);
+      if (axiosError?.response?.status === 401) return;
+      toast.error(extractErrorMessage(error));
     },
   }),
   mutationCache: new MutationCache({
     onError: (error) => {
-      // mutation 실패 시 전역 에러 토스트
-      const axiosError = error as AxiosError<{ message?: string }>;
-      const errorMessage =
-        axiosError?.response?.data?.message || axiosError?.message || "오류가 발생했습니다. 다시 시도해주세요.";
-      toast.error(errorMessage);
+      toast.error(extractErrorMessage(error));
     },
   }),