컴포넌트
Star Rating
호버 미리보기, 클릭 확정, 반별(0.5) 옵션, 키보드 화살표 조작을 지원하는 별점 입력/표시 컴포넌트. role=slider와 aria 값 속성으로 접근성을 갖추고, prefers-reduced-motion을 존중한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/StarRating-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| value | number | undefined | 현재 값 (제어 모드). 미지정 시 내부 state로 비제어 동작 |
| defaultValue | number | 0 | 초기 값 (비제어 모드) |
| onChange | (value: number) => void | undefined | 값 확정 시 콜백 |
| onHoverChange | (value: number | null) => void | undefined | 호버 미리보기 값 변경 콜백 (호버 종료 시 null) |
| count | number | 5 | 별 개수 |
| allowHalf | boolean | false | 반별(0.5) 입력 허용 |
| readOnly | boolean | false | 표시 전용 모드 (입력 불가) |
| disabled | boolean | false | 비활성화 |
| size | number | 32 | 별 하나의 크기(px) |
| label | string | "별점" | 접근성 레이블 (aria-label) |
| className | string | undefined | 추가 클래스 |