[myCart] ProductCard 에서 바로 장바구니 담기

ProductsList.jsx를

 {/* products가 있을 경우 반복문으로 출력 */}

        {data.products &&

          data.products.map((product) => (

            <ProductCard

              key={product._id}

              id={product._id}

              title={product.title}

              image={product.images[0]}

              price={product.price}

              rating={product.reviews.rate}

              ratingCounts={product.reviews.counts}

              stock={product.stock}

            />

          ))}

 

아래와 같이 수정한다. 

        {/* products가 있을 경우 반복문으로 출력 */}

        {data.products &&

          data.products.map((product) => (

            <ProductCard key={product._id} product={product} />

          ))}

 

ProductCard.jsx에서는

const ProductCard = ({ product }) => {

로 수정하고 

 

아래의 출력할 데이터들의 앞에 . product?.를 붙여서 수정한다.

 

import "./ProductCard.css";

import star from "../../assets/white-star.png";

import basket from "../../assets/basket.png";

import { Link } from "react-router-dom";

import CartContext from "../../contexts/CartContext";

import { useContext } from "react";

const ProductCard = ({ product }) => {

  const { addToCart } = useContext(CartContext);

  return (

    <article className="product_card">

      <div className="product_image">

        <Link to={`/product/${product?.id}`}>

          <img

            src={`http://localhost:5000/products/${product?.images[0]}`}

            // {image}만 넣으면 제대로 불러오지 못함

            // 백엔드 서버 주소로 요청하면 됨

            alt="product image"

          />

        </Link>

      </div>

      <div className="product_details">

        <h3 className="product_price">

          {product?.price?.toLocaleString("ko-KR")} 원

        </h3>

        {/* ?를 넣으면 데이터가 없더라도 에러가 나지않음  */}

        <p className="product_title">{product?.title}</p>

        <footer className="align_center product_info_footer">

          <div className="align_center">

            <p className="align_center product_rating">

              <img src={star} alt="star" /> {product?.reviews.rate}

            </p>

            <p className="product_review_count">{product?.reviews.counts}</p>

          </div>

          {/* 재고가 있을 경우에만 장바구니 담기 표시 */}

          {product?.stock > 0 && (

            <button

              className="add_to_cart"

              onClick={() => addToCart(product, 1)}

            >

              <img src={basket} alt="basket button" />

            </button>

          )}

        </footer>

      </div>

    </article>

  );

};

export default ProductCard;

 

useContext로 addToCart함수를 가져온다. 

클릭할 경우에 addToCart 실행한다. 수량은 1개로 

 

정상 출력되는지 확인한다. 

 

 

 

 

 

 

백엔드에서도 추가된것을 확인한다.