fix(frontend): 마이크 권한 대기 중 답변이 막히던 문제

[i3months]

UI/UX + 음성 점검에서 나온 첫 건

음성 답변 버튼을 누르면 컴포저 전체가 녹음 바로 교체된다. 그런데 권한 대기(requesting) 상태에서는 취소/전송 버튼이 렌더되지 않았다:

{!voiceUploading && !requesting && (
  <Button variant="ghost" onClick={cancel}>취소</Button>
  ...
)}

사용자가 브라우저 권한 프롬프트를 놓치거나(다른 모니터·다른 탭) 방치하면 getUserMedia 는 영원히 pending 이다. 그동안 텍스트 입력창은 사라져 있으므로 답변 자체가 막힌다. 새로고침 말고 빠져나갈 방법이 없었다.

면접은 시간이 흐르는 화면이라(시간 초과 자동 종료가 돈다) 입력 수단을 잃는 것이 특히 나쁘다.

수정

• 권한 대기 중에도 '텍스트로 답변' 으로 빠져나간다. 전송 버튼은 그때 노출하지 않는다(녹음이 시작되지 않았다)
• useVoiceRecorder 에 요청 세대(requestId)를 도입했다. 취소 후 뒤늦게 스트림이 도착하면 트랙을 즉시 닫고 녹음을 시작하지 않는다. 이게 없으면 사용자가 취소했는데도 잠시 뒤 마이크 표시등이 켜지고 녹음 바가 되살아난다. 늦게 도착한 거부(reject)도 이미 idle 인 상태를 denied 로 되돌리지 않는다
• 안내 문구: "마이크 준비 중…" → "마이크 권한을 기다리는 중… 브라우저 알림에서 허용해 주세요". 무엇을 기다리는지 모르는 것이 방치의 출발점이다

함께: 연결 끊김을 '질문 대기' 로 오도하던 문구

disabled={awaitingQuestion || connection !== 'open'}
placeholder={disabled ? '질문을 기다리는 중…' : ...}

연결이 끊겨 막힌 건데 AI 가 느린 줄 알게 된다. 게다가 상단 ConnectionBanner 는 "연결이 끊겨 재연결 중입니다" 라고 말하고 있어 한 화면에서 두 설명이 충돌한다. disabledReason 으로 분기했다.

테스트

AnswerComposer.voice.test.tsx 신설 (5) — 권한 대기 중 탈출, 대기 중 전송 미노출, 녹음 중에는 취소·전송 동시 제공, 끊김/대기 문구 분기, 권한 거부 안내.

vitest 118/118 · eslint 0 · tsc · build 통과.

영향 범위

• DB 마이그레이션: 없음 / API 변경: 없음 / 환경변수: 없음
• 프론트 동작만 변경

같은 점검에서 나온 다른 발견 (별도 처리)

• callback.voice 유실 시 턴 영구 잠김 — 음성 답변이 (transcribing) 상태로 남으면 복구 경로가 없다. 질문 생성 쪽은 feat(ai,core): 질문/꼬리질문 생성 실패 시 무기한 대기 제거 + 타임아웃 하드닝 #144 로 실패 신호를 만들었지만 음성은 그대로다. 후속 PR 로 다룬다
• RT3(실시간 스트리밍 음성)가 프론트에 미연결 — RealTime·AI·Core 에 모두 구현돼 있는데 프론트는 배치 업로드만 쓴다. 기능 규모라 보고만