sourcery-ai[bot]
commented
1 week ago 리뷰어 가이드 by Sourcery
이 PR은 레이아웃 컴포넌트를 도입하고 배지 컴포넌트 스타일링을 업데이트합니다. 주요 변경 사항에는 헤더 컴포넌트 추가, 드롭다운 메뉴 시스템, 오디오 푸터 컴포넌트 추가, 그리고 배지 컴포넌트의 변형 및 스타일링 업데이트가 포함됩니다.
새로운 및 업데이트된 컴포넌트의 클래스 다이어그램
classDiagram
class Badge {
+variant: string
+className: string
}
class ProfileDropdown {
+name: string
+email: string
+imageUrl: string
+onMyPage(): void
+onSignout(): void
}
class AudioFooter {
+audioUrl: string
}
class WorkStatusHeader {
+name: string
+email: string
+imageUrl: string
+files: TTSFile[]
+onDeleteCompleted(): void
+onRetryFailed(): void
+onMyPage(): void
+onSignout(): void
}
class MainHeader {
+name: string
+email: string
+imageUrl: string
+onMyPage(): void
+onSignout(): void
}
class DropdownMenu {
}
class DropdownMenuTrigger {
}
class DropdownMenuContent {
}
class DropdownMenuItem {
}
class DropdownMenuSeparator {
}
class DropdownMenuLabel {
}
Badge <|-- ProfileDropdown
Badge <|-- AudioFooter
ProfileDropdown <|-- WorkStatusHeader
ProfileDropdown <|-- MainHeader
DropdownMenu <|-- DropdownMenuTrigger
DropdownMenu <|-- DropdownMenuContent
DropdownMenu <|-- DropdownMenuItem
DropdownMenu <|-- DropdownMenuSeparator
DropdownMenu <|-- DropdownMenuLabel
note for Badge "스타일링 및 변형 업데이트"
note for ProfileDropdown "사용자 프로필 작업을 위한 새로운 컴포넌트"
note for AudioFooter "오디오 컨트롤을 위한 새로운 컴포넌트"
note for WorkStatusHeader "작업 상태를 표시하기 위한 새로운 컴포넌트"
note for MainHeader "메인 페이지 헤더를 위한 새로운 컴포넌트"
note for DropdownMenu "새로운 드롭다운 메뉴 시스템"파일 수준 변경 사항
| 변경 사항 | 세부 사항 | 파일 |
|---|---|---|
| 새로운 스타일링 및 변형으로 배지 컴포넌트 업데이트 |
|
src/components/ui/badge.tsxsrc/stories/ui/badge.stories.tsx |
| Radix UI 통합으로 드롭다운 메뉴 시스템 추가 |
|
src/components/ui/dropdown-menu.tsxsrc/stories/ui/dropdown-menu.stories.tsxsrc/components/dropdowns/ProfileDropdown.tsx |
| 다양한 페이지를 위한 새로운 헤더 컴포넌트 구현 |
|
src/components/header/WorkStatusHeader.tsxsrc/components/header/MainHeader.tsxsrc/pages/TTSPage.tsxsrc/pages/WorkspacePage.tsx |
| 오디오 푸터 컴포넌트 추가 |
|
src/components/footer/AudioFooter.tsx |
| 사용되지 않는 스토리 파일 제거 |
|
src/stories/forms/SignupForm.stories.tsxsrc/stories/terms/TermsAgreement.stories.tsxsrc/stories/terms/TermsDialog.stories.tsx |
팁 및 명령어
#### 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 introduces layout components and updates the badge component styling. The main changes include the addition of header components, a dropdown menu system, and an audio footer component, along with updates to the badge component's variants and styling. #### Class diagram for new and updated components ```mermaid classDiagram class Badge { +variant: string +className: string } class ProfileDropdown { +name: string +email: string +imageUrl: string +onMyPage(): void +onSignout(): void } class AudioFooter { +audioUrl: string } class WorkStatusHeader { +name: string +email: string +imageUrl: string +files: TTSFile[] +onDeleteCompleted(): void +onRetryFailed(): void +onMyPage(): void +onSignout(): void } class MainHeader { +name: string +email: string +imageUrl: string +onMyPage(): void +onSignout(): void } class DropdownMenu { } class DropdownMenuTrigger { } class DropdownMenuContent { } class DropdownMenuItem { } class DropdownMenuSeparator { } class DropdownMenuLabel { } Badge <|-- ProfileDropdown Badge <|-- AudioFooter ProfileDropdown <|-- WorkStatusHeader ProfileDropdown <|-- MainHeader DropdownMenu <|-- DropdownMenuTrigger DropdownMenu <|-- DropdownMenuContent DropdownMenu <|-- DropdownMenuItem DropdownMenu <|-- DropdownMenuSeparator DropdownMenu <|-- DropdownMenuLabel note for Badge "Updated styling and variants" note for ProfileDropdown "New component for user profile actions" note for AudioFooter "New component for audio controls" note for WorkStatusHeader "New component for displaying work status" note for MainHeader "New component for main page header" note for DropdownMenu "New dropdown menu system" ``` ### File-Level Changes | Change | Details | Files | | ------ | ------- | ----- | | Updated badge component with new styling and variants |- Simplified variant options by removing 'sound' variant
- Updated default variant styling with purple theme
- Revised variant descriptions and documentation
- Updated badge stories with new examples and documentation
`src/stories/ui/badge.stories.tsx` | | Added dropdown menu system with Radix UI integration |
- Implemented base dropdown menu components with Radix UI
- Added support for checkboxes, radio buttons, and sub-menus
- Created stories showcasing different dropdown menu variants
- Added profile dropdown component with avatar and user info
`src/stories/ui/dropdown-menu.stories.tsx`
`src/components/dropdowns/ProfileDropdown.tsx` | | Implemented new header components for different pages |
- Created WorkStatusHeader component with work status and profile info
- Added MainHeader component with welcome message and profile dropdown
- Integrated headers into TTSPage and WorkspacePage
`src/components/header/MainHeader.tsx`
`src/pages/TTSPage.tsx`
`src/pages/WorkspacePage.tsx` | | Added audio footer component |
- Created AudioFooter component with player controls
- Integrated avatar and badge components
- Added history button and separators
- Deleted SignupForm stories
- Removed TermsAgreement and TermsDialog stories
`src/stories/terms/TermsAgreement.stories.tsx`
`src/stories/terms/TermsDialog.stories.tsx` | ---
github-actions[bot]
레이아웃 컴포넌트
Sourcery에 의한 요약
Dropdown Menu, ProfileDropdown, AudioFooter, WorkStatusHeader, MainHeader를 포함한 새로운 UI 컴포넌트를 도입합니다. Badge 컴포넌트를 리팩토링하고 새로운 헤더를 사용하도록 페이지를 업데이트합니다. 새로운 컴포넌트에 대한 문서를 추가하고 Badge 문서를 업데이트합니다.
새로운 기능:
개선 사항:
빌드:
문서화:
Original summary in English
## Summary by Sourcery Introduce new UI components including Dropdown Menu, ProfileDropdown, AudioFooter, WorkStatusHeader, and MainHeader. Refactor Badge component and update pages to use new headers. Add documentation for new components and update Badge documentation. New Features: - Introduce a new Dropdown Menu component with various configurations such as submenus, checkbox items, and radio items. - Add a ProfileDropdown component for user profile management, including options for viewing the profile and signing out. - Implement an AudioFooter component to enhance audio playback functionality with additional UI elements. - Create a WorkStatusHeader component to display user work status and manage TTS files. - Add a MainHeader component for personalized user greetings and profile management. Enhancements: - Refactor Badge component to simplify its usage and update its variants. - Update TTSPage and WorkspacePage to use new header components for improved layout and user interaction. Build: - Add @radix-ui/react-dropdown-menu dependency to package.json for dropdown menu functionality. Documentation: - Revise Badge component documentation to reflect updated usage and variants. - Add documentation for the new Dropdown Menu component, detailing its import and usage.