#105 feat: 헤더, 카테고리, 히어로캐러셀 디자인 리뉴얼

[kaeuhy]

🛠️ 설명 (Description)

• 기존 MainPageCarousel 대신 HeroCarousel로 이름 변경하였습니다.
  • swiper 라이브러리대신 tailwindcss를 사용하여 구현하였습니다.
• Header.tsx, Footer.tsx, Category.tsx의 디자인을 리뉴얼하였습니다.

📝 변경 사항 요약 (Summary)

• MainPageCarousel -> HeroCarousel.tsx 이름 변경 및 디자인 수정
• Header.tsx, Footer.tsx, Category.tsx 디자인 수정

🔗 관련 이슈 (Related Issues)

• Closes #None
• Related [IMPROVEMENT] 전체적인 홈페이지 디자인 리뉴얼 #105

☑️ 체크리스트 (Checklist)

• 코드가 프로젝트 코딩 컨벤션을 따릅니다.
• 테스트 코드가 작성되었고, 통과했습니다.
• 변경 사항에 대한 문서화가 완료되었습니다.
• 필요한 경우, 다른 팀원에게 리뷰를 요청했습니다.
• CI/CD 파이프라인이 성공했습니다.

👀 리뷰어를 위한 참고 사항 (Notes for Reviewers)

➕ 추가 정보 (Additional Information)

[gemini-code-assist]

Summary of Changes

Hello @kaeuhy, 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은 사용자 인터페이스의 주요 구성 요소인 헤더, 카테고리, 그리고 메인 페이지 캐러셀의 디자인을 전반적으로 개선하고 현대화하는 데 중점을 둡니다. 특히 캐러셀은 외부 라이브러리 의존성을 줄이고 Tailwind CSS를 활용하여 자체 구현함으로써 성능과 유지보수성을 향상시켰습니다. 이러한 변경 사항들은 사용자 경험을 향상시키고 애플리케이션의 시각적 매력을 높이는 것을 목표로 합니다.

Highlights

• 캐러셀 컴포넌트 리뉴얼: 기존 MainPageCarousel 컴포넌트가 HeroCarousel로 이름이 변경되고 완전히 리뉴얼되었습니다. swiper 라이브러리 대신 Tailwind CSS를 사용하여 캐러셀 기능이 구현되었습니다.
• 헤더 디자인 리뉴얼: 헤더 컴포넌트의 디자인이 전반적으로 개선되었습니다. 로고 이미지가 제거되고 텍스트 로고로 대체되었으며, 검색창 UI와 모바일 햄버거 버튼의 위치 및 스타일이 조정되었습니다.
• 카테고리 디자인 리뉴얼: 카테고리 컴포넌트의 디자인이 변경되었으며, react-router-dom의 Link 컴포넌트를 사용하여 페이지 이동을 처리하고 현재 활성화된 카테고리를 시각적으로 표시하는 기능이 추가되었습니다.
• 푸터 디자인 개선: 푸터 컴포넌트 내 'NextFrame' 텍스트의 색상이 변경되어 전체적인 디자인 통일성을 높였습니다.

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

This pull request refactors the main page's carousel, replacing a Swiper-based implementation with a new custom HeroCarousel component. The Category component was updated to use react-router-dom links and dynamically manage active states based on URL query parameters. The Header component received a significant visual redesign, including the removal of the logo image, a new search bar design and positioning, and general layout adjustments. Minor styling changes were also applied to the Footer and various page headings. Review comments identified a typo in a HeroCarousel button's className, a missing onClick handler for another button in the same component, an issue with the Category component's useEffect logic not correctly defaulting the active category, and poor formatting of a className in the Header's search input.