Do Learn Do Learn Project

👪 개발 멤버 소개

👑 김찬휘 (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.02.17

• 기획 및 설계 : 23.01.02 ~ 23.01.06
• 프로젝트 구현 : 23.01.09 ~ 23.02.10
• 버그 수정 및 산출물 정리 : 23.02.13 ~ 23.02.17

💡 서비스 소개

두런두런(Do Learn Do Learn)

넘쳐나는 강의😥 그러나 내게 꼭 맞는 강의 찾기가 힘들지 않으신가요?
원하는 강의가 없다면 이젠 찾지말고 직접 만들어보세요!!
즉각적인 소통을 통해 주도적인 학습을 진행할 수 있습니다.

더 나은 학습경험을 위한 공간, Do Learn에서 함께 공부하세요!

🛠️ 기술 스택

상세 기술스택 및 버전

구분	기술스택	상세내용	버전
공통	형상관리	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 배포 흐름도

🎨 Design

MockUp

Figma

🗂 DIAGRAM

ERD

MySQL Detail

📁 디렉토리 구조 (Front-end)

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

📁 디렉토리 구조 (Back-end)

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

🖥️ 주요기능

I. 유저 CRUD

• 이름, 이메일, 비밀번호를 필수적으로 입력하여 회원가입을 합니다.
• 가입된 계정이나, 구글 혹은 카카오 계정을 통해 로그인이 가능합니다.
• 메인페이지 우측 상단의 사용자 이름을 클릭하여 마이페이지로 이동하면, 프로필 정보를 수정할 수 있습니다.
• 마이페이지 좌측 하단의 [ 회원탈퇴 ] 를 클릭하여 계정을 삭제합니다.

II. 강의 요청 게시물 등록

• 수강자가 원하는 주제를 정하여 강사와 수강생을 모집하는 게시글을 작성할 수 있습니다.
• 강의 제목, 모집 인원, 모집 기간 및 강의 일시 등을 작성합니다.
• 강의 일시를 오늘 날짜로 설정할 경우, 현재 시간 이후의 강의 시간만 선택 가능합니다.
• 하단의 [ 등록 ]을 통해 신규 게시글을 등록합니다.
  • 미기입된 항목을 검사하고, 기입해야할 내용이 있을 경우 경고 모달을 띄웁니다.
  • 사용자가 사전에 신청한 강의 목록을 검사하고 일정이 겹칠 경우 등록 불가합니다.

III. 강사 · 수강생 신청

• 수강을 원하는 게시글이 있다면 수강생으로 신청할 수 있습니다.
• 게시글의 조건에 맞춰 강의를 진행할 수 있다면 강사로 신청할 수 있습니다.

IV. 강사 선택 및 강의 확정

• 작성한 게시글에 강사가 신청했다면 원하는 강사를 선택하여 강의를 확정할 수 있습니다.

V. 강의 활성화 전

• 마이페이지의 [ 일정 ] 탭에 들어가면, 모집완료된 강의들의 일정을 한눈에 확인할수있습니다.
• 달력에서 특정 강의 일정을 클릭하면, 그 강의를 진행하는 강사 정보와 수강인원, 강의정보 등을 확인할 수 있습니다.
• 아직 진행되지 않은 강의의 경우 신청취소가 가능합니다.

VI. 강의 활성화 후

• 강의시작 10분전이 되면, 마이페이지의 [ 일정 ] 탭에서 해당 강의를 클릭할 경우, [ Live 입장 ] 이라는 버튼이 활성화됩니다.
• 또한 메인화면 우측의 Small Schedule을 통해, 현재 유저의 오늘 일정을 확인할 수 있습니다.
• 강의시작 10분전에 Small Schedule에서 해당 강의에 접속하기 위한 [ Live 입장 ] 버튼이 활성화됩니다.

VII. 강의장 입장

• 메인화면 우측의 Small Schedule을 통해, 현재 유저의 오늘 일정을 확인할 수 있습니다.
• 강의시작 10분전에 Small Schedule에서 해당 강의에 접속하기 위한 [ Live 입장 ] 버튼이 활성화됩니다.
• 활성화된 버튼을 클릭하면, 실시간 화상 채팅이 가능한 강의에 참가할 수 있습니다.

VIII. 화면 공유

• [ 화면 공유 ] 버튼을 누르면 본인이 원하는 화면을 다른 사람에게 공유할 수 있습니다.

IX. 도움 요청

• 강의를 진행하는 과정에서 강사나 다른 사람의 도움이 필요한 경우 도움 버튼을 눌러 도움을 요청할 수 있습니다.
• 버튼을 누르게 되면 캠 화면 테두리에 효과가 적용되고, 그 이후 강의를 진행하는 사람들과 소통을 진행할 수 있습니다.
• 도움 버튼을 다시 누르면 효과를 제거할 수 있습니다.

X. 강사 평가

• 강의가 종료된 후 [ 나가기 ]버튼을 누르면 모달에서 강사를 평가할 수 있습니다.
• 강사 평가는 나쁨, 보통, 좋음 3 단계로 선택할 수 있습니다.
  • 나쁨 : 강사 포인트 10점 차감
  • 보통 : 강사 포인트 변화 없음
  • 좋음 : 강사 포인트 10점 증가
• 평가를 마치게 되면 실시간 강의에서 나가게 됩니다.

XV. 강사 프로필

• 강사들이 강의를 진행한 후 평가에 따라 지급받은 마일리지를 기준으로 정렬하여 강사들의 프로필을 메인페이지에 게시합니다.
• 강사의 프로필을 볼 수 있으며, 강사의 블로그, 유튜브, 인스타그램, 페이스북 계정 링크가 연결되어 있고, 클릭시 각각의 링크로 이동합니다.

🎥 UCC 보러가기

👥 협업 관리

I. Jira Burn Down Chart

1주차

2주차

3주차

4주차

5주차

II. Notion

Link

📋 프로젝트 관련 문서

구분	링크
빌드/배포	빌드/배포 바로가기
외부서비스 정보	외부서비스 정보 바로가기
시연 시나리오	시연 시나리오 바로가기
DB 덤프 데이터	DB 덤프 데이터
발표자료	발표자료 바로가기