✨ Feat/#302 강의중 화면 마크업

[mumminn]

👀 관련 이슈

#302

✨ 작업한 내용

1. 강의 자료 사이드 썸네일 및 메인 화면

• 스페이스, 엔터, 오른쪽 화살표, 윗쪽 화살표 눌렀을 경우 다음 페이지로 이동
• 왼쪽 화살표, 아랫쪽 화살표 눌렀을 경우 이전 페이지로 이동

2. 강의 자료 선택, 업로드
3. 강의 자료 캔버스 기능

• 펜: 5개 색상(검/빨/파/노/초), 5개의 굵기
• 형광펜: 5개 색상(노/파/초/핑/빨), 5개의 굵기
• 지우개: 5개 크기, 페이지 모두 지우기
• 양옆 사이드 없애도 캔버스 비율 유지
• 필기 후 다음 페이지 갔다가 다시 이전 페이지로 이동해도 필기본 유지

4. 강의중 녹음 기능

• 녹음 중일 때 헤더 녹음 버튼에 빨간점
• 녹음 버튼 누르면 녹음 시작 버튼, 종료 버튼 popover
• 녹음 popover에서 종료 버튼 눌렀을 경우 이 강의의 녹음 종료 후 저장된다는 모달 생성
• 최종 종료 이후 하단에 녹음 미리 듣기 기능 추가

5. 채팅

• 질문이 새로 왔을 때 헤더에 빨간점(채팅 사이드바를 켜고 있는 경우에는 생기지 않음)
• 빨간점 생긴 이후에 채팅 사이드 바 열면 빨간점 사라짐
• 강사일 경우 파란 배경 채팅

6. 강의 종료

• 강의 종료 버튼 눌렀을 경우에 녹음중이면 녹음 종료 관련 멘트와 종료 멘트 함께 있는 모달 생성
• 녹음중이 아니면 일반 종료 멘트 모달 생성
• 강의 종료시 강의 상세 페이지로 이동

📷 스크린샷 또는 GIF

기능	스크린샷
강의시작 들어왔을 때 녹음 시작 모달
강의 자료 사이드 썸네일 + 강의 자료 선택, 업로드 헤더
펜, 지우개, 형광펜 기능 + 양옆 사이드 없애도 캔버스 비율 유지 + 한페이지 씩 캔버스 기억
녹음
채팅
강의 종료 + 녹음 종료(녹음 미리 듣기)