WishButton

찜하기 버튼 컴포넌트입니다. 하트 아이콘으로 표시됩니다.

Astro

---
import WishButton from "@shared/ui/wish-button/WishButton.astro";
---

<WishButton />
<WishButton pressed />

Props:

• pressed?: boolean: 찜 상태 여부

Code

<!-- 찜하기 전 -->
<button type="button" class="v-button v-wish-button" data-command="toggleWish" title="찜하기">
  <svg fill="none" viewBox="0 0 24 24">
    <path stroke="currentColor" stroke-miterlimit="10" d="M19.658 5.587a4.475 4.475 0 0 0-6.478 0L12 6.806l-1.18-1.22a4.475 4.475 0 0 0-6.478 0c-1.79 1.85-1.79 4.847 0 6.697L12 20.2l7.658-7.916c1.79-1.85 1.79-4.847 0-6.696Z"></path>
  </svg>
</button>

<!-- 찜한 상태 -->
<button type="button" class="v-button v-wish-button on" data-command="toggleWish" title="찜 해제하기">
  <svg fill="none" viewBox="0 0 24 24">
    <path stroke="currentColor" stroke-miterlimit="10" d="M19.658 5.587a4.475 4.475 0 0 0-6.478 0L12 6.806l-1.18-1.22a4.475 4.475 0 0 0-6.478 0c-1.79 1.85-1.79 4.847 0 6.697L12 20.2l7.658-7.916c1.79-1.85 1.79-4.847 0-6.696Z"></path>
  </svg>
</button>

Preview