[FEAT] 경로 검색 로딩 처리 #323
Merged
[FEAT] 경로 검색 로딩 처리 #323
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Contributor
WalkthroughA loading state was added to the route search results page. A new styled component for the loading UI was introduced, and the main component now conditionally renders a loading indicator with an icon and message while route data is being fetched. No existing logic or exported interfaces were changed. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant RouteResult
participant useSearchRoutesQuery
User->>RouteResult: Visit RouteResult page
RouteResult->>useSearchRoutesQuery: Fetch route data
alt isLoading
RouteResult->>User: Show loading indicator (icon + message)
else data loaded
alt No routes found
RouteResult->>User: Show "no results" message and home button
else Routes found
RouteResult->>User: Show route list and start button
end
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~7 minutes Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
frontend/src/pages/RouteSelectPage/components/RouteResult/index.tsx (1)
54-62: Consider improving the loading UI design and semantic structure.The loading state implementation works functionally, but there are a few areas for improvement:
Icon choice: The Fire icon seems unusual for a loading indicator. Consider using a more conventional loading icon like a spinner or hourglass.
Semantic structure: Reusing
NoRouteContainerandNoRouteTextfor loading state isn't semantically correct. Consider using theLoadingContainerdirectly without nesting.Internationalization: The Korean text is hardcoded. Consider using a translation system for better maintainability.
Here's a suggested improvement:
- {isLoading ? ( - <S.NoRouteContainer> - <S.NoRouteText> - <S.LoadingContainer> - <Icon icon="Fire" width={150} height={150} color={theme.colors.green600} /> - <span>조금만 기다려주세요!</span> - </S.LoadingContainer> - </S.NoRouteText> - </S.NoRouteContainer> + {isLoading ? ( + <S.LoadingContainer style={{ paddingTop: '8rem' }}> + <Icon icon="Loading" width={150} height={150} color={theme.colors.green600} /> + <span style={{ ...theme.fonts.body15Med, color: theme.colors.gray600 }}> + 조금만 기다려주세요! + </span> + </S.LoadingContainer> </blockquote></details> </blockquote></details> <details> <summary>📜 Review details</summary> **Configuration used: CodeRabbit UI** **Review profile: CHILL** **Plan: Pro** <details> <summary>📥 Commits</summary> Reviewing files that changed from the base of the PR and between cc7cecadbb87593b4b4b1fbfd2c54fc3f49035ee and e323cd8417abfbc18266c98e8a5270eb83dfbb0a. </details> <details> <summary>📒 Files selected for processing (2)</summary> * `frontend/src/pages/RouteSelectPage/components/RouteResult/RouteResult.styled.ts` (1 hunks) * `frontend/src/pages/RouteSelectPage/components/RouteResult/index.tsx` (2 hunks) </details> <details> <summary>🔇 Additional comments (3)</summary><blockquote> <details> <summary>frontend/src/pages/RouteSelectPage/components/RouteResult/RouteResult.styled.ts (1)</summary> `61-67`: **LGTM! Clean and consistent styled component implementation.** The `LoadingContainer` follows the established patterns in the file with proper flex centering and consistent spacing. The implementation aligns well with the existing `NoRouteContainer` component. </details> <details> <summary>frontend/src/pages/RouteSelectPage/components/RouteResult/index.tsx (2)</summary> `8-8`: **LGTM! Proper imports for loading UI components.** The addition of `Icon` and `theme` imports supports the new loading state implementation. Also applies to: 12-12 --- `16-16`: **Good destructuring update for loading state.** Renaming `data` to `routes` improves code readability, and adding `isLoading` enables proper loading state handling. </details> </blockquote></details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Issue Number
close #322
As-Is
To-Be
-[x] 경로 검색 로딩 처리 추가
Check List
Test Screenshot
2025-07-25.21.41.59.mov
2025-07-25.21.39.59.mov
(Optional) Additional Description
Summary by CodeRabbit
New Features
Style