[SCRUM-189] Course API 연결

[InKyungWoo]

📌 관련 티켓 & 이슈

• Jira 티켓: SCRUM-189
• Closes [SCRUM-189] Course API 연결 #17

✨ 작업 내용

🎯 작업 개요

• 코스 목록/상세 조회 API 연동
  • 내 주변 코스 조회 (사용자 위치 기반)
  • 지역별 코스 조회
  • 테마별 코스 조회
  • 코스 상세 정보 표시
• 상세 경로 렌더링 (trackPoints 기반 파란색 경로 표시)

🚀 주요 변경사항

• API 연동 기반 구축
  • HTTP Client: axios 기반 인터셉터 구현, CORS 해결을 위한 프록시 설정
  • 타입 정의: 실제 API 스펙에 맞춘 타입 정의 (영문 키로 통일)
  • 상수 관리: 지역/테마 상수를 API 코드와 일치하도록 영문키로 변경
• 코스 목록 기능
  • useCourses 훅: NEARBY/AREA/THEME 필터별 코스 조회 관리
  • 메인 페이지: 실제 API 연동, loading/error/empty 상태 처리
  • 필터링: 지역/테마 선택 시 해당 코스 목록으로 업데이트
• 코스 상세 기능
  • useCourseDetail 훅: 코스 ID 기반 상세 정보 조회
  • 상세 페이지: CourseDetail API 데이터 기반으로 전면 개편
  • 정보 표시: 거리, 시간, 고도, 난이도, AI 분석 등 실제 데이터 표시
• 지도 기능
  • trackPointUtils: API trackPoints를 카카오맵 경로로 변환하는 유틸리티
  • CourseRouteMap: 1:1 비율 지도에 파란색 경로 표시, 로딩 처리 추가

🗂️ 파일 구조

src/
├── api/courseAPI.ts              # 코스 API 함수들
├── hooks/
│   ├── useCourses.ts            # 코스 목록 관리 훅
│   └── useCourseDetail.ts       # 코스 상세 관리 훅
├── utils/
│   ├── http.ts                  # HTTP 클라이언트
│   └── trackPointUtils.ts       # 지도 경로 변환 유틸
├── types/course.ts              # 코스 관련 타입 정의
├── constants/locations.ts       # 위치 상수 (영문키)
└── components/CourseRouteMap.tsx # 코스 경로 지도 컴포넌트

📸 스크린샷 (해당하는 경우)