체크박스 컴포넌트 개발

[Jieunsse]

Summary

• 체크박스 컴포넌트 개발 완료
• 코드리뷰를 위해 PR 생성합니다.

Issue

• Closes 체크박스 컴포넌트 개발 #8

Scope

• jsDoc 적용
• 내부 테스트 완료

[gemini-code-assist]

Summary of Changes

Hello @Jieunsse, 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은 접근성을 고려한 새로운 CheckBox 컴포넌트를 도입하고, 기존 Dropdown 컴포넌트의 키보드 접근성, 포커스 관리 기능을 크게 개선하며 플레이스홀더 기능을 추가합니다.

Highlights

• 체크박스 컴포넌트 개발: 새로운 CheckBox 컴포넌트가 개발되었습니다. checked, onCheckedChange, size ('large' | 'small'), label, options (ariaLabel, readOnly, icons) 등 다양한 속성을 지원하며, 접근성을 위해 aria-label을 처리하고 label이 비어있을 경우 ariaLabel이 필요하다는 경고를 포함합니다. clsx를 사용하여 조건부 스타일링을 적용하고 next/image로 아이콘을 렌더링합니다. 관련 스타일, 상수, 타입 정의 파일도 함께 추가되었으며, 기존 SVG 에셋 파일명(nonChekcedLarge.svg, nonChekcedSmall.svg)이 nonCheckedLarge.svg, nonCheckedSmall.svg로 일관성 있게 변경되었습니다.
• 드롭다운 컴포넌트 개선 (접근성 및 기능): Dropdown 컴포넌트의 키보드 탐색 기능이 향상되어, 사용자가 ArrowUp/Down, Home, End 키로 옵션을 탐색하고 Enter/Space 키로 선택할 수 있습니다. 드롭다운이 닫힌 후 포커스를 복원하고, 키보드 탐색 중 활성 항목에 포커스를 맞추기 위한 useEffect 훅이 추가되었습니다. placeholder 속성이 추가되어, 선택된 항목이 없을 때 플레이스홀더 텍스트를 표시할 수 있습니다. DropdownItem이 키보드 탐색을 지원하기 위해 tabIndex 및 onFocus 속성을 받도록 변경되었고, forwardRef를 사용하여 부모 컴포넌트에서 포커스를 관리할 수 있도록 개선되었습니다. 또한, getSelectedItem 유틸리티 함수가 일치하는 항목을 찾지 못했을 때 더 이상 첫 번째 항목을 기본값으로 반환하지 않고 undefined를 반환하도록 수정되었습니다.

🧠 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.

Ignored Files

• Ignored by pattern: .github/workflows/** (1)
  • .github/workflows/ci.yml

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

이 PR은 새로운 CheckBox 컴포넌트를 추가하고 기존 Dropdown 컴포넌트의 접근성을 크게 향상시키는 훌륭한 변경 사항을 담고 있습니다. CheckBox 컴포넌트는 접근성을 고려한 타입 정의와 개발 환경 경고 등 좋은 관행을 잘 따르고 있습니다. Dropdown 컴포넌트는 키보드 네비게이션과 포커스 관리를 완벽하게 구현하여 모든 사용자가 쉽게 이용할 수 있도록 개선되었습니다.

전반적으로 매우 완성도 높은 코드이며, 몇 가지 추가 개선을 위한 제안을 코드 리뷰에 남겼습니다. 주로 CheckBox 컴포넌트의 readOnly 상태 처리와 관련된 접근성 문제 및 Dropdown 훅의 코드 중복 개선에 대한 내용입니다.

[gemini-code-assist]

readOnly 상태(e.g., onCheckedChange prop이 없을 때)가 체크박스를 disabled 상태로 만드는 것은 접근성 문제를 야기할 수 있습니다. readOnly 요소는 키보드 포커스가 가능해야 스크린 리더 사용자가 값을 읽을 수 있습니다. isReadOnly와 isDisabled의 로직을 분리하는 것이 좋습니다.

Suggested change

	const isReadOnly = options?.readOnly || !onCheckedChange;
	const isDisabled = disabled || isReadOnly;
	const isReadOnly = options?.readOnly || !onCheckedChange;
	const isDisabled = disabled;

[gemini-code-assist]

HTML 표준에 따라 <input type="checkbox">는 readOnly 속성을 지원하지 않습니다. 접근성을 위해 aria-readonly 속성을 사용해야 합니다. 또한, disabled 속성은 위에서 분리한 isDisabled 값만 사용하도록 수정합니다.

Suggested change

	disabled={isDisabled}
	onChange={handleChange}
	readOnly={isReadOnly}
	disabled={isDisabled}
	onChange={handleChange}
	aria-readonly={isReadOnly}

[gemini-code-assist]

가독성 향상을 위해 hasLabel의 조건을 조금 더 간결하게 표현할 수 있습니다. label != null은 label !== null && label !== undefined와 동일하게 동작하며, label.trim() !== ''는 label.trim().length > 0보다 의도를 더 명확하게 보여줄 수 있습니다.

Suggested change

	const hasLabel =
	label !== null && label !== undefined && (typeof label !== 'string' || label.trim().length > 0);
	const hasLabel =
	label != null && (typeof label !== 'string' || label.trim() !== '');