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 덤프 데이터
발표자료	발표자료 바로가기