👑 김찬휘 (Back-End) |
😶 윤동균 (Back-End) |
😆 민초현 (Back-End) |
😁 정소영 (Front-End) |
🙄 김정원 (Front-End) |
🙂 박중원 (Front-End) |
REST API WebRTC WebSocket Infra Message Social Login |
REST API DataBase Infra WebRTC Board Lecture |
REST API CI/CD Infra DataBase JWT Login User |
UI/UX React UCC Board Test Lecture |
UI/UX React Design Message Profile MyPage |
UI/UX React WebRTC WebSocket User JWT Login |
- 기획 및 설계 : 23.01.02 ~ 23.01.06
- 프로젝트 구현 : 23.01.09 ~ 23.02.10
- 버그 수정 및 산출물 정리 : 23.02.13 ~ 23.02.17
넘쳐나는 강의😥 그러나 내게 꼭 맞는 강의 찾기가 힘들지 않으신가요?
원하는 강의가 없다면 이젠 찾지말고 직접 만들어보세요!!
즉각적인 소통을 통해 주도적인 학습을 진행할 수 있습니다.
상세 기술스택 및 버전
구분 | 기술스택 | 상세내용 | 버전 |
---|---|---|---|
공통 | 형상관리 | Gitlab | - |
이슈관리 | Jira | - | |
커뮤니케이션 | Mattermost, Notion | - | |
BackEnd | DB | MySQL | 8.0.21 |
JPA | - | ||
QueryDSL | - | ||
Java | OpenJDK | 11.0.16.1 | |
Spring | Spring Boot | 2.4.5 | |
IDE | IntelliJ | - | |
Build | Gradle | 7.5.1 | |
WebRTC | Kurento Media Server | 6.18.0 | |
WebRTC | Kurento | - | |
FrontEnd | HTML5 | - | |
CSS3 | - | ||
JavaScript(ES6) | - | ||
React | React | 18.2.0 | |
styled-components | 5.3.6 | ||
axios | 1.2.3 | ||
WebSocket | kurento-utils | 6.18.0 | |
WebSocket | stompjs | 2.3.3 | |
WebSocket | sockjs-client | 1.6.1 | |
IDE | Visual Studio Code | 1.75.1 | |
Server | Server | AWS EC2 | - |
Server | Nginx | 1.18.0 | |
플랫폼 | Ubuntu | 20.04 LTS | |
배포 | Docker | 20.10.23 | |
배포 | Jenkins | 2.375.3 | |
IDE | MobaXterm | 23.0 | |
Test | test | Postman | 10.9.4 |
test | JUnit5 | - | |
test | Mockito | - | |
test | Jacoco | toolVersion 0.8.7 | |
test | Sonarqube | - |
시스템 아키텍처 |
---|
![]() |
CI/CD 배포 흐름도 |
---|
![]() |
C:.
+---assets
| \---images
| +---login
| +---rank
| +---sns
| \---thumbnail
+---components
| +---BoardList
| +---Calendar
| +---CardBox
| +---LectProfile
| +---LectureCameraContainer
| +---LectureCancleModal
| +---LectureChattingContainer
| +---LectureFixedModal
| +---LectureModal
| +---LectureModalButton
| +---LecturerList
| +---LiveEvaluationModal
| +---LiveOptionContainer
| +---Message
| +---MessageContainer
| +---MessageDeleteModal
| +---MessageDetailModal
| +---MessageItem
| +---Navbar
| +---NewBoard
| +---Pagination
| +---Profile
| +---ProfileCardBox
| +---ProfileClock
| +---ProfileEdit
| +---ProfileSidebar
| +---RankingItem
| +---RankingList
| +---SearchBar
| +---SimpleSnackbar
| +---SmallSchedule
| +---SmallScheduleToggle
| +---Timer
| +---TodayScheduleItem
| +---TotalScheduleItem
| +---Typing
| +---UniBoard
| +---UnScheduleLecture
| +---UnScheduleLectureItem
| +---WarningModal
| \---WriteButton
+---hooks
+---pages
| +---Board
| +---Home
| +---Lecture
| +---LecturerProfile
| +---Loading
| +---Login
| +---NotFound
| +---OauthRedirect
| +---SignUp
| +---User
| \---WriteBoard
\---utils
\---api
C:.
+---main
| +---generated
| +---java
| | \---com
| | \---example
| | \---dolearn
| | +---config
| | +---controller
| | +---domain
| | +---dto
| | +---exception
| | | \---error
| | +---handler
| | +---jwt
| | +---repository
| | +---response
| | \---service
| \---resources
\---test
+---java
| \---com
| \---example
| \---dolearn
| +---config
| +---controller
| +---dto
| +---handler
| +---repository
| \---service
\---resources
![]() |
---|
- 이름, 이메일, 비밀번호를 필수적으로 입력하여 회원가입을 합니다.
- 가입된 계정이나, 구글 혹은 카카오 계정을 통해 로그인이 가능합니다.
- 메인페이지 우측 상단의 사용자 이름을 클릭하여 마이페이지로 이동하면, 프로필 정보를 수정할 수 있습니다.
- 마이페이지 좌측 하단의
[ 회원탈퇴 ]
를 클릭하여 계정을 삭제합니다.
![]() |
---|
- 수강자가 원하는 주제를 정하여 강사와 수강생을 모집하는 게시글을 작성할 수 있습니다.
- 강의 제목, 모집 인원, 모집 기간 및 강의 일시 등을 작성합니다.
- 강의 일시를 오늘 날짜로 설정할 경우, 현재 시간 이후의 강의 시간만 선택 가능합니다.
- 하단의
[ 등록 ]
을 통해 신규 게시글을 등록합니다.- 미기입된 항목을 검사하고, 기입해야할 내용이 있을 경우 경고 모달을 띄웁니다.
- 사용자가 사전에 신청한 강의 목록을 검사하고 일정이 겹칠 경우 등록 불가합니다.
![]() |
---|
- 수강을 원하는 게시글이 있다면 수강생으로 신청할 수 있습니다.
- 게시글의 조건에 맞춰 강의를 진행할 수 있다면 강사로 신청할 수 있습니다.
![]() |
---|
- 작성한 게시글에 강사가 신청했다면 원하는 강사를 선택하여 강의를 확정할 수 있습니다.
![]() |
---|
- 마이페이지의
[ 일정 ]
탭에 들어가면, 모집완료된 강의들의 일정을 한눈에 확인할수있습니다. - 달력에서 특정 강의 일정을 클릭하면, 그 강의를 진행하는 강사 정보와 수강인원, 강의정보 등을 확인할 수 있습니다.
- 아직 진행되지 않은 강의의 경우 신청취소가 가능합니다.
![]() |
---|
- 강의시작 10분전이 되면, 마이페이지의
[ 일정 ]
탭에서 해당 강의를 클릭할 경우,[ Live 입장 ]
이라는 버튼이 활성화됩니다. - 또한 메인화면 우측의 Small Schedule을 통해, 현재 유저의 오늘 일정을 확인할 수 있습니다.
- 강의시작 10분전에 Small Schedule에서 해당 강의에 접속하기 위한
[ Live 입장 ]
버튼이 활성화됩니다.
![]() |
---|
- 메인화면 우측의 Small Schedule을 통해, 현재 유저의 오늘 일정을 확인할 수 있습니다.
- 강의시작 10분전에 Small Schedule에서 해당 강의에 접속하기 위한
[ Live 입장 ]
버튼이 활성화됩니다. - 활성화된 버튼을 클릭하면, 실시간 화상 채팅이 가능한 강의에 참가할 수 있습니다.
![]() |
---|
[ 화면 공유 ]
버튼을 누르면 본인이 원하는 화면을 다른 사람에게 공유할 수 있습니다.
![]() |
---|
- 강의를 진행하는 과정에서 강사나 다른 사람의 도움이 필요한 경우 도움 버튼을 눌러 도움을 요청할 수 있습니다.
- 버튼을 누르게 되면 캠 화면 테두리에 효과가 적용되고, 그 이후 강의를 진행하는 사람들과 소통을 진행할 수 있습니다.
- 도움 버튼을 다시 누르면 효과를 제거할 수 있습니다.
![]() |
---|
- 강의가 종료된 후 [ 나가기 ]버튼을 누르면 모달에서 강사를 평가할 수 있습니다.
- 강사 평가는 나쁨, 보통, 좋음 3 단계로 선택할 수 있습니다.
나쁨
: 강사 포인트 10점 차감보통
: 강사 포인트 변화 없음좋음
: 강사 포인트 10점 증가
- 평가를 마치게 되면 실시간 강의에서 나가게 됩니다.
![]() |
---|
- 강사들이 강의를 진행한 후 평가에 따라 지급받은 마일리지를 기준으로 정렬하여 강사들의 프로필을 메인페이지에 게시합니다.
- 강사의 프로필을 볼 수 있으며, 강사의
블로그
,유튜브
,인스타그램
,페이스북
계정 링크가 연결되어 있고, 클릭시 각각의 링크로 이동합니다.
🎥 UCC 보러가기
구분 | 링크 |
---|---|
빌드/배포 | 빌드/배포 바로가기 |
외부서비스 정보 | 외부서비스 정보 바로가기 |
시연 시나리오 | 시연 시나리오 바로가기 |
DB 덤프 데이터 | DB 덤프 데이터 |
발표자료 | 발표자료 바로가기 |