Skip to content
BranchesTags

Latest commit

 

History

38 Commits

Folders and files

NameName
Last commit message
Last commit date
.github/workflows
.github/workflows
 
 
apps
apps
 
 
docs
docs
 
 
packages/fatigue-engine
packages/fatigue-engine
 
 
.gitignore
.gitignore
 
 
README.md
README.md
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 

Repository files navigation

BASEBOARD: 야구 분석 대시보드 (Baseball Analytics Dashboard)

alt text

🚀 주요 기능

1. 대시보드 (Dashboard)

  • 실시간 경기 요약: 현재 진행 중인 경기의 스코어 및 주요 이벤트를 한눈에 확인.
  • 다음 경기 카운트다운: 예정된 다음 경기의 시작까지 남은 시간 표시.
  • 팀 순위 위젯: 리그 내 팀들의 승/패/승률을 기반으로 한 순위 정보 제공.
  • 선수 상태 보드: 전체 선수들의 피로도 수준(Low, Medium, High, Critical) 및 상태(Active, Injured)를 실시간으로 모니터링. 포지션, 피로도 수준, 이름으로 필터링 및 검색 가능.

2. 팀 및 선수 관리 (Teams & Players)

  • 팀 목록: KBO 리그 팀들의 로고, 구장 정보 등을 포함한 목록. 팀 클릭 시 상세 페이지로 이동.
  • 선수 상세 페이지: 특정 선수의 상세 정보(포지션, 피로도 점수, 상태) 및 피로도 변화 추이 차트 시각화. 최근 경기 기록 목록 제공.
  • 경기 상세 모달: 피로도 차트 클릭 시 해당 날짜의 경기 상세 정보(양 팀 라인업 포함) 표시.

3. 실시간 경기 센터 (Game Center)

  • 실시간 경기 상황판: 현재 진행 중인 경기의 스코어보드, 볼카운트(B/S/O), 주자 상황, 실시간 이벤트 피드 제공.
  • 소켓 통신: Socket.io를 통해 백엔드에서 전송되는 실시간 경기 및 선수 피로도 업데이트를 즉시 반영.

4. 분석 (Analytics)

  • 팀별 승률 차트: 리그 전체 팀들의 승률을 막대 그래프로 시각화.
  • 선수 피로도 분포: 전체 선수들의 피로도 수준별 분포를 파이 차트로 시각화.

5. 이동 및 일정 (Travel & Schedule)

  • 다가오는 경기 일정: 향후 예정된 경기 목록 표시.
  • 원정 이동 경로 시각화: 다음 원정 경기의 출발지(원정팀 구장)와 도착지(홈팀 구장)를 로고와 함께 도식화.
  • 이동 거리 및 예상 피로도: 구장 간 위도/경도 기반 실제 이동 거리(Haversine 공식) 및 예상 버스 소요 시간, 피로도 영향 계산.
  • KBO 3연전 로직: 실제 KBO 리그의 3연전 원정/홈 이동 일정을 반영하여 데이터 생성.

6. 리포트 (Reports)

  • 주간/월간 리포트: 팀 성과, 선수 컨디션 등에 대한 요약 리포트 (UI만 구현됨).

7. 설정 (Settings)

  • 환경 설정: 푸시 알림, 이메일 수신, 다크 모드, 실시간 데이터 자동 동기화 등의 UI 토글 제공.
  • 로컬 스토리지 연동: 설정 변경 사항을 브라우저 localStorage에 저장하여 새로고침 시에도 유지. (실제 백엔드 연동은 추가 개발 필요)
  • 다크 모드 즉시 반영: 페이지 로드 시 localStorage에 저장된 다크 모드 설정에 따라 테마 즉시 적용.

🛠️ 기술 스택

