[refactor] tts 드롭다운 컴포넌트 수정

dhkim511 commented 1 week ago

tts 드롭다운 컴포넌트 수정

Sourcery에 의한 요약

TTS 드롭다운, 배지, 가입 양식을 포함한 여러 구성 요소를 리팩토링하여 기능성과 사용자 경험을 개선합니다. SonarQube 및 Slack 알림 단계를 수정하여 CI 및 배포 워크플로를 향상시킵니다. 새로운 및 기존 구성 요소에 대한 문서 및 스토리북 스토리를 업데이트합니다.

개선 사항:

TTS 드롭다운 구성 요소를 리팩토링하여 기능성과 사용자 인터페이스를 개선합니다.
배지 구성 요소를 업데이트하여 더 명확한 설명을 제공하고 불필요한 스타일을 제거합니다.
Zod 및 React Hook Form을 사용하여 유효성 검사를 통해 사용자 입력 처리를 개선한 가입 양식을 강화합니다.
오디오 푸터 및 메인 헤더 구성 요소를 리팩토링하여 레이아웃과 사용자 상호작용을 개선합니다.

CI:

CI 워크플로에서 SonarQube 분석 결과 게시 단계를 주석 처리합니다.

배포:

AWS 배포 워크플로에서 Slack 알림 형식을 블록을 사용하여 더 나은 메시지 형식으로 수정합니다.

문서:

사용 예제 및 사용자 정의 옵션을 포함하여 새로운 탭 및 드롭다운 메뉴 구성 요소에 대한 자세한 문서를 추가합니다.

테스트:

최근 변경 사항 및 개선 사항을 반영하기 위해 다양한 UI 구성 요소에 대한 스토리북 스토리를 업데이트합니다.

Original summary in English

## Summary by Sourcery Refactor multiple components including the TTS dropdown, badge, and signup form for improved functionality and user experience. Enhance the CI and deployment workflows by modifying SonarQube and Slack notification steps. Update documentation and storybook stories for new and existing components. Enhancements: - Refactor the TTS dropdown component to improve its functionality and user interface. - Update the badge component to provide clearer descriptions and remove redundant styles. - Enhance the signup form with validation using Zod and React Hook Form for better user input handling. - Refactor the audio footer and main header components to improve layout and user interaction. CI: - Commenting out the SonarQube analysis results posting step in the CI workflow. Deployment: - Modify the Slack notification format in the AWS deployment workflow to use blocks for better message formatting. Documentation: - Add detailed documentation for the new tabs and dropdown menu components, including usage examples and customization options. Tests: - Update storybook stories for various UI components to reflect recent changes and improvements.

sourcery-ai[bot] commented 1 week ago

리뷰어 가이드 by Sourcery

이 PR은 TTS 드롭다운 컴포넌트의 주요 리팩토링을 구현하고 사용자 인증을 위한 새로운 UI 컴포넌트를 추가합니다. 변경 사항에는 TTS 드롭다운을 별도의 컴포넌트로 분리하고, 회원가입 기능을 위한 새로운 폼 컴포넌트를 추가하며, 탭, 라벨, 드롭다운과 같은 다양한 UI 유틸리티를 구현하는 것이 포함됩니다.

SignupForm 컴포넌트의 클래스 다이어그램

classDiagram
    class SignupForm {
        - useForm<SignupFormData>
        - useState
        - onSubmit(data: SignupFormData)
        - handleEmailCheck()
        - handleOpenTerms(type: 'service' | 'privacy', isAll: boolean)
        - handleAgreeTerms(type: 'service' | 'privacy')
    }
    class TermsAgreement
    class TermsDialog
    class Button
    class Form
    class FormControl
    class FormField
    class FormItem
    class FormLabel
    class FormMessage
    class Input
    class TERMS
    class SignupFormData
    class SignupFormRequest
    class signupFormSchema
    SignupForm --> TermsAgreement
    SignupForm --> TermsDialog
    SignupForm --> Button
    SignupForm --> Form
    SignupForm --> FormControl
    SignupForm --> FormField
    SignupForm --> FormItem
    SignupForm --> FormLabel
    SignupForm --> FormMessage
    SignupForm --> Input
    SignupForm --> TERMS
    SignupForm --> SignupFormData
    SignupForm --> SignupFormRequest
    SignupForm --> signupFormSchema

TTSPage 컴포넌트의 클래스 다이어그램

