LoLPRO.GG

📝 프로젝트 소개

LoLPRO.GG는 LCK 팬이라면 놓칠 수 없는 일정, 순위, 승부 예측을 한눈에 볼 수 있는 곳입니다.

• ⭐ 일정: LCK의 모든 경기를 한눈에 확인하며, 각 팀의 경기가 언제 열리는지 쉽게 알 수 있습니다.
• ⭐ 순위: LCK 팀들의 실시간 순위 변동을 확인하고, 현재 리그의 강자들을 파악할 수 있습니다.
• ⭐ 승부예측: 각 LCK 경기의 승부를 예측하고, 예상 결과를 바탕으로 재미를 더할 수 있습니다.

🙋‍♂️ 팀원 구성

김도영	하지혜
@rlaehdud159	@jihyezi

1. 🖥️ 개발 환경

Environment

Config

Development

Communication

Deployment

2. 🗂️ 프로젝트 구조

📦LoLPRO.GG
 ┣ 📂backend
 ┃ ┣ 📂config
 ┃ ┃ ┣ 📜firebaseConfig.js
 ┃ ┣ 📂controllers
 ┃ ┣ 📂routes
 ┃ ┣ 📂scraper
 ┃ ┣ 📜.env
 ┃ ┣ 📜app.js
 ┃ ┣ 📜monitor.js
 ┃ ┣ 📜package-lock.json
 ┃ ┗ 📜package.json
 ┣ 📂frontend
 ┃ ┣ 📂public
 ┃ ┣ 📂src
 ┃ ┃ ┣ 📂api
 ┃ ┃ ┣ 📂assets
 ┃ ┃ ┣ 📂components
 ┃ ┃ ┃ ┣ 📂Home
 ┃ ┃ ┃ ┣ 📂Prediction
 ┃ ┃ ┃ ┣ 📂Ranking
 ┃ ┃ ┃ ┗ 📂Schedule
 ┃ ┃ ┣ 📂context
 ┃ ┃ ┣ 📂fonts
 ┃ ┃ ┣ 📂pages
 ┃ ┃ ┣ 📜App.css
 ┃ ┃ ┣ 📜App.js
 ┃ ┃ ┣ 📜App.test.js
 ┃ ┃ ┣ 📜firebase.js
 ┃ ┃ ┣ 📜index.css
 ┃ ┃ ┣ 📜index.js
 ┃ ┃ ┣ 📜logo.svg
 ┃ ┃ ┣ 📜reportWebVitals.js
 ┃ ┃ ┗ 📜setupTests.js
 ┃ ┣ 📜.env
 ┃ ┣ 📜jsconfig.json
 ┃ ┣ 📜package-lock.json
 ┃ ┗ 📜package.json
 ┣ 📜.gitignore
 ┣ 📜package-lock.json
 ┣ 📜pull_request_template.md
 ┗ 📜README.md

3. 👥 역할 분담

김도영

• UI Design
• Backend
• DB Design
• Page
  • Home
  • Schedule
  • Ranking

하지혜

• UI Design
• DB Design
• Page
• Login
• Home
• Prediction

4. ⏱️ 개발 기간 및 작업 관리

개발 기간

• 전체 개발 기간 : 2024년 1월 2일 ~ 2월 28일
• UI 구현 : 2024년 1월 6일 ~ 1월 13일
• 기능 구현 : 2024년 1월 13일 ~ 2월 21일

작업 관리

• 진행 상황 공유 : Discord를 활용하여 팀원과 실시간 소통하며 진행 상황을 공유했습니다.
• 회의 및 기록 : 매주 정기적으로 회의를 진행하며 작업 순서와 방향성을 논의하였고, 주요 논의 사항과 결론은 Notion에 정리하여 기록 및 공유했습니다.

5. 📄 페이지별 기능

Home

Schedule

• 경기 목록 및 결과: 날짜별 및 팀별 경기 리스트를 제공하며, 일정 클릭 시 경기 결과를 승패 여부에 따라 구분하여 표시합니다.

Ranking

• 리그별 순위 조회: 리그별 순위 리스트를 제공하며, 특정 리그를 선택하면 해당 시즌의 순위를 확인할 수 있습니다.

Prediction

• 경기 목록 및 상태 표시: 날짜별 경기 리스트를 보여주며, 경기 상태(예정, 진행 중, 종료됨)를 구분하여 표시합니다.

• 승부예측 가능 여부: 경기 시작 전까지 승부예측이 가능하며, 경기 시작 후에는 비활성화됩니다.

• 승부예측 결과 반영: 경기 종료 후 결과가 업데이트되며, 예측 성공/실패 또는 미참여 여부를 표시합니다.

• 데이터 저장 및 처리: 사용자의 승부예측 데이터를 Firestore에 저장하고, 경기 종료 후 결과를 반영하여 업데이트합니다.

Login & Signup

• 이메일 로그인 기능: 사용자는 이메일과 비밀번호로 로그인할 수 있으며, 정보가 맞지 않으면 경고 메시지가 표시됩니다.

• 구글 로그인 기능: 구글 계정으로 로그인할 수 있으며, 이메일의 앞부분이 닉네임으로 설정됩니다.

• 정상적으로 로그인되면 홈 화면으로 자동 이동합니다.

• 회원가입 기능: 사용자는 닉네임, 이메일, 비밀번호를 입력하여 회원가입할 수 있습니다.

• 회원가입 시 입력 검증: 이메일 형식, 비밀번호 조건, 비밀번호 일치 여부 등을 확인하여 조건을 충족해야 회원가입이 가능합니다.

• 구글 계정으로 회원가입: "구글로 시작하기" 옵션을 통해 별도의 입력 없이 회원가입이 가능합니다.