프론트엔드 (Client)

  • React: UI 개발을 위한 JavaScript 라이브러리.
  • Vite: 빠르고 효율적인 개발 환경 제공.
  • Tailwind CSS: 유틸리티 우선 CSS 프레임워크로 빠른 UI 스타일링.
  • Zustand: 가볍고 빠른 상태 관리 라이브러리.
  • React Router DOM: 클라이언트 사이드 라우팅.
  • Recharts: 데이터 시각화를 위한 React 차트 라이브러리.
  • Lucide React: 아이콘 라이브러리.
  • Socket.io-client: 실시간 양방향 통신.

백엔드 (Server)

  • Node.js: 서버 사이드 런타임 환경.
  • Express: 웹 애플리케이션 프레임워크.
  • MongoDB: NoSQL 데이터베이스.
  • Mongoose: MongoDB 객체 데이터 모델링(ODM) 라이브러리.
  • Socket.io: 실시간 양방향 통신.
  • dotenv: 환경 변수 관리.
  • fatigue-engine: 선수 피로도 계산을 위한 별도 패키지 (모노레포 내).

개발 환경

  • Monorepo: apps/client, apps/server, packages/fatigue-engine로 구성된 모노레포 구조.
  • ESM: ES Modules 문법 사용.

⚙️ 프로젝트 실행 방법

  1. 환경 변수 설정:

    • apps/server 폴더 내에 .env 파일을 생성하고 MongoDB Atlas 연결 URI를 MONGO_URI="YOUR_MONGODB_ATLAS_URI" 형식으로 입력합니다.

  2. 의존성 설치:

    npm install

  3. 데이터베이스 시딩 (초기 데이터 주입):

    cd apps/server
node seed3.js

  4. 개발 서버 실행:

    # 백엔드 서버 실행
cd apps/server
npm run dev

# 프론트엔드 서버 실행 (새 터미널)
cd apps/client
npm run dev

  5. 접속: 웹 브라우저에서 http://localhost:5173으로 접속합니다.

📝 지금까지 한 내용 (단계별 요약)

프로젝트의 상세 개발 과정은 docs/지금까지 한 내용.md 파일을 참조해 주세요.

이 README.md 파일은 프로젝트의 개요와 주요 특징을 명확하게 전달하며, 새로운 팀원이나 기여자에게 프로젝트를 이해하고 시작하는 데 필요한 정보를 제공합니다.

alt text

🚀 주요 기능

1. 대시보드 (Dashboard)

  • 실시간 경기 요약: 현재 진행 중인 경기의 스코어 및 주요 이벤트를 한눈에 확인.
  • 다음 경기 카운트다운: 예정된 다음 경기의 시작까지 남은 시간 표시.
  • 팀 순위 위젯: 리그 내 팀들의 승/패/승률을 기반으로 한 순위 정보 제공.
  • 선수 상태 보드: 전체 선수들의 피로도 수준(Low, Medium, High, Critical) 및 상태(Active, Injured)를 실시간으로 모니터링. 포지션, 피로도 수준, 이름으로 필터링 및 검색 가능.

2. 팀 및 선수 관리 (Teams & Players)

  • 팀 목록: KBO 리그 팀들의 로고, 구장 정보 등을 포함한 목록. 팀 클릭 시 상세 페이지로 이동.
  • 선수 상세 페이지: 특정 선수의 상세 정보(포지션, 피로도 점수, 상태) 및 피로도 변화 추이 차트 시각화. 최근 경기 기록 목록 제공.
  • 경기 상세 모달: 피로도 차트 클릭 시 해당 날짜의 경기 상세 정보(양 팀 라인업 포함) 표시.

3. 실시간 경기 센터 (Game Center)

  • 실시간 경기 상황판: 현재 진행 중인 경기의 스코어보드, 볼카운트(B/S/O), 주자 상황, 실시간 이벤트 피드 제공.
  • 소켓 통신: Socket.io를 통해 백엔드에서 전송되는 실시간 경기 및 선수 피로도 업데이트를 즉시 반영.

