[fix] apiClient 로직 수정 및 ErrorBoundary 추가

[ff1451]

Summary by CodeRabbit

릴리스 노트

• 개선 사항
  • 앱 섹션 로딩 중 오류 발생 시 사용자에게 보다 명확한 오류 메시지를 표시합니다.
  • 인증 토큰 갱신 메커니즘을 개선하여 더욱 안정적인 세션 관리를 제공합니다.
  • 클럽, 일정, 공지사항 섹션이 개별적으로 오류에 대응하여 앱 전체 중단을 방지합니다.

[coderabbitai]

Walkthrough

토큰 갱신 로직을 리팩토링하여 접근성을 개선하고, Sentry ErrorBoundary를 활용해 에러 핸들링을 강화했습니다. 홈 페이지 주요 섹션들을 개별 에러 바운더리로 감싸 격리된 에러 처리를 구현했습니다.

Changes

Cohort / File(s)	Summary
토큰 갱신 로직 개선 src/apis/client.ts	newAccessToken 변수 할당 순서 조정, 갱신 실패 시 리다이렉트 제거, 성공 시 토큰 설정 및 브릿지 메시지 발송, 재시도 로직 이동. 유효한 흐름 개선이나 불필요한 로직 검토 필요.
Sentry 에러 바운더리 추가 src/pages/Home/index.tsx	@sentry/react 임포트 및 세 섹션(MyClubsSection, ScheduleSection, CouncilNoticeSection)을 ErrorBoundary로 감싸 격리된 에러 처리 구현. 기존 Suspense 폴백 유지.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

---

핵심 피드백

src/apis/client.ts:

• newAccessToken 변수 스코프 관리 명확성 확인 필요
• 갱신 실패 후 로그아웃하지 않는 이유 명시 코멘트 추가 권장

src/pages/Home/index.tsx:

• SectionErrorFallback 컴포넌트 정의 확인 필요 (누락된 부분 있는지)
• ErrorBoundary fallback prop 명시성 개선 가능 (prop이름/구조 일관성)

🚥 Pre-merge checks | ✅ 2

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	PR 제목이 변경사항의 주요 내용을 정확하게 반영하고 있습니다. apiClient 로직 수정과 ErrorBoundary 추가라는 두 가지 핵심 변화를 명확하게 나타내고 있습니다.

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

✨ Finishing Touches

• 📝 Generate docstrings (stacked PR)
• 📝 Generate docstrings (commit on current branch)

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch 149-fix-windowlocationhref-로-인한-fetch-요청-강제-취소-수정

---

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

[coderabbitai]

🧹 Nitpick comments (2)

src/pages/Home/index.tsx (1)

40-46: SectionErrorFallback에 재시도 기능 고려

현재 fallback이 정적 UI만 렌더링합니다. Sentry.ErrorBoundary는 fallback prop에 함수를 전달하면 resetError를 받을 수 있어 사용자가 재시도할 수 있습니다.

♻️ 재시도 버튼 추가 예시

