[FEAT] 로딩 컴포넌트 생성 및 적용 #325
Conversation
WalkthroughA reusable Changes
Sequence Diagram(s)sequenceDiagram
participant ParentComponent
participant Loading
participant ChildComponent
ParentComponent->>ChildComponent: Render with isLoading prop
alt isLoading is true
ChildComponent->>Loading: Render Loading UI
else isLoading is false
ChildComponent->>ChildComponent: Render normal content
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Suggested labels
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}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
frontend/src/pages/KakaoLoginPage/index.tsx (1)
6-7: Consider removing the extra empty line.The Loading component import is correct, but the extra empty line on line 7 could be removed for cleaner formatting.
import Loading from '@/components/Loading'; -frontend/src/pages/RouteSelectPage/components/RouteResult/index.tsx (1)
53-58: Consider removing unnecessary wrapper containers.The Loading component likely has its own styling and container, so wrapping it in
S.NoRouteContainerandS.NoRouteTextmay create unnecessary nesting or conflicting styles.Consider simplifying to:
{isLoading ? ( - <S.NoRouteContainer> - <S.NoRouteText> <Loading /> - </S.NoRouteText> - </S.NoRouteContainer> + </S.LoadingWrapper> ) : routes.length === 0 ? (Or simply:
- {isLoading ? ( - <S.NoRouteContainer> - <S.NoRouteText> - <Loading /> - </S.NoRouteText> - </S.NoRouteContainer> - ) : routes.length === 0 ? ( + {isLoading ? <Loading /> : routes.length === 0 ? (frontend/src/components/Loading/index.tsx (1)
6-13: Consider improvements for responsiveness and internationalization.The Loading component implementation is solid, but consider these enhancements:
- Icon size: 150x150px may be too large for smaller screens
- Internationalization: The hardcoded Korean text limits global usage
Consider making the component more flexible:
+interface LoadingProps { + size?: number; + message?: string; +} + -const Loading = () => { +const Loading = ({ size = 100, message = "조금만 기다려주세요!" }: LoadingProps) => { return ( <S.LoadingContainer> - <Icon icon="Fire" width={150} height={150} color={theme.colors.green600} /> + <Icon icon="Fire" width={size} height={size} color={theme.colors.green600} /> - <S.LoadingText>조금만 기다려주세요!</S.LoadingText> + <S.LoadingText>{message}</S.LoadingText> </S.LoadingContainer> ); };This maintains backward compatibility while allowing customization when needed.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (8)
frontend/src/components/Loading/Loading.styled.ts(1 hunks)frontend/src/components/Loading/index.tsx(1 hunks)frontend/src/components/SearchAddress/SearchAddressResult/index.tsx(1 hunks)frontend/src/components/SearchAddress/index.tsx(1 hunks)frontend/src/pages/KakaoLoginPage/index.tsx(2 hunks)frontend/src/pages/MyPage/index.tsx(2 hunks)frontend/src/pages/RouteSelectPage/components/RouteResult/RouteResult.styled.ts(0 hunks)frontend/src/pages/RouteSelectPage/components/RouteResult/index.tsx(2 hunks)
💤 Files with no reviewable changes (1)
- frontend/src/pages/RouteSelectPage/components/RouteResult/RouteResult.styled.ts
🔇 Additional comments (9)
frontend/src/pages/MyPage/index.tsx (2)
11-11: LGTM: Clean import addition.The Loading component import follows proper conventions and is correctly positioned.
36-36: LGTM: Proper loading UI standardization.The replacement of inline loading text with the dedicated Loading component improves consistency while maintaining the same conditional rendering logic.
frontend/src/pages/KakaoLoginPage/index.tsx (1)
19-19: LGTM: Appropriate loading UI for login processing.The Loading component replacement is suitable for this login processing page that requires a loading state throughout its lifecycle.
frontend/src/pages/RouteSelectPage/components/RouteResult/index.tsx (1)
8-8: LGTM: Proper import addition.The Loading component import is correctly added and follows project conventions.
frontend/src/components/SearchAddress/index.tsx (1)
63-68: Loading state handling in SearchAddressResult verifiedSearchAddressResult correctly checks the
isLoadingprop and renders the standardized<Loading />component (lines 20–27 infrontend/src/components/SearchAddress/SearchAddressResult/index.tsx). This confirms the parent’s delegation of loading state is implemented as intended—approving these changes.frontend/src/components/Loading/Loading.styled.ts (1)
1-15: LGTM! Well-structured loading component styles.The styled components are properly implemented with:
- Appropriate flexbox centering for the loading container
- Consistent typography usage from theme
- Clean separation of concerns
frontend/src/components/SearchAddress/SearchAddressResult/index.tsx (3)
5-5: Good addition of the Loading component import.Clean integration of the new shared loading component.
11-11: Proper interface extension for loading state.The boolean
isLoadingprop is appropriately typed and follows naming conventions.
18-27: Excellent loading state implementation.The early return pattern with conditional rendering is clean and maintains UI consistency by preserving the container structure and title while showing the loading component.
Issue Number
close #324
As-Is
To-Be
Check List
Test Screenshot
(Optional) Additional Description
Summary by CodeRabbit
New Features
Refactor
Style