장바구니 기능 - Part2 선택상품 주문하기, 전체상품 주문하기, 주문 합계

장바구니에 담긴 상품 중 부분만 선택하거나 전체 선택하는 방법과 선택된 상품의 주문 합계를 구하는 방법 기록

---

수량 변경을 처리

const onChange = (e, id, inventory) => {
  let newQty = parseInt(e.target.value); // 새로운 수량을 입력값에서 가져옴
  if (newQty < 1) newQty = 1; // 수량이 1보다 작으면 1로 설정
  if (newQty > inventory) newQty = inventory; // 수량이 재고보다 많으면 재고 수량으로 설정
  setQuantityValues((prevState) => ({
    ...prevState,
    [id]: newQty, // 수량 값을 업데이트
  }));
  if (user) {
    kuwazawa_cartDB
      .child(user.key)
      .child(id)
      .update({ qty: newQty }) // Firebase에 수량 업데이트
      .then(() => {
        dispatch(fetchProducts());
        dispatch(fetchCarts()); // 장바구니와 상품 데이터를 다시 가져옴
      })
      .catch((error) => {
        console.error("수량 업데이트 중 오류 발생:", error);
      });
  }
};

사용자가 수량을 변경하면 해당 값이 업데이트

 

장바구니에서 상품을 제거

const removeCartItem = (id) => {
  if (user) {
    kuwazawa_cartDB
      .child(user.key)
      .child(id)
      .remove() // Firebase에서 해당 상품 제거
      .then(() => {
        setTempProducts((prevTempProducts) =>
          prevTempProducts.filter((item) => item.product.id !== id)
        ); // 로컬 상태에서 상품 제거
        setTotal(0);
        setAllCount(0);
      })
      .catch((error) => {
        console.error("삭제 중 오류 발생:", error);
      });
  }
};

 

전체 상품을 주문

const allBuy = (e) => {
  e.preventDefault();
  if (!user) {
    alert("로그인을 하십시오.");
    sessionStorage.setItem("previousUrl", "/cart");
    navigate("/login");
  } else {
    navigate("/payment", { state: { product: tempProducts } }); // 결제 페이지로 이동
  }
};

 

상품 선택 상태를 토글

const handleToggle = (productId) => {
  if (selectedProducts.includes(productId)) {
    setSelectedProducts(selectedProducts.filter((id) => id !== productId)); // 선택 해제
  } else {
    setSelectedProducts([...selectedProducts, productId]); // 선택 추가
  }
};

 

선택된 상품을 주문

const partBuy = (e) => {
  e.preventDefault();
  if (!user) {
    alert("로그인을 하십시오.");
    sessionStorage.setItem("previousUrl", "/cart");
    navigate("/login");
  } else {
    const selectedProductsData = tempProducts.filter((item) =>
      selectedProducts.includes(item.product.id)
    );
    navigate("/payment", { state: { product: selectedProductsData } }); // 선택된 상품을 결제 페이지로 전달
  }
};

 

데이터 로드 및 전체 선택 상태 관리

useEffect(() => {
  if (carts.length) {
    setTempProducts(() => {
      const newData = carts.map((item) => {
        const product = products.find((product) => product.id == item.key);
        return { product: product, qty: item.qty };
      });
      setTotal(
        newData.reduce(
          (acc, item) =>
            acc + parseInt(item.product.price) * parseInt(item.qty),
          0
        )
      );
      setAllCount(newData.reduce((acc, item) => acc + parseInt(item.qty), 0));
      return newData;
    });
  } else {
    setTempProducts([]);
  }
}, [carts]);

useEffect(() => {
  if (selectAll) {
    const allIds = tempProducts.map((item) => item.product.id);
    setSelectedProducts(allIds); // 전체 선택
  } else {
    setSelectedProducts([]); // 전체 선택 해제
  }
}, [selectAll, tempProducts]);

 

합계 및 총 수량 계산

const calculateTotal = () => {
  let total = 0;
  selectedProducts.forEach((productId) => {
    const selectedProduct = tempProducts.find(
      (item) => item.product.id === productId
    );
    total +=
      parseInt(selectedProduct.product.price) * parseInt(selectedProduct.qty);
  });
  return total;
};

const calculateTotalQuantity = () => {
  let totalQuantity = 0;
  selectedProducts.forEach((productId) => {
    const selectedProduct = tempProducts.find(
      (item) => item.product.id === productId
    );
    totalQuantity += parseInt(selectedProduct.qty);
  });
  return totalQuantity;
};

 

 

 

선택 상품 주문하기 / 주문 합계

 

전체 상품 주문하기 / 주문 합계