Merge pull request #273 from TheUpperPart/Docs/#272

Config: Update README

README.md

@@ -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]                                        |