사용법
Rating은 후기·상품 평점 표시와 입력을 지원해요. readOnly로 표시 전용으로 쓸 수 있어요.
스타일 커스터마이징
Rating 사용 시 className, style, `classNames`로 모든 스타일을 변경할 수 있어요. CSS 변수는 컴포넌트 루트에 지정하면 variant 기본값을 덮어써요.
className / style
<Rating
className="shadow-md"
style={{
--gtd-ui-primary: "#059669",
}}
/>classNames 슬롯
복합 컴포넌트는 영역별로 클래스를 지정할 수 있어요.
<Rating
classNames={{
star: "my-rating-star",
starBtn: "my-rating-starBtn"
}}
/>CSS 변수
| 변수 | 설명 |
|---|---|
| --gtd-ui-primary | 채워진 별 색 |
인터페이스
RatingProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| value* | number | — | 현재 점수 |
| max | number | 5 | 최대 점수 |
| readOnly | boolean | false | 표시 전용 |
| size | "sm" | "md" | "lg" | md | 별 크기 |
| onChange | (value: number) => void | — | 점수 변경 콜백 |
| className | string | — | 루트 요소 클래스. Tailwind·커스텀 CSS 적용 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수(--gtd-*) 오버라이드 |
Rating 컴포넌트 Props 표
가져오기
import { Rating } from "@/components/ui/Rating";