53. 스와이프 카드 인터페이스
Design a Tinder-style swipeable card interface:
**Card Stack**:
- 3 cards visible (top + peek of next 2)
- Stacked with slight offset and scale
- Top card at full size
**Card Design**:
- Full screen minus margins
- Border-radius: 16px
- Shadow: lg
- Image background (full bleed)
- Content overlay at bottom
**Card Content**:
- Gradient overlay: bottom 40%, black→transparent
- Title: large white text
- Subtitle/details: smaller text
- Badges/tags if applicable
**Swipe Gestures**:
- Left: reject/pass (red X appears)
- Right: accept/like (green heart appears)
- Up: super action (star appears)
- Down: dismiss/skip
**Visual Feedback During Swipe**:
- Card rotates toward swipe direction
- Opacity change on action icon
- Background card scales up
- Threshold indicator (icon grows)
**Animation**:
- Swipe away: fly off screen with rotation
- New card: scale up from stack
- Spring back: if swipe not committed
- Duration: 300ms, spring physics
**Action Buttons** (alternative to swipe):
- Left: X button
- Center: special action
- Right: heart button
- Positioned below card
**Undo Feature**:
- Bring back last swiped card
- Reverse animation
**Empty State**:
- "No more cards"
- Refresh or adjust filters CTA
Tech: React Native + react-native-reanimated + Gesture Handler