[FE] 영상이나 마이크를 켠 상태로 진입하는 참가자 정보가 제대로 반영되지 않는 문제 해결

[seorang42]

✅ 작업 내용

• 상단바(MemberVideoBar)에서 참가자의 실시간 정보를 정적인 데이터인 members를 참고하는 방식에서, 실시간 송출 여부가 반영된 memberProducers를 참고하는 방식으로 구현하였습니다.

최종 데이터 구조

• members
  • 참가자의 id, 닉네임, 게스르 여부 등의 참가자의 기본 정보를 담은 정적 데이터
  • cam과 mic는 회의 참여 시 기존 사용자가 카메라나 마이크를 활성화하고 있었는지를 확인하기 위한 정보이며, 이후 카메라나 마이크가 활성화/비활성화 될 때 갱신되지 않음 <-- 이 부분을 실시간 정보 표시에 사용하다보니 이전의 동기화 문제가 발생했었습니다.

members: Record<string, MeetingMemberInfo>;

export interface MeetingMemberInfo {
  user_id: string;
  nickname: string;
  profile_path: string | null;
  is_guest: boolean;
  cam: MemberProviderInfo | null;
  mic: MemberProviderInfo | null;
}

---

• memberProducers
  • 참가자가 영상이나 음성을 활성화/비활성화 했을 때 갱신되는 Producer 정보가 저장되는 객체
  • MemberProviderInfo의 is_paused 갱신을 통해 활성화 여부를 실시간으로 동기화

memberProducers: Record<
  string,
  {
    cam?: MemberProviderInfo | null;
    mic?: MemberProviderInfo | null;
  }
>;
---
export interface MemberProviderInfo {
  provider_id: string;
  kind: 'audio' | 'video';
  type: 'mic' | 'cam';
  is_paused: boolean;
}

---

• memberStreams
  • 참가자의 실제 영상/음성 스트림 정보를 저장하는 객체
  • Producer를 통해 Stream을 한 번 설정하고, 여러 컴포넌트에서 사용하기 위해서 별도로 관리

memberStreams: Record<string, MemberStream>;

export type MemberStream = Partial<Record<MediaType, MediaStream>>;

export type MediaType = 'mic' | 'cam' | 'screen_video' | 'screen_audio';

---

🤔 리뷰 요구사항

• 기존에 발견하셨던 문제 상황이 정상적으로 해결되었는지 확인 부탁드립니다! ex) 새로 들어온 참가자의 캠/마이크 활성화 여부가 정상적으로 반영되지 않던 문제 등
• AI를 사용해 프로젝트의 전반적인 컨텍스트를 반영한 수정을 시도해보기 위해, VSCode에서 Github Copilot을 사용하여 코드 수정을 진행해보았습니다. 그러다보니 단계별로 작은 단위로 커밋을 하지 못하고, 여러 파일이 동시에 변경되었습니다. 결과적으로 커밋 하나의 단위가 조금 커졌습니다. 양해 부탁드립니다, 다음부터는 조금 더 단계적으로 해결해볼 수 있게 노력해보겠습니다!