fix(frontend): refresh 토큰 회전을 탭 사이에서도 직렬화

[i3months]

배포본 프론트엔드 전 페이지를 훑다가 찾았다. 운영에서 아직 발생한 적은 없는 예방 수정이다
(근거는 아래).

관측

배포본에서 워크스페이스 전 페이지를 하드 로드하며 네트워크를 봤더니, 로드마다
POST /api/auth/refresh 가 정확히 한 번씩 나간다:

/api/auth/refresh   POST 200     ← 페이지 로드마다
/api/users/me       GET  200
/api/auth/stream-token POST 200

액세스 토큰을 메모리에만 두는 설계라 이것 자체는 정상이다. 문제는 그 다음이다.

문제

서버 RefreshTokenService.rotate 는 유예 없이 기존 토큰을 revoke 하고 새 토큰을 발급한다.
client.ts 의 단일 비행(refreshing)은 모듈 변수라 한 탭 안에서만 듣는데, 리프레시 쿠키는
탭이 공유한다.

탭A: rotate(T1) → T1 revoke, T2 발급, 쿠키 갱신
탭B: rotate(T1) → isRevoked → AUTH_REVOKED_TOKEN (401)
     → isAuthRefreshFailure → tokenStore.clear() + onUnauthorized()
     → 탭B만 로그아웃

창 복원이나 새 탭으로 열기로 두 탭이 동시에 부팅하면 일어난다.
진행 중인 면접 탭이 지면 사용자는 이유 없이 튕긴 것으로 본다.

이긴 탭은 살아남는다(401 응답 경로에 Set-Cookie 가 없고, onUnauthorized 가
/api/auth/logout 을 부르지 않는다). 진 탭은 새로고침하면 복구된다. 그래도 사용자에게는
설명되지 않는 로그아웃이다.

얼마나 급한가 — 아직 일어난 적 없다

리프레시 토큰 발급 51건의 연속 간격을 운영 DB 에서 재 봤다:

간격	건수
< 1초 (동시 탭)	0
1~5초	10
5~60초	25
> 60초	15

최단 간격이 3.86초다. 레이스가 실제로 걸린 적은 없다. 그래서 예방 수정으로 다룬다.

고친 방법

Web Locks 로 origin 전체에서 refresh 가 한 번에 하나만 돌게 한다. 기다린 탭은 이긴 탭이
갱신해 둔 쿠키로 다시 회전하므로(T2→T3) 정상 동작한다 — 회전이 한 번 더 일어날 뿐이다.
락이 없는 환경(구형 Safari·비보안 컨텍스트)에서는 기존과 똑같이 동작한다.

서버 유예를 두지 않은 이유

회전된 토큰을 몇 초간 재사용 허용하는 방법도 있다. 하지만 토큰 재사용 탐지를 약화시키는
변경이고, 지금 문제는 브라우저 탭 동시성이라 브라우저에서 막는 쪽이 정확하다. 비브라우저
클라이언트에서 같은 레이스가 관측되면 그때 다시 본다.

검증

• 새 테스트 4개 (withRefreshLock.test.ts): 락 이름, 동시 3건에서 최대 동시 실행 1,
  앞 갱신 실패가 뒤를 막지 않음, 락 없는 환경 폴백
• 프론트 전체 스위트 47 파일 / 201건 통과, tsc --noEmit clean, eslint clean

같이 훑은 결과 (문제 없음)

워크스페이스 8개 페이지(홈·히스토리·오답노트·이력서·레포·자소서·계정·피드백·404)를 배포본에서
로드: 앱 콘솔 에러 0건(경고 6건은 전부 MetaMask 확장), API 요청 23건 전부 200.
피드백 리포트는 점수·하이라이트·패널 평가·질문별 복기·음성 재생까지 정상 렌더.