본 컴포넌트는 Next.js 환경에서 서버/클라이언트 경계를 명확히 유지하면서 접근성·키보드 조작·검색 기능을 포함한 Combobox를 제공하기 위해 설계하였다.
Combobox는 UI 렌더링 / 상태 로직 / 유틸 로직을 분리하여 구성되며, 서버 컴포넌트에서는 안전하게 사용할 수 있는 래퍼만 노출하고 실제 인터랙션은 클라이언트 컴포넌트와 훅에서 처리한다.
| 파일명 | 유형 | 주요 역할 |
|---|---|---|
combobox.tsx |
Server | ClientCombobox를 래핑하는 서버 컴포넌트 |
client-combobox.tsx |
Client | 실제 DOM 렌더링 및 사용자 인터랙션 처리 |
use-combobox.ts |
Client Hook | 상태 / 포커스 / 키보드 / 열기·닫기 로직 관리 |
combobox.utils.ts |
Utils | 포커스 이동 규칙, 초기 포커스 계산 |
Combobox만 사용하면 내부 구현을 신경 쓰지 않아도 됨<button>, <input>, <ul> DOM을 렌더링useCombobox에 위임