아마추어 대회 개최 플랫폼

LeagueHub

바로가기 및 시연

LeagueHub 사이트

LeagueHub 노션 바로가기

Github

🔗Github(Frontend)

🔗Github(Backend)

🔗Github(Organization)

배경(Problem)

---

LeagueHub

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

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

E-스포츠 대회의 세계는 다양한 규모의 대회가 존재합니다. 작은 커뮤니티 대회에서부터 큰 기관이 주최하는 대규모 대회에 이르기까지, 많은 E-스포츠 대회가 있어요.

하지만 각 대회에서는 대회의 조 배정, 경기 순위 기록 등 대회 관리는 엑셀을 이용해 수작업으로 진행되는 경우가 많아, 대회 주최자와 참가자 모두에게 불편함을 주었어요.

기록 시에 실수의 가능성, 비직관적인 프로세스 및 UI 등은 E-스포츠 대회를 개최하거나 참가하기 부담스럽게 만들었어요.

이러한 문제를 해결하기 위해, 우리는 LeagueHub를 개발하였어요.

서비스 소개(Solution)

---

기대효과

1️⃣ 사용자 증가 및 참여 활성화

• 아마추어 리그에 대한 적극적인 참여를 독려함으로써 플랫폼에 대한 사용자 수를 증가시킬 수 있어요.
• 다양한 게임 지원과 유연한 리그 설정을 통해 사용자들은 자신이 원하는 게임에서 참가할 수 있으며, 자신만의 리그를 만들 수 있어요.

2️⃣ 커뮤니티 형성과 상호 작용 강화

• 아마추어 리그 플랫폼을 통해 게임 커뮤니티가 형성될 수 있어요
• 사용자들은 자신의 게임 능력을 측정하고 비교하며, 다른 플레이어들과 소통하고 경쟁할 수 있는 경험을 즐길 수 있어요
• 이는 사용자들 간의 상호 작용을 촉진하고, 게임에 대한 더욱 흥미로운 경험을 제공해요요

3️⃣ 사용자 중심의 서비스 제공

• 사용자들은 자신의 리그를 쉽게 생성하고 관리할 수 있는 사용자 중심의 서비스를 경험할 수 있어요
• 사용자들이 플랫폼을 편리하게 이용할 수 있어요
• 사용자 피드백을 반영한 지속적인 서비스 개선을 통해 사용자들의 만족도를 높일 수 있어요

핵심 기능

---

로그인

❶ 카카오를 이용한 로그인

❷ 추후 다른 소셜 로그인 도입 예정

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

❶ 대회(채널) 참가

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

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

❹ 게임의 패치노트 확인

관리자 - 대회 관리 페이지

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

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

리그허브 공지사항

❶ 게임의 패치노트 확인

채널 추가하기

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

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

채널 생성하기

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

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

채널 참가하기

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

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

관리자 - 경기 페이지

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

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

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

사용자 - 경기 페이지

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

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

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

❹ 채팅을 통한 관리자 및 참가자와의 소통, 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를 이용하여 서버를 구성했어요.

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

2️⃣ ORM 기술인 JPA과 MYSQL 8.0을 이용하여 데이터베이스를 구축했어요.

• Spring Data JPA, MYSQL 8.0
• ERD 구성은 ErdCloud를 참고하시길 바랄께요 !

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

• Jtw 4.4.0 , Spring Security 3.1.0
• Jwt를 활용해 카카오 로그인을 구현했어요.
• Jwt 기반의 stateless한 로그인을 구현했어요.

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

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

5️⃣ AWS LightSail, AWS S3를 이용해 배포하였어요.

팀 소개

---

CONTACT

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