Shopping Cart Drawer

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