🎾 테리우스 (Terrius) — Frontend

당신의 모든 랠리를 데이터로 기록합니다.

"인생네컷처럼 기록하고, 프로 선수처럼 분석받는다."

코트에 설치된 카메라로 촬영된 테니스 경기 영상을 하이라이트 클립으로 남기는 것을 넘어, 자세 분석 · 경기 분석 데이터 리포트까지 제공하는 테니스 성장 리포트 서비스의 프론트엔드입니다.

Expo + React Native 기반의 크로스플랫폼 모바일 앱으로, 카카오 소셜 로그인, 경기 영상 재생, 분석 리포트 시각화를 담당합니다.

---

🔹 주요 기능

1. 🔐 인증

• 카카오 소셜 로그인 (@react-native-kakao)
• JWT 기반 인증 상태 관리 (AsyncStorage 토큰 저장)
• 로그인 시 약관 동의 모달 노출

2. 🏟️ 경기장 / 코트 탐색

• 경기장 목록 조회 (지역·도시·이름 필터)
• 경기장 상세 정보
• 코트별 영상이 존재하는 날짜 / 시간대 선택

3. 🎥 경기 영상 & 리포트 신청

• 경기 영상 재생 (expo-video)
• 특정 경기 영상에 대한 리포트 분석 신청
• 신청 가능한 영상 목록 / 신청 현황 조회

4. 📊 리포트 조회

• 내 리포트 목록 (정렬 지원)
• 선수별(PLAYER_ONE / PLAYER_TWO) 리포트 상세

리포트는 다음 3단위의 분석 데이터로 시각화됩니다.

단위	내용
🎯 경기(Match)	최고 타구 속도, 평균/최대/최소 랠리 횟수, 총 샷 수, 퍼스트/세컨드 서브 성공률 및 비중
🎾 샷(Shot)	샷 종류(서브·포핸드·백핸드·발리·스매시) 태깅, 방향 및 코트 내 착지점
👤 자세(Biomechanics)	샷별 어깨/척추/허리 회전각, 개선 포인트, 점수

• 자세 교정이 필요한 구간의 하이라이트 영상 제공

---

🚀 기술 스택

• Language: TypeScript 5.9

  

• Framework: React Native 0.83 + React 19

  

• 플랫폼: Expo ~55 (expo-dev-client)

  

• 라우팅: Expo Router ~55

  

• 서버 상태 관리: TanStack Query v5

  

• 클라이언트 상태 관리: Zustand v5

  

• HTTP 통신: Axios 1.16

  

• 인증: @react-native-kakao (Core + User)

  

• 영상 재생: expo-video

  

• UI: expo-linear-gradient, expo-blur, react-native-svg

  

• 영속 스토리지: AsyncStorage

  

• Linting / Formatting: ESLint 9 + Prettier

  

---

🏗️ 아키텍처 개요

📱 Mobile Expo App (iOS / Android)
    │  카카오 로그인 · JWT (AsyncStorage)
    ├─ Expo Router        (파일 기반 라우팅)
    ├─ TanStack Query     (서버 상태 · 캐싱)
    ├─ Zustand            (전역 클라이언트 상태)
    └─ Axios              (API 통신)
          │
          ▼
    🌐 Server (Spring Boot)

---

📁 프로젝트 구조

FE/
└─ src/
   ├─ app/                    # Expo Router 파일 기반 라우팅
   │  ├─ (public)/            # 인증 불필요
   │  ├─ (private)/           # 인증 필요
   │  └─ _layout.tsx
   ├─ screens/                
   ├─ components/    
   ├─ apis/                 
   ├─ services/               # TanStack Query 키 관리
   ├─ stores/                 # Zustand 전역 상태
   ├─ types/                 
   ├─ utils/                  
   └─ assets/