7주차

7주차 기능 추가 및 수정 사항

v-talk : https://v-chat-ade97.web.app/

7주차 평가 목록

음성 채팅방에 접속된 다른 사용자들을 채팅창 옆에 표시
호버(Hover) 상태일때 유사한 다른 색으로 표시되게 구현
chat.html의 기능을 로그인 한 상태의 메인페이지(index.html)에 나타나도록 구현
테스트를 위한 접속아이디 및 비번 이클래스 쪽지로 보내기

음성 채팅방에 접속된 다른 사용자들을 채팅창 옆에 표시

채팅방과 따로 음성 채팅을 접속하는 구도를 이용해 클릭을 감지하여 음성 채팅에 참여했을 때,
접속한 유저의 닉네임을 채팅창 옆에 표시되도록 구현했습니다.

호버(Hover) 상태일때 유사한 다른 색으로 표시되게 구현

마우스에 닿아있는 상태일 때, 유사하지만 더 진한 색깔로 표시되게 구현했습니다.

chat.html의 기능을 로그인 한 상태의 메인페이지(index.html)에 나타나도록 구현

chat 기능과 index 기능을 모듈화하고, chat.html의 기능을 index.html에 포함시켜 메인 페이지 내에서 직접 사용할 수 있도록 함. 또 그에 맞게 css를 수정함.

— 로그인하기 전의 메인페이지

— 로그인한 뒤의 메인페이지

다음주 계획

• 채팅방에 접속된 유저들이 ‘채팅방 유저’에 표시되게 구현

• 채팅방 생성기능 구현