본 컴포넌트는 Next.js 환경에서 **"시각적 일관성"**과 **"개발 편의성"**을 동시에 충족하도록 설계되었다. 브라우저 기본 select 요소의 동작 방식을 유지하면서도, 커스텀 화살표 아이콘과 상태 관리 로직을 통합하여 프로젝트 전반에서 일관된 사용자 경험을 제공한다.
| 파일명 | 유형 | 주요 역할 |
|---|---|---|
select.tsx |
Server | <select />를 렌더링하는 기본 Select 컴포넌트label 연결 및 option 렌더링 지원 |
appearance-none을 통해 브라우저 기본 화살표를 제거하고, isOpen 상태에 따라 동적으로 변하는 커스텀 SVG 아이콘(Up/Down)을 배치onChange 이벤트 외에도 값만 즉시 추출하는 onValueChange 콜백을 제공하여 클라이언트 사이드 상태 관리를 단순화options 배열을 통한 데이터 기반 렌더링과 children을 통한 직접 렌더링을 모두 지원모든 Select 컴포넌트는 아래 타입을 기반으로 하며, 기본적인 HTML select 속성을 지원
| 속성명 | 타입 | 기본값 | 설명 |
|---|---|---|---|
label |
string |
- |
Select 상단에 렌더링될 라벨 텍스트 |
options |
SelectOption[] |
- |
{ value, label, disabled } 구조의 옵션 데이터 배열 |
placeholder |
string |
- |
선택 안내용 옵션(value="", disabled, hidden 상태) |
onValueChange |
(value: string) => void |
- |
변경된 값(e.target.value)만 인자로 받는 편의 콜백 |
className |
string |
- |
Select 요소에 적용될 추가 Tailwind 클래스 |
onMouseDown과 onBlur 이벤트를 감지하여 드롭다운의 열림/닫힘 상태를 추적하고, 그에 맞는 화살표 아이콘(ArrowUpIcon, ArrowDownIcon)을 보여준다id를 명시하지 않아도 useId를 통해 고유 ID를 생성하여 label과 select를 안정적으로 연결한다select와 option을 사용하므로 모바일 환경의 네이티브 선택창 기능을 온전히 활용할 수 있다options 프롭에 배열을 전달하여 깔끔하게 선택창을 구성한다.