feat(frontend): 발화자 강조·음성 레벨 표시, 안 보이는 발화자 타일을 첫 페이지로

[yuchem2]

CNV-76 발화자 강조 + 참가자 음성 레벨 표시

변경

• 음성 레벨 측정(프론트): Web Audio AnalyserNode로 마이크를 켠 전원의 레벨을 타이머 하나로 0.1초마다 잰다. 백엔드 변경 없음.
  • 측정값은 zustand store(audio-level.store)로만 흘려보내고, 타일은 자기 key만 구독한다. 그래서 레벨이 바뀌어도 해당 타일의 표시 부분만 다시 그려진다(VideoTile memo 계약 유지).
• 타일 표시: 오른쪽 위에 레벨 막대 3개, 말하는 동안 accent 테두리로 강조. 음소거·연결 끊김 상태에서는 표시하지 않는다.
• 발화자 타일 올리기: 1초 이상 이어 말한 사람이 첫 페이지에 없으면 내 타일 바로 다음 칸으로 올리고, 첫 페이지에서 가장 오래 말하지 않은 사람을 다음 페이지로 보낸다. 이미 보이는 사람은 움직이지 않는다.
• useLocalMedia/useMediasoupViewModel이 localAudioTrack을 노출한다.

서버 방식(AudioLevelObserver) 대신 프론트 방식을 택한 이유

• 레벨 미터는 갱신이 잦아야 해서, 서버에서 보내면 미터가 느려지거나 트래픽이 커진다.
• 원격 오디오는 재생을 위해 이미 디코딩하고 있어서 추가 비용이 작다.
• 서버가 발화 정보를 써야 하는 기능(화자 타임라인 등)이 생기면 그때 주 발화자 이벤트만 추가한다.

테스트

• useSpeakerViewModel.spec(측정·발화 유지·발화자 이벤트·순서 올리기), MeetingMedia.spec(미터·강조), useMediasoupViewModel.spec(localAudioTrack)
• frontend vitest 422개 통과, pnpm lint 통과, 다중 접속 수동 테스트 완료

참고

• 로컬 docker-compose.local.yml은 RTC 포트가 21개뿐이라, 탭을 여러 개 열면 createTransport timeout이 난다. 이번 변경과는 무관하며 별도로 처리한다.

[notion-workspace]

발화자 강조 + 참가자 음성 레벨 표시