폴더 구조

// 프레젠터: 순수하게 UI만 담당
function ProductItemView({ 
  product, 
  isInCart, 
  isFavorite, 
  onAddToCart, 
  onToggleFavorite 
}) {
  return (
    <div className="product-item">
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <span>{product.price}</span>
      <Button 
        onClick={onAddToCart}
        disabled={isInCart}
      >
        {isInCart ? '이미 담김' : '장바구니'}
      </Button>
      <Button 
        onClick={onToggleFavorite}
        variant={isFavorite ? 'filled' : 'outline'}
      >
        ♡
      </Button>
    </div>
  );
}

// 컨테이너: 로직을 담당
function CatalogProductItem({ product }) {
  const { addToCart, isInCart } = useCart();
  const { toggleFavorite, isFavorite } = useFavorites();
  
  const handleAddToCart = () => {
    addToCart(product);
    // 카탈로그 특화 로직: 추천 시스템에 데이터 전송
    analytics.track('product_added_from_catalog', { productId: product.id });
  };
  
  const handleToggleFavorite = () => {
    toggleFavorite(product);
    // 카탈로그 특화 로직
    analytics.track('product_favorited_from_catalog', { productId: product.id });
  };
  
  return (
    <ProductItemView
      product={product}
      isInCart={isInCart(product.id)}
      isFavorite={isFavorite(product.id)}
      onAddToCart={handleAddToCart}
      onToggleFavorite={handleToggleFavorite}
    />
  );
}

// 장바구니용 컨테이너는 완전히 다른 로직
function CartProductItem({ item }) {
  const { updateQuantity, removeItem } = useCart();
  
  const handleQuantityChange = (newQuantity) => {
    updateQuantity(item.id, newQuantity);
    analytics.track('cart_quantity_updated', { 
      productId: item.product.id, 
      quantity: newQuantity 
    });
  };
  
  // 장바구니에는 ProductItemView가 아닌 완전히 다른 UI 사용
  return (
    <div className="cart-item">
      <img src={item.product.image} alt={item.product.name} />
      <div className="item-details">
        <h4>{item.product.name}</h4>
        <span>{item.product.price} × {item.quantity}</span>
      </div>
      <QuantitySelector 
        value={item.quantity}
        onChange={handleQuantityChange}
      />
      <Button onClick={() => removeItem(item.id)}>삭제</Button>
    </div>
  );
}

function ProductSection({ products, onAddToCart, onToggleFavorite }) {
  return (
    <ProductList 
      products={products} 
      onAddToCart={onAddToCart}
      onToggleFavorite={onToggleFavorite}
    />
  );
}

function ProductList({ products, onAddToCart, onToggleFavorite }) {
  return (
    <div>
      {products.map(product => (
        <ProductItem 
          key={product.id}
          product={product} 
          onAddToCart={onAddToCart}
          onToggleFavorite={onToggleFavorite}
        />
      ))}
    </div>
  );
}

// 전역 상태를 활용한 도메인 컴포넌트
function CatalogProductItem({ product }) {
  // props drilling 없이 직접 필요한 로직에 접근
  const { addToCart, isInCart } = useCart();
  const { toggleFavorite, isFavorite } = useFavorites();
  
  return (
    <div className="product-item">
      <img src={product.image} alt={product.name} />
      <h3>{product.name}</h3>
      <span>{product.price}</span>
      <Button onClick={() => addToCart(product)}>
        {isInCart(product.id) ? '이미 담김' : '장바구니'}
      </Button>
      <Button onClick={() => toggleFavorite(product.id)}>
        {isFavorite(product.id) ? '❤️' : '♡'}
      </Button>
    </div>
  );
}

/hooks
  /ui              # 순수 UI 관련 훅
    useModal.ts
    useDebounce.ts
    useToggle.ts
  /product         # 제품 도메인 훅
    useProducts.ts
    useProductDetail.ts
  /cart            # 장바구니 도메인 훅
    useCart.ts
    useCheckout.ts

/services
  /common          # 기본 API 클라이언트
    client.ts
    interceptors.ts
  /product         # 제품 도메인 API
    productApi.ts
  /cart            # 장바구니 도메인 API
    cartApi.ts

/src
  /pages (또는 /app)     # 라우팅 진입점
    index.tsx
    about.tsx
    /products
      index.tsx
      [id].tsx
    /cart
      index.tsx
      checkout.tsx
    /auth
      login.tsx
      register.tsx
      
  /components           # UI 컴포넌트
    /ui                 # 순수 UI (도메인 무관)
      Button.tsx
      Modal.tsx
      Card.tsx
      Input.tsx
    /product           # 제품 도메인
      ProductCard.tsx
      ProductList.tsx
    /cart              # 장바구니 도메인
      CartItem.tsx
      CartSummary.tsx
    /layout            # 레이아웃 컴포넌트
      Header.tsx
      Footer.tsx
      Sidebar.tsx
      
  /hooks               # 커스텀 훅
    /ui                
      useModal.ts
      useDebounce.ts
    /product          
      useProducts.ts
      useProductDetail.ts
    /cart             
      useCart.ts
    /auth
      useAuth.ts
      usePermissions.ts
      
  /services           # API 레이어
    /api              
      client.ts
      interceptors.ts
    /product          
      productApi.ts
    /cart             
      cartApi.ts
    /auth
      authApi.ts
      
  /store              # 상태 관리
    /slices
      productSlice.ts
      cartSlice.ts
      authSlice.ts
    store.ts
    
  /utils              # 유틸리티
    /common
      formatters.ts
      validators.ts
      constants.ts
    /product
      priceCalculator.ts
    /date
      dateHelpers.ts
      
  /types              # TypeScript 타입 정의
    /models
      product.ts
      user.ts
      cart.ts
    /api
      responses.ts
      requests.ts
      
  /styles             # 스타일 파일
    /globals
      reset.css
      variables.css
    /components
      button.module.css
      
  /assets             # 정적 리소스
    /images
    /fonts
    /icons