Skip to content

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

Merged
KwonDeaGeun merged 2 commits intomainfrom
refactor/remove-panel-empty-space-and-update-bus-icon
Nov 11, 2025
Merged

refactor: 패널 빈 공간 제거 및 버스 아이콘 대치 및 패널 내 아이콘, 텍스트 정렬#28
KwonDeaGeun merged 2 commits intomainfrom
refactor/remove-panel-empty-space-and-update-bus-icon

Conversation

@KwonDeaGeun
Copy link
Owner

@KwonDeaGeun KwonDeaGeun commented Nov 11, 2025

Summary by CodeRabbit

릴리스 노트

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

@KwonDeaGeun KwonDeaGeun self-assigned this Nov 11, 2025
@vercel
Copy link

vercel bot commented Nov 11, 2025

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

Project Deployment Preview Comments Updated (UTC)
what-the-bus-web Ready Ready Preview Comment Nov 11, 2025 6:58am

@coderabbitai
Copy link

coderabbitai bot commented Nov 11, 2025

개요

이 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

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

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

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

@KwonDeaGeun KwonDeaGeun merged commit a10a04e into main Nov 11, 2025
4 checks passed
@KwonDeaGeun KwonDeaGeun deleted the refactor/remove-panel-empty-space-and-update-bus-icon branch November 11, 2025 07:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants