[Portfolio Log] WebRTC 기반 포폴 기록 3

오늘은 채팅 UI를 작업했다. 간단하게 닫는 버튼과 좌측 하단에 열기 버튼을 두었다.

기존에는 메시지 처리만 있었는데 다른 작품을 참고하다보니 하나씩 늘어났다.

 

https://github.com/kevinshen56714/SkyOffice?ref=reactjsexample.com 

내가 만들길 원하는 작품과 매우 유사한 형태인데, 이쪽에서 입력한 메시지에 따라 Toast를 출력해주길래 나도 추가했다.

 

다음으로 하단 컨트롤러를 추가했는데, CSS쪽에 position 속성을 사용하여 개발하니까 금방 하더라.

참고로 아이콘을 추가한 것이 아니라 그냥 이모지를 출력해서 버튼처럼 사용하고 있다.  

 

왼쪽에 사과 버튼을 눌러서 캐릭터(과일 친구들) 변경이 가능하도록 할 거고,

마이크/카메라는 on/off, 설정은 따로 dialog 처리. 맵은 on/off 버튼으로 사용한다. 

 

좌측 하단에는 미니맵을 추가했다. Phaser에서 미니맵 예제가 잘 되어 있어서 금방 만들더라.

 

앞으로 남은 작업은 다음과 같다.

 

1. 영상 UI 개발

2. 마이크/카메라 설정 Dialog

3. 하단 컨트롤러에 대한 UI 처리(이름 변경, 마이크/카메라 제어 등)

4. 멀티플레이 기능 추가(이동, mediasoup)

 

한 4~5일 정도는 걸리지 않을까 싶다.