🐻 백로그 초안 작성

백로그

• 참고 백로그

EPIC - 기능 단위 ver.

• 실시간 학습 공유

• 참여자 목록

• 채팅

• 타이머

• 공부방 목록

• 비회원 로그인

• story를 먼저 짜고, 거기서 나뉘는 거를 epic으로 작성

• 기능 + 페이지 단위로 epic 작성

EPIC - 페이지 단위 ver. (최종 선택)

• 메인 페이지(= 회원/비회원 선택 페이지) (예: https://www.gomterview.com/)
  • 비회원 선택에 대한 용어 수정 : 비회원 이용 → 로그인 없이 이용하기
• 공부방 리스트 페이지
• 공부방 페이지

메인 페이지

---

• 유저는 메인 페이지를 볼 수 있다.
  • GOMZ 로고를 표시한다.
  • ‘로그인 없이 이용하기’ 버튼을 표시한다.
• 유저는 공부방 리스트 페이지로 접근하기 위해 ‘로그인 없이 이용하기’ 버튼을 누른다.
  • 공부방 리스트 페이지로 접근한다.
  • 랜덤 닉네임을 생성해서 브라우저에 저장한다.
• 비인가 유저(유저 정보가 없음)는 다른 페이지에 접근할 수 없다.
  • 브라우저에 저장된 닉네임이 없으면 메인 페이지로 리다이렉트한다.

공부방 리스트 페이지

---

• 유저는 공부방 리스트 페이지를 볼 수 있다.
  • 타이머를 표시한다.
  • 공부방 리스트를 표시한다.
  • 공부방 생성 버튼을 표시한다.
• 유저는 자신의 하루 누적 공부 시간을 확인할 수 있다.
  • 자정이 되면 브라우저에 저장된 타이머가 초기화된다.
  • 브라우저에 저장된 타이머 값을 가져온다.
• 유저는 공부방 리스트를 확인할 수 있다.
  • 서버에서 공부방 목록을 주기적으로 가져온다.
  • 공부망 목록을 가져오는 API를 만든다. (공부방 제목, 공부방 참여인원, 공개여부)
  • 공부방에 참여 중인 인원을 확인할 수 있다.
  • 공부방의 공개 여부를 확인할 수 있다.
• 유저는 공부방을 생성할 수 있다.
  • 공부방 생성 창을 표시한다.
  • 공부방 제목을 설정할 수 있다.
  • 공부방 공개 여부를 설정할 수 있다.
  • 공부방 비밀번호를 설정할 수 있다.
  • 공부방을 생성하는 API를 만든다. (공부방 제목, 공개여부, 비밀번호)
  • 공부방 생성 요청을 보낸다.
• 유저는 공부방에 입장할 수 있다.
  • 비밀방인 경우 비밀번호 입력 창이 표시된다.
  • 비밀번호 확인 요청을 보낸다.
  • 공부방 비밀번호 확인 API를 만든다(공부방 id, 비밀번호 → 비밀번호 유효여부)
  • 공부방 페이지로 이동한다.

공부방 페이지

---

• 유저는 공부방 페이지를 볼 수 있다.
  • 타이머를 표시한다.
  • 참여 유저 목록을 표시한다.
  • 채팅을 표시한다.
  • 공유된 화면을 표시한다.
  • 화면 옵션 바를 표시한다.
  • 퇴장 버튼을 표시한다.
• 유저는 공부방에 입장할 수 있다.
  • 화상회의를 빈 화면으로 보여준다.
  • 모든 공부방 멤버와 WebRTC 커넥션을 생성한다
  • 웹 소켓에 연결한다.
  • 채팅서버와 연결한다.
  • 입장 안내 문구를 채팅창에 출력한다.
• 유저는 공부방을 퇴장할 수 있다.
  • 뒤로가기 버튼으로 퇴장한다.
  • 퇴장하기 버튼으로 퇴장한다.
  • 공부방 리스트 페이지로 이동한다.
  • 공부방 참여인원을 줄인다.
  • 공부방에 인원이 없으면 공부방을 삭제한다.
  • 퇴장한 유저의 화상회의를 중지한다.
• 유저는 영상을 공유할 수 있다.
  • 송출 카메라를 선택할 수 있다.
  • WebRTC로 공유를 시작/종류 할 수 있다.
• 유저는 음성을 공유할 수 있다.
  • 송출 마이크/스피커를 선택할 수 있다.
  • WebRTC의 음성 기능을 시작/종료 할 수 있다.
• 유저는 공부방에 참여한 유저 목록을 확인할 수 있다.
  • 채팅서버 접속할 때 유저목록 소켓으로 전송한다.
  • 유저 접속/퇴장시 업데이트 내용도 소켓으로 전송한다.
• 유저는 공부방의 다른 유저들과 채팅할 수 있다.
  • 메시지를 입력하고 전송할 수 있다.
  • 채팅 소켓에 다른 유저들에게 메시지를 전송할 수 있다.
  • 채팅 소켓에서 다른 유저들의 메시지를 수신할 수 있다.
  • 공부방 참여 유저의 채팅이 위에서부터 쌓인다.
• 유저는 공부 시간을 기록할 수 있다.
  • 유저 별 타이머를 가진다.
  • 타이머를 시작/일시 정지할 수 있다.
  • 브라우저 저장소에 유저 별 타이머 시간을 저장한다.

개발 환경 설정

---

• 공통 개발 환경 설정
  • Typescript 설정을 완료한다.
  • Prettier 설정을 완료한다.
  • ESLint 설정을 완료한다.
• FE 개발 환경 설정
  • React 환경 설정을 완료한다.
  • 상태 관리 라이브러리 설정을 완료한다.
  • 스타일 라이브러리 설정을 완료한다.
  • 트랜스파일러 + 번들러 설정을 완료한다.
  • Mock 환경 설정을 완료한다.
  • 테스팅 환경 설정을 완료한다.
• BE 개발 환경 설정
  • ncloud 클라우드 서버를 생성한다.
  • API 서버 설정을 완료한다.
  • 웹소켓 채팅 서버 설정을 완료한다.
  • 데이터베이스 스키마를 작성한다.
  • 데이터베이스 서버를 설치한다.
  • WebRTC 환경(STUN, TURN 서버)를 구축한다.
  • 웹서버(nginx, apache)를 리버스 프록시 서버로 설정한다.
  • 필요하면 도메인 설정과 TLS도 설정한다.

공부방 삭제 정책

• 공부방 구성원 모두가 공부방을 삭제할 수 있다.
• 공부방을 생성한 구성원만 공부방을 삭제할 수 있다.
• 공부방 구성원이 아무도 없으면 공부방을 자동 삭제한다.