지난주는 기본적인 페이지들 UI 뼈대 잡는 작업정도 진행했고 이번주는 본격적으로 기능 구현 개발 시작했다.
OpenVidu로 화상 채팅방을 만들어야 하는데 openvidu 홈페이지의 예제가 잘 되어 있어서 바로 구현이 가능했다.
근데... 원래라면 마이크 아이콘, 카메라 아이콘 등등 기본적으로 toolbar에 주어진 아이콘들도 그대로 쓰려고 했는데 예제에서 사용된 material-ui 컴포넌트와 현재 프로젝트의 react버전이 맞지 않아서 오류가 났다.
버전에 맞게 수정해서 쓸까 하다가 ui 프레임워크를 사용하지 않으려고 이번에 tailwind를 도입했는데 material-ui를 설치하고싶진 않았다.
그래서 해당하는 아이콘 손수 하나씩 찾아서 적용했다..
이것들 또 CSS작업 해주고 아래와 같이 만들었는데
켜짐,꺼짐 상태 체크하는 변수 로딩하는 쪽에서 오류가 나서 일단은 배경색 변경은 없도록 변경했다.
추후 색이나 모양같은걸 변경할 수도 있어서 일단은 이정도로 해두기로
지난주에 계속 예제 코드를 보면서 머릿속으로 그려지는대로만 잘 되면 어렵지 않을 것 같다고 생각했는데 실제로 해보니까 정말 간단해서 놀라울 따름이었다. 팀원들이랑 다같이 접속해서 테스트도 해봤는데 잘 되서 신기했당
서버쪽 api가 구현되면 만들 기능들을 생각하면 조금 아찔하지만 ^^..
그래도 생각했던대로 잘 진행되는 것 같아서 매일 재미있게 하는중