sourcery-ai[bot]
commented
3 days ago 리뷰어 가이드 by Sourcery
이 PR은 마이페이지 섹션(투자자, 트레이더, 관리자)을 위한 내비게이션 구성 요소와 레이아웃을 통합하고 리팩토링합니다. 변경 사항은 새로운 재사용 가능한 구성 요소를 도입하고 다양한 사용자 역할에 걸쳐 스타일을 표준화합니다.
업데이트된 내비게이션 구성 요소의 클래스 다이어그램
classDiagram
class TraderMyPageNav {
+useState(userImage)
+TraderMyPageNavItems
}
class InvestorMypageNav {
+useState(userImage)
+InvestorMypageNavItems
}
class AdminNav {
+TraderMyPageNavItems
}
class ProfileSection {
+userImage: string
+userRole: string
+nickname: string
+desc: string
}
class NavigationMenu {
+items: Array
}
class NavMenuItem {
+to: string
+label: string
+isActive: boolean
+notificationCount: number
}
TraderMyPageNav --> ProfileSection
TraderMyPageNav --> NavigationMenu
InvestorMypageNav --> ProfileSection
InvestorMypageNav --> NavigationMenu
AdminNav --> NavigationMenu
NavigationMenu --> NavMenuItem파일 수준 변경 사항
| 변경 사항 | 세부 사항 | 파일 |
|---|---|---|
| 사용자 역할 간 일관된 UI를 위한 새로운 재사용 가능한 내비게이션 구성 요소 생성 |
|
src/components/common/NavigationMenu.tsxsrc/components/common/NavMenuItem.tsxsrc/components/page/mypage/ProfileSection.tsx |
| 일관된 구조를 사용하도록 레이아웃 구성 요소 리팩토링 |
|
src/layouts/AdminLayout.tsxsrc/layouts/InvestorMypageLayout.tsxsrc/layouts/TraderMyPageLayout.tsx |
| 새로운 공유 구성 요소를 사용하도록 내비게이션 구성 요소 업데이트 |
|
src/components/navigation/TraderMyPageNav.tsxsrc/components/navigation/InvestorMypageNav.tsxsrc/components/navigation/AdminNav.tsx |
| 새로운 변형으로 Button 구성 요소 강화 |
|
src/components/common/Button.tsx |
연결된 이슈에 대한 평가
| 이슈 | 목표 | 해결됨 | 설명 |
|---|---|---|---|
| #166 | 마이페이지 및 관리자 페이지를 위한 통합 레이아웃 구성 요소 구조 생성 | ✅ | |
| #166 | 마이페이지와 관리자 페이지 간의 일관된 스타일 구현 | ✅ |
가능성 있는 연결된 이슈
- #166: 이 PR은 마이페이지와 관리자를 위한 레이아웃 통합을 다루며, 이슈의 목표와 일치합니다.
팁 및 명령어
#### Sourcery와 상호작용 - **새로운 리뷰 트리거:** 풀 리퀘스트에 `@sourcery-ai review`라고 댓글을 남깁니다. - **토론 계속:** Sourcery의 리뷰 댓글에 직접 답장합니다. - **리뷰 댓글에서 GitHub 이슈 생성:** 리뷰 댓글에 답장하여 Sourcery에게 이슈 생성을 요청합니다. - **풀 리퀘스트 제목 생성:** 풀 리퀘스트 제목 어디에나 `@sourcery-ai`를 작성하여 언제든지 제목을 생성합니다. - **풀 리퀘스트 요약 생성:** 풀 리퀘스트 본문 어디에나 `@sourcery-ai summary`를 작성하여 언제든지 PR 요약을 생성합니다. 이 명령을 사용하여 요약이 삽입될 위치를 지정할 수도 있습니다. #### 경험 맞춤화 [대시보드](https://app.sourcery.ai)에 액세스하여: - Sourcery가 생성한 풀 리퀘스트 요약, 리뷰어 가이드 등과 같은 리뷰 기능을 활성화하거나 비활성화합니다. - 리뷰 언어를 변경합니다. - 사용자 정의 리뷰 지침을 추가, 제거 또는 편집합니다. - 기타 리뷰 설정을 조정합니다. #### 도움 받기 - 질문이나 피드백이 있는 경우 [지원 팀에 문의](mailto:support@sourcery.ai)하십시오. - 자세한 가이드와 정보를 보려면 [문서](https://docs.sourcery.ai)를 방문하십시오. - [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) 또는 [GitHub](https://github.com/sourcery-ai)에서 Sourcery 팀을 팔로우하여 소식을 받아보세요.Original review guide in English
## Reviewer's Guide by Sourcery This PR unifies and refactors the navigation components and layouts for the mypage sections (investor, trader, admin). The changes introduce new reusable components and standardize the styling across different user roles. #### Class diagram for updated navigation components ```mermaid classDiagram class TraderMyPageNav { +useState(userImage) +TraderMyPageNavItems } class InvestorMypageNav { +useState(userImage) +InvestorMypageNavItems } class AdminNav { +TraderMyPageNavItems } class ProfileSection { +userImage: string +userRole: string +nickname: string +desc: string } class NavigationMenu { +items: Array } class NavMenuItem { +to: string +label: string +isActive: boolean +notificationCount: number } TraderMyPageNav --> ProfileSection TraderMyPageNav --> NavigationMenu InvestorMypageNav --> ProfileSection InvestorMypageNav --> NavigationMenu AdminNav --> NavigationMenu NavigationMenu --> NavMenuItem ``` ### File-Level Changes | Change | Details | Files | | ------ | ------- | ----- | | Created new reusable navigation components for consistent UI across user roles |- Created NavigationMenu component for shared navigation functionality
- Created NavMenuItem component for consistent menu item styling
- Created ProfileSection component for user profile display
- Standardized navigation menu styling and behavior
`src/components/common/NavMenuItem.tsx`
`src/components/page/mypage/ProfileSection.tsx` | | Refactored layout components to use a consistent structure |
- Standardized main content wrapper styling
- Added consistent padding and layout dimensions
- Unified header styling across different sections
- Centralized layout structure in AdminLayout, InvestorMypageLayout, and TraderMyPageLayout
`src/layouts/InvestorMypageLayout.tsx`
`src/layouts/TraderMyPageLayout.tsx` | | Updated navigation components to use the new shared components |
- Refactored TraderMyPageNav to use new components
- Updated InvestorMypageNav to use shared components
- Modified AdminNav to use standardized navigation
- Implemented consistent styling for navigation items
`src/components/navigation/InvestorMypageNav.tsx`
`src/components/navigation/AdminNav.tsx` | | Enhanced Button component with new variant |
- Added 'ghostGray' variant to Button component
- Implemented styling for the new button variant
netlify[bot]
Panda-raccoon
🚀 풀 리퀘스트 제안
closes #166
📋 작업 내용
마이페이지 투자자, 트레이터, 관리자 관한 컴포넌트와 레이아웃을 정리했습니다. 파일 변경점이 많을듯
https://deploy-preview-187--sysmetics.netlify.app/admin/strategies/approval https://deploy-preview-187--sysmetics.netlify.app/mypage/trader https://deploy-preview-187--sysmetics.netlify.app/mypage/investor
🔧 변경 사항
주요 변경 사항을 요약해 주세요.
📸 스크린샷 (선택 사항)
수정된 화면 또는 기능을 시연할 수 있는 스크린샷을 첨부해 주세요.
📄 기타
추가적으로 전달하고 싶은 내용이나 특별한 요구 사항이 있으면 작성해 주세요.