Feature/dropdown 테스트 PR#2
Conversation
Summary of ChangesHello @Jieunsse, 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은 사용자가 항목을 선택할 수 있는 새로운 드롭다운 컴포넌트를 구현합니다. 이 컴포넌트는 재사용성을 염두에 두고 설계되었으며, 접근성 표준을 준수하고 다양한 크기 및 스타일 옵션을 제공합니다. 내부적으로는 커스텀 훅을 사용하여 상태 관리 로직을 분리하고, CSS 모듈을 통해 시각적 일관성을 유지합니다. Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. 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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
이 PR은 새로운 드롭다운 컴포넌트를 추가하는 것을 잘 수행했습니다. 컴포넌트는 제어 및 비제어 모드를 모두 지원하며, 커스텀 훅을 사용하여 로직을 분리한 점이 좋습니다. 코드 구조가 깔끔하고 타입 정의도 잘 되어 있습니다.
다만, 몇 가지 개선점을 제안합니다. 가장 중요한 것은 키보드 탐색 기능을 추가하여 웹 접근성을 향상시키는 것입니다. 또한, getSelectedItem 유틸리티 함수의 동작 방식이 잠재적인 상태 불일치를 유발할 수 있어 수정이 필요해 보입니다. 마지막으로 .gitignore 파일에 중복된 내용이 있어 정리하면 좋겠습니다. 자세한 내용은 각 파일의 주석을 참고해주세요.
| const triggerAriaLabel = selectedItem ? undefined : ariaLabel; | ||
|
|
||
| return ( | ||
| <div className={clsx(styles.dropdown, className)} onBlur={handleBlur} onKeyDown={handleKeyDown}> |
There was a problem hiding this comment.
현재 드롭다운 컴포넌트는 키보드 탐색 기능이 부족하여 웹 접근성을 저해할 수 있습니다. 'Escape' 키 외에도 다음과 같은 키보드 상호작용을 지원해야 합니다:
- 방향키 (위/아래): 드롭다운 메뉴의 항목들을 탐색합니다.
- Enter / Space: 포커스된 항목을 선택합니다.
- Home / End: 각각 첫 번째와 마지막 항목으로 이동합니다.
이러한 기능을 구현하려면 useDropdown 훅에서 현재 포커스된 항목의 인덱스를 상태로 관리하고, handleKeyDown 로직을 확장해야 합니다. 이는 WAI-ARIA 가이드라인을 준수하는 데 필수적입니다.
| } | ||
|
|
||
| export function getSelectedItem(items: DropdownItemData[], currentValue: string) { | ||
| return items.find((item) => item.value === currentValue) ?? items[0]; |
There was a problem hiding this comment.
현재 getSelectedItem 함수는 currentValue에 해당하는 아이템이 없을 경우 첫 번째 아이템(items[0])을 반환합니다. 이로 인해 부모 컴포넌트에서 전달한 value prop과 실제 드롭다운에 표시되는 값이 달라지는 불일치가 발생할 수 있습니다. 이는 사용자 및 개발자에게 혼란을 줄 수 있습니다.
일치하는 아이템이 없을 경우 undefined를 반환하도록 수정하고, useDropdown 훅에서 이 경우를 처리하는 것이 더 견고한 설계입니다. 예를 들어, 개발 환경에서 경고를 출력할 수 있습니다.
| return items.find((item) => item.value === currentValue) ?? items[0]; | |
| return items.find((item) => item.value === currentValue); |
1 participant
Summary
Issue
Scope
포함
특이사항