🏀 토도동 - NBA 실시간 데이터 및 채팅

배포링크

https://tododong.com

🗂️ 목차

• 🔎 서비스 소개
• 👥 팀원 소개
• 🛠️ 기술 스택
• 📝 협업 방식
• ✨ 기능 소개
• 💾 ERD
• 📁 프로젝트 구조

🔎 서비스 소개

1. NBA 경기 일정 및 영상 함께 제공
2. 실시간 경기 데이터 제공

• 경기 점수: 현재 스코어 업데이트
• 선수 기록: 득점, 리바운드, 어시스트 등 주요 통계 제공
• 중계 텍스트: 경기 흐름을 실시간으로 텍스트 중계

3. 경기 별 실시간 채팅 기능

👥 팀원 소개

김승수	고가연	윤지수	장주원
팀장	팀원	팀원	팀원

🛠 기술 스택

Frontend

카테고리	사용 기술
Framework
Language
Styling
Library

Bankend

카테고리	사용 기술
ORM
WebSockets

Development

카테고리	사용 기술
패키지 관리
협업 도구

📝 협업 방식

Git Flow 전략

커밋 컨벤션

#   ✨ feat    : 기능 한 줄 설명 (새로운 기능, 새로운 브랜치 생성)
#   예시) ✨ feat  : 알림 읽음 처리 기능 추가 (기능 설명)

#   🐛 fix     : 버그 수정 설명
#   예시) 🐛 fix   : 스토리 댓글 기능 게시 버튼 작동

#   🎨 design   : css 디자인 설명
#   예시) 🎨 design : flexbox 추가

#   💄 style   : 스타일 (코드 형식, 명칭 변경, 주석 추가 또는 수정 -> 동작에 영향 없음)
#   예시) 💄 style : 알림 리스트 클래스 뷰 변수() 문구 변경

#   📝 docs    : 문서 (README 등 각종 Markdown만)
#   예시) 📝 docs  : readme 팀원 추가

#   🔧 chore   : 기타 변경사항 (빌드 스크립트 수정 등 MD 제외 모든 파일)
#   예시) 🔧 chore : gitignore redis 추가, chore : migrations 파일 추가

#   ♻️ refactor : 이미 올렸던 코드 변경 했을 때 (로직 변경)

PR 점검사항 (코드 리뷰)

• 웹 접근성
• 성능 향상
• 코드 가독성
• 아키텍처 분리

✨ 기능 소개

로그인

• JWT 토큰 발급
• accessToken을 cookie에 저장해 세션 관리
• bcryptjs로 비밀번호 암호화

회원가입

• bcryptjs로 비밀번호 암호화
• nodemailer 이용해 이메일 인증코드 발송

경기 일정 조회

• react-calender, swiper를 활용한 날짜 선택 및 경기 일정 조회
• 날짜 계산, 포맷팅 전반에 dayjs 활용
• 날짜별 경기 수 달력에 표시
• 경기별 영상 / 선수 기록 / 실시간 중계 페이지로 이동

경기 정보 조회

영상

• 특정 경기의 영상을 Youtube Data API 사용해 표시
• Intersection Oberserver API로 스크롤에 반응하는 렌더링 구현

선수 기록

• NBA 공식 데이터 활용 선수 기록 컬럼별 정렬

실시간 중계

• 일정 시간 간격으로 쿼터별 실시간 중계 내용 표시

실시간 채팅

• 별도의 소켓 서버 호스팅
• Socket IO 기반 경기별 실시간 채팅 지원
• 최근 50개 메세지 DB 조회 후 렌더링

💾 ERD

📁 프로젝트 구조

클린 아키텍처

• UI(Page) [프레젠테이션 계층]: Next.js의 app 디렉터리 내부의 page.tsx 파일들
• API Routes [Adapter 계층]: /app/api 디렉터리 내부의 API 핸들러
• UseCase(Service) [비즈니스 로직 계층]: /application/usecases 디렉터리에서 애플리케이션의 핵심 로직을 처리
• Entity [도메인 계층]: /domain/entities 디렉터리에서 데이터 구조 및 도메인 모델 정의