🎵BeatMate

팀 소개

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

프로젝트 소개

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

프로그램 설치 및 실행 방법

• tutor
  • ID : tutor@100.com
  • PW : tutor1234
• tutee
  • ID : tutee@gamil.com
  • PW : tutee1234

프로젝트 아키텍쳐

개발 스택

BACK

FRONT

뷰 및 기능 설명

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

디렉토리 구조

├──.eslintrc.json
├──.gitignore
├──.prettierrc.js
├──app.json
├──App.jsx
├──babel.config.js
├──colors.js
├──eas.json
├──jsconfig.json
├──package-lock.json
├──package.json
├──README.md
├─.expo
│  ├─devices.json
│  ├─packager-info.json
│  ├─README.md
│  └─settings.json
├─api
│  ├─auth.js
│  ├─chat.js
│  ├─client.js
│  ├─community.js
│  ├─lesson.js
│  ├─mypage.js
│  ├─reservation.js
│  └─tutorpage.js
├─assets
│  ├─chat
│  |  ├─EnterIcon.jsx
│  │  └─nullProfile.jpg
│  ├─Icons
│  │  └─Buttons.jsx
│  ├─PostItem
│  │  └─AddTmage.jsx
│  ├─SignUp
│  |  └─SelectUserScreen.jsx
│  ├─loadingPage.png
|  └─profile.png
├─components
│  ├─chat
│  │  ├─list
│  │  |   ├─ChatRoomList.jsx
│  │  |   └─ChatRoomListItem.jsx
│  │  └─message
│  │      ├─MessageInput.jsx
│  │      ├─MessageList.jsx
│  │      ├─MyMessage.jsx
│  │      └─OtherMessage.jsx
│  ├─community
│  │  ├─mainPage
│  │  |   ├─CoummunityPostingItem.jsx
│  │  |   └─SelectCategory.jsx
│  │  ├─newPost
│  │  |   ├─SelectCategory.jsx
│  │  |   └─UploadImages.jsx
│  │  └─onePage
│  │      ├─CommentList.jsx
│  │      ├─CommentListItem.jsx
│  │      └─MainPostItem.jsx
│  ├─lesson
│  │  ├─currentLessonItem
│  │  |   ├─CurrentNoLesson.jsx
│  │  |   ├─CurrentOfflineLesson.jsx
│  │  |   ├─CurrentOnlineLesson.jsx
│  │  |   ├─LessonInfoContent.jsx
│  │  |   └─LessonInfoModal.jsx
│  │  ├─lessonCalendarItem
│  │  |   ├─LessonCalendar.jsx
│  │  |   ├─LessonFinalInfo.jsx
│  │  |   ├─LessonScheduleItem.jsx
│  │  |   └─RenderCalendarDate.jsx
│  │  ├─notYetWroteItem
│  │  |   └─LessonInfoContent.jsx
│  │  └─LessonFeedbackItem.jsx
│  ├─mypage
│  │  ├─mypageSetScreen
│  │  |   └─UploadImages.jsx
│  │  └─mypagetabscreens
│  │      ├─List
|  │      |   ├─MyBookmarkList.jsx
|  │      |   ├─MyCommentList.jsx
|  │      |   ├─MyPostList.jsx
|  │      |   └─MyTutorList.jsx
│  │      └─ListItem
|  │          ├─MyBookmarkListItem.jsx
|  │          ├─MyCommentListItem.jsx
|  │          ├─MyPostListItem.jsx
|  │          └─MyTutorListItem.jsx
│  ├─reservation
│  │  └─ReservationListItem.jsx
│  ├─searchtutor
│  │  ├─tutorProfile
│  │  |   ├─LessonInfoPost.jsx
│  │  |   ├─ReviewItem.jsx
│  │  |   ├─ReviewPostItem.jsx
│  │  |   └─ReveiwPostList.jsx
│  │  ├─SearchTutorItem.jsx
│  │  └─SelectCategoryTutor.jsx
│  └─signup
│     ├─ImageUpload.jsx
│     └─SelectSpecialityTab.jsx
├─context
│  ├─AuthContext.jsx
│  ├─TutorFindCategoryContext.jsx
│  └─UserInfoContext.jsx
├─hook
│  └─TutorSpecialityKo.js
├─node_modules
├─routes
│  ├─chat
|  │  └─ChatScreenNavigators.jsx
│  ├─community
|  │  └─CommunityNavigators.jsx
│  ├─lesson
|  │  └─LessonScreenNavigators.jsx
│  ├─mypage
|  │  └─MyPageScreenNavigators.jsx
│  ├─reservation
|  │  └─ReservationScreenNavigators.jsx
│  └─searchtutor
|  │  └─SearchTutorScreenNavigators.jsx
│  ├─AuthRoutes.jsx
│  └─HomeTabRoutes.jsx
└─screens
    ├─chat
    │  ├─ChatListScreen.jsx
    │  └─ChatRoomScreen.jsx
    ├─community
    │  ├─CoummunityOnePostScreen.jsx
    │  ├─CoummunityScreen.jsx
    │  ├─CoummunitySpecificScreen.jsx
    │  └─WriteNewPostScreen.jsx
    ├─lesson
    │  ├─LessonEvaluationScreen.jsx
    │  ├─LessonFeedbackScreen.jsx
    │  ├─LessonMainScreen.jsx
    │  ├─LessonScheduleScreen.jsx
    │  ├─TuteeEvaluationModifyScreen.jsx
    │  ├─TuteeEvaluationScreen.jsx
    │  ├─TutorFeedbackModifyScreen.jsx
    │  ├─TutorFeedbackScreen.jsx
    │  └─VideoScreen.jsx
    ├─login
    │  ├─ChangePassword
    |  |  ├─GetAuthCode.jsx
    |  |  ├─GetAuthEmail.jsx
    |  |  └─GetChangePassword.jsx
    │  └─LoginScreen.jsx
    ├─mypage
    │  ├─TuteeMyPageScreen.jsx
    │  └─TutorMyPageScreen.jsx
    ├─mypageset
    │  ├─communityset
    |  |  ├─ChangeNicknameScreen.jsx
    |  |  └─ChangePorfileScreen.jsx
    │  ├─etc
    |  |  └─DeleteAccountScreen.jsx
    │  ├─myinfoset
    |  |  ├─ChangeInforScreen.jsx
    |  |  ├─ChangePasswordScreen.jsx
    |  |  └─ChangePhoneNumberScreen.jsx
    │  └─MyPageSetScreen.jsx
    ├─reservation
    │  ├─ReservationFormScreen.jsx
    │  ├─ReservationMainScreen.jsx
    │  └─ReservationSpecificScreen.jsx
    ├─searchtutor
    │  ├─GetSearchOptionScreen.jsx
    │  ├─SearchTutorScreen.jsx
    │  ├─TutorCommunityListScreen.jsx
    │  └─TutorProfileScreen.jsx
    ├─signup
    |   ├─tutee
    |   |  └─TuteeGetInfoScreen.jsx
    |   ├─tutor
    |   |  ├─TutorGetInfoScreen1.jsx
    |   |  └─TutorGetInfoScreen2.jsx
    |   ├─GetAuthCodeScreen.jsx
    |   └─SelectTypeScreen.jsx
    └─HomeScreen.jsx