🏀 Basketball Stats Dashboard

아마추어 농구 동호회를 위한 올인원 리그 운영·기록 플랫폼입니다. 경기 이벤트 단위 기록부터 유튜브 하이라이트 싱크, AI MVP 선정, 개인화 스탯 대시보드, 인스타그램 매거진 카드 발행, 웹 푸시 공지까지 — "우리끼리 진짜 리그처럼" 운영합니다.

• 리그 대시보드 (메인): /league/[org]/[year] — 동호회 자체 리그 운영 (미라클모닝농구단)
• 대회 대시보드: /[org]/[team] — 외부 대회 출전 기록 관리 (파란날개)

---

리그 시스템 주요 기능

👤 회원 시스템 & 개인화

• 가입 요청 → 운영자 승인 플로우 (로스터 이름 자동완성, 승인 대기 배지)
• 로그인(HMAC 세션·httpOnly 쿠키) · 비밀번호 셀프 변경 · 어드민 초기화
• 개인화 대시보드 (홈 상단): 시즌 누적 PTS/REB/AST/STL/BLK + 부문별 랭킹(🥇🥈🥉 메달), 🔥 진행 중 스트릭 보드(연속 참석·연속 득점 등), 마일스톤 체이서(다음 기록까지 진행률), 선수카드
• 접속 현황: 헤더 상시 인디케이터 — 지금 접속 중인 회원(온라인/오프라인 탭, 전체 공개)
• 라커룸 인증 회원 배지 · 인증 회원 필터

🔒 회원 전용 콘텐츠 게이팅

• 공개: 박스스코어·경기 일정·선수 명단·순위표·공지
• 승인 회원 전용: 시즌 스탯·리더보드·어워즈·마일스톤·선수 상세·하이라이트 영상
• UI 숨김이 아닌 API 서버 차단(401) — 세션 + DB 승인상태 이중 검증, 운영자 PIN 우회 지원

🔔 웹 푸시 알림 (PWA)

• 공지 발행 시 전체 구독자 자동 푸시 (제목·요약·본문 첫 이미지 히어로 배너)
• 설정에서 즉석 알럿 발송 (경기 취소 등) · 구독자 수 확인
• 회원 셀프 opt-in(🔔 알림 켜기) · 만료 구독 자동 정리 · iOS PWA 안내
• 홈 화면 설치(PWA) · 브랜드 아이콘/모노크롬 배지 · 알림 "열기" 액션

📢 공지 시스템

• WYSIWYG 에디터(TipTap): 서식·이미지 붙여넣기 자동 업로드·내부 페이지 링크 픽커
• 고정(핀)·NEW 배지·미확인 카운트·댓글·아카이브
• 발행 시 "알림 보내기" 토글 → 푸시 연동

📹 경기 기록 & 하이라이트

• 이벤트 단위 실시간 기록: 2·3점/자유투/리바운드/어시스트/스틸/블록/턴오버/파울 + 발생 시각
• 유튜브 영상 타임스탬프 싱크 → 이벤트 클릭 시 해당 장면 재생
• 하이라이트 자동 생성: 라운드별·선수별 클립 연속 재생, 클러치샷 큐레이션
• 채널 핸들 등록 시 날짜별 영상 자동 매핑 (260418 경기 9 형식)
• 스틸-턴오버 자동 페어링(2초 윈도우) · 친선전 모드(순위 제외·개인 스탯 포함)

📊 스탯 & 랭킹

• 시즌/분기/라운드 단위 리더보드 (Per-40 환산 지원)
• 시즌하이 · 플레이맵(공격유형별 시도×성공률 차트) · 선수 유사도 · 클러치 지표
• 분기별 어워즈(시상) · POTW · 리더 배지 · 커리어 마일스톤 자동 추적
• 팀 순위표(승률·마진) · 라운드 요약 카드

🤖 AI 기능 (Claude)

• 경기별 AI MVP / X-FACTOR 자동 선정 + 선정 코멘트
• AI 프로필 사진 생성 (선수 사진 → 일러스트 프로필)

📸 인스타그램 매거진 카드 생성기

• 라운드 선택 → 9종 카드 자동 생성 (표지/스코어보드/부문별 TOP3/베스트/분기 순위/마일스톤)
• 1080×1350(4:5) PNG 일괄 저장 · 릴스 컷 시트(유튜브 딥링크 타임코드)
• 팀 소속·상세 지표 박스·AI 베스트 선정 표기

🎯 운영 도구

• 편집 PIN 기반 운영자 모드 (설정·기록·공지·승인 관리)
• 드래프트 시스템: 로터리 추첨 → 실시간 픽 (참가 코드·타이머·자동 픽)
• 분기 날짜 범위·정기 일정 자동 생성·플러스원(나이 가산) 규칙
• 첫 방문 인터랙티브 투어(GSAP) · 다크/라이트 테마 · 모바일 최적화(하단 탭바)

---

대회 대시보드 (외부 대회 출전용)

• 대회 생성·경기 관리·유튜브 일괄 임포트
• 실시간 기록(세션 복구·라인업 교체·즉석 선수 추가)
• 박스스코어(DD/TD 배지) · AI MVP/X-FACTOR · 커리어 하이 · 상대팀 분석

---

기술 스택

구분	기술
프레임워크	Next.js 16 (App Router) + React 19
언어	TypeScript
스타일	Tailwind CSS 4 (mm-* 디자인 토큰 · 다크/라이트)
DB / Auth	Supabase (PostgreSQL + RLS) · 자체 HMAC 세션
AI	Anthropic Claude
푸시	Web Push (VAPID) + Service Worker
영상	YouTube IFrame API
차트	recharts
배포	Vercel (master push → 자동 배포)

---

환경 변수

NEXT_PUBLIC_SUPABASE_URL=
NEXT_PUBLIC_SUPABASE_ANON_KEY=
SUPABASE_SERVICE_ROLE_KEY=
ANTHROPIC_API_KEY=
EDIT_MODE_PIN=
# 웹 푸시 (VAPID)
VAPID_PUBLIC_KEY=
NEXT_PUBLIC_VAPID_PUBLIC_KEY=
VAPID_PRIVATE_KEY=
VAPID_SUBJECT=mailto:[email protected]

로컬 실행

npm install
npm run dev

배포

• GitHub master push → Vercel 자동 빌드·배포
• DB 스키마: supabase/migrations/NNN_*.sql