Feat: Mission 관련 API 연결 및 기능 구현

[JKyEun]

Mission 관련 API 연결 및 기능 구현

1. API 연동 구현

• 추천 미션 API 연동: getRouteMissionRecommendations API를 통한 실시간 미션 데이터 로딩
• 도전 기록 API 연동: createAttempt API를 통한 성공/실패 기록 저장
• 사용자 세션 API 연동: startUserSession, endUserSession API를 통한 클라이밍 세션 관리
• 암장 설정 API 연동: setGym API를 통한 사용자 암장 변경 기능

2. Mission 페이지 개선

• 실시간 데이터 연동: 하드코딩된 목 데이터를 msw API 호출로 교체
• 필터링 기능 강화: 전체/미도전/실패/성공 필터에 실제 데이터 기반 카운트 표시
• 카드 뷰 개선: 선택된 카드 하이라이트 효과 및 스케일 애니메이션 추가

3. Mission 상세 페이지 개선

• 동적 미션 상태 관리: API 데이터 기반 미션 상태 계산 로직 구현
• 미션 시도 기능: 성공/실패 기록 기능
• 추천 미션 연동: 성공 후 비슷한 난이도의 미션 추천 기능

4. Mission Timer 기능 강화

• 실제 세션 관리: 서버와 연동된 클라이밍 세션 시작/종료 기능
• 세션 상태 복원: 페이지 새로고침 시에도 진행 중인 세션 상태 유지
• 자동 결과 페이지 이동: 세션 종료 시 자동으로 결과 페이지로 이동

5. Mission Header 개선

• 실제 암장 데이터 연동: API를 통한 암장 목록 및 사용자 설정 암장 표시
• 암장 변경 기능: 실시간 암장 변경 및 사용자 상태 업데이트
• 사용자 프로필 연동: 실제 사용자 ID 기반 프로필 페이지 링크

6. 유틸리티 함수 추가

• 미션 상태 계산: calculateMissionStatus 함수로 미션 상태 로직 중앙화
• 로컬 스토리지 관리: setStorage, getStorage, removeStorage 함수로 세션 데이터 관리

7. 개발 도구 추가

• React Query Devtools: API 요청/응답 디버깅을 위한 개발 도구 추가

8. 필요한 API 모킹 추가

• Orval generated의 타입을 보고 API 모킹 추가

추후 진행할 것

• 영상 upload API 연동
• 이후 다시 우선순위 확인 예정

[minsgy]

https://es-toolkit.dev/reference/array/countBy.html#countby

const counts = countBy(recommendations,  ({ status }) => status);

const notTried = counts.not_tried || 0; // 존재하지 않을 경우를 대비해 0으로 초기화
const failed = counts.failed || 0;
const success = counts.success || 0;

@JKyEun 루프 덜 도는 방법 적어봅니당