[myCart] 장바구니 구매수량 변경 및 백엔드 업데이트

 

 

App.jsx에 장바구니 개수 증감 할 함수를 추가한다

  // 장바구니 상품 개수 증감( type : 감소,증가 )

  const updateCart = (type, id) => {

    const updatedCart = [...cart];

    const productIndex = updatedCart.findIndex(

      //findIndex:update 할 제품의 id의 idnex를 찾는다.

      (item) => item.product._id === id

    );

    //만약 타입이 increase 이면 기존의 수량에서 증가한다.

    if (type === "increase") {

      updatedCart[productIndex].quantity += 1;

      setCart(updatedCart);

    }

    //만약 타입이 decrease 이면 기존의 수량에서 감소한다.

    if (type === "decrease") {

      updatedCart[productIndex].quantity -= 1;

      setCart(updatedCart);

    }

  };

 

 

 

id를 가져오면 그 데이터는 아래와 같다.

내가 업데이트하고자 하는 것은 

products 의  n번째 인덱스의  quantity(수량) 이다. 

그래서 findIndex로 찾고자하는 제품의 index를 리턴시켜서 

productIndex에 담아서 사용한다

 

 

 

 

그리고 프로바이더에 추가한다. 

<CartContext.Provider

        value={{ cart, addToCart, removeFromCart, updateCart }}

      >

 

CartPage.jsx의 useContext에 추가 한다. 

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

 

QuantityInput에 props로 전달한다. 

 <td className="align_center table_quantity_input">

                <QuantityInput

                  quantity={quantity}

                  stock={product.stock}

                  setQuantity={updateCart}

                  cartPage={true}

                  productId={product._id}

                />

              </td>

 

QuantityInput.jsx에서 전달받은 props로 

import "./QuantityInput.css";

const QuantityInput = ({

  quantity,

  stock,

  setQuantity,

  cartPage,

  productId,

}) => {

  return (

    <>

      <button

        // - 클릭하면 기존의 수량에서 하나 줄어든다.

        onClick={() => {

          cartPage //cart페이지로 넘어온 props이면 true / 상세페이지의 QuntityInput의 경우 false

            ? setQuantity("decrease", productId) //type, id

            : setQuantity((prev) => prev - 1);

        }}

        className="quantity_input_button"

        disabled={quantity <= 1} // 수량이 1이되면 클릭하지 못하게한다.

      >

        -

      </button>

      <p className="quantity_input_count">{quantity}</p>

      <button

        // + 클릭하면 기존의 수량에서 하나 증가한다.

        onClick={() => {

          cartPage //cart페이지로 넘어온 props이면 true / 상세페이지의 QuntityInput의 경우 false

            ? setQuantity("increase", productId) //type, id

            : setQuantity((prev) => prev + 1);

        }}

        className="quantity_input_button"

        // 수량과 재고의 개수가 같아지면 클릭하지 못한다.

        disabled={quantity === stock}

      >

        +

      </button>

    </>

  );

};

export default QuantityInput;

 

 

 

벡엔드 API 추가하기 cartServices

//상품 개수 증가

export function increaseProductAPI(id) {

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

}

//상품 개수 감소

export function decreaseProductAPI(id) {

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

}

 

App.jsx에서 api 사용해서 백엔드에 업데이트하고 에러가 생기면 토스트 메세지로 출력한다.

  // 장바구니 상품 개수 증감( type : 감소,증가 )

  const updateCart = (type, id) => {

    const updatedCart = [...cart];

    const productIndex = updatedCart.findIndex(

      (item) => item.product._id === id

    );

    //만약 타입이 increase 이면 기존의 수량에서 증가한다.

    if (type === "increase") {

      updatedCart[productIndex].quantity += 1;

      setCart(updatedCart);

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

        toast.error("상품 증가 에러");

      });

    }

    //만약 타입이 decrease 이면 기존의 수량에서 감소한다.

    if (type === "decrease") {

      updatedCart[productIndex].quantity -= 1;

      setCart(updatedCart);

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

        toast.error("상품 감소 에러");

      });

    }

  };

 

 

 

장바구니에서 구매수량 변경 후 백엔드와 동일한지 확인해본다.