목록으로
Product Grid
Premium Brand
Classic Cotton T-Shirt - Comfortable Everyday Wear
★★★★★
(4.8)
$29.99
$49.99
40% OFF
Sport Pro
Running Shoes - Lightweight Performance
★★★★☆
(4.5)
$89.99
Urban Style
Vintage Leather Backpack
★★★★★
(4.9)
$129.99
Tech Watch
Smart Watch Pro - Health & Fitness Tracker
★★★★★
(4.7)
$199.99
$249.99
20% OFF
Vision Plus
Designer Sunglasses - UV Protection
★★★★☆
(4.3)
$59.99
💼
💼
Bestseller
Sale
Business Elite
Professional Leather Briefcase
★★★★★
(4.9)
$149.99
$199.99
25% OFF
Audio Tech
Wireless Headphones - Noise Cancelling
★★★★★
(4.8)
$179.99
Smart Phone
Latest Smartphone - 5G Ready
★★★★☆
(4.6)
$799.99
66. 상품 카드 그리드
Design an ecommerce product card grid:
**Grid Layout**:
- Desktop: 4 columns
- Tablet: 3 columns
- Mobile: 2 columns
- Gap: 24px desktop, 16px mobile
**Card Container**:
- Background: white
- Border-radius: 12px
- Overflow: hidden
- Hover: shadow elevation + translateY(-4px)
**Product Image**:
- Aspect ratio: 1:1 or 4:3
- Object-fit: cover
- Lazy loading
- Hover: secondary image swap (optional)
**Quick Actions** (on image hover):
- Quick view button centered
- Wishlist heart top-right
- Add to cart bottom
- Semi-transparent overlay
**Product Info**:
- Padding: 16px
- Brand: 12px gray-500, uppercase
- Name: 14px semibold, 2-line clamp
- Rating: stars + count (optional)
- Price: 16px bold
**Pricing Display**:
- Current price: bold, dark
- Compare-at: strikethrough, gray
- Discount badge: red/green pill, "-20%"
**Badge System**:
- Position: top-left of image
- Types: New, Sale, Bestseller, Low Stock
- Colors: distinct per type
- Multiple badges stack
**Color Swatches** (if variants):
- Small circles below image
- Max 4-5 visible + "+3" indicator
- Hover: changes product image
**Out of Stock**:
- Dimmed card
- "Sold Out" overlay
- Notify me CTA
Tech: Next.js + Tailwind + Image optimization