StarRating

별점 표시 컴포넌트입니다. CSS 변수를 활용하여 소수점 단위의 별점을 표현합니다.

Astro

---
import StarRating from "@shared/ui/star-rating/StarRating.astro";
---

<StarRating value={4.5} />
<StarRating value={4.5} reviews={128} />
<StarRating value={3.2} singleStar />

Props:

• value?: number: 별점 값 (0-5)
• reviews?: number: 리뷰 수
• singleStar?: boolean: 하나의 별만 표시 (ProductUnit 등에서 사용)

Code

<div class="v-star-rating" style="--v-rating-value: 4.5;">
  <div class="v-star-icons">
    <svg viewBox="0 0 68 12">
      <title>별점</title>
      <path fill="currentColor" fill-rule="evenodd" d="m6 9-3.527 1.854.674-3.927L.294 4.146l3.943-.573L6 0l1.763 3.573 3.943.573-2.853 2.781.674 3.927ZM20 9l-3.527 1.854.674-3.927-2.853-2.781 3.943-.573L20 0l1.763 3.573 3.943.573-2.853 2.781.674 3.927zM34 9l-3.527 1.854.674-3.927-2.853-2.781 3.943-.573L34 0l1.763 3.573 3.943.573-2.853 2.781.674 3.927zM48 9l-3.527 1.854.674-3.927-2.853-2.781 3.943-.573L48 0l1.763 3.573 3.943.573-2.853 2.781.674 3.927zM62 9l-3.527 1.854.674-3.927-2.853-2.781 3.943-.573L62 0l1.763 3.573 3.943.573-2.853 2.781.674 3.927z" clip-rule="evenodd"></path>
    </svg>
  </div>
  <div class="v-star-meta">
    <span class="v-star-score">4.5</span>
    <span class="v-star-rating__review-count">(128)</span>
  </div>
</div>

Preview

4.5

4.5 (128)

3.2

1