본 컴포넌트는 Next.js 환경에서 폼 데이터 처리와 사용자 상호작용에 최적화된 단일 클라이언트 컴포넌트로 설계되었습니다. 상호작용이 필수적인 요소의 특성을 고려하여, 복잡한 분리 없이 효율적인 관리가 가능하도록 구현하였다.

✅ 컴포넌트 구조

• 실제 input은 sr-only 클래스로 숨겨 시각적 요소와 분리하되, 스크린 리더 인식 및 키보드 탭 이동은 정상 작동하도록 구현되었습니다.
• id를 명시하지 않아도 React.useId()를 통해 고유한 ID를 생성하여 label과 input을 자동으로 연결합니다.
• Lucide-React의 Check 아이콘과 Tailwind의 transition을 활용하여 부드러운 체크 전환 효과를 제공합니다.

✅ CheckboxProps (공통 속성)

모든 체크박스 컴포넌트는 아래의 타입을 기반으로 하며, 기본적인 HTML Input(Checkbox) 속성을 모두 지원

• React.InputHTMLAttributes<HTMLInputElement>의 모든 속성 지원 (단, type은 "checkbox"로 고정)
  • 예: checked, defaultChecked, disabled, name, value, onChange 등
• label?: string: 체크박스 우측에 표시될 설명 텍스트
• error?: string: 에러 발생 시 하단에 노출되는 메시지 (전달 시 테두리 색상 변경)
• className?: string: 추가적인 스타일 커스텀을 위한 클래스 주입

✅ 설계 특징: 왜 단일 파일인가?

Button이나 Card와 달리 체크박스는 다음과 같은 이유로 단일 클라이언트 컴포넌트 구조를 가지도록 설계함

1. 필수 상호작용: 체크박스는 상태(checked) 변화가 핵심 기능이며, JS 로직 없는 서버 전용 컴포넌트로서의 실익이 낮습니다.
2. 구조적 단순함: 인풋과 라벨의 결합 형태로 구조가 명확하여 단일 파일에서 관리하는 것이 유지보수에 유리합니다.
3. Form 라이브러리 호환성: forwardRef를 통한 직접적인 DOM 참조를 지원함