5주차

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

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

5주차 평가 목록

• 테이블 구조 정의(참조)
• 회원 가입 창 별도 구현
• 메인 화면 구성(사이트 안내문) 구현
• 현재 offer, answer, ice후보 전부 push만 하고 있어서 db에 쌓이고 있기 때문에 처리 후 삭제되도록 구현
• 페이지를 새로고침하면 위의 연결 정보가 유실되는 문제 해결

테이블 구조 정의

Cloud Firestore 구조 (DB구조)

1. Users (회원가입 , 로그인)

필드명	자료형	설명
email	STRING	사용자 이메일 (고유)
displayName	STRING	닉네임 / 표시 이름
createdAt	TIMESTAMP	가입 일시

2. userEvents (일정)

필드명	자료형	설명
text	STRING	일정 내용
date	STRING	일정 날짜 (YYYY-MM-DD)
createAt	TIMESTAMP	일정 생성 시각
sharedWith	ARRAY	공유 대상 닉네임 목록 (선택)

3. Messages (채팅)

필드명	자료형	설명
user	STRING	작성자 닉네임
text	STRING	메세지 내용
timestamp	NUMBER	전송 시각(밀리초 단위)

4. voiceChatUsers (음성채팅 참여자)

필드명	자료형	설명
[user_id]	BOOLEAN	true일 경우에 참여 중

5. voiceChatOffers(WebRTC 시그널링)

필드명	자료형	설명
type	SRTING	offer 또는 answer
sdp	STRING	세션 설명
sender	STRING	offer 또는 answer을 보낸 사용자 UID
receiver	STRING	수신자 UID

6. voiceChatCandidates (webRTC ICE 후보 정보)

필드명	자료형	설명
candidate	STRING	ICE 후보 문자열
sdpMid	STRING	SDP 미디어 ID
sdpMLineIndex	NUMBER	SDP 미디어 라인 인덱스
sender	STRING	전송자 UID
receiver	STRING	수신자 UID

회원 가입 창 별도 구현

• 기존의 로그인과 회원가입의 통합 시스템이 혼란이 발생할 수 있어 로그인과 회원가입을 따로 진행하게끔 만들었습니다.

• 예시) 테스트2 계정으로 회원가입 시,
  “테스트2님, 회원가입이 완료되었습니다!” 팝업과 함께 자동 로그인

메인 화면 구성(사이트 안내문) 구현

화면을 줄였을 때 폰트 크기 변경

채팅 스크롤이 올라가있을때 새 메세지가 오면 알림 오도록 구현

현재 채팅보고 있을때는 새 채팅 올라왔을때 자동으로 스크롤 내려감

페이지를 새로고침하면 위의 연결 정보가 유실되는 문제 해결

페이지 닫기나 새로고침시 연결정보들 삭제할수 있도록 함 (재연결시 충돌 방지)

밑의 코드 참조

offer, answer, ice후보 전부 push만 하고 있어서 db에 쌓이고 있기 때문에 처리 후 삭제되도록 구현

다음주 계획

• 채팅에 링크를 올릴 경우, 링크를 감지, 링크에 클릭 이벤트 추가와 클릭 시 확인 모달 또는 팝업 표시 구현
• 회원가입 창을 별도 구현하니 닉네임 중복이 허용되는 문제가 발생하여 기존에 있던 회원가입과 로그인 통합시스템을 쓸 것 입니다.
• 현재 채팅방을 로그인후의 메인페이지(index.html)에 통합