컴포넌트
Double Sided Card
호버 또는 클릭 시 3D로 뒤집혀 뒷면이 보이는 카드. rotateX/Y(180deg)와 backface-visibility로 앞/뒤 면을 구현하며, 앞면·뒷면 콘텐츠를 prop으로 받는다. 호버·클릭·둘 다 트리거, 회전 축(x/y), 크기·색상·전환 시간을 조절할 수 있고 reduced-motion 시 즉시 전환한다.
- 분류
- 컴포넌트
- 난이도
- easy
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/DoubleSidedCard-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| front | ReactNode | — | 앞면 콘텐츠 (필수) |
| back | ReactNode | — | 뒷면 콘텐츠 (필수) |
| trigger | "hover" | "click" | "both" | "both" | 뒤집기 트리거 방식 |
| axis | "x" | "y" | "y" | 회전 축 (세로축 Y / 가로축 X) |
| width | number | 260 | 카드 너비(px) |
| height | number | 180 | 카드 높이(px) |
| frontColor | string | "#C084FC" | 앞면 그라데이션 시작색 |
| frontColorEnd | string | "#EC4899" | 앞면 그라데이션 끝색 |
| backColor | string | "#16121F" | 뒷면 표면색 |
| borderColor | string | "#2A2440" | 보더 색 |
| duration | number | 600 | 전환 시간(ms) |
| defaultFlipped | boolean | false | 초기 뒤집힘 여부 |
| ariaLabel | string | "카드 뒤집기" | 접근성 라벨 |