← 목록으로
표시 모드 (Display Mode)
읽기 전용 별점 표시입니다. 부분 별점(3.5점)도 지원합니다.
크기 변형 (Size Variants)
sm(16px), md(20px), lg(24px) 세 가지 크기를 제공합니다.
텍스트와 함께 (With Text)
별점 값과 리뷰 개수를 함께 표시합니다.
인터랙티브 모드 (Interactive Mode)
별을 클릭하여 평점을 선택할 수 있습니다. 현재 선택: 0점
★
★
★
★
★
하트 변형 (Heart Variant)
별 대신 하트를 사용한 평점입니다. 현재 선택: 0개
좋아요/싫어요 (Thumbs Up/Down)
이진 평가 시스템입니다. 현재 선택: 없음
숫자 척도 (Numeric Scale 1-10)
1부터 10까지의 숫자 평가 척도입니다. 현재 선택: 없음
평점 분포 (Rating Distribution)
전체 리뷰의 평점 분포를 보여줍니다.
19. 별점/평점 컴포넌트Create a star rating component:
**Display Mode** (read-only):
- 5 stars in a row, 4px gap
- Filled: brand amber/yellow color
- Empty: gray-300 outline or filled
- Partial fill: CSS clip-path or gradient for 3.5 stars
- Size variants: sm(16px), md(20px), lg(24px)
**Interactive Mode** (input):
- Hover preview: fill up to hovered star
- Click to set value
- Cursor: pointer
- Keyboard: arrow keys to adjust, enter to confirm
**With Text**:
- Pattern: ★★★★☆ 4.2 (128 reviews)
- Rating number: font-weight 600
- Review count: gray-500, linked
**Half-Star Support**:
- Click on left half = 0.5, right half = 1.0
- Or hover areas define precision
**Accessibility**:
- Role: radiogroup with radio items
- aria-label: "Rating: 4 out of 5 stars"
- Focus visible on interactive stars
**Variants**:
- Stars (default)
- Hearts
- Thumbs up/down (binary)
- Numeric scale (1-10)
**Animation**:
- On selection: subtle scale bounce
- Fill transition: 150ms ease
Tech: React + Tailwind CSS