StarRating

별점 입력. hover preview · half-star · controlled/uncontrolled · 키보드 (Arrow / Home / End) · readOnly 모드.

Controlled (정수)

현재 값: 3 / 5

Half-star (0.5 단위)

현재 값: 2.5 / 5

크기 변형

10점 만점

색상 커스터마이즈

readOnly (표시 전용)

평균 평점 표시 등 — hover/클릭 비활성.

비활성화

키보드 접근성

💡 Tab으로 포커스 → ArrowLeft/Right(또는 Up/Down)로 ±1 (half면 ±0.5), Home/End로 0/max.

사용

import { StarRating } from '@baneung-pack/ui';

// Controlled
<StarRating value={rating} onValueChange={setRating} size="lg" />

// Half-star
<StarRating defaultValue={2.5} half onValueChange={save} />

// 10점 만점
<StarRating max={10} defaultValue={7} half />

// readOnly (평균 평점 표시)
<StarRating value={4.5} half readOnly />

// 색
<StarRating defaultValue={3} color="#3B716C" />

API

StarRatingProps

Property	Type	기본값	설명
value	number	—	Controlled (0~max).
defaultValue	number	0	Uncontrolled 초기값.
onValueChange	(value: number) => void	—	변경 콜백.
max	number	5	별 개수.
half	boolean	false	0.5 단위 지원.
readOnly	boolean	false	표시만 (입력 X).
disabled	boolean	false	비활성화.
size	'sm' \| 'md' \| 'lg'	'md'	크기.
color	string	'#F59E0B'	채워진 별 색.
emptyColor	string	'#E9ECEF'	빈 별 색.
gap	number	4	별 사이 간격 (px).
aria-label	string	'별점'	보조 기술 라벨.