통화 연결 UI

[ktmihs]

📕 제목

• 유저 인터페이스 - 친구 목록 #66
• 전역 상태 관리 #85
• 통화 연결 UI 및 기능 구현 #148

📗 작업 내용

구현 내용 및 작업 했던 내역

• 친구 목록 전역 데이터 변경
• 통화 수신, 발신 시 UI 구현
• theme 색상 추가

📘 PR 특이 사항

PR을 볼 때 주의깊게 봐야하거나 말하고 싶은 점

• 아직 소켓 연결이 안 돼, 코드 정리가 안 된 상태입니다.
• UI 작업 위주로 봐주시면 됩니다!

📙 추가 사항

socket 관련 backend 확인 부탁드립니다

• 현재 frontend 친구 목록에서 status가 [online, offline, busy] 중 online 상태일 때만 드래그 가능하도록 구현하고자 합니다.
  • busy는 통화 중일 때(누군가가 사용자에게 연결을 시도하고 있거나, 해당 사용자가 통화 중일 때 모두)를 의미합니다.
• 따라서, 친구 목록에서 드래그를 통해 해당 사용자에게 연결을 시도했을 때, socket으로 해당 사용자를 친구로 두고 있는 모든 사용자에게 해당 사용자가 'busy' 상태임을 알려줄 필요가 있습니다.
• 해서, 현재 필요한 부분은 하단에 남겨두었는데, backend 쪽이 어떻게 되어있는지 몰라 제가 필요한 데이터만 남겨두었습니다!
• 확인 후, 추가/삭제해서 알려주시면 감사하겠습니다🙇‍♀️

// A = 발신자
// B = 수신자

// 1. A -> B 통화 연결 시도
{
  받는 사람: B,
  데이터: {
    id: 'A의 id',
    nickname: 'A nickname'
  }
}
{
  받는 사람: B를 팔로우한 사람들,
  데이터: {
    id: 'B의 id',
    status: 'busy'
  }
}

// 2. B 수신 승인
이 부분은 webRTC를 학습한 후, 알 수 있을 것 같습니다.

// 3. B 수신 거절
{
  받는 사람: A, B를 팔로우한 사람들,
  데이터: {
    id: 'B의 id',
    status: 'online'
  }
}

[hj1n]

참고해서 백엔드쪽 소켓 구현할게요~~ 고생하셨습니다!