-function SectionErrorFallback() {
+function SectionErrorFallback({ resetError }: { resetError?: () => void }) {
   return (
     <div className="border-indigo-5 flex w-full items-center justify-center rounded-lg border bg-white py-5">
       <span className="text-sub2 text-gray-400">불러오는 중 오류가 발생했어요</span>
+      {resetError && (
+        <button onClick={resetError} className="ml-2 text-sub2 text-primary">
+          재시도
+        </button>
+      )}
     </div>
   );
 }

사용 시:

<Sentry.ErrorBoundary fallback={({ resetError }) => <SectionErrorFallback resetError={resetError} />}>

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/pages/Home/index.tsx` around lines 40 - 46, SectionErrorFallback
currently renders a static error UI and doesn't support Sentry.ErrorBoundary's
reset flow; update the SectionErrorFallback component to accept an optional
resetError callback prop (e.g., function resetError?: () => void) and render a
"Retry" button that calls resetError when provided so the boundary can be reset;
ensure the component signature (SectionErrorFallback) and its usage with
Sentry.ErrorBoundary's fallback={({ resetError }) => <SectionErrorFallback
resetError={resetError} /> } are consistent and that the button is only shown
when resetError is defined.

src/apis/client.ts (1)

187-260: sendRequest와 sendRequestWithoutRetry 간 코드 중복

두 함수가 URL 빌드, 헤더 구성, fetch 옵션, 에러 파싱 등 대부분의 로직을 공유합니다. 현재 동작에 문제는 없지만, 향후 유지보수 시 한쪽만 수정되는 실수가 발생할 수 있습니다.

♻️ 공통 로직 추출 제안

// 공통 로직을 내부 헬퍼로 추출
async function executeRequest<T, P extends object>(
  endPoint: string,
  options: FetchOptions<P>,
  timeout: number,
  handleAuth401: boolean
): Promise<T> {
  // 공통 fetch 로직
  // handleAuth401이 true면 401에서 handleUnauthorized 호출
  // false면 그냥 에러 throw
}

이렇게 하면 sendRequest와 sendRequestWithoutRetry가 이 헬퍼를 호출하는 래퍼가 됩니다.

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@src/apis/client.ts` around lines 187 - 260, sendRequest와
sendRequestWithoutRetry에서 URL 빌드, 헤더 구성, fetch 옵션 설정, 응답/에러 파싱 로직이 중복되므로 공통 로직을
내부 헬퍼로 추출하세요: 새 함수 executeRequest<T, P extends object>(endPoint: string,
options: FetchOptions<P>, timeout: number, handleAuth401: boolean): Promise<T>에
URL 조립(joinUrl/buildQuery), 헤더 생성(콘텐츠 타입/Authorization via
useAuthStore.getState().getAccessToken), AbortController + timeout, fetch 호출,
parseResponse/parseErrorResponse 처리, 그리고 handleAuth401 플래그로 401 발생 시 기존의
handleUnauthorized 동작을 호출하거나 아니면 에러를 리턴하도록 구현한 뒤, 기존의 sendRequest와
sendRequestWithoutRetry는 필요한 handleAuth401 값만 전달하는 래퍼로 변경하세요.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@src/apis/client.ts`:
- Around line 187-260: sendRequest와 sendRequestWithoutRetry에서 URL 빌드, 헤더 구성,
fetch 옵션 설정, 응답/에러 파싱 로직이 중복되므로 공통 로직을 내부 헬퍼로 추출하세요: 새 함수 executeRequest<T, P
extends object>(endPoint: string, options: FetchOptions<P>, timeout: number,
handleAuth401: boolean): Promise<T>에 URL 조립(joinUrl/buildQuery), 헤더 생성(콘텐츠
타입/Authorization via useAuthStore.getState().getAccessToken), AbortController +
timeout, fetch 호출, parseResponse/parseErrorResponse 처리, 그리고 handleAuth401 플래그로
401 발생 시 기존의 handleUnauthorized 동작을 호출하거나 아니면 에러를 리턴하도록 구현한 뒤, 기존의 sendRequest와
sendRequestWithoutRetry는 필요한 handleAuth401 값만 전달하는 래퍼로 변경하세요.

In `@src/pages/Home/index.tsx`:
- Around line 40-46: SectionErrorFallback currently renders a static error UI
and doesn't support Sentry.ErrorBoundary's reset flow; update the
SectionErrorFallback component to accept an optional resetError callback prop
(e.g., function resetError?: () => void) and render a "Retry" button that calls
resetError when provided so the boundary can be reset; ensure the component
signature (SectionErrorFallback) and its usage with Sentry.ErrorBoundary's
fallback={({ resetError }) => <SectionErrorFallback resetError={resetError} /> }
are consistent and that the button is only shown when resetError is defined.

---

ℹ️ Review info

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2042f16 and 3f896a9.

📒 Files selected for processing (2)

• src/apis/client.ts
• src/pages/Home/index.tsx