Next.js로 쇼핑몰 만들기 #1 시작과 설계

/                        ← 홈 (베스트셀러 / 카테고리 입구)
/products                ← 상품 목록 (?category=... 로 필터)
/products/[slug]         ← 상품 상세
/cart                    ← 장바구니
/checkout                ← 배송 정보 + 결제
/orders/[orderId]        ← 주문 완료 / 조회

RootLayout
└── CartProvider             — 장바구니 상태(Client Context)
    ├── Header               — 로고 / 카테고리 링크 / 장바구니 아이콘(수량 뱃지)
    ├── {children}           — 각 페이지
    └── Footer

{
  "slug": "minimal-tee-black",
  "name": "미니멀 티셔츠 (블랙)",
  "category": "apparel",
  "price": 24000,
  "description": "100% 면. 무지 디자인. 어디에나 어울립니다.",
  "image": "/images/products/minimal-tee-black.jpg",
  "stock": 42
}

{
  id: 'ord_1748124000_a8c2',
  createdAt: '2026-05-25T10:00:00.000Z',
  items: [
    { slug: 'minimal-tee-black', name: '미니멀 티셔츠 (블랙)', price: 24000, quantity: 2 },
    { slug: 'mug-white',         name: '머그컵 (화이트)',       price: 12000, quantity: 1 },
  ],
  total: 60000,
  shipping: {
    name: '홍길동',
    phone: '010-1234-5678',
    address: '서울시 어딘가 123',
  },
  status: 'paid',
}

npx create-next-app@latest my-shop
cd my-shop

my-shop/
├── data/
│   └── products.json            ← 상품 시드 데이터
├── public/
│   └── images/
│       └── products/            ← 상품 이미지
├── src/
│   └── app/
│       ├── layout.js            ← RootLayout + CartProvider
│       ├── page.js              ← '/' 홈
│       ├── products/
│       │   ├── page.js          ← '/products' 목록
│       │   └── [slug]/
│       │       └── page.js      ← '/products/[slug]' 상세
│       ├── cart/
│       │   └── page.js          ← '/cart' 장바구니
│       ├── checkout/
│       │   └── page.js          ← '/checkout' 체크아웃
│       ├── orders/
│       │   └── [orderId]/
│       │       └── page.js      ← '/orders/[orderId]' 주문 완료
│       └── lib/
│           ├── products.js      ← 상품 조회 유틸
│           └── orders.js        ← 주문 저장/조회 유틸
└── package.json

[
  {
    "slug": "minimal-tee-black",
    "name": "미니멀 티셔츠 (블랙)",
    "category": "apparel",
    "price": 24000,
    "description": "100% 면. 무지 디자인. 어디에나 어울립니다.",
    "image": "/images/products/minimal-tee-black.jpg",
    "stock": 42
  },
  {
    "slug": "minimal-tee-white",
    "name": "미니멀 티셔츠 (화이트)",
    "category": "apparel",
    "price": 24000,
    "description": "블랙과 같은 원단의 화이트 컬러.",
    "image": "/images/products/minimal-tee-white.jpg",
    "stock": 38
  },
  {
    "slug": "mug-white",
    "name": "머그컵 (화이트)",
    "category": "goods",
    "price": 12000,
    "description": "두툼한 도자기 머그. 식기세척기 사용 가능.",
    "image": "/images/products/mug-white.jpg",
    "stock": 80
  },
  {
    "slug": "tote-canvas",
    "name": "캔버스 토트백",
    "category": "goods",
    "price": 18000,
    "description": "데일리용 캔버스 토트백. A4가 여유롭게 들어갑니다.",
    "image": "/images/products/tote-canvas.jpg",
    "stock": 25
  },
  {
    "slug": "react-book",
    "name": "리액트 실전 가이드",
    "category": "book",
    "price": 32000,
    "description": "리액트와 Next.js 실전 패턴을 한 권에 정리한 가이드.",
    "image": "/images/products/react-book.jpg",
    "stock": 0
  },
  {
    "slug": "ts-book",
    "name": "타입스크립트 입문서",
    "category": "book",
    "price": 28000,
    "description": "타입스크립트의 기초부터 제네릭까지.",
    "image": "/images/products/ts-book.jpg",
    "stock": 15
  }
]

import products from '../../../data/products.json';

export function getAllProducts() {
  return products;
}

export function getProductsByCategory(category) {
  if (!category) return products;
  return products.filter((p) => p.category === category);
}

export function getProductBySlug(slug) {
  return products.find((p) => p.slug === slug) ?? null;
}

export function getAllCategories() {
  return Array.from(new Set(products.map((p) => p.category)));
}

const orders = new Map();

export function saveOrder(order) {
  orders.set(order.id, order);
}

export function getOrder(orderId) {
  return orders.get(orderId) ?? null;
}

npm run dev