Claude Code로 이커머스 사이트 구축하기

Claude Code로 이커머스 사이트 만들기

이커머스 사이트에는 상품 관리, 장바구니, 결제, 재고 관리, 주문 관리 등 기능이 굉장히 많이 필요합니다. Claude Code를 활용하면 이런 기능들을 일관된 설계로 효율적으로 구축할 수 있습니다.

상품 데이터 모델

> Next.js로 이커머스 사이트를 만들어줘.
> 상품 목록/상세/장바구니/결제 페이지와
> Stripe 결제를 통합하고, 재고 관리도 포함해서.

// src/types/product.ts
export interface Product {
  id: string;
  name: string;
  slug: string;
  description: string;
  price: number;
  compareAtPrice?: number;
  images: string[];
  category: string;
  variants: ProductVariant[];
  stock: number;
  isActive: boolean;
}

export interface ProductVariant {
  id: string;
  name: string;       // 예: "M 사이즈 / 블루"
  sku: string;
  price: number;
  stock: number;
  attributes: Record<string, string>;
}

export interface CartItem {
  productId: string;
  variantId?: string;
  quantity: number;
  price: number;
}

장바구니 기능 구현

// src/stores/cart-store.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface CartState {
  items: CartItem[];
  addItem: (item: CartItem) => void;
  removeItem: (productId: string) => void;
  updateQuantity: (productId: string, quantity: number) => void;
  clearCart: () => void;
  totalPrice: () => number;
  totalItems: () => number;
}

export const useCartStore = create<CartState>()(
  persist(
    (set, get) => ({
      items: [],
      addItem: (item) =>
        set((state) => {
          const existing = state.items.find(
            (i) => i.productId === item.productId && i.variantId === item.variantId
          );
          if (existing) {
            return {
              items: state.items.map((i) =>
                i.productId === item.productId
                  ? { ...i, quantity: i.quantity + item.quantity }
                  : i
              ),
            };
          }
          return { items: [...state.items, item] };
        }),
      removeItem: (productId) =>
        set((state) => ({
          items: state.items.filter((i) => i.productId !== productId),
        })),
      updateQuantity: (productId, quantity) =>
        set((state) => ({
          items: state.items.map((i) =>
            i.productId === productId ? { ...i, quantity } : i
          ),
        })),
      clearCart: () => set({ items: [] }),
      totalPrice: () => get().items.reduce((sum, i) => sum + i.price * i.quantity, 0),
      totalItems: () => get().items.reduce((sum, i) => sum + i.quantity, 0),
    }),
    { name: 'cart-storage' }
  )
);

체크아웃 API

// src/app/api/checkout/route.ts
import { NextRequest, NextResponse } from 'next/server';
import Stripe from 'stripe';

const stripe = new Stripe(process.env.STRIPE_SECRET_KEY!);

export async function POST(request: NextRequest) {
  const { items } = await request.json();

  // 재고 확인
  for (const item of items) {
    const product = await getProduct(item.productId);
    if (!product || product.stock < item.quantity) {
      return NextResponse.json(
        { error: `${product?.name || '상품'}의 재고가 부족합니다` },
        { status: 400 }
      );
    }
  }

  const session = await stripe.checkout.sessions.create({
    mode: 'payment',
    payment_method_types: ['card'],
    line_items: items.map((item: CartItem) => ({
      price_data: {
        currency: 'krw',
        product_data: { name: item.productId },
        unit_amount: item.price,
      },
      quantity: item.quantity,
    })),
    success_url: `${process.env.APP_URL}/order/success?session_id={CHECKOUT_SESSION_ID}`,
    cancel_url: `${process.env.APP_URL}/cart`,
    shipping_address_collection: {
      allowed_countries: ['KR'],
    },
  });

  return NextResponse.json({ url: session.url });
}

상품 목록 컴포넌트

// src/components/ProductCard.tsx
import Image from 'next/image';
import Link from 'next/link';
import { Product } from '@/types/product';

export function ProductCard({ product }: { product: Product }) {
  const discount = product.compareAtPrice
    ? Math.round((1 - product.price / product.compareAtPrice) * 100)
    : 0;

  return (
    <Link href={`/products/${product.slug}`} className="group">
      <div className="relative aspect-square overflow-hidden rounded-lg">
        <Image
          src={product.images[0]}
          alt={product.name}
          fill
          className="object-cover group-hover:scale-105 transition-transform"
        />
        {discount > 0 && (
          <span className="absolute top-2 right-2 bg-red-500 text-white text-xs px-2 py-1 rounded">
            {discount}% OFF
          </span>
        )}
      </div>
      <h3 className="mt-2 font-medium">{product.name}</h3>
      <div className="flex items-center gap-2">
        <span className="text-lg font-bold">₩{product.price.toLocaleString()}</span>
        {product.compareAtPrice && (
          <span className="text-sm text-gray-400 line-through">
            ₩{product.compareAtPrice.toLocaleString()}
          </span>
        )}
      </div>
    </Link>
  );
}

정리

Claude Code를 활용하면 이커머스 사이트의 복잡한 기능들을 일관된 코드로 한 번에 구축할 수 있습니다. 결제 처리의 상세한 내용은 Stripe 결제 통합 가이드에서, 상태 관리 패턴은 상태 관리 구현에서 다루고 있습니다.

Stripe 공식 튜토리얼 (stripe.com/docs)도 함께 확인해 보시기를 추천합니다.