.

[YangJJune]

📝 PR Description

API 401 응답 시 발생하던 /login 리다이렉트 로직의 구조적 결함을 해결하고, SPA 구조에 적합한 라우팅 방식과 React Query 싱글톤 패턴을 도입했습니다. 특히 인터셉터 내 하드 리로드 문제를 해결하여 사용자 경험을 개선했습니다.

🔧 Changes

1. API 인스턴스 401 처리 로직 수정 (src/api/instance.ts)

• 버그 수정: isRefreshRequest, alreadyRetried 분기 및 newAccessToken 부재 시 리다이렉트가 누락되던 현상 해결
• 유틸리티 추출: 토큰 제거 및 router.navigate를 일괄 처리하는 redirectToLogin() 헬퍼 함수 도입
• 코드 정리: 디버깅용 console.log 제거 및 에러 흐름 정형화

2. 라우팅 구조 고도화 (window.location.href → router.navigate())

• BrowserRouter 방식에서 createBrowserRouter 및 RouterProvider 기반으로 마이그레이션
• 인터셉터 및 일반 클래스/함수에서도 SPA 상태를 유지하며 페이지 이동이 가능하도록 개선 (src/router.tsx 신규 생성)

3. QueryClient 싱글톤 적용

• 각 레이아웃(FullWidthLayout 등)에서 개별 생성하던 QueryClient를 src/api/queryClient.ts의 싱글톤 인스턴스로 통합
• 전체 앱에 일관된 retry, staleTime 정책 적용 및 캐시 분리 문제 해결

4. 인증 기반 라우트 보호 (ProtectedRoute)

• /, /searchpage, /writepage 등 주요 경로에 ProtectedRoute 적용
• accessToken 부재 시 진입 단계에서 즉시 리다이렉트 처리

📌 Summary

이번 작업을 통해 인증 실패 시의 예외 처리를 완벽하게 보완하고, 전역 상태(Query, Router)의 일관성을 확보했습니다.

• 안정성: 모든 401 케이스에 대해 예외 없이 로그인 페이지 리다이렉트 보장
• 성능 및 UX: 하드 리로드(Hard Reload) 제거로 매끄러운 페이지 전환 구현
• 유지보수성: 중앙 집중화된 QueryClient 설정 및 라우트 관리