refactor: 패널 빈 공간 제거 및 버스 아이콘 대치 및 패널 내 아이콘, 텍스트 정렬

[KwonDeaGeun]

Summary by CodeRabbit

릴리스 노트

• Style
  • 버스 아이콘 렌더링 방식 개선
  • 버스 정류장 패널을 화면 하단에 고정 배치
  • 지도 컨테이너 레이아웃을 뷰포트 기반에서 유연한 flexbox 기반으로 변경
  • 버스 오버레이 아이콘 크기 조정 (32x32 → 24x46)

[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	Nov 11, 2025 6:58am

[coderabbitai]

개요

이 PR은 버스 아이콘 렌더링 방식을 컴포넌트에서 SVG 이미지로 변경하고, BusStopsPanel과 MapContainer의 레이아웃 및 스타일을 조정하는 변경사항입니다. 주요 수정 사항은 아이콘 렌더링 메서드 교체, 고정 위치 지정, 플렉스 기반 레이아웃 전환입니다.

변경사항

코호트 / 파일(들)	변경 요약
아이콘 렌더링 변경 src/components/BusStops.tsx, src/utils/mapOverlays.ts	Bus 컴포넌트를 busIconSvg 이미지로 교체. 이미지 요소를 사용하여 아이콘 렌더링. mapOverlays의 버스 오버레이 크기를 32x32에서 24x46으로 조정.
레이아웃 및 스타일 조정 src/components/BusStopsPanel.tsx, src/components/MapContainer.tsx	BusStopsPanel에 고정 위치 지정(bottom: 0, z-index 추가) 및 박스 섀도우 적용. MapContainer를 고정 높이(70vh) 기반에서 플렉스 기반 레이아웃(flex: 1, minHeight: 200)으로 변경.

예상 코드 리뷰 노력

🎯 2 (Simple) | ⏱️ ~10분

• 검토 포인트: BusStopsPanel의 고정 위치 지정이 다른 컴포넌트와의 겹침/레이아웃 상호작용을 야기할 수 있는지 확인
• 검토 포인트: MapContainer의 플렉스 기반 레이아웃 변경이 반응형 동작 및 자식 요소의 크기 조정에 미치는 영향 검증
• 검토 포인트: 버스 아이콘 크기 조정(24x46)이 시각적 일관성과 접근성을 유지하는지 확인

관련 PR

• refactor: 버스 정류장 아이콘 정상화 #27: BusStops 컴포넌트와 버스 아이콘 렌더링 방식 변경 관련
• refactor: App에 컴포넌트 및 훅 분리 #22: BusStopsPanel/MapContainer 레이아웃 및 mapOverlays의 버스 아이콘 렌더링 수정과 직접 연관
• refactor: 버스 및 버스 정류장 섹션 UI 개선 #24: BusStops.tsx와 mapOverlays.ts의 아이콘 렌더링 로직 변경으로 동일 코드 영역 수정

시

🐰 버스 아이콘이 이미지로 변신해,
레이아웃은 플렉스하게 춤을 춰,
고정된 패널이 아래 자리잡으니,
더 예쁜 화면이 되었네! ✨
스타일과 구조, 완벽한 조화! 🚌

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	제목이 변경 내용의 주요 내용을 명확하게 요약하고 있습니다. 패널 빈 공간 제거, 버스 아이콘 대체, 아이콘/텍스트 정렬이라는 핵심 변경사항들이 모두 반영되어 있습니다.

✨ 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 refactor/remove-panel-empty-space-and-update-bus-icon

---

📜 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 f3036dc and a5fc553.

⛔ Files ignored due to path filters (1)

• src/assets/busIcon.svg is excluded by !**/*.svg

📒 Files selected for processing (4)

• src/components/BusStops.tsx (3 hunks)
• src/components/BusStopsPanel.tsx (1 hunks)
• src/components/MapContainer.tsx (1 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 타입 사용을 피하고 더 타입 안전한 코드를 선호한다.

🔇 Additional comments (5)

src/components/BusStops.tsx (2)

78-98: 정류장 아이콘 래퍼가 적절하게 구현되었습니다.

아이콘 컨테이너가 flex 레이아웃으로 중앙 정렬되고, 호버 시 scale 효과가 적용되어 시각적 피드백이 향상되었습니다.

---

159-165: 버스 아이콘 크기 일관성을 확인하세요.

버스 아이콘 SVG가 파일 간 다르게 렌더링되고 있습니다:

• BusStops.tsx (줄 161-163): 20×38px (32×32px 컨테이너)
• mapOverlays.ts (줄 172-185): 24×46px (지도 오버레이)

동일한 busIconSvg 자산을 사용하면서도 크기가 다릅니다. UI 패널과 지도 표시 간 의도적인 차이인지 확인하세요. 일관성을 위해 크기를 상수로 정의하거나 이 차이가 의도적임을 문서화하는 것을 권장합니다.

src/utils/mapOverlays.ts (1)

171-186: 버스 아이콘 SVG 자산 파일이 올바르게 배치되었습니다.

프로그래밍 방식의 SVG 생성에서 외부 SVG 이미지 사용으로 전환하여 코드가 더 간단하고 유지보수하기 쉬워졌습니다. 접근성 속성(role, aria-label, alt)도 올바르게 설정되어 있습니다.

src/components/BusStopsPanel.tsx (1)

20-31: 고정 위치 지정에서 전체 너비 제약 확인 필요

패널이 뷰포트 하단에 고정되면서 left: 0, right: 0으로 전체 너비를 차지합니다. 코드베이스 분석 결과:

• Bubble.tsx의 고정 위치 콘텐츠는 maxWidth: 450px 제약을 사용하고 있습니다
• BusStopsPanel.tsx는 max-width 제약이 없어 초대형 화면에서 과도하게 넓어질 수 있습니다
• 코드베이스에 @media 쿼리가 없으므로 CSS 기반 반응형 처리가 부재합니다

다음을 확인하세요:

• 모바일 기기에서 패널이 전체 화면을 차지하지 않도록 max-width 추가 고려
• 콘텐츠가 가상 키보드에 의해 가려지는 경우 처리
• 초대형 화면에서의 시각적 일관성 검토

src/components/MapContainer.tsx (1)

28-28: 부모 컨테이너의 flex 레이아웃 검증 완료됨

검증 결과, MapContainer의 부모 컨테이너(App.tsx 111-116줄)는 이미 올바르게 display: "flex"와 flexDirection: "column"으로 설정되어 있습니다. 따라서 MapContainer의 flex: 1은 정상적으로 작동하며, minHeight: 200(200px)도 지도 컨테이너의 최소 높이로 적절합니다. 현재 코드는 문제가 없습니다.

---

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.}