[myCart] 장바구니 상품 삭제

App.jsx 에 장바구니의 상품을 삭제하는 함수를 추가한다. 

  //장바구니 상품 삭제

  const removeFromCart = (id) => {

    const oldCart = [...cart]; //기존의 장바구니

    const newCart = oldCart.filter((item) => item.product._id !== id);

    //매개변수로 받아오는 id와 같지 않은 것만 newCart에 담는다

    setCart(newCart); //장바구니에 저장한다.

  };

 

 

그리고 Cart 프로바이더에 removeFromCart함수를 전달한다.

 <CartContext.Provider value={{ cart, addToCart, removeFromCart }}>

 

CartPage.jsx에 가서 useContext에 위의 함수를 추가하고 

  const { cart, removeFromCart } = useContext(CartContext);

 

삭제 버튼에 onclick 이벤트로 해당 함수가 실행되게하며 , 매개변수로 상품id를 보내준다. 

 <img

                  onClick={() => removeFromCart(product._id)}

                  src={remove}

                  alt="remove icon"

                  className="cart_remove_icon"

                />

 

 

 

삭제하기 

 

 

그리고 이 상태로는 백엔드에서는 삭제가 되지 않은 상태라

 

백엔드에 업데이트를 해준다.

import apiClient from "../utils/api-client";

//카트에 제품 id와 수량을 추가하는 요청

export function addToCartAPI(id, quantity) {

  return apiClient.post(`/cart/${id}`, { quantity });

}

//카트 정보 가져오기

export async function getCartAPI() {

  return await apiClient.get("/cart");

}

//카트 상품 삭제

export function removeFromCartAPI(id) {

  return apiClient.patch(`/cart/remove/${id}`);

}

 

 

 

App.jsx

  //장바구니 상품 삭제

  const removeFromCart = (id) => {

    const oldCart = [...cart]; //기존의 장바구니

    const newCart = oldCart.filter((item) => item.product._id !== id);

    //매개변수로 받아오는 id와 같지 않은 것만 newCart에 담는다

    setCart(newCart); //장바구니에 저장한다.

    removeFromCartAPI(id).catch((err) => {

      toast.error("장바구니 상품 삭제 에러");

    });

  };

 

 

 

삭제를 하고 현재 장바구니의 아이템 개수와 합계 확인하고 

 

몽고 db에서도 잘 삭제가 됐는지 확인한다.