장바구니 컴포넌트 통합

import { useContext } from 'react';
import { CartContext } from '../contexts/CartContext';

function useCart() {
  const value = useContext(CartContext);

  if (value === null) {
    throw new Error('useCart must be used within <CartProvider>.');
  }

  return value;
}

export default useCart;

import React from 'react';

function LoadingSpinner() {
  return (
    <div
      className="loading-spinner"
      role="status"
      aria-label="제품 목록 불러오는 중"
    />
  );
}

export default LoadingSpinner;

import React from 'react';
import useCart from '../hooks/useCart';
import { ADD_ITEM } from '../reducers/cartReducer';

function ProductItem({ product }) {
  const { dispatch } = useCart();

  const handleAddToCart = () => {
    dispatch({ type: ADD_ITEM, payload: { item: product, quantity: 1 } });
  };

  return (
    <div className="product-item">
      <img
        src={product.imageUrl}
        onError={(event) => {
          event.currentTarget.onerror = null;
          event.currentTarget.src = '/docs/common/fallback-image.svg';
        }}
        alt={product.name}
      />
      <h3>{product.name}</h3>
      <p>{product.price.toLocaleString()}원</p>
      <button className="add-to-cart" onClick={handleAddToCart}>
        장바구니에 추가
      </button>
    </div>
  );
}

export default ProductItem;

import React from 'react';
import useFetch from '../hooks/useFetch'; // 커스텀 훅 불러오기
import ProductItem from './ProductItem';
import LoadingSpinner from './LoadingSpinner';

function ProductList() {
  // API가 준비되지 않은 실습 환경에서 표시할 목업 데이터
  const mockProducts = [
    { id: 1, name: '스마트폰', price: 1200000, imageUrl: '/docs/common/fallback-image.svg' },
    { id: 2, name: '노트북', price: 1500000, imageUrl: '/docs/common/fallback-image.svg' },
    { id: 3, name: '무선 이어폰', price: 200000, imageUrl: '/docs/common/fallback-image.svg' },
    { id: 4, name: '스마트 워치', price: 350000, imageUrl: '/docs/common/fallback-image.svg' },
    { id: 5, name: '태블릿', price: 800000, imageUrl: '/docs/common/fallback-image.svg' },
  ];

  // 실제 프로젝트에서는 서버가 제공하는 엔드포인트로 교체합니다.
  const { data: products, loading, error } = useFetch('/api/products');

  if (loading) return <LoadingSpinner />;

  const usingMockProducts = !Array.isArray(products);
  const actualProducts = usingMockProducts ? mockProducts : products;

  return (
    <div>
      <h2>제품 목록</h2>
      {usingMockProducts && (
        <p className="error-message" role="status">
          {error
            ? `API 요청에 실패해 목업 상품을 표시합니다. (${error.message})`
            : 'API 응답이 상품 배열이 아니어서 목업 상품을 표시합니다.'}
        </p>
      )}
      <div className="product-grid">
        {actualProducts.map(product => (
          <ProductItem key={product.id} product={product} />
        ))}
      </div>
    </div>
  );
}

export default ProductList;

import React from 'react';
import useCart from '../hooks/useCart';
import { UPDATE_QUANTITY, REMOVE_ITEM } from '../reducers/cartReducer';

function CartItem({ item }) {
  const { dispatch } = useCart();

  const updateQuantity = (quantity) => {
    dispatch({
      type: UPDATE_QUANTITY,
      payload: { id: item.id, quantity },
    });
  };

  const handleQuantityChange = (event) => {
    const newQuantity = event.target.valueAsNumber;
    if (!Number.isInteger(newQuantity)) return;

    updateQuantity(newQuantity);
  };

  const handleIncrement = () => {
    updateQuantity(item.quantity + 1);
  };

  const handleDecrement = () => {
    // 1에서 감소하면 0을 보내고, reducer의 전이 규칙이 항목을 제거한다.
    updateQuantity(item.quantity - 1);
  };

  const handleRemove = () => {
    dispatch({ type: REMOVE_ITEM, payload: { id: item.id } });
  };

  return (
    <li className="cart-item">
      <div className="cart-item-info">
        <h4>{item.name}</h4>
        <p>{item.price.toLocaleString()}원 x {item.quantity}</p>
        <p>합계: {(item.price * item.quantity).toLocaleString()}원</p>
      </div>
      <div className="cart-item-controls">
        <button
          type="button"
          className="quantity-btn"
          onClick={handleDecrement}
          aria-label={`${item.name} 수량 줄이기`}
        >
          -
        </button>
        <input
          type="number"
          value={item.quantity}
          onChange={handleQuantityChange}
          min="0"
          step="1"
          aria-label={`${item.name} 수량`}
        />
        <button
          type="button"
          className="quantity-btn"
          onClick={handleIncrement}
          aria-label={`${item.name} 수량 늘리기`}
        >
          +
        </button>
        <button
          type="button"
          className="remove-from-cart"
          onClick={handleRemove}
          style={{ marginLeft: '10px' }}
        >
          삭제
        </button>
      </div>
    </li>
  );
}

export default CartItem;

import React from 'react';
import useCart from '../hooks/useCart';
import CartItem from './CartItem';

function CartSummary() {
  const { cartState } = useCart();

  // 총액은 cartState에서 구할 수 있는 파생값이므로 렌더 중 계산한다.
  const totalAmount = cartState.reduce(
    (total, item) => total + (item.price * item.quantity),
    0
  );

  return (
    <div className="cart-summary">
      <h2>장바구니</h2>
      {cartState.length === 0 ? (
        <p style={{ textAlign: 'center', color: '#666' }}>장바구니가 비어있습니다.</p>
      ) : (
        <>
          <ul style={{ listStyle: 'none', padding: 0 }}>
            {cartState.map(item => (
              <CartItem key={item.id} item={item} />
            ))}
          </ul>
          <div className="cart-total">
            총 결제 금액: {totalAmount.toLocaleString()}원
          </div>
        </>
      )}
    </div>
  );
}

export default CartSummary;

import React from 'react';
import './index.css'; // 기본 스타일링 불러오기
import { CartProvider } from './contexts/CartContext'; // CartProvider 불러오기
import ProductList from './components/ProductList';
import CartSummary from './components/CartSummary';

function App() {
  return (
    // CartProvider 아래 트리에 장바구니 상태와 dispatch를 전달
    <CartProvider>
      <div className="App">
        <ProductList /> {/* 제품 목록 */}
        <CartSummary /> {/* 장바구니 요약 */}
      </div>
    </CartProvider>
  );
}

export default App;