fix: SSE 의 refresh 가 별도 경로로 호출되어 race 발생하던 문제 수정

[ychany]

작업 내용

SSE 가 자체적으로 /auth/token/refresh 를 직접 호출하면서 axios interceptor 와 dedupe 되지 않아, 토큰 갱신이 동시 다발로 발생해 백엔드가 401/500 으로 거부하던 문제를 수정.

원인

• useNotificationSSE 가 fetch(ENDPOINTS.AUTH_TOKEN_REFRESH, ...) 로 직접 호출
• axios interceptor 의 isRefreshing 큐와 분리 → 동시 다발 race
• X-Client-Type 헤더 누락, Content-Type 분기도 누락

해결

• utils/refreshClientToken.ts 신규 — Promise 기반 dedupe 가 들어간 클라 측 공유 함수
• apis/client.ts 와 hooks/useNotificationSSE.ts 둘 다 이 함수만 호출하도록 통합
• 헤더 처리 (Content-Type 제거 / X-Client-Type / 웹뷰 토큰 setCookie) 일원화

효과

• 클라 측 모든 refresh 가 한 경로로 통일 → 동시 N개 호출이라도 백엔드는 1번만 호출
• SSE 의 500 / 401 fallout 해소

검증

• pnpm check-types · pnpm lint 통과
• dev 환경에서 SSE 재연결 시 refresh 1번만 호출 확인

Summary by CodeRabbit

릴리스 노트

• 개선 사항
  • 토큰 갱신 메커니즘을 개선하여 인증 처리의 일관성과 안정성을 높였습니다.
  • 동시 요청 시 불필요한 중복 갱신을 방지하는 최적화를 적용했습니다.
  • 세션 만료 시 토큰 재갱신 흐름을 단순화하고 안정화했습니다.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
depromeet	Ready	Preview, Comment	Jun 19, 2026 4:01pm

[github-actions]

No description provided.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: be9b8052-3327-4820-a1f8-6abb68b5ce6a

📥 Commits

Reviewing files that changed from the base of the PR and between b521cec and 1ea3253.

📒 Files selected for processing (3)

• apps/web/src/apis/client.ts
• apps/web/src/hooks/useNotificationSSE.ts
• apps/web/src/utils/refreshClientToken.ts

---

Walkthrough

기존에 client.ts와 useNotificationSSE.ts에 각각 인라인으로 구현되어 있던 토큰 갱신 로직을 refreshClientToken.ts로 추출했다. 새 유틸은 inflightRefresh로 동시 호출을 dedupe하며, client.ts axios 인터셉터의 큐 기반 처리와 SSE의 직접 fetch 방식이 모두 이 단일 진입점 호출로 교체됐다.

Changes

클라이언트 토큰 갱신 단일 진입점 리팩터링

Layer / File(s)	Summary
refreshClientToken 유틸리티 신규 구현 apps/web/src/utils/refreshClientToken.ts	RefreshResponseT 타입과 inflightRefresh dedupe 상태를 선언하고, performRefresh()에서 axios로 갱신 API를 호출해 웹뷰 환경에서는 응답 토큰을 쿠키에 직접 저장한다. refreshClientToken()은 진행 중인 요청이 있으면 공유하고 완료 시 상태를 초기화한다.
axios 인터셉터 401 처리 교체 apps/web/src/apis/client.ts	isRefreshing 플래그, failedQueue, 직접 axios.post refresh 호출 코드를 제거하고, x-retry-attempted 헤더 설정 후 refreshClientToken() 호출 → 원 요청 재시도 흐름으로 단순화했다. refresh 실패 시 로그인 리다이렉트 로직은 유지된다.
SSE onopen 401 처리 교체 apps/web/src/hooks/useNotificationSSE.ts	SSE onopen에서 401 발생 시 기존 직접 fetch 대신 refreshClientToken() 호출로 교체했다. 성공 시 token-refreshed 에러를 던져 재연결 경로로 유도하고, 실패 시 cancelled = true 후 unauthorized 에러를 발생시킨다.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• depromeet/PIKI-Client#122: apps/web/src/apis/client.ts의 401 응답 인터셉터 및 토큰 리프레시 흐름을 직접 수정한 PR로, 본 PR의 변경 지점과 동일한 코드 영역에 연결된다.
• depromeet/PIKI-Client#255: useNotificationSSE.ts의 SSE 401 처리에서 재연결 전 토큰 갱신 로직을 수정한 PR로, 본 PR의 refreshClientToken() 교체와 동일한 흐름에서 연결된다.
• depromeet/PIKI-Client#220: apps/web/src/apis/client.ts의 axios refresh 요청(X-Client-Type 헤더 등)을 수정한 PR로, 본 PR이 추출한 performRefresh() 구현과 직접적으로 연관된다.

Suggested labels

fix, WEB, APP

Suggested reviewers

• soyeong0115

Poem

🐰 토끼가 큐를 정리했네,
한 문으로만 들어오도록!
inflightRefresh 하나면 충분해,
동시 호출도 겹치지 않아 ✨
깔끔한 코드, 토끼도 기뻐~

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/sse-refresh

---

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.}