LeagueHub

개인이 E-스포츠 대회를 개최, 참가를 편리하게 할 수 있도록 하였어요.

😓 수기, 엑셀을 이용한 대회 관리에서 오는 불편함

• 작은 커뮤니티 대회에서부터 큰 기관이 주최하는 대규모 대회에 이르기까지, 많은 E-스포츠 대회가 있어요.
• 대회의 조 배정, 경기 순위 기록 등 대회 관리는 엑셀을 이용해 수작업으로 진행되는 경우가 많아, 대회 주최자와 참가자 모두에게 불편함을 주었어요.
• 기록 시에 실수의 가능성, 비직관적인 프로세스 및 UI 등은 E-스포츠 대회를 개최하거나 참가하기 부담스럽게 만들었어요.
• 이러한 문제를 해결하기 위해, 우리는 LeagueHub를 개발하였어요.

바로가기 및 시연

LeagueHub 사이트 바로가기

LeagueHub 노션 바로가기

LeagueHub 시연영상

Github

🔗Github(Frontend)

🔗Github(Backend)

🔗Github(Organization)

핵심 기능

메인페이지(관리자, 사용자)

❶ 대회(채널) 참가

❷ 이미 들어간 채널을 선택하여 채널 둘러보기

❸ 해당 웹 서비스의 공지사항 확인

❹ 게임의 패치노트 확인

관리자 - 대회 관리 페이지

❶ 채널의 홈 화면에서 대회의 정보를 수정

❷ 대회 관리에서 대회 설정(대회 시작, 경기 배정, 채널 정보 수정) 및 대회 알림 확인

채널 추가하기

❶ 대회 개최를 이용하여 자신의 채널 생성

❷ 다른 채널의 참여 코드를 이용하여 채널 참여

채널 생성하기

❶ 예시 폼을 작성하여 채널을 생성

❷ 커스텀 룰, 대회 이미지를 선택하여 설정

채널 참가하기

❶ 참여 코드를 입력하여 채널 참여

경기 페이지(관리자, 사용자)

관리자 - 경기 페이지

❶ 실격 처리 버튼을 이용하여 해당 대회 참가자 실격

❷ 채팅을 통하여 참가들과 소통

❸ 체크 박스(체크인)을 통한 준비 확인

사용자 - 경기 페이지

❶ 준비 버튼을 통한 준비(체크 박스) 체크

❷ 초록색 배경을 통한 자신의 위치 확인

❸ 체크 박스(체크인)을 통한 준비 확인

❹ 채팅을 통한 관리자 및 참가자와의 소통, Call Admin을 통한 관리자 호출

대진표

❶ 대진표를 통하여 참여자 확인

❷ 대진표의 회색 바탕을 통하여 실격자 확인

❸ 자세히 버튼 또는 현재 라운드(라운드 2)를 통하여 해당 그룹의 대회 페이지로 이동 가능

❹ 빨간 점을 통하여 현재 Round 확인

시스템 아키텍처

Frontend

1️⃣ Nextjs 13을 사용해서 SSR 환경을 구축했어요.

• page router를 사용해서 SSR 환경을 구축했어요.
• meta 태그 작성, title 변경등으로 SEO 최적화를 했어요.

2️⃣ 테스트 코드를 작성했어요.

• Jest와 React Testing Library로 테스트 코드를 작성했어요.

3️⃣ Docker 환경을 구축하여 CI/CD를 자동화하였어요.

• CI/CD를 작성하여 배포 시간을 단축하였어요.

4️⃣ Stomp 웹 소켓을 사용하여 실시간 서비스를 구현했어요.

Backend

1️⃣ Java 기반의 Spring Boot를 이용하여 서버를 구성했어요.

• Jacoco 0.8.7를 사용하여 테스트 커버리지 70%를 유지했어요.

3️⃣ Spring Security를 이용한 OAuth 2.0 기반의 다양한 소셜 로그인을 구현했어요.

• Jwt를 활용해 카카오 로그인을 구현했어요.
• Jwt 기반의 stateless한 로그인을 구현했어요.

4️⃣ Stomp 웹 소켓을 사용하여 실시간 서비스를 구현했어요.

• Riot API를 사용하여 경기 결과를 확인 후 실시간 점수 업데이트를 했어요.
• 실시간 채팅 서비스를 구현하기 위해 Redis를 이용했어요.
• 유저의 체크인, 알림을 구현했어요.

팀 소개

CONTACT

김현준	박정석	이상엽	이경훈	홍성우
🔗Github	🔗github	🔗github	🔗github	🔗github
BE	FE	FE	BE	BE
[email protected]	[email protected]	[email protected]	[email protected]	[email protected]