sourcery-ai[bot]
commented
5 days ago 리뷰어 가이드 by Sourcery
이 풀 리퀘스트는 VC(음성 변환) 페이지 기능에 대한 중요한 업데이트를 구현하며, 파일 업로드 처리, 음성 선택 UI, 전반적인 사용자 경험 개선에 중점을 두고 있습니다. 변경 사항에는 사전 설정 및 사용자 정의 음성 옵션이 있는 새로운 음성 선택 인터페이스, 향상된 파일 업로드 기능, 개선된 상태 관리가 포함됩니다.
업데이트된 useFileUpload 훅의 클래스 다이어그램
classDiagram
class useFileUpload {
+useFileUpload(props: UseFileUploadProps)
+handleFiles(files: FileList | null)
+isLoading: boolean
}
class UseFileUploadProps {
+maxSizeInMB: number
+allowedTypes: AllowedFileType[]
+onSuccess: function
+onError: function
}
class FileInfo {
+id: string
+name: string
+size: number
+isEditing: boolean
}
useFileUpload --> UseFileUploadProps
useFileUpload --> FileInfo새로운 useFileUploadBox 훅의 클래스 다이어그램
classDiagram
class useFileUploadBox {
+useFileUploadBox(props: UseFileUploadBoxProps)
+state: string
+progress: number
+file: FileInfo
+uploadingFile: File
+isLoading: boolean
+fileInputRef: RefObject
+handleFileSelect(e: ChangeEvent)
+formatFileSize(size: number): string
+resetUpload()
}
class UseFileUploadBoxProps {
+maxSizeInMB: number
+allowedTypes: AllowedFileType[]
+onSuccess: function
+mode: string
+selectedFile: FileInfo
}
useFileUploadBox --> UseFileUploadBoxProps
useFileUploadBox --> FileInfo업데이트된 VCPage 컴포넌트의 클래스 다이어그램
classDiagram
class VCPage {
+handleAudioUpload(files: FileList | null)
+handleTextUpload(files: FileList | null)
+handleFileUpload(files: FileList | null)
+handleVoiceConversion()
+handleSelectionChange(id: string)
+handleAdd()
+handlePlay(id: string)
+handleSelectAll()
+items: VCItem[]
+selectedTargetVoice: string
}
class VCItem {
+id: string
+text: string
+isSelected: boolean
+fileName: string
+status: string
+originalAudioUrl: string
+convertedAudioUrl: string
}
VCPage --> VCItem파일 수준 변경 사항
| 변경 사항 | 세부 사항 | 파일 |
|---|---|---|
| 향상된 파일 업로드 훅으로 개선된 검증 및 진행 추적 |
|
src/hooks/useFileUpload.ts |
| 사전 설정 및 사용자 정의 음성 관리를 위한 새로운 음성 선택 인터페이스 구현 |
|
src/components/custom/feature/VoiceSelection.tsxsrc/components/custom/cards/VoiceCard.tsx |
| 새로운 파일 관리 및 음성 선택 기능으로 VC 페이지 업데이트 |
|
src/pages/VCPage.tsxsrc/components/section/sidebar/VCSidebar.tsx |
| 새로운 UI 컴포넌트 추가 및 기존 컴포넌트 업데이트 |
|
src/components/ui/card.tsxsrc/components/ui/radio-group.tsxsrc/components/ui/tabs.tsx |
관련된 문제일 가능성
- #1: PR은 사이드바 컴포넌트의 변경을 포함하여 VC 페이지를 업데이트합니다.
팁 및 명령어
#### 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 pull request implements significant updates to the VC (Voice Conversion) page functionality, focusing on file upload handling, voice selection UI, and overall user experience improvements. The changes include a new voice selection interface with preset and custom voice options, enhanced file upload capabilities, and improved state management. #### Class diagram for updated useFileUpload hook ```mermaid classDiagram class useFileUpload { +useFileUpload(props: UseFileUploadProps) +handleFiles(files: FileList | null) +isLoading: boolean } class UseFileUploadProps { +maxSizeInMB: number +allowedTypes: AllowedFileType[] +onSuccess: function +onError: function } class FileInfo { +id: string +name: string +size: number +isEditing: boolean } useFileUpload --> UseFileUploadProps useFileUpload --> FileInfo ``` #### Class diagram for new useFileUploadBox hook ```mermaid classDiagram class useFileUploadBox { +useFileUploadBox(props: UseFileUploadBoxProps) +state: string +progress: number +file: FileInfo +uploadingFile: File +isLoading: boolean +fileInputRef: RefObject +handleFileSelect(e: ChangeEvent) +formatFileSize(size: number): string +resetUpload() } class UseFileUploadBoxProps { +maxSizeInMB: number +allowedTypes: AllowedFileType[] +onSuccess: function +mode: string +selectedFile: FileInfo } useFileUploadBox --> UseFileUploadBoxProps useFileUploadBox --> FileInfo ``` #### Class diagram for updated VCPage component ```mermaid classDiagram class VCPage { +handleAudioUpload(files: FileList | null) +handleTextUpload(files: FileList | null) +handleFileUpload(files: FileList | null) +handleVoiceConversion() +handleSelectionChange(id: string) +handleAdd() +handlePlay(id: string) +handleSelectAll() +items: VCItem[] +selectedTargetVoice: string } class VCItem { +id: string +text: string +isSelected: boolean +fileName: string +status: string +originalAudioUrl: string +convertedAudioUrl: string } VCPage --> VCItem ``` ### File-Level Changes | Change | Details | Files | | ------ | ------- | ----- | | Enhanced file upload hook with improved validation and progress tracking |- Added file type constants and Korean translations
- Implemented file size formatting and validation
- Added upload progress simulation with interval-based updates
- Improved error handling with optional error callback
- Created tabbed interface for preset and custom voices
- Added voice card component with edit and delete functionality
- Implemented pagination for voice list
- Added support for voice file upload with size restrictions
`src/components/custom/cards/VoiceCard.tsx` | | Updated VC page with new file management and voice selection features |
- Integrated voice selection with main page state
- Added file upload and conversion status tracking
- Implemented local storage for voice files
- Updated sidebar with voice conversion controls
`src/components/section/sidebar/VCSidebar.tsx` | | Added new UI components and updated existing ones |
- Added Card component for structured content display
- Implemented RadioGroup component for voice selection
- Updated Tabs component styling
- Removed deprecated components
`src/components/ui/radio-group.tsx`
`src/components/ui/tabs.tsx` | ### Possibly linked issues - **#1**: The PR updates the VC page, including changes to the sidebar component. ---
github-actions[bot]
vc페이지 업데이트
Sourcery에 의한 요약
VC 페이지를 새로운 파일 업로드 기능으로 업데이트하고, 진행 추적이 가능한 파일 업로드를 위한 새로운 훅과 음성 선택을 관리하는 컴포넌트를 포함합니다. 사이드바를 개선하여 사용자 정의 음성 업로드 및 관리를 지원하고, 기존 컴포넌트를 성능과 사용성을 향상시키기 위해 리팩토링합니다.
새로운 기능:
useFileUploadBox를 도입합니다.VoiceSelection컴포넌트를 추가합니다.VoiceCard컴포넌트를 구현합니다.개선 사항:
useFileUpload를 리팩토링하여 성능을 향상시키기 위해useCallback을 사용하고 선택적 오류 처리를 지원합니다.FileUploadBox를 업데이트하여 새로운useFileUploadBox훅을 사용하고 로컬 스토리지를 통해 파일 상태를 관리합니다.VCSidebar를 개선하여 사용자 정의 음성 업로드 및 관리를 지원합니다.Original summary in English
## Summary by Sourcery Update the VC page with new file upload functionalities, including a new hook for file uploads with progress tracking, and components for managing voice selections. Enhance the sidebar to support custom voice uploads and management, and refactor existing components for improved performance and usability. New Features: - Introduce a new hook `useFileUploadBox` for handling file uploads with progress tracking and validation. - Add a `VoiceSelection` component for selecting and managing preset and custom voice options. - Implement a `VoiceCard` component for displaying voice options with edit and delete functionalities. Enhancements: - Refactor `useFileUpload` to use `useCallback` for better performance and add support for optional error handling. - Update `FileUploadBox` to use the new `useFileUploadBox` hook and manage file state with local storage. - Enhance `VCSidebar` to support custom voice uploads and management.