4. 분석 (Analytics)

  • 팀별 승률 차트: 리그 전체 팀들의 승률을 막대 그래프로 시각화.
  • 선수 피로도 분포: 전체 선수들의 피로도 수준별 분포를 파이 차트로 시각화.

5. 이동 및 일정 (Travel & Schedule)

  • 다가오는 경기 일정: 향후 예정된 경기 목록 표시.
  • 원정 이동 경로 시각화: 다음 원정 경기의 출발지(원정팀 구장)와 도착지(홈팀 구장)를 로고와 함께 도식화.
  • 이동 거리 및 예상 피로도: 구장 간 위도/경도 기반 실제 이동 거리(Haversine 공식) 및 예상 버스 소요 시간, 피로도 영향 계산.
  • KBO 3연전 로직: 실제 KBO 리그의 3연전 원정/홈 이동 일정을 반영하여 데이터 생성.

6. 리포트 (Reports)

  • 주간/월간 리포트: 팀 성과, 선수 컨디션 등에 대한 요약 리포트 (UI만 구현됨).

7. 설정 (Settings)

  • 환경 설정: 푸시 알림, 이메일 수신, 다크 모드, 실시간 데이터 자동 동기화 등의 UI 토글 제공.
  • 로컬 스토리지 연동: 설정 변경 사항을 브라우저 localStorage에 저장하여 새로고침 시에도 유지. (실제 백엔드 연동은 추가 개발 필요)

🛠️ 기술 스택

프론트엔드 (Client)

  • React: UI 개발을 위한 JavaScript 라이브러리.
  • Vite: 빠르고 효율적인 개발 환경 제공.
  • Tailwind CSS: 유틸리티 우선 CSS 프레임워크로 빠른 UI 스타일링.
  • Zustand: 가볍고 빠른 상태 관리 라이브러리.
  • React Router DOM: 클라이언트 사이드 라우팅.
  • Recharts: 데이터 시각화를 위한 React 차트 라이브러리.
  • Lucide React: 아이콘 라이브러리.
  • Socket.io-client: 실시간 양방향 통신.

백엔드 (Server)

  • Node.js: 서버 사이드 런타임 환경.
  • Express: 웹 애플리케이션 프레임워크.
  • MongoDB: NoSQL 데이터베이스.
  • Mongoose: MongoDB 객체 데이터 모델링(ODM) 라이브러리.
  • Socket.io: 실시간 양방향 통신.
  • dotenv: 환경 변수 관리.
  • fatigue-engine: 선수 피로도 계산을 위한 별도 패키지 (모노레포 내).

개발 환경

  • Monorepo: apps/client, apps/server, packages/fatigue-engine로 구성된 모노레포 구조.
  • ESM: ES Modules 문법 사용.

⚙️ 프로젝트 실행 방법

  1. 환경 변수 설정:

    • apps/server 폴더 내에 .env 파일을 생성하고 MongoDB Atlas 연결 URI를 MONGO_URI="YOUR_MONGODB_ATLAS_URI" 형식으로 입력합니다.

  2. 의존성 설치:

    npm install

  3. 데이터베이스 시딩 (초기 데이터 주입):

    cd apps/server
node seed3.js

  4. 개발 서버 실행:

    # 백엔드 서버 실행
cd apps/server
npm run dev

# 프론트엔드 서버 실행 (새 터미널)
cd apps/client
npm run dev

  5. 접속: 웹 브라우저에서 http://localhost:5173으로 접속합니다.

📝 지금까지 한 내용 (단계별 요약)

프로젝트의 상세 개발 과정은 docs/지금까지 한 내용.md 파일을 참조해 주세요.

이 README.md 파일은 프로젝트의 개요와 주요 특징을 명확하게 전달하며, 새로운 팀원이나 기여자에게 프로젝트를 이해하고 시작하는 데 필요한 정보를 제공합니다.

About

No description, website, or topics provided.

Resources

Readme
Activity

Stars

0 stars

Watchers

0 watching

Forks

0 forks
Report repository

Releases

Packages

Contributors

Languages