컴포넌트
Card Stack
겹쳐진 카드 더미에서 맨 앞 카드를 스와이프하거나 클릭하면 뒤로 순환하는 인터랙티브 스택 컴포넌트. transform 회전/오프셋으로 겹침을 표현하고 pointer 이벤트로 드래그 스와이프를 처리한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/CardStack-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| items | CardStackItem[] | DEFAULT_ITEMS (4장) | 표시할 카드 목록. 미지정 시 브랜드 기본 카드 4장 사용. |
| visibleCount | number | 3 | 화면에 겹쳐 보이는 최대 카드 수. |
| offsetY | number | 16 | 카드 간 세로 오프셋(px). |
| rotation | number | 4 | 뒤 카드에 적용되는 좌우 회전 각도(deg). |
| swipeThreshold | number | 90 | 스와이프로 카드를 넘기는 최소 드래그 거리(px). |
| cardWidth | number | 240 | 카드 폭(px). |
| cardHeight | number | 300 | 카드 높이(px). |
| onCycle | (item: CardStackItem, nextIndex: number) => void | undefined | 카드가 순환될 때 다음 카드와 인덱스를 전달하는 콜백. |
| className | string | undefined | 루트 요소에 적용할 추가 className. |