BeatMate

🎵BeatMate

팀 소개

우석우	신지수	전혜지
백엔드	프론트엔드	프론트엔드

프로젝트 소개

BeatMate는 평소 악기/보컬 레슨을 받기 위해 시간을 내기 어려운 사람들을 위한 화상 악기/보컬 레슨 서비스입니다.

프로젝트 아키텍쳐

개발 스택

BACK

FRONT

뷰 및 기능 설명

이름	강사	수강생
초기 화면	spalsh 화면 : splash화면이 나온 뒤 다음 화면이 나타납니다. - 로그인X : 로그인 화면이 띄워집니다. - 로그인O : 홈 화면이 나타납니다. 로그인 화면 : 사용자가 로그인, 회원가입, 비밀번호를 찾을 수 있습니다.	강사와 같음
회원가입	사용자 유형 선택 : 다음 단계로 진행하기 위해 강사 유형을 선택해야 합니다. 회원가입 정보 입력 : 회원가입을 위해 필요한 정보를 입력한 후, 유효성 검사를 거쳐 조건을 확인합니다. 조건을 만족하지 못한 채 "계속하기" 버튼을 누를 시 알림창이 뜹니다. 추가 정보 입력 : 레슨 음악 분야, 강사 자격 인증, 자기소개를 입력하는 화면이 추가로 있습니다. 이메일 인증 : 회원 가입을 다 작성한 후 이메일 인증까지 완료하면 로그인 화면으로 이동합니다.	사용자 유형 선택 : 다음 단계로 진행하기 위해 수강생 유형을 선택해야 합니다. 회원가입 정보 입력 : 회원가입에 필요한 정보를 입력한 후 유효성 검사를 통해 조건을 확인하고 만족하지 못한 채 ‘계속하기’ 버튼을 누를 시 알림창이 뜹니다. 이메일 인증 : 회원 가입을 다 작성한 후 이메일 인증까지 완료하면 로그인 화면으로 이동합니다.
홈	홈 화면 : 레슨 알림과 레슨 관리, 예약 관리, 강사 찾기, 커뮤니티, 채팅, 내 정보 페이지로 이동할 수 있습니다. 하단 탭 : 홈, 커뮤니티, 채팅, 강사 찾기, 예약, 레슨 내 정보 페이지로 이동 할 수 있습니다.	강사와 같음
커뮤니티	보컬이나 악기에 대해 서로 질문이나 소통할 수 있는 커뮤니티 화면입니다. 카테고리 선택 : 원하는 카테고리를 선택 한 후 해당하는 커뮤니티 글을 확인할 수 있습니다. 현재 카테고리 표시창 : 상단에는 현재 선택된 카테고리가 표시되며, 클릭하여 다른 카테고리로 이동할 수 있습니다. 카테고리 화면 : 글 목록은 무한 스크롤로 구현하였고 ‘제목’, ‘내용’ 중 한 가지 검색 조건을 선택해 검색 할 수 있습니다. 글쓰기 버튼 : 오른쪽 하단에 글쓰기 버튼이 항상 띄워져 있어 언제든지 게시글을 작성할 수 있습니다. 게시글 : 해당 게시글의 댓글 수, 좋아요 수, 북마크 수를 확인할 수 있습니다. - 게시글 작성자 : 강사 이름으로 표시됩니다. - 수정 및 삭제 : 게시글 작성자는 게시글 오른쪽 상단 kebab menu를 클릭하면 게시글을 수정 또는 삭제할 수 있습니다.	보컬이나 악기에 대해 서로 질문이나 소통할 수 있는 커뮤니티 화면입니다. 카테고리 선택 : 원하는 카테고리를 선택 한 후 해당하는 커뮤니티 글을 확인할 수 있습니다. 현재 카테고리 표시창: 상단에는 현재 선택된 카테고리가 표시되며, 클릭하여 다른 카테고리로 이동할 수 있습니다. 카테고리 화면 : 글 목록은 무한 스크롤로 구현하였고 ‘제목’, ‘내용’ 중 한 가지 검색 조건을 선택해 검색 할 수 있습니다. 글쓰기 버튼 : 오른쪽 하단에 글쓰기 버튼이 항상 띄워져 있어 언제든지 게시글을 작성할 수 있습니다. 게시글 : 해당 게시글의 댓글 수, 좋아요 수, 북마크 수를 확인할 수 있습니다. - 게시글 작성자 : 닉네임이나 '익명+숫자'로 표시됩니다. - 수정 및 삭제 : 게시글 작성자는 게시글 오른쪽 상단 kebab menu를 클릭하면 게시글을 수정 또는 삭제할 수 있습니다.
채팅	강사와 수강생 간의 의사 소통을 할 수 있는 화면입니다. 채팅을 통해 레슨 일정을 조율하고 레슨에 관한 내용을 주고 받을 수 있습니다. 채팅 목록 : 무한 스크롤로 구현하였고 오른쪽 상단 버튼을 통해 목록을 새로 고침을 할 수 있습니다. 채팅방 : 원하는 채팅을 확인할 수 있습니다. - 레슨 예약하기 : ‘레슨 예약하기’ 버튼을 통해 레슨 일정을 잡을 수 있습니다.	강사와 수강생 간의 의사 소통을 할 수 있는 화면입니다. 채팅을 통해 레슨 일정을 조율하고 레슨에 관한 내용을 주고 받을 수 있습니다. 채팅 목록 : 무한 스크롤로 구현하였고 오른쪽 상단 버튼을 통해 목록을 새로 고침을 할 수 있습니다. 채팅방 : 원하는 채팅을 확인할 수 있습니다.
강사 찾기	원하는 강사를 검색하고 강사 프로필을 확인할 수 있는 화면입니다. 강사 찾기 조건 설정 : 원하는 카테고리를 선택 한 후 ‘강사 이름으로 검색하기’와 ‘정렬 조건대로 정렬하기’ 중 하나를 선택하여 강사를 찾을 수 있습니다. 강사 찾기 화면 : 무한 스크롤로 구현되어 있으며 원하는 강사를 선택하면 해당 강사의 프로필 화면으로 이동합니다. 강사 프로필 : 강사를 찜할 수 있는 버튼이 없고 강사가 작성한 레슨 정보와 후기를 탭으로 나누어 확인할 수 있습니다.	원하는 강사를 검색하고 강사 프로필을 확인할 수 있는 화면입니다. 강사 찾기 조건 설정 : 원하는 카테고리를 선택 한 후 ‘강사 이름으로 검색하기’와 ‘정렬 조건대로 정렬하기’ 중 하나를 선택하여 강사를 찾을 수 있습니다. 강사 찾기 화면 : 무한 스크롤로 구현되어 있으며 원하는 강사를 선택하면 해당 강사의 프로필 화면으로 이동합니다. 강사 프로필 : 프로필 화면 오른쪽 상단에 하트 버튼을 통해 강사를 찜할 수 있고 강사가 작성한 레슨 정보와 후기를 탭으로 나누어 확인할 수 있습니다. - 채팅하기 : 강사 프로필 하단에 ‘채팅하기’ 버튼을 통해 레슨 예약을 할 수 있습니다.
예약	레슨 예약 현황을 확인할 수 있는 화면입니다. - 예약X : ’예약된 레슨이 없습니다‘ 문구가 띄워집니다. - 예약O : 시간 순으로 예약 목록이 보여집니다. 레슨 정보 확인 : 예약된 레슨을 클릭하면 레슨 정보를 확인할 수 있습니다. - 예약 취소 : ‘예약 취소’ 버튼을 통해 레슨을 취소할 수 있습니다.	레슨 예약 현황을 확인할 수 있는 화면입니다. - 예약X : ’예약된 레슨이 없습니다‘ 문구가 띄워집니다. - 예약O : 시간 순으로 예약 목록이 보여집니다. 레슨 정보 확인 : 예약된 레슨을 클릭하면 레슨 정보를 확인할 수 있습니다.
레슨	레슨 내역을 확인할 수 있는 화면입니다. 현재 진행 중인 레슨, 미 작성된 레슨 평가지(피드백지), 레슨 내역을 확인할 수 있습니다. 오른쪽 상단 버튼을 통해 새로 고침이 가능합니다. 현재 진행 중인 레슨 : 레슨 시간이 되면 해당 시간의 레슨 정보가 보여줍니다. - 레슨 정보 모달창 : ‘레슨 정보 확인하기’ 버튼을 통해 세부 정보가 모달창으로 표시됩니다. 모달 외의 영역을 클릭하면 모달이 닫힙니다. - 화상 방 : 화상 레슨일 경우 화상 방이 생성되어 수업을 진행할 수 있습니다. 미작성된 레슨 피드백지 : 강사가 작성하지 않은 피드백지 목록을 무한 스크롤로 보여줍니다. 클릭 시 해당 레슨 피드백지 작성 화면으로 이동합니다. 레슨 내역 : ‘레슨 내역 확인하기’ 버튼을 클릭하면 달력을 통해 월 별 레슨 내역을 확인할 수 있습니다. - 날짜 표시 구분 : 레슨이 있는 날짜와 선택한 날짜, 오늘 날짜를 구분하여 표시하였습니다. - 평가지 확인 : 날짜를 클릭하면 강사와 수강생이 작성한 레슨 평가지와 피드백지를 확인할 수 있습니다. - 월 이동 및 오늘 날짜로 이동 : 달력 오른쪽 상단 이모티콘을 클릭하면 오늘 날짜로 이동합니다.	레슨 내역을 확인할 수 있는 화면입니다. 현재 진행 중인 레슨, 미 작성된 레슨 평가지(피드백지), 레슨 내역을 확인할 수 있습니다. 오른쪽 상단 버튼을 통해 새로 고침이 가능합니다. 현재 진행 중인 레슨 : 레슨 시간이 되면 해당 시간의 레슨 정보가 보여줍니다. - 레슨 정보 모달창 : ‘레슨 정보 확인하기’ 버튼을 통해 세부 정보가 모달창으로 표시됩니다. 모달 외의 영역을 클릭하면 모달이 닫힙니다. - 화상 방 : 화상 레슨일 경우 화상 방이 생성되어 수업을 진행할 수 있습니다. 미작성된 레슨 평가지 : 수강생이 작성하지 않은 평가지 목록을 무한 스크롤로 보여줍니다. 클릭 시 해당 레슨 평가지 작성 화면으로 이동합니다. 레슨 내역 : ‘레슨 내역 확인하기’ 버튼을 클릭하면 달력을 통해 월 별 레슨 내역을 확인할 수 있습니다. - 날짜 표시 구분 : 레슨이 있는 날짜와 선택한 날짜, 오늘 날짜를 구분하여 표시하였습니다. - 평가지 확인 : 날짜를 클릭하면 강사와 수강생이 작성한 레슨 평가지와 피드백지를 확인할 수 있습니다. - 월 및 오늘 날짜로 이동 : 달력 오른쪽 상단 이모티콘을 클릭하면 오늘 날짜로 이동합니다.
내 정보	사용자가 쓴 게시글, 댓글, 북마크 등을 확인할 수 있는 화면입니다. 탭 : 내가 쓴 글, 내가 쓴 댓글, 북마크 세 개의 탭으로 나누어져 있고 각 탭에 띄워지는 목록은 무한 스크롤로 구현하였습니다. 내 정보 설정 : 오른쪽 상단에 있는 톱니바퀴 버튼을 클릭하면 이동합니다.	사용자가 쓴 게시글, 댓글, 북마크 등을 확인할 수 있는 화면입니다. 탭 : 내가 쓴 글, 내가 쓴 댓글, 북마크, 찜한 강사 네 개의 탭으로 나누어져 있고 각 탭에 띄워지는 목록은 무한 스크롤로 구현하였습니다. 내 정보 설정 : 오른쪽 상단에 있는 톱니바퀴 버튼을 클릭하면 이동합니다.