개요

• Zoom과 같은 화상회의를 바탕으로 일정관리와 공부시간을 저장하고 관리하는 기능을 더하였습니다.

기술 스택

외에 시그널링서버와 연결을 위한 kurent-utils 채팅을 위한 SockJS, StompJS, axois, chartjs, moment, swiper 등등

디렉토리 구조

• api: api 요청을 위한 baseURL을 저장.
• components: 페이지를 구성하는 컴포넌트.
• hooks:Custom hook를 모아둠
• pages: 사이트를 구성하는 페이지 모음
• redux: 전역상태를 위한 redux
• styles: 전역 css
• utils: 사이트의 채팅 webrtc 기능을 하는 파일들

기능 소개

• 프리뷰 페이지 swiper 적용 자동 스크롤 (위 사진들은 기능과 관련이 없습니다)

• 회원가입 및 로그인 페이지 각각 버튼으로 토글

• 메인 화면 방목록 무한 스크롤 적용 모바일 반응형 적용
• 각 카테고리별 방 생성 가능
• 아래 그룹은 private 방으로 코드 입력으로 가입하고 입장이 가능

• 각각 프로필 수정, 공부시간 차트, 스케쥴 등록이 가능한 달력(미완성) 화면입니다.

• 방생성 모달 인원의 최대 10명, 방은 코드로 입장하는 비공개방과 방 목록에 공개되어 로그인한 유저는 누구나 입장 가능한 공개방이 있음

• 비디오 화면, 소리와 비디오 on/off, 공부시간 표시 등을 지원합니다. 방장의 경우 강퇴, 경고, 방장 위임등이 가능. 방장이 아니면 해당 메뉴는 비활성화 됨
• 공부시간 타이머는 수동으로 키고 끌 수가 있음 5시가 되면 자동으로 초기화되고 그날 공부시간은 서버로 전송됨

• 화면 고정
• 화면 공유

• 방 내 채팅 기능

• 비공개 그룹으로 방 생성시 왼쪽 그룹탭에 새로만든 방이 등록됨
• 공개방과 다르게 초대코드 생성 버튼이 생김

• 이 초대코드로 비공개방에 입장이 가능
• 비공개로 체크하고 방을 생성하면 그룹 탭에 방이 추가됨

• 그 외의 기능은 공개방과 동일하고 방에도 마찬가지로 화면 크기별로 반응형이 적용되어있음