sourcery-ai[bot]
commented
2 weeks ago 리뷰어 가이드 by Sourcery
이 PR은 공통 컴포넌트들의 대대적인 리팩토링과 스토리북 파일 작성을 포함합니다. 주요 변경사항으로는 Select 컴포넌트의 완전한 재작성, 새로운 UI 컴포넌트 추가 (Breadcrumb, Spinner), 기존 컴포넌트들의 개선, 그리고 각 컴포넌트에 대한 스토리북 문서화가 있습니다.
업데이트된 Select 컴포넌트의 클래스 다이어그램
classDiagram
class Select {
+String placeholder
+SelectItemType[] items
+React.ReactNode icon
+String className
}
class SelectItemType {
+String value
+String label
+React.ReactNode icon
}
class SelectTrigger {
+React.ReactNode icon
+String className
}
class SelectContent
class SelectGroup
class SelectValue
class SelectScrollUpButton
class SelectScrollDownButton
class SelectLabel
class SelectSeparator
Select --> SelectTrigger
Select --> SelectContent
SelectContent --> SelectScrollUpButton
SelectContent --> SelectScrollDownButton
SelectContent --> SelectItem
SelectContent --> SelectLabel
SelectContent --> SelectSeparator
SelectContent --> SelectGroup
SelectContent --> SelectValue
SelectItem --> SelectItemType새로운 Breadcrumb 컴포넌트의 클래스 다이어그램
classDiagram
class Breadcrumb
class BreadcrumbList
class BreadcrumbItem
class BreadcrumbLink {
+Boolean asChild
}
class BreadcrumbPage
class BreadcrumbSeparator
class BreadcrumbEllipsis
Breadcrumb --> BreadcrumbList
BreadcrumbList --> BreadcrumbItem
BreadcrumbItem --> BreadcrumbLink
BreadcrumbItem --> BreadcrumbPage
BreadcrumbItem --> BreadcrumbSeparator
BreadcrumbItem --> BreadcrumbEllipsis새로운 Spinner 컴포넌트의 클래스 다이어그램
classDiagram
class Spinner {
+Number size
}파일 수준 변경사항
| 변경사항 | 세부사항 | 파일 |
|---|---|---|
| Select 컴포넌트를 완전히 재작성하여 더 유연하고 재사용 가능한 구조로 개선 |
|
src/components/ui/select.tsx |
| 새로운 UI 컴포넌트 추가 |
|
src/components/ui/breadcrumb.tsxsrc/components/ui/spinner.tsxsrc/components/icons/PlusIcon.tsx |
| 기존 컴포넌트들의 스타일 및 기능 개선 |
|
src/components/ui/input.tsxsrc/components/ui/button.tsxsrc/components/ui/badge.tsxsrc/components/ui/slider.tsx |
| 스토리북 설정 개선 및 컴포넌트 문서화 |
|
.storybook/main.ts.storybook/preview.tssrc/stories/ui/*.stories.tsx |
| 파일 구조 및 네이밍 컨벤션 개선 |
|
src/layouts/NavbarLayout.tsxsrc/pages/SigninPage.tsxsrc/pages/CONCATPage.tsx |
관련된 이슈일 가능성
- #1: 이 PR은 컴포넌트를 리팩토링하고 스토리북 파일을 추가하여 문제를 해결합니다.
팁과 명령어
#### Sourcery와 상호작용하기 - **새로운 리뷰 트리거:** PR에 `@sourcery-ai review`라고 댓글을 남깁니다. - **토론 계속하기:** Sourcery의 리뷰 댓글에 직접 답장합니다. - **리뷰 댓글로부터 GitHub 이슈 생성:** 리뷰 댓글에 답장하여 Sourcery에게 이슈 생성을 요청합니다. - **PR 제목 생성:** PR 제목에 `@sourcery-ai`를 작성하여 언제든지 제목을 생성합니다. - **PR 요약 생성:** PR 본문에 `@sourcery-ai summary`를 작성하여 언제든지 PR 요약을 생성합니다. 이 명령어를 사용하여 요약이 삽입될 위치를 지정할 수도 있습니다. #### 경험 맞춤화하기 [대시보드](https://app.sourcery.ai)에 접속하여: - Sourcery가 생성한 PR 요약, 리뷰어 가이드 등과 같은 리뷰 기능을 활성화하거나 비활성화합니다. - 리뷰 언어를 변경합니다. - 사용자 정의 리뷰 지침을 추가, 제거 또는 편집합니다. - 기타 리뷰 설정을 조정합니다. #### 도움 받기 - 질문이나 피드백이 있을 경우 [지원팀에 연락](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 이 PR은 공통 컴포넌트들의 대대적인 리팩토링과 스토리북 파일 작성을 포함합니다. 주요 변경사항으로는 Select 컴포넌트의 완전한 재작성, 새로운 UI 컴포넌트 추가 (Breadcrumb, Spinner), 기존 컴포넌트들의 개선, 그리고 각 컴포넌트에 대한 스토리북 문서화가 있습니다. #### Class diagram for updated Select component ```mermaid classDiagram class Select { +String placeholder +SelectItemType[] items +React.ReactNode icon +String className } class SelectItemType { +String value +String label +React.ReactNode icon } class SelectTrigger { +React.ReactNode icon +String className } class SelectContent class SelectGroup class SelectValue class SelectScrollUpButton class SelectScrollDownButton class SelectLabel class SelectSeparator Select --> SelectTrigger Select --> SelectContent SelectContent --> SelectScrollUpButton SelectContent --> SelectScrollDownButton SelectContent --> SelectItem SelectContent --> SelectLabel SelectContent --> SelectSeparator SelectContent --> SelectGroup SelectContent --> SelectValue SelectItem --> SelectItemType ``` #### Class diagram for new Breadcrumb component ```mermaid classDiagram class Breadcrumb class BreadcrumbList class BreadcrumbItem class BreadcrumbLink { +Boolean asChild } class BreadcrumbPage class BreadcrumbSeparator class BreadcrumbEllipsis Breadcrumb --> BreadcrumbList BreadcrumbList --> BreadcrumbItem BreadcrumbItem --> BreadcrumbLink BreadcrumbItem --> BreadcrumbPage BreadcrumbItem --> BreadcrumbSeparator BreadcrumbItem --> BreadcrumbEllipsis ``` #### Class diagram for new Spinner component ```mermaid classDiagram class Spinner { +Number size } ``` ### File-Level Changes | Change | Details | Files | | ------ | ------- | ----- | | Select 컴포넌트를 완전히 재작성하여 더 유연하고 재사용 가능한 구조로 개선 |- SelectItemType 인터페이스 추가로 아이템 구조 표준화
- 아이콘 지원 기능 추가
- 스크롤 버튼 컴포넌트 추가
- 접근성 개선을 위한 속성들 추가
- Breadcrumb 컴포넌트 추가
- Spinner 컴포넌트 추가
- PlusIcon 컴포넌트를 별도 파일로 분리
`src/components/ui/spinner.tsx`
`src/components/icons/PlusIcon.tsx` | | 기존 컴포넌트들의 스타일 및 기능 개선 |
- Input 컴포넌트의 variant 시스템 개선
- Button 컴포넌트의 아이콘 로직 개선
- Badge 컴포넌트의 스타일 미세 조정
- Slider 컴포넌트의 스타일 개선
`src/components/ui/button.tsx`
`src/components/ui/badge.tsx`
`src/components/ui/slider.tsx` | | 스토리북 설정 개선 및 컴포넌트 문서화 |
- 스토리북 애드온 업데이트 및 설정 개선
- 모든 UI 컴포넌트에 대한 스토리 파일 작성
- 각 컴포넌트의 사용법과 변형에 대한 상세 문서화
`.storybook/preview.ts`
`src/stories/ui/*.stories.tsx` | | 파일 구조 및 네이밍 컨벤션 개선 |
- 컴포넌트 폴더 구조 정리
- 이미지 파일명 케밥 케이스로 통일
- 페이지 컴포넌트 이름 개선
`src/pages/SigninPage.tsx`
`src/pages/CONCATPage.tsx` | ### Possibly linked issues - **#1**: The PR addresses the issue by refactoring components and adding Storybook files. ---
github-actions[bot]
nakyeonko3
완료
Sourcery에 의한 요약
Select, Input, Button 컴포넌트를 포함한 여러 UI 컴포넌트를 리팩토링하여 사용성 및 일관성을 개선합니다. 새로운 Select 기능으로 TTSOptionsSidebar를 향상시킵니다. 여러 컴포넌트에 대한 Storybook 문서를 업데이트하고 관련 종속성을 업그레이드합니다.
개선 사항:
빌드:
문서화:
Original summary in English
## Summary by Sourcery Refactor several UI components for improved usability and consistency, including Select, Input, and Button components. Enhance the TTSOptionsSidebar with new Select features. Update Storybook documentation for multiple components and upgrade related dependencies. Enhancements: - Refactor the Select component to improve its API and usability, including changes to props and internal structure. - Update the TTSOptionsSidebar to use new Select component features, enhancing the user interface for selecting language, voice, and style options. - Refactor the Input component to use class-variance-authority for styling, allowing for more flexible and consistent styling options. - Refactor the Button component to remove inline SVG definitions and use imported icons, improving maintainability. - Refactor the LoginPage to SigninPage, updating component names and paths for consistency. Build: - Update Storybook and related dependencies to the latest versions, ensuring compatibility and access to new features. Documentation: - Add extensive Storybook documentation for various UI components, including Button, Input, Avatar, Badge, Breadcrumb, Select, and more, to improve developer understanding and usage.