feat: 셔틀버스 위치 정보 가져오기 데이터 패칭 추가

[KwonDeaGeun]

Summary by CodeRabbit

릴리스 노트

• 새로운 기능

  • 셔틀버스 위치 정보를 실시간으로 제공받습니다.
  • 버스 위치 데이터가 20초마다 자동으로 업데이트됩니다.

• 개선사항

  • API 기반 실시간 데이터 조회로 더 정확한 버스 정보를 제공합니다.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
what-the-bus-web	Ready	Preview	Comment	Oct 25, 2025 10:37am

[coderabbitai]

Caution

Review failed

The pull request is closed.

Walkthrough

정적 버스 데이터를 React Query 기반의 동적 페칭으로 전환합니다. API 클라이언트 인프라를 추가하고, App 컴포넌트를 AppContent로 리팩토링하며, Bus.direction 타입을 string에서 boolean으로 변경합니다.

Changes

콘텓트 / 파일(들)	변경 요약
환경 설정 env.sample	VITE_API_BASE_URL 환경 변수 추가
API 인프라 src/lib/api.ts, src/lib/endpoints.ts	새로운 API 클라이언트 모듈(ky 기반)과 generic apiGet 함수 추가; BUS 엔드포인트를 SEARCH에서 LOCATION으로 변경 및 경로 업데이트("/bus/search" → "api/shuttle/location")
데이터 모델 src/data/bus.ts	Bus 인터페이스의 direction 속성을 string | null에서 boolean | null로 변경; 기존 버스 데이터 입력값을 boolean 값으로 업데이트(true: 단국대학교, false: 죽전역)
API 훅 src/api/bus.ts	새로운 useBusLocations React Query 훅 추가; API_ENDPOINTS.BUS.LOCATION에서 Bus 배열 페칭 및 20초 주기 리페칭 설정
컴포넌트 리팩토링 src/App.tsx, src/components/MapContainer.tsx	App 컴포넌트를 AppContent 서브컴포넌트로 분리; 정적 buses 임포트를 useBusLocations 훅으로 대체; MapContainer에서 동적 버스 데이터 사용
훅 업데이트 src/hooks/useBusSelection.ts	useBusSelection 시그니처에 buses 파라미터 추가; 정적 buses 임포트 제거 및 Bus 타입 임포트로 변경; direction 처리 로직을 string 트림에서 boolean 매핑으로 변경("단국대학교" 또는 "죽전역")

시퀀스 다이어그램

sequenceDiagram
    participant User as 사용자
    participant App as App
    participant AppContent as AppContent
    participant MapContainer as MapContainer
    participant Bus API as useBusLocations<br/>(React Query)
    participant Server as 서버

    App->>AppContent: render with props
    AppContent->>Bus API: useBusLocations 초기화
    Bus API->>Server: GET api/shuttle/location
    Server-->>Bus API: Bus[]
    Bus API-->>AppContent: buses 반환
    
    AppContent->>MapContainer: buses 전달
    MapContainer->>MapContainer: useMapOverlays(buses)
    
    Note over Bus API: 20초마다 자동 리페칭
    Bus API->>Server: GET api/shuttle/location (재페칭)
    Server-->>Bus API: 업데이트된 Bus[]
    Bus API-->>MapContainer: 새 버스 데이터
    MapContainer->>MapContainer: 오버레이 업데이트

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~35 minutes

• 주의 필요 영역:
  • src/lib/api.ts: 새 API 클라이언트 모듈의 에러 핸들링 전략 및 timeout 설정 검증
  • src/api/bus.ts: useBusLocations의 배열 가드 로직과 리페칭 정책 확인
  • src/data/bus.ts: Bus.direction의 boolean 타입 변경이 기존 타입 참조를 깨뜨리지 않는지 확인
  • src/hooks/useBusSelection.ts: 매개변수 시그니처 변경에 따른 모든 호출 지점 일관성 검토
  • src/App.tsx: AppContent 컴포넌트 분리로 인한 상태 관리 흐름 및 라이프사이클 변화 검증

Possibly related PRs

• PR#16: Bus 엔터티의 id/name을 shuttleId로 변경하며, 이 PR과 함께 src/data/bus.ts의 Bus 구조 변경
• PR#21: App 레벨의 React Query 설정, useBusSelection 훅, API 엔드포인트(src/lib/endpoints.ts) 등 동일 영역을 수정하며, 새 API 클라이언트 및 동적 버스 페칭 적용
• PR#14: src/data/bus.ts, src/App.tsx, 버스 선택/오버레이 로직 등 동일 파일을 수정하며, 정적 버스에서 동적 훅으로의 리팩토링과 direction 타입 변경 공유

Poem

🐰 정적인 데이터가 흘러가고,
API는 시간마다 새로이 깨어나네.
Boolean으로 방향을 정하고,
셔틀버스는 우리 맵 위에서 춤을 춘다네! 🚌✨

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch feat/add-shuttle-bus-location-data-fetch

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 69d21cb and 79acfc0.

📒 Files selected for processing (8)

• .env.sample (1 hunks)
• src/App.tsx (2 hunks)
• src/api/bus.ts (1 hunks)
• src/components/MapContainer.tsx (2 hunks)
• src/data/bus.ts (2 hunks)
• src/hooks/useBusSelection.ts (2 hunks)
• src/lib/api.ts (1 hunks)
• src/lib/endpoints.ts (1 hunks)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}