목록으로
📝 Prompt
Shopping Cart Drawer
장바구니 사이드 패널은 화면 우측에서 슬라이드되어 나타나는 장바구니 UI입니다. 사용자가 현재 페이지를 벗어나지 않고도 장바구니 내용을 확인하고 수정할 수 있습니다.
🛒 Open Cart (3 items)
Shopping Cart
(3 items)
×
👕
Classic Cotton T-Shirt
Black / M
$29.99
−
1
+
×
👟
Running Shoes
Blue / 10
$89.99
−
1
+
×
⌚
Smart Watch Pro
Silver
$199.99
−
1
+
×
You may also like
🎧
Wireless Headphones
$179.99
Add
68. 장바구니 사이드 패널 Design a slide-out cart drawer: **Trigger**: - Cart icon in header - Badge with item count - Click: opens drawer **Drawer Container**: - Position: fixed right - Width: 400px (or 100% mobile) - Height: 100vh - Background: white - Shadow: xl **Overlay**: - Semi-transparent backdrop - Click to close **Header**: - "Your Cart (3 items)" - Close X button - Continue shopping link **Cart Items List**: - Scrollable area - Product cards stacked **Cart Item Card**: - Image: 80x80px thumbnail - Product name (linked) - Variant info: size, color - Quantity selector (compact) - Price per item - Remove button (trash or X) **Quantity Selector**: - Compact: select dropdown or small stepper - Update triggers recalculation **Item Removal**: - Swipe to delete (mobile) - Confirm or undo option - Animation: slide out **Empty Cart State**: - Illustration - "Your cart is empty" - "Continue Shopping" CTA - Recently viewed items **Promo Code Input**: - Collapsible section - Input + Apply button - Success/error feedback - Applied code shows with remove **Order Summary**: - Subtotal - Discount amount - Shipping estimate or "Free" - Tax (if applicable) - Total: largest, bold **Checkout CTA**: - Full-width primary button - "Checkout - $149.99" - Trust badges below **Upsells/Cross-sells**: - "You might also like" - 2-3 product cards - Quick add button Tech: React + Headless UI Dialog + Framer Motion
디자인 프롬프트
×