feat: 블로그 배너 #123
feat: 블로그 배너 #123
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @seungwoo505, I'm Gemini Code Assist1! 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!
I've implemented a new blog banner feature to improve the user's initial experience on the blog page. This banner provides a clear introduction to the blog's content, specifically focusing on data trading insights, and includes a direct call to action that allows users to easily navigate to the main article list. The change aims to make the blog more inviting and user-friendly by guiding visitors to relevant content.
Highlights
- New Blog Introduction Banner Component: I've introduced a new
BlogIntroBannercomponent inapp/(shared)/components/blog-intro-banner.tsx. This component is designed to welcome users to the blog section with an engaging layout, informative text, and a relevant image. - Homepage Integration: The newly created
BlogIntroBannerhas been integrated intoapp/HomePage.tsx. It is now displayed prominently at the top of the page, serving as an initial entry point for users interested in the blog content. - Smooth Scroll-to-Articles Functionality: To enhance user experience, the banner includes a button that, when clicked, smoothly scrolls the page down to the main article section. This is achieved by adding an
id="articles"to thedivcontaining theArticleSectioninapp/HomePage.tsxand using JavaScript'sscrollIntoViewmethod.
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 in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| 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 issue 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 or fill out our survey to provide feedback.
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
-
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. ↩
| <div className=" w-full gap-8 md:gap-0 flex-col-reverse flex flex-col md:flex-row items-center px-6 md:px-20 lg:pl-44 py-10"> | ||
| {/* 왼쪽 텍스트 설명 */} | ||
| <div className="w-full md:w-2/3 flex flex-col gap-4"> | ||
| <h2 className="dary:text-gray-900 text-2xl md:text-3xl font-bold mb-2"> |
There was a problem hiding this comment.
className에 오타가 있습니다. dary:text-gray-900은 dark:text-gray-900의 오타인 것 같습니다. 다크 모드에서 스타일이 올바르게 적용되도록 수정해야 합니다.
<h2 className="dark:text-gray-900 text-2xl md:text-3xl font-bold mb-2">| onClick={() => { | ||
| const articleSection = document.getElementById('articles'); | ||
| if (articleSection) { | ||
| articleSection.scrollIntoView({ behavior: 'smooth' }); | ||
| } | ||
| }} |
There was a problem hiding this comment.
가독성과 유지보수성을 위해 onClick 핸들러 로직을 컴포넌트 본문 내의 별도 함수로 추출하는 것을 권장합니다.
예시:
const handleScrollToArticles = () => {
const articleSection = document.getElementById('articles');
if (articleSection) {
articleSection.scrollIntoView({ behavior: 'smooth' });
}
};
// ...
<button onClick={handleScrollToArticles} ... />| <svg | ||
| className="w-5 h-5" | ||
| fill="none" | ||
| stroke="currentColor" | ||
| viewBox="0 0 24 24" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| strokeWidth={2} | ||
| d="M19 14l-7 7m0 0l-7-7m7 7V3" | ||
| /> | ||
| </svg> |
There was a problem hiding this comment.
버튼 내의 SVG 아이콘은 시각적인 장식 요소이므로, 스크린 리더 사용자에게는 불필요한 정보를 제공할 수 있습니다. aria-hidden="true" 속성을 추가하여 스크린 리더가 이를 무시하도록 하는 것이 웹 접근성 모범 사례입니다.
<svg
className="w-5 h-5"
fill="none"
stroke="currentColor"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
aria-hidden="true"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
strokeWidth={2}
d="M19 14l-7 7m0 0l-7-7m7 7V3"
/>
</svg>| width={200} | ||
| height={200} | ||
| className="w-48 h-48 md:w-56 md:h-56 object-contain" | ||
| style={{ filter: 'drop-shadow(0 2px 10px rgba(0,0,0,0.04))' }} |
There was a problem hiding this comment.
인라인 스타일(style={{...}})은 유지보수성을 저해할 수 있으므로, 가급적 Tailwind CSS 클래스로 대체하는 것이 좋습니다. filter: 'drop-shadow(...)'는 Tailwind의 drop-shadow 유틸리티로 구현할 수 있습니다. tailwind.config.js에 커스텀 값을 추가하거나, drop-shadow-md 또는 drop-shadow-lg 같은 기존 유틸리티를 사용하는 것을 고려해 보세요.
| import Banner from './home/banner'; | ||
|
|
||
| import { ArticleSection } from './home/components/article-section'; | ||
| import BlogIntroBanner from './(shared)/components/blog-intro-banner'; |
There was a problem hiding this comment.
3 participants
📝 변경 사항
🔍 변경 사항 세부 설명
🕵️♀️ 요청사항
📷 스크린샷 (선택)