[Feat/#22] 공용 탭바 개발 완료

[chunjaemin]

요약

• 공용 탭바 개발
• 탭바 underline 좌우 이동 애니메이션 적용

추가사항

• 현재는 고객문의 도메인에서만 사용합니다. 하지만 탭바 특성상 추후에 다른 도메인에서 사용할 수 있을 가능성을 염두하여 구현하였습니다.
  => shared 레이어에 배치하였으며, 2개 이상의 탭을 가변적으로 받을 수 있게 하였습니다.

🔗 관련 이슈

• Closes [FEAT/#22] 탭바 공통 컴포넌트 개발 #22

리뷰어에게

[github-actions]

Thanks for the contribution!
I have applied any labels matching special text in your title and description.

Please review the labels and make any necessary changes.

[gemini-code-assist]

Summary of Changes

Hello @chunjaemin, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 애플리케이션 전반에 걸쳐 재사용 가능한 공용 탭바 컴포넌트를 도입합니다. 이 탭바는 현재 고객 문의 도메인에서 사용되지만, 향후 다른 도메인에서도 쉽게 활용할 수 있도록 유연하게 설계되었습니다. 선택된 탭을 시각적으로 강조하기 위해 부드러운 슬라이드 애니메이션이 적용된 언더라인 기능을 포함하고 있습니다.

Highlights

• 공용 탭바 컴포넌트 개발: 애플리케이션 전반에 걸쳐 재사용 가능한 TabBar 컴포넌트가 새로 개발되었습니다.
• 언더라인 애니메이션 적용: 선택된 탭에 따라 언더라인이 좌우로 부드럽게 이동하는 슬라이드 애니메이션 기능이 추가되었습니다.
• 유연한 설계 및 재사용성: 탭바는 shared 레이어에 배치되어 재사용성을 높였으며, 2개 이상의 탭을 유연하게 지원하도록 설계되어 향후 다양한 도메인에서 활용될 수 있습니다.

Changelog

• src/shared/ui/TabBar/README.md
  • TabBar 컴포넌트의 사용법, Props, 그리고 구현 참고사항을 설명하는 README 파일이 추가되었습니다.
• src/shared/ui/TabBar/TabBar.tsx
  • TabBar 컴포넌트의 핵심 로직이 구현되었습니다. 탭 목록을 렌더링하고, 활성 탭 상태를 관리하며, 언더라인 애니메이션을 통합합니다.
• src/shared/ui/TabBar/index.ts
  • TabBar 컴포넌트와 관련 타입들을 외부에서 쉽게 가져올 수 있도록 내보내는 파일이 추가되었습니다.
• src/shared/ui/TabBar/types.ts
  • TabBarTab 및 TabBarProps에 대한 TypeScript 타입 정의가 추가되어 컴포넌트의 타입 안정성을 보장합니다.
• src/shared/ui/TabBar/useTabBarUnderlineAnimation.ts
  • 활성 탭에 따라 언더라인의 위치와 너비를 애니메이션으로 제어하는 사용자 정의 React Hook이 구현되었습니다.

Activity

• 이 PR에는 아직 활동 내역이 없습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

The pull request introduces a new TabBar component, which is a stateless tab bar with a sliding underline animation. The implementation includes a custom hook useTabBarUnderlineAnimation to manage the animation logic. The component is well-documented in a README.md file, providing clear usage examples and prop descriptions. The code appears clean and follows good practices for React Native component development. The use of useRef for isInitialMount is a good pattern to prevent unnecessary re-animations on initial render. The component is designed to be flexible, supporting a variable number of tabs and transparent background for reusability.