Conversation
Summary of ChangesHello @Lseojeong, 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! 이 PR은 애플리케이션의 핵심 UI 요소인 헤더와 네비게이션 바를 구현합니다. 이를 통해 사용자 인터페이스의 기본 구조를 확립하고, 아이콘의 재사용성과 테마 적용 유연성을 높였습니다. 새로운 컴포넌트들은 Storybook을 통해 시각적으로 검증 가능하며, 향후 기능 확장을 위한 기반을 마련합니다. Highlights
Using Gemini Code AssistThe 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
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 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
|
|
스토리북 URL 확인하기 - https://6908bd6605f813993a4103e1-yiomyrizfa.chromatic.com/ |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
| type="button" | ||
| onClick={onClick} | ||
| className={`${getBaseButtonClasses()} relative`} | ||
| aria-label={item.id} |
There was a problem hiding this comment.
접근성 향상을 위해 aria-label은 스크린 리더 사용자에게 더 의미 있는 정보를 제공해야 합니다. 현재 item.id ('chat')를 사용하고 있는데, item.label ('챗봇')을 사용하면 더 명확한 정보를 전달할 수 있습니다.
| aria-label={item.id} | |
| aria-label={item.label} |
| <circle cx="11.5" cy="10.5" r="1.5" fill="#00B999"/> | ||
| <circle cx="17.5" cy="10.5" r="1.5" fill="#00B999"/> | ||
| <circle cx="23.5" cy="10.5" r="1.5" fill="#00B999"/> | ||
| </g> | ||
| <circle cx="10.5" cy="10.5" r="10.5" transform="matrix(-1 0 0 1 25.2151 0)" fill="white"/> | ||
| <path d="M7.7886 12.2306C7.21775 11.8093 6.40191 12.0999 6.226 12.7873L4.36957 20.0409C4.171 20.8167 4.9195 21.4996 5.67392 21.2308L13.5546 18.4235C14.309 18.1547 14.4572 17.1524 13.8129 16.6769L7.7886 12.2306Z" fill="white"/> | ||
| <circle cx="1.5" cy="1.5" r="1.5" transform="matrix(-1 0 0 1 22.2151 9)" fill="#00B999"/> | ||
| <circle cx="1.5" cy="1.5" r="1.5" transform="matrix(-1 0 0 1 16.2151 9)" fill="#00B999"/> | ||
| <circle cx="1.5" cy="1.5" r="1.5" transform="matrix(-1 0 0 1 10.2151 9)" fill="#00B999"/> |
There was a problem hiding this comment.
아이콘에 색상 값을 하드코딩하면 테마 변경이나 재사용이 어려워집니다. 다른 아이콘들처럼 currentColor를 사용하여 CSS로 색상을 제어하는 것이 좋습니다. 이 파일의 모든 #00B999 색상을 currentColor로 변경하는 것을 제안합니다.
<circle cx="11.5" cy="10.5" r="1.5" fill="currentColor"/>
<circle cx="17.5" cy="10.5" r="1.5" fill="currentColor"/>
<circle cx="23.5" cy="10.5" r="1.5" fill="currentColor"/>
</g>
<circle cx="10.5" cy="10.5" r="10.5" transform="matrix(-1 0 0 1 25.2151 0)" fill="white"/>
<path d="M7.7886 12.2306C7.21775 11.8093 6.40191 12.0999 6.226 12.7873L4.36957 20.0409C4.171 20.8167 4.9195 21.4996 5.67392 21.2308L13.5546 18.4235C14.309 18.1547 14.4572 17.1524 13.8129 16.6769L7.7886 12.2306Z" fill="white"/>
<circle cx="1.5" cy="1.5" r="1.5" transform="matrix(-1 0 0 1 22.2151 9)" fill="currentColor"/>
<circle cx="1.5" cy="1.5" r="1.5" transform="matrix(-1 0 0 1 16.2151 9)" fill="currentColor"/>
<circle cx="1.5" cy="1.5" r="1.5" transform="matrix(-1 0 0 1 10.2151 9)" fill="currentColor"/>
src/components/Header/index.tsx
Outdated
|
|
||
| export default function Header({ showSettings = true, onSettingsClick }: HeaderProps) { | ||
| return ( | ||
| <header className="fixed top-0 right-0 left-0 z-50" role="header"> |
There was a problem hiding this comment.
<header> 태그는 이미 header 역할을 암시적으로 가지고 있으므로, role="header" 속성은 중복됩니다. 코드를 더 간결하게 유지하기 위해 이 속성을 제거하는 것이 좋습니다.
| <header className="fixed top-0 right-0 left-0 z-50" role="header"> | |
| <header className="fixed top-0 right-0 left-0 z-50"> |
| export const ActiveCalendar: Story = { | ||
| args: { | ||
| defaultActiveId: 'calendar', | ||
| }, | ||
| }; |
There was a problem hiding this comment.
ActiveCalendar 스토리는 Default 스토리와 동일한 args를 가지고 있어 중복됩니다. 불필요한 코드를 줄이기 위해 ActiveCalendar 스토리를 제거하는 것을 고려해 보세요.
| function getChatButtonClasses(): string { | ||
| return 'flex h-11 w-11 items-center justify-center rounded-full bg-[var(--color-green-normal)] transition-colors hover:bg-[var(--color-green-normal-hover)] active:bg-[var(--color-green-normal-active)]'; | ||
| } |
There was a problem hiding this comment.
앞서 ic_chat.svg 아이콘의 점 색상을 currentColor로 변경하도록 제안했습니다. 이 변경에 따라, 아이콘의 색상을 여기서 지정해주어야 합니다. getChatButtonClasses가 반환하는 클래스 문자열에 text-[var(--color-green-normal)]을 추가하면, currentColor가 테마의 녹색으로 올바르게 적용됩니다.
| function getChatButtonClasses(): string { | |
| return 'flex h-11 w-11 items-center justify-center rounded-full bg-[var(--color-green-normal)] transition-colors hover:bg-[var(--color-green-normal-hover)] active:bg-[var(--color-green-normal-active)]'; | |
| } | |
| function getChatButtonClasses(): string { | |
| return 'flex h-11 w-11 items-center justify-center rounded-full bg-[var(--color-green-normal)] text-[var(--color-green-normal)] transition-colors hover:bg-[var(--color-green-normal-hover)] active:bg-[var(--color-green-normal-active)]'; | |
| } |
|
스토리북 URL 확인하기 - https://6908bd6605f813993a4103e1-uhdzknzbnr.chromatic.com/ |
1 participant
#️⃣연관된 이슈
📝작업 내용
📷preview