classDiagram
    class TTSPage {
        - useState<FileProgressItem[]>
        - handleDeleteCompleted()
        - handleRetryFailed()
    }
    class FileProgressHeader
    class TTSOptionsSidebar
    class TTSTable
    class Button
    class AudioFooter
    TTSPage --> FileProgressHeader
    TTSPage --> TTSOptionsSidebar
    TTSPage --> TTSTable
    TTSPage --> Button
    TTSPage --> AudioFooter

FileProgressDropdown 컴포넌트의 클래스 다이어그램

classDiagram
    class FileProgressDropdown {
        - useState
        - useMemo
        - toggleStatus(status: string)
    }
    class DeleteCompletedButton
    class RetryFailedButton
    class TbChevronDown
    class TbChevronUp
    class TbCircleFilled
    class TbRotate
    FileProgressDropdown --> DeleteCompletedButton
    FileProgressDropdown --> RetryFailedButton
    FileProgressDropdown --> TbChevronDown
    FileProgressDropdown --> TbChevronUp
    FileProgressDropdown --> TbCircleFilled
    FileProgressDropdown --> TbRotate

파일 수준 변경 사항

변경 사항	세부 사항	파일
유효성 검사를 포함한 회원가입 폼 기능 구현	폼 필드와 유효성 검사 로직을 포함한 SignupForm 컴포넌트 생성 체크박스 컨트롤을 통한 약관 동의 처리 추가 zod 스키마를 사용한 폼 유효성 검사 구현 유효성 검사 규칙 및 오류 메시지에 대한 상수 추가	`src/components/forms/SignupForm.tsx` `src/components/terms/TermsAgreement.tsx` `src/utils/signupSchema.ts` `src/constants/validation.ts` `src/types/signup.ts`
TTS 드롭다운을 별도의 컴포넌트로 리팩토링	FileProgressDropdown 컴포넌트로 TTS 드롭다운 분리 파일 진행 상황 및 메인 내비게이션을 위한 별도의 헤더 컴포넌트 생성 사용자 메뉴를 위한 ProfileDropdown 컴포넌트 추가 재생 컨트롤을 위한 AudioFooter 컴포넌트 구현	`src/components/dropdowns/FileProgressDropdown.tsx` `src/components/header/FileProgressHeader.tsx` `src/components/header/MainHeader.tsx` `src/components/dropdowns/ProfileDropdown.tsx` `src/components/footer/AudioFooter.tsx`
새로운 UI 유틸리티 컴포넌트 추가	탭 인터페이스를 위한 Tabs 컴포넌트 생성 드롭다운 메뉴를 위한 DropdownMenu 컴포넌트 추가 폼 처리를 위한 Form 컴포넌트 구현 폼 라벨을 위한 Label 컴포넌트 추가	`src/components/ui/tabs.tsx` `src/components/ui/dropdown-menu.tsx` `src/components/ui/form.tsx` `src/components/ui/label.tsx`
컴포넌트 문서 및 스토리 업데이트	Badge 컴포넌트에 대한 문서 추가 Tabs 컴포넌트에 대한 스토리 생성 DropdownMenu 컴포넌트에 대한 문서 추가 Button 컴포넌트 변형 업데이트	`src/stories/ui/badge.stories.tsx` `src/stories/ui/tabs.stories.tsx` `src/stories/ui/dropdown-menu.stories.tsx` `src/stories/ui/button.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 implements a major refactoring of the TTS dropdown component and adds new UI components for user authentication. The changes include splitting the TTS dropdown into separate components, adding new form components for signup functionality, and implementing various UI utilities like tabs, labels, and dropdowns. #### Class diagram for SignupForm component ```mermaid classDiagram class SignupForm { - useForm - useState - onSubmit(data: SignupFormData) - handleEmailCheck() - handleOpenTerms(type: 'service' | 'privacy', isAll: boolean) - handleAgreeTerms(type: 'service' | 'privacy') } class TermsAgreement class TermsDialog class Button class Form class FormControl class FormField class FormItem class FormLabel class FormMessage class Input class TERMS class SignupFormData class SignupFormRequest class signupFormSchema SignupForm --> TermsAgreement SignupForm --> TermsDialog SignupForm --> Button SignupForm --> Form SignupForm --> FormControl SignupForm --> FormField SignupForm --> FormItem SignupForm --> FormLabel SignupForm --> FormMessage SignupForm --> Input SignupForm --> TERMS SignupForm --> SignupFormData SignupForm --> SignupFormRequest SignupForm --> signupFormSchema ``` #### Class diagram for TTSPage component ```mermaid classDiagram class TTSPage { - useState - handleDeleteCompleted() - handleRetryFailed() } class FileProgressHeader class TTSOptionsSidebar class TTSTable class Button class AudioFooter TTSPage --> FileProgressHeader TTSPage --> TTSOptionsSidebar TTSPage --> TTSTable TTSPage --> Button TTSPage --> AudioFooter ``` #### Class diagram for FileProgressDropdown component ```mermaid classDiagram class FileProgressDropdown { - useState - useMemo - toggleStatus(status: string) } class DeleteCompletedButton class RetryFailedButton class TbChevronDown class TbChevronUp class TbCircleFilled class TbRotate FileProgressDropdown --> DeleteCompletedButton FileProgressDropdown --> RetryFailedButton FileProgressDropdown --> TbChevronDown FileProgressDropdown --> TbChevronUp FileProgressDropdown --> TbCircleFilled FileProgressDropdown --> TbRotate ``` ### File-Level Changes | Change | Details | Files | | ------ | ------- | ----- | | Implemented signup form functionality with validation |

Created SignupForm component with form fields and validation logic
Added terms agreement handling with checkbox controls
Implemented form validation using zod schema
Added constants for validation rules and error messages

| `src/components/forms/SignupForm.tsx`
`src/components/terms/TermsAgreement.tsx`
`src/utils/signupSchema.ts`
`src/constants/validation.ts`
`src/types/signup.ts` | | Refactored TTS dropdown into separate components |

Split TTS dropdown into FileProgressDropdown component
Created separate header components for file progress and main navigation
Added ProfileDropdown component for user menu
Implemented AudioFooter component for playback controls

| `src/components/dropdowns/FileProgressDropdown.tsx`
`src/components/header/FileProgressHeader.tsx`
`src/components/header/MainHeader.tsx`
`src/components/dropdowns/ProfileDropdown.tsx`
`src/components/footer/AudioFooter.tsx` | | Added new UI utility components |

Created Tabs component for tabbed interfaces
Added DropdownMenu component for dropdown menus
Implemented Form components for form handling
Added Label component for form labels

| `src/components/ui/tabs.tsx`
`src/components/ui/dropdown-menu.tsx`
`src/components/ui/form.tsx`
`src/components/ui/label.tsx` | | Updated component documentation and stories |

Added documentation for Badge component
Created stories for Tabs component
Added documentation for DropdownMenu component
Updated Button component variants

| `src/stories/ui/badge.stories.tsx`
`src/stories/ui/tabs.stories.tsx`
`src/stories/ui/dropdown-menu.stories.tsx`
`src/stories/ui/button.stories.tsx` | ---

Tips and commands

#### Interacting with Sourcery - **Trigger a new review:** Comment `@sourcery-ai review` on the pull request. - **Continue discussions:** Reply directly to Sourcery's review comments. - **Generate a GitHub issue from a review comment:** Ask Sourcery to create an issue from a review comment by replying to it. - **Generate a pull request title:** Write `@sourcery-ai` anywhere in the pull request title to generate a title at any time. - **Generate a pull request summary:** Write `@sourcery-ai summary` anywhere in the pull request body to generate a PR summary at any time. You can also use this command to specify where the summary should be inserted. #### Customizing Your Experience Access your [dashboard](https://app.sourcery.ai) to: - Enable or disable review features such as the Sourcery-generated pull request summary, the reviewer's guide, and others. - Change the review language. - Add, remove or edit custom review instructions. - Adjust other review settings. #### Getting Help - [Contact our support team](mailto:support@sourcery.ai) for questions or feedback. - Visit our [documentation](https://docs.sourcery.ai) for detailed guides and information. - Keep in touch with the Sourcery team by following us on [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) or [GitHub](https://github.com/sourcery-ai).

github-actions[bot] commented 1 week ago

Storybook 확인 바로가기

github-actions[bot] commented 1 week ago

Visit the preview URL for this PR (updated for commit 7cda9cb):

https://aipark-four-t--149-0i7cfik0.web.app

_{(expires Sun, 24 Nov 2024 07:14:51 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: 0a4b3ef6ecc2c695a6a0d6ade46651e032870a9f}

FC-DEV-FinalProject / final-fe-team4