SWith-FrontEnd

2021-2 AJOU Univ. SoftWare Capstone Project

---

목차

1. 개요
2. 시스템 개요
3. 빌드
4. 페이지 구성
5. 소개 영상

1. 개요

기존에 온라인으로 다른사람과 함께 공부를 한다는 것은 여러 문제점들이 있습니다.
먼저, 함께 공부할 사람을 찾기 위해선 특정 커뮤니티에 가입해 원하는 공부목적을 가진 사람들을 모아야 하지만 쉽게 찾기가 어렵습니다. 또한 Zoom과 Google Meet 같은 화상회의 플랫폼은 다른사람의 초대나 입장 권한을 받아야 참가할 수 있어 단순 공부만을 하는 데엔 불편함이 있으며, 공부계획을 세울 때 함께 공부하는 사람들의 공부법을 참고하기 힘듭니다. 따라서 이러한 문제를 해결하기 위해 SWith은 함께 공부할 사람을 모으고 관리할 수 있도록 커뮤니티 서비스를 제공합니다. 또한 WebRTC 기반의 화상공유 플랫폼으로 다른 사람들과 실시간 소통을 할 수 있고, 자유롭게 누구나 참여가 가능합니다. 학습관리 서비스로 자신의 공부방법을 세울 수 있으며, 다른 사람들의 공부방식도 참고할 수 있습니다.

2. 시스템 개요

• Jenkins를 이용하여 빌드 및 배포 자동화를 구현했습니다.

• webRTC를 이용한 화상 공유를 구현하여 SDK를 이용해 구현한 것과 다르게 추가 비용이 들지 않았습니다.

• webRTC 통신 구조 중 Mesh구조를 선택하여 높은 실시간성을 보장합니다.

• 웹앱 기반의 캘린더 오픈소스인 FullCalendar와 그래프 오픈소스인 ApexCharts를 이용하여 사용자에게 학습 관리 및 학습 통계에 대한 편의성 제공하였습니다.

3. 빌드

• Clone

git clone https://github.com/Andante-SWith/SWith-FrontEnd.git

• Change Directory

cd frontend

• Install

yarn install

• Start

yarn start

4. 페이지 구성

1. 메인페이지

• 메인
  
  

• 내 스터디
  
  

• 스터디 목록
  
  
  
  

2. 로그인 페이지

3. 회원가입 페이지

4. 프로필 페이지

• 프로필
  
  

• 프로필 편집
  
  

5.. 스터디룸 페이지

• 스터디룸
  
  

• 스터디룸 만들기
  
  
  
  

• 스터디룸 설정 수정
  
  

6. 학습관리 페이지

• 캘린더
  
  

• 통계
  
  

7. 커뮤니티 페이지

• 게시글 목록
  
  

• 게시글
  
  

• 게시글 작성
  
  
  
  

5. 소개 영상

https://softcon.ajou.ac.kr/works/works.asp?uid=487