Skip to content

Commit

Permalink
Merge pull request #273 from TheUpperPart/Docs/#272
Browse files Browse the repository at this point in the history 
Config: Update README
  • Loading branch information
@navyjeongs
navyjeongs authored Jan 1, 2024
2 parents 417c5f3 + 888d90a commit 9ecf8b3
Showing 1 changed file with 151 additions and 19 deletions.
170 changes: 151 additions & 19 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,161 @@
# Next.js + Jest
# LeagueHub

This example shows how to configure Jest to work with Next.js.
> **개인이 E-스포츠 대회를 개최, 참가를 편리하게 할 수 있도록 하였어요.**
This includes Next.js' built-in support for Global CSS, CSS Modules and TypeScript.
<aside>
😓 수기, 엑셀을 이용한 대회 관리에서 오는 불편함

## How to Use
</aside>

Quickly get started using [Create Next App](https://github.com/vercel/next.js/tree/canary/packages/create-next-app#readme)!
- 작은 커뮤니티 대회에서부터 큰 기관이 주최하는 대규모 대회에 이르기까지, 많은 E-스포츠 대회가 있어요.
- 대회의 조 배정, 경기 순위 기록 등 대회 관리는 엑셀을 이용해 수작업으로 진행되는 경우가 많아, 대회 주최자와 참가자 모두에게 불편함을 주었어요.
- 기록 시에 실수의 가능성, 비직관적인 프로세스 및 UI 등은 E-스포츠 대회를 개최하거나 참가하기 부담스럽게 만들었어요.
- 이러한 문제를 해결하기 위해, 우리는 LeagueHub를 개발하였어요.

In your terminal, run the following command:

```bash
npx create-next-app --example with-jest with-jest-app
```
## 바로가기 및 시연

```bash
yarn create next-app --example with-jest with-jest-app
```
### [LeagueHub 사이트 바로가기](https://leaguehub.co.kr/)

```bash
pnpm create next-app --example with-jest with-jest-app
```
### [LeagueHub 노션 바로가기](https://hyeonjun0530.notion.site/League-Hub-850d21e06cb844eea424eae8f7b3bc24?pvs=4)

## Run Jest Tests
### [LeagueHub 시연영상](https://youtu.be/yH1I6k4Sq4Y)

```bash
npm test
```
## Github

### 🔗[Github(Frontend)](https://github.com/TheUpperPart/leaguehub-Frontend)

### 🔗[Github(Backend)](https://github.com/TheUpperPart/leaguehub-backend)

### 🔗[Github(Organization)](https://github.com/TheUpperPart)


## 핵심 기능

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

![Untitled](https://cdn.discordapp.com/attachments/1184714823334899802/1184715869683716126/Untitled.png?ex=658cfba2&is=657a86a2&hm=2fd513731ece8c68bd67d9f4890d3e90130a8a1e3918460e251892956f44e386&)

❶ 대회(채널) 참가

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

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

❹ 게임의 패치노트 확인

### `관리자 - 대회 관리 페이지`

| ![Untitled](https://cdn.discordapp.com/attachments/1184714823334899802/1184715919516246036/Untitled.png?ex=658cfbae&is=657a86ae&hm=79b30a872a331607d02d20d169c21b3e051895e821cce233a7fd3021040b32a6&) | ![Untitled](https://cdn.discordapp.com/attachments/1184714823334899802/1184717842508165161/Untitled.png?ex=658cfd78&is=657a8878&hm=a862efa705b689b3e8ba3609b58974c64389e2356d62161f2eefe1c7440c5b08&) |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |

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

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

### `채널 추가하기`

![Untitled](https://cdn.discordapp.com/attachments/1184714823334899802/1184717911043096626/Untitled.png?ex=658cfd88&is=657a8888&hm=9f2f190c0a20a78cf4dc7159432c78ca73feb26143eb974dbcedf67f44dcee64&)

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

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

### `채널 생성하기`

![Untitled](https://cdn.discordapp.com/attachments/1184714823334899802/1184717952868700170/Untitled.png?ex=658cfd92&is=657a8892&hm=288772e38098be3edfb4023f242870e07a3a54162171d16d753c20cf0e4c6d03&)

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

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

### `채널 참가하기`

![Untitled](https://cdn.discordapp.com/attachments/1184714823334899802/1184717980647571456/Untitled.png?ex=658cfd99&is=657a8899&hm=33bedd6f42f73d6adb50da94d994bdcf67bab754fd5013e14e633650238c2522&)

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

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

### `관리자 - 경기 페이지`

![Untitled](https://cdn.discordapp.com/attachments/1184714823334899802/1184718125632065576/image.png?ex=658cfdbc&is=657a88bc&hm=4430460ce1e3709b63ec55fc28c0978621edc80b848f65d0c53fb024a75a9731&)

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

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

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

### `사용자 - 경기 페이지`

![Untitled](https://cdn.discordapp.com/attachments/1184714823334899802/1184718186025848854/Untitled.png?ex=658cfdca&is=657a88ca&hm=8291fb976ce8545f81ab888eba7be11f5518c87cacc5109aceb83a63013c6185&)

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

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

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

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

### `대진표`

![Untitled](https://cdn.discordapp.com/attachments/1184714823334899802/1184719012924489808/Untitled.png?ex=658cfe8f&is=657a898f&hm=5b8735b44cb249d59479e289536da8e7d44201a29bb98bd83f5b8552d811a4a5&)

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

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

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

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

### 시스템 아키텍처

![Architecure.png](https://cdn.discordapp.com/attachments/1184714823334899802/1184719086706499614/Architecure.png?ex=658cfea1&is=657a89a1&hm=1a3b0b0da38483820655247909b90a2e1e0fbc79770c121f3e5f9623bf710ab0&)

### 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

| 김현준 | 박정석 | 이상엽 | 이경훈 | 홍성우 |
| :------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------: | :-----------------------------------------------------------------------------------------------: |
| [![image](https://avatars.githubusercontent.com/u/102659136?v=4)](https://github.com/HyeonJun0530) | [![image](https://avatars.githubusercontent.com/u/100738049?v=4)](https://github.com/navyjeongs) | [![image](https://avatars.githubusercontent.com/u/71641127?v=4)](https://github.com/pp449) | [![image](https://avatars.githubusercontent.com/u/87762815?v=4)](https://github.com/TinyFrogs) | [![image](https://avatars.githubusercontent.com/u/48763809?v=4)](https://github.com/hennible0612) |
| [🔗Github](https://github.com/HyeonJun0530) | [🔗github](https://github.com/navyjeongs) | [🔗github](https://github.com/pp449) | [🔗github](https://github.com/TinyFrogs) | [🔗github](https://github.com/hennible0612) |
| BE | FE | FE | BE | BE |
| [email protected] | [email protected] | [email protected] | [email protected] | [email protected] |

0 comments on commit 9ecf8b3

Please sign in to comment.