컴포넌트
HeartToggle
하트 좋아요 토글 버튼으로, 활성화 시 하트가 팝(bounce)하며 컨테이너 내부에서 순수 Canvas2D 파티클(하트·스파크)이 방사형으로 터집니다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/HeartToggle-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| defaultLiked | boolean | false | 비제어 모드 초기 좋아요 상태. 데모에서 자체 state로 바로 동작. |
| size | number | 72 | 하트 아이콘 한 변 크기(px). 파티클 크기·컨테이너 여백도 이 값에 비례. |
| particleCount | number | 18 | OFF→ON 전환 시 방사형으로 방출할 파티클 수. |
| activeColor | string | #EC4899 | 활성(좋아요) 하트 채움/글로우 색상(hex). |
| burstColors | readonly string[] | [브랜드 팔레트] | 파티클 색상 팔레트. 미지정 시 브랜드 3색+파생 사용. |
| onChange | (liked: boolean) => void | undefined | 토글 시 다음 상태를 전달하는 콜백. |