[feat] 툴팁 메시지 적용

dhkim511 commented 1 week ago

메시지 내용은 일단 대충 적어놨습니다.

Sourcery에 의한 요약

버튼과 작업에 툴팁 메시지를 추가하여 사용자 상호작용과 안내를 개선합니다. 일관된 스타일링을 위해 툴팁 컴포넌트를 리팩토링하고 변수명을 명확하게 변경합니다.

새로운 기능:

애플리케이션 전반에 걸쳐 다양한 버튼과 작업에 툴팁 메시지를 도입하여 사용자 안내와 상호작용을 향상시킵니다.

개선 사항:

애플리케이션 전반에 걸쳐 일관된 스타일링과 동작을 위해 새로운 TooltipWrapper를 사용하도록 툴팁 컴포넌트를 리팩토링합니다.
VCSidebarTabs 컴포넌트에서 더 나은 명확성과 일관성을 위해 인터페이스 및 변수 이름을 변경합니다.

Original summary in English

## Summary by Sourcery Add tooltip messages to buttons and actions to improve user interaction and guidance. Refactor the tooltip component for consistent styling and rename variables for clarity. New Features: - Introduce tooltip messages for various buttons and actions across the application, enhancing user guidance and interaction. Enhancements: - Refactor the tooltip component to use a new TooltipWrapper for consistent styling and behavior across the application. - Rename interface and variable names for better clarity and consistency in the VCSidebarTabs component.

sourcery-ai[bot] commented 1 week ago

리뷰어 가이드 by Sourcery

이 PR은 애플리케이션의 다양한 구성 요소에 툴팁 기능을 구현합니다. 구현에는 새로운 TooltipWrapper 구성 요소, 툴팁 메시지 상수, 버튼 및 컨트롤과 같은 여러 UI 요소에 툴팁을 통합하는 작업이 포함됩니다.

TooltipWrapper 구성 요소의 클래스 다이어그램

classDiagram
    class TooltipWrapper {
        +React.ReactNode content
        +React.ReactNode children
        +string className
        +number sideOffset
        +TooltipWrapper(content, children, className, sideOffset)
    }
    class TooltipPrimitive {
        <<interface>>
    }
    TooltipWrapper --> TooltipPrimitive: uses
    TooltipPrimitive : +Provider
    TooltipPrimitive : +Root
    TooltipPrimitive : +Trigger
    TooltipPrimitive : +Content

툴팁 메시지 상수의 클래스 다이어그램

classDiagram
    class TTS_TOOLTIP {
        <<constant>>
        +string APPLY_SELECTED
        +string APPLY_ALL
        +string RESET_SETTINGS
        +string REGENERATE_SELECTED
        +string DOWNLOAD_AUDIO
        +string VIEW_HISTORY
    }
    class VC_TOOLTIP {
        <<constant>>
        +string APPLY_SELECTED
        +string APPLY_ALL
        +string RESET_SETTINGS
    }
    class CONCAT_TOOLTIP {
        <<constant>>
        +string APPLY_SELECTED
        +string APPLY_ALL
        +string RESET_SETTINGS
    }
    class AUDIO_FOOTER_TOOLTIP {
        <<constant>>
        +string FULL_HISTORY
    }

파일 수준 변경 사항

변경 사항	세부 사항	파일
재사용 가능한 래퍼 구성 요소로 새로운 툴팁 시스템 생성	사용자 정의 가능한 위치 지정 및 스타일링을 갖춘 TooltipWrapper 구성 요소 구현 다양한 섹션(TTS, VC, CONCAT)을 위한 툴팁 메시지 상수 생성 사용자 정의 툴팁 정렬 및 오프셋 지원 추가	`src/components/custom/guide/TooltipWrapper.tsx` `src/constants/tooltips.ts`
여러 구성 요소에 걸쳐 있는 작업 버튼에 툴팁 적용	재생성, 다운로드 및 기록 버튼에 툴팁 추가 적용, 모두 적용 및 설정 재설정 버튼에 대한 툴팁 구현 오디오 푸터 컨트롤에 툴팁 추가	`src/components/custom/tables/project/tts/TTSTableGridView.tsx` `src/components/section/sidebar/VCSidebar.tsx` `src/components/section/sidebar/CONCATSidebar.tsx` `src/components/section/sidebar/TTSSidebar.tsx` `src/components/section/footer/AudioFooter.tsx`
구성 요소 조직 리팩토링 및 개선	이름 일관성을 위해 KeBob을 KebabMenu로 이름 변경 인터페이스 이름을 VCSidebarTabs에서 VoiceFile로 업데이트 구성 요소 가져오기 및 참조 수정	`src/components/custom/tabs/VCSidebarTabs.tsx` `src/pages/VCPage.tsx`

관련 있을 수 있는 문제

#44: 이 PR은 툴팁 메시지를 구현하며, 툴팁 UI 생성 문제와 직접적으로 관련이 있습니다.

팁 및 명령어

#### 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 tooltip functionality across various components in the application. The implementation includes a new TooltipWrapper component, tooltip message constants, and the integration of tooltips into multiple UI elements such as buttons and controls. #### Class diagram for TooltipWrapper component ```mermaid classDiagram class TooltipWrapper { +React.ReactNode content +React.ReactNode children +string className +number sideOffset +TooltipWrapper(content, children, className, sideOffset) } class TooltipPrimitive { <> } TooltipWrapper --> TooltipPrimitive: uses TooltipPrimitive : +Provider TooltipPrimitive : +Root TooltipPrimitive : +Trigger TooltipPrimitive : +Content ``` #### Class diagram for tooltip message constants ```mermaid classDiagram class TTS_TOOLTIP { <> +string APPLY_SELECTED +string APPLY_ALL +string RESET_SETTINGS +string REGENERATE_SELECTED +string DOWNLOAD_AUDIO +string VIEW_HISTORY } class VC_TOOLTIP { <> +string APPLY_SELECTED +string APPLY_ALL +string RESET_SETTINGS } class CONCAT_TOOLTIP { <> +string APPLY_SELECTED +string APPLY_ALL +string RESET_SETTINGS } class AUDIO_FOOTER_TOOLTIP { <> +string FULL_HISTORY } ``` ### File-Level Changes | Change | Details | Files | | ------ | ------- | ----- | | Created a new tooltip system with a reusable wrapper component |

Implemented TooltipWrapper component with customizable positioning and styling
Created tooltip message constants for different sections (TTS, VC, CONCAT)
Added support for custom tooltip alignment and offset

| `src/components/custom/guide/TooltipWrapper.tsx`
`src/constants/tooltips.ts` | | Applied tooltips to action buttons across multiple components |

Added tooltips to regenerate, download, and history buttons
Implemented tooltips for apply, apply all, and reset settings buttons
Added tooltips to audio footer controls

| `src/components/custom/tables/project/tts/TTSTableGridView.tsx`
`src/components/section/sidebar/VCSidebar.tsx`
`src/components/section/sidebar/CONCATSidebar.tsx`
`src/components/section/sidebar/TTSSidebar.tsx`
`src/components/section/footer/AudioFooter.tsx` | | Refactored and improved component organization |

Renamed KeBob to KebabMenu for better naming consistency
Updated interface naming from VCSidebarTabs to VoiceFile
Fixed component imports and references

| `src/components/custom/tabs/VCSidebarTabs.tsx`
`src/pages/VCPage.tsx` | ### Possibly linked issues - **#44**: The PR implements tooltip messages, directly related to the tooltip UI creation issue. ---

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).