Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Walkthrough앱에 ToastProvider를 도입하고 useBusLocations의 에러를 30초 스로틀로 토스트로 표시하도록 연결했으며, 정류소 클릭 콜백을 App → MapContainer → useMapOverlays → createBusStopOverlays 경로로 전달해 클릭/키보드 상호작용과 오버레이 정리(cleanup)를 지원하도록 변경했습니다. Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant App
participant MapContainer
participant useMapOverlays
participant createBusStopOverlays
participant useBusLocations
Note over App: 앱 초기화 (ToastProvider 포함)
App->>useBusLocations: 구독(오류 콜백 전달)
useBusLocations-->>App: 오류 발생 → onError(message)
App->>App: 에러 토스트 표시 (30초 스로틀)
User->>createBusStopOverlays: 정류소 클릭 / Enter/Space
createBusStopOverlays->>useMapOverlays: onStopClick(stop)
useMapOverlays->>MapContainer: onStopClick(stop)
MapContainer->>App: onStopClick(stop)
App->>App: bubbleStop 상태 업데이트
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
시
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
💤 Files with no reviewable changes (1)
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. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/App.tsx(1 hunks)src/components/MapContainer.tsx(2 hunks)src/hooks/useMapOverlays.ts(2 hunks)src/utils/mapOverlays.ts(2 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: KwonDeaGeun
Repo: KwonDeaGeun/WhatTheBus-Web PR: 21
File: src/App.tsx:16-23
Timestamp: 2025-09-22T04:45:54.455Z
Learning: KwonDeaGeun은 TypeScript에서 any 타입 사용을 피하고 더 타입 안전한 코드를 선호한다.
🧬 Code graph analysis (4)
src/utils/mapOverlays.ts (1)
src/data/busStops.ts (1)
BusStop(1-5)
src/hooks/useMapOverlays.ts (2)
src/data/busStops.ts (2)
BusStop(1-5)busStops(7-12)src/utils/mapOverlays.ts (2)
OverlayHandle(5-7)createBusStopOverlays(130-172)
src/components/MapContainer.tsx (2)
src/data/busStops.ts (2)
BusStop(1-5)busStops(7-12)src/hooks/useMapOverlays.ts (1)
useMapOverlays(10-35)
src/App.tsx (1)
src/components/MapContainer.tsx (1)
MapContainer(17-35)
🔇 Additional comments (7)
src/utils/mapOverlays.ts (1)
133-134: 변경사항 승인함수 시그니처가 적절하게 확장되었으며, 선택적 매개변수로 타입 안전성이 유지됩니다.
src/hooks/useMapOverlays.ts (3)
14-15: 변경사항 승인시그니처 확장이 적절하며 타입 안전성이 유지됩니다.
21-21: 변경사항 승인
onStopClick콜백이createBusStopOverlays로 올바르게 전달됩니다.
34-34: 변경사항 승인의존성 배열에
onStopClick을 추가한 것이 적절합니다.onStopClick이 변경되면 오버레이가 올바르게 재생성됩니다.src/components/MapContainer.tsx (3)
3-3: 변경사항 승인
BusStop타입 임포트가onStopClick콜백 시그니처에 필요하며 적절합니다.
14-14: 변경사항 승인
onStopClickprop이MapContainerProps인터페이스와 컴포넌트 시그니처에 올바르게 추가되었습니다. 타입 안전성이 유지됩니다.Also applies to: 21-21
27-27: 변경사항 승인
onStopClick이useMapOverlays에 올바르게 전달되어 클릭 이벤트 처리가 가능합니다.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/App.tsx (1)
122-136: 선택적 개선: setTimeout 정리 고려에러 토스트 스로틀링 로직이 잘 구현되었습니다. 다만 컴포넌트 언마운트 시
setTimeout이 정리되지 않습니다. 현재는 ref 값만 변경하므로 큰 문제는 없지만, 더 엄격한 정리를 원한다면useEffect에서 타이머를 정리할 수 있습니다.선택적으로 적용 가능한 개선 방안:
const handleBusLocationError = useCallback((message: string) => { // Only show toast once to avoid spamming on refetch failures if (!errorShownRef.current) { toast({ title: "버스 위치 조회 오류", description: message, variant: "destructive", }); errorShownRef.current = true; // Reset after 30 seconds to allow showing error again if it persists - setTimeout(() => { + const timeoutId = setTimeout(() => { errorShownRef.current = false; }, 30000); + return () => clearTimeout(timeoutId); } }, [toast]);그런 다음 반환된 cleanup 함수를 저장하고 적절히 정리할 수 있습니다.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/App.tsx(4 hunks)src/api/bus.ts(1 hunks)src/hooks/useMapOverlays.ts(2 hunks)src/utils/mapOverlays.ts(4 hunks)
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: KwonDeaGeun
Repo: KwonDeaGeun/WhatTheBus-Web PR: 21
File: src/App.tsx:16-23
Timestamp: 2025-09-22T04:45:54.455Z
Learning: KwonDeaGeun은 TypeScript에서 any 타입 사용을 피하고 더 타입 안전한 코드를 선호한다.
🧬 Code graph analysis (4)
src/App.tsx (4)
src/components/ui/use-toast.tsx (2)
ToastProvider(27-81)useToast(83-89)src/api/bus.ts (1)
useBusLocations(7-28)src/hooks/useBusSelection.ts (1)
useBusSelection(5-40)src/components/MapContainer.tsx (1)
MapContainer(17-35)
src/api/bus.ts (4)
src/lib/api.ts (1)
apiGet(14-22)src/data/bus.ts (1)
Bus(1-6)src/lib/endpoints.ts (1)
API_ENDPOINTS(1-6)src/lib/error.ts (1)
handleApiError(9-49)
src/hooks/useMapOverlays.ts (2)
src/data/busStops.ts (2)
BusStop(1-5)busStops(7-12)src/utils/mapOverlays.ts (2)
OverlayHandle(5-8)createBusStopOverlays(131-201)
src/utils/mapOverlays.ts (1)
src/data/busStops.ts (1)
BusStop(1-5)
🔇 Additional comments (10)
src/hooks/useMapOverlays.ts (2)
14-15: LGTM! 타입 안전한 콜백 파라미터 추가
onStopClick파라미터가 올바른 타입과 함께 선택적 파라미터로 추가되었습니다.
32-36: LGTM! 안전한 클린업 로직 구현이벤트 리스너 정리를 위한
cleanup메서드 호출이 try/catch로 보호되어 있어, 클린업 과정에서 발생할 수 있는 오류를 안전하게 처리합니다.src/api/bus.ts (2)
7-22: LGTM! 견고한 에러 처리 구현try/catch로 API 호출을 감싸고, 에러 발생 시 빈 배열을 반환하여 안전한 폴백을 제공합니다.
onError콜백을 통한 선택적 에러 전파도 적절합니다.
26-26: LGTM! 적절한 재시도 정책일시적인 네트워크 오류 처리를 위한 재시도 횟수가 적절하게 설정되었습니다.
src/App.tsx (2)
74-88: LGTM! ToastProvider 올바르게 통합됨
ToastProvider로 앱 콘텐츠를 감싸서 하위 컴포넌트에서useToast훅을 사용할 수 있도록 구성되었습니다.
140-144: LGTM! 콜백 메모이제이션으로 성능 최적화
useCallback을 사용하여handleStopClick콜백을 메모이제이션함으로써, 매 렌더링마다 새로운 함수 참조가 생성되는 것을 방지하고useMapOverlays의 불필요한 재실행을 막습니다.src/utils/mapOverlays.ts (4)
7-7: LGTM! 인터페이스에 클린업 메서드 추가
OverlayHandle인터페이스에 선택적cleanup메서드가 추가되어 이벤트 리스너 정리를 지원합니다.
148-151: LGTM! 훌륭한 접근성 구현커서, role, aria-label, tabindex를 통해 키보드 접근성과 스크린 리더 지원이 완벽하게 구현되었습니다. 웹 접근성 표준을 잘 준수하고 있습니다.
156-174: LGTM! 이벤트 핸들러 완벽하게 구현됨명명된 핸들러 함수들이 올바르게 구현되었습니다:
stopPropagation()으로 지도 클릭 이벤트와의 간섭 방지preventDefault()로 기본 동작 방지- Enter와 Space 키 지원으로 완전한 키보드 접근성 제공
- 명명된 함수로 적절한 클린업 지원
과거 리뷰에서 제기된 이벤트 전파 및 키보드 접근성 우려사항이 모두 해결되었습니다.
195-198: LGTM! 적절한 이벤트 리스너 정리
cleanup메서드가 명명된 함수 참조를 사용하여 모든 이벤트 리스너를 올바르게 제거합니다. 메모리 누수를 방지하는 필수적인 구현입니다.
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/hooks/useMapEventHandlers.ts (1)
5-12: 메시지 핸들러 제거 시 allowedOrigins도 함께 제거하세요.만약
messageHandler를 제거하기로 결정한다면,allowedOrigins설정 코드도 더 이상 사용되지 않으므로 함께 제거해야 합니다.메시지 핸들러 제거 시 다음 diff를 적용하세요:
useEffect(() => { - const selfOrigin = location.protocol.startsWith("http") - ? location.origin - : undefined; - const allowedOrigins = new Set([ - ...(selfOrigin ? [selfOrigin] : []), - "http://localhost:3000", - "http://localhost:5173", - ]); - const containerEl = document.getElementById(mapId);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (3)
src/hooks/useKakaoMap.ts(0 hunks)src/hooks/useMapEventHandlers.ts(1 hunks)src/types/kakao.d.ts(0 hunks)
💤 Files with no reviewable changes (2)
- src/types/kakao.d.ts
- src/hooks/useKakaoMap.ts
🧰 Additional context used
🧠 Learnings (1)
📓 Common learnings
Learnt from: KwonDeaGeun
Repo: KwonDeaGeun/WhatTheBus-Web PR: 21
File: src/App.tsx:16-23
Timestamp: 2025-09-22T04:45:54.455Z
Learning: KwonDeaGeun은 TypeScript에서 any 타입 사용을 피하고 더 타입 안전한 코드를 선호한다.
1 participant
Summary by CodeRabbit
새로운 기능
버그 수정 / 개선