[FEAT] OpenVidu 화상채팅 코드를 이용해, 기초적인 화상접속 채팅 시스템을 구현

이슈 번호

Close: #36 Related to: #32

작업 요약

본 PR에서는 아래의 작업들을 수행하였습니다.

OpenVidu에서 회의 참가 및 회의에서 퇴장하는 커스텀 훅의 코드를 연습 저장소에서 가져온 후, 재구현을 진행하였습니다.
- 참가자의 캠을 토글할 수 있는 기능, 참가자의 마이크를 토글할 수 있는 기능, 그리고 다른 참가자로부터 음성을 들을 것인지를 토글할 수 있는 기능을 추가하고, 버튼을 눌러 작동할 수 있도록 구현했습니다.
미팅 페이지의 UI를 구현하였고, OpenVidu 연결을 수행하는 커스텀 훅과 연결시켰습니다. 아직 구현되지 않은 컴포넌트들은 일단 빈 자리로 두었습니다.
여러 페이지를 사용할 수 있도록 라우팅을 구현하였고, "대기 페이지 → 회의 페이지" 의 형태로 플로우를 만들어 진행되도록 구현했습니다.
- "대기 페이지" 는 아직 구체적인 구현 방법이 논의되지 않았으므로 임시 페이지로 구현하였습니다.

PR의 요구사항과 직접적인 관련은 없으나, 요구사항 도중 아래의 변경사항도 냈습니다.

화면을 꽉 채우는 페이지 컴포넌트 구현을 위해, GlobalStyle.ts 에서 최상위 부모의 크기를 지정해 주었습니다. 이유는 화면을 꽉 채우는 컴포넌트를 구현을 할 경우 부모의 크기를 활용할 수 있게 하기 위함입니다.
```
html,
body {
    width: 100%;
    height: 100%;
}

#root {
    width: 100%;
    height: 100%;
}
```



- 배달의민족 한나는열한살 폰트 사용을 위해 추가했던 웹폰트의 URL이 제대로 작동하지 않아, 다른 URL로 교체하였습니다.

아쉽지만, OpenVidu를 이용해 접속하는 WebRTC 관련 로직에 대해서는 요청/응답을 모킹할 방법을 찾지 못해, 테스트 코드 없이 이대로 두었음을 부디 양해해 주시기 바랍니다. 그 대신 이를 보완하기 위해 백엔드 측에서 백엔드 서버가 마련되어 있는 상태로 서버를 실행해 작동함을 확인하였습니다. 참고/인용 자료에도 스크린샷을 추가했습니다.

추후 이러한 로직들을 어떻게 테스트해야 할 지, 테스트가 어려운 상황이라면 어떻게 이를 보완할 지 깊이 생각해봐야 할 것 같은 느낌이 듭니다.

## 참고/인용 자료

- 가짜 데이터를 넣어 미팅 페이지를 렌더링했을 때의 모습입니다.

![image](https://github.com/user-attachments/assets/003e05a6-d198-43b0-992e-e5a4c5596b85)

- 백엔드 측에서 백엔드 서버를 이용하여 프론트엔드 개발 서버를 실행시켰을 때의 작동 모습입니다. -- 프로필 사진 / 닉네임의 경우 관련 로직이 아직 구현되지 않은 상태인지라, 아직은 깨져서 나옵니다. 이 부분은 추후 로그인과 관련된 로직을 구현하면서 같이 해결해야 할 것 같습니다.

![image](https://github.com/user-attachments/assets/b2ff1386-fdf5-4bc8-bbca-6dfba0d14887)

Kim-aide / frontend

[FEAT] OpenVidu 화상채팅 코드를 이용해, 기초적인 화상접속 채팅 시스템을 구현 #39

이슈 번호

작업 요약