[REFACTOR] 경로 검색 페이지 디자인 수정사항 반영 #308
Conversation
young-jin-son
added
refactor
WalkthroughThis update modifies the route selection UI and supporting mock data. It removes bus and subway icons from the route bar, updates styling for time and route information, adds a "no routes found" UI state, and simplifies conditional rendering logic. The mock route data is replaced with a smaller, bus-focused set. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant RouteResultComponent
participant Router
User->>RouteResultComponent: Opens route selection page
alt Routes found
RouteResultComponent->>User: Display route list and start button
else No routes found
RouteResultComponent->>User: Show "no routes found" message and home button
User->>RouteResultComponent: Clicks home button
RouteResultComponent->>Router: Navigate to home page
end
Assessment against linked issues
Assessment against linked issues: Out-of-scope changesNo out-of-scope changes found. Possibly related PRs
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/src/pages/RouteSelectPage/components/RouteResult/RouteResult.styled.ts (1)
31-37: Consider adding interactive states to the button.The button styling is good overall, but consider adding hover and focus states for better user experience and accessibility.
export const NoRouteButton = styled.button` ${({ theme }) => theme.fonts.body15}; color: ${({ theme }) => theme.colors.gray950}; border-radius: 0.8rem; padding: 0.8rem 1.6rem; border: 0.15rem solid ${({ theme }) => theme.colors.gray300}; + + &:hover { + background-color: ${({ theme }) => theme.colors.gray50}; + } + + &:focus { + outline: 0.2rem solid ${({ theme }) => theme.colors.green600}; + outline-offset: 0.1rem; + } `;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
frontend/src/mocks/data/routes.json(22 hunks)frontend/src/pages/RouteSelectPage/components/RouteResult/RouteList/RouteItem/RouteBar/RouteBar.styled.ts(0 hunks)frontend/src/pages/RouteSelectPage/components/RouteResult/RouteList/RouteItem/RouteBar/index.tsx(1 hunks)frontend/src/pages/RouteSelectPage/components/RouteResult/RouteList/RouteItem/RouteTimeInfo/RouteTimeInfo.styled.ts(1 hunks)frontend/src/pages/RouteSelectPage/components/RouteResult/RouteList/RouteItem/RouteTimeInfo/index.tsx(1 hunks)frontend/src/pages/RouteSelectPage/components/RouteResult/RouteList/RouteItem/index.tsx(1 hunks)frontend/src/pages/RouteSelectPage/components/RouteResult/RouteResult.styled.ts(1 hunks)frontend/src/pages/RouteSelectPage/components/RouteResult/StartTime/StartTime.styled.ts(1 hunks)frontend/src/pages/RouteSelectPage/components/RouteResult/index.tsx(3 hunks)
💤 Files with no reviewable changes (1)
- frontend/src/pages/RouteSelectPage/components/RouteResult/RouteList/RouteItem/RouteBar/RouteBar.styled.ts
🔇 Additional comments (12)
frontend/src/mocks/data/routes.json (1)
1-424: Mock data updates look structurally sound.The route data structure is consistent and contains all required fields for the UI components. The timing values and route details appear realistic for transit planning.
frontend/src/pages/RouteSelectPage/components/RouteResult/RouteList/RouteItem/RouteBar/index.tsx (1)
6-6: Reduced minimum bar width aligns with icon removal.The reduction from 11 to 6 pixels makes sense given that route bar icons were removed, allowing for more granular display of smaller time segments.
frontend/src/pages/RouteSelectPage/components/RouteResult/StartTime/StartTime.styled.ts (1)
4-4: Font weight update improves visual hierarchy.The change from
label14Medtolabel14Semiprovides better visual emphasis for the start time display.frontend/src/pages/RouteSelectPage/components/RouteResult/RouteList/RouteItem/RouteTimeInfo/index.tsx (1)
18-18: Icon color update creates more subtle visual hierarchy.The change from
green600togray400provides a more neutral appearance that aligns with the overall design updates.frontend/src/pages/RouteSelectPage/components/RouteResult/RouteList/RouteItem/index.tsx (1)
19-19: Improved conditional rendering with logical AND operator.The change from ternary to logical AND is more idiomatic and cleaner than returning an empty string.
frontend/src/pages/RouteSelectPage/components/RouteResult/RouteList/RouteItem/RouteTimeInfo/RouteTimeInfo.styled.ts (2)
16-17: Good design hierarchy improvement.The font size increase from
label14Medtobody15and color change fromgray500togray400creates better visual hierarchy by making the section time box less prominent while maintaining readability.
24-24: Improved text contrast.Changing the total section time color from
gray800togray900improves readability by increasing contrast, which is good for accessibility.frontend/src/pages/RouteSelectPage/components/RouteResult/index.tsx (3)
2-2: LGTM: Proper hook import.The addition of
useNavigateimport is correctly implemented for programmatic navigation.
17-21: LGTM: Clean navigation implementation.The
goToHomefunction is correctly implemented using theuseNavigatehook to redirect users to the root path.
52-71: Excellent empty state implementation.The conditional rendering for the "no routes found" state provides a great user experience by:
- Clearly communicating the issue to users
- Providing actionable next steps with the "처음으로 가기" button
- Maintaining the existing functionality when routes are available
The implementation follows React best practices with clean conditional rendering.
frontend/src/pages/RouteSelectPage/components/RouteResult/RouteResult.styled.ts (2)
13-20: Well-structured empty state container.The
NoRouteContainerstyling provides good layout structure with appropriate spacing and centering for the empty state UI.
22-29: Good typography for informational text.The
NoRouteTextstyling uses appropriate font weight and color for secondary messaging, with proper alignment for multi-line text display.
Issue Number
close #301
As-Is
To-Be
Check List
Test Screenshot
(Optional) Additional Description
Summary by CodeRabbit
New Features
Style
Bug Fixes
Chores