장바구니 페이지 기능들

  deleteAllHandler = () => {
    fetch(`${API}/cart`, {
      method: "DELETE",
      headers: {
        Authorization: localStorage.getItem("token"),
      },
    }).then((res) => {
      this.setState({ carts: [] });
    });
  };

전체삭제 버튼을 누를시 백엔드 서버에 삭제를 요청 carts에 담긴 상품들을 []로 초기화 시킨다.

  deleteOneHandler = ({ productId, size }) => {
    fetch(`${API}/cart/${productId}`, {
      method: "DELETE",
      headers: {
        "Content-Type": "application/json",
        Authorization: localStorage.getItem("token"),
      },
      body: JSON.stringify({
        size: size,
      }),
    }).then((res) => {
      this.setState({
        carts: this.state.carts.filter((cart) => {
          if (cart.productId === productId && cart.size === size) {
            return false;
          }
          return true;
        }),
      });
    });
  };

상품 아이디가 같아도 사이즈가 다르면 상품은 다른거니까 productId와 size가 같은건 제외시키고 나머지를 카트에 setState를 해주면 해당 제품이 삭제되게 된다.

  componentDidMount = () => {
    fetch(`${API}/cart`, {
      headers: {
        Authorization: localStorage.getItem("token"),
      },
    })
      .then((res) => res.json())
      .then((res) => this.setState({ carts: res.carts }));
  };

백엔드의 데이터를 송신받아서 carts에 다시 담아준다.

  render() {
    const { carts } = this.state;
    const totalPrice =
      carts.length &&
      carts
        .reduce((totalPrice, cart) => {
          totalPrice = totalPrice + cart.price * cart.count;
          return totalPrice;
        }, 0)
        .toLocaleString();
    

장바구니에 담은 신발들의 총 가격을 알아보는 코드다
reduce pricecount한걸 첫번째 cart에 담고 다음에 또 pricecount한 cart를 더해주고해서 모든 계산된 cart를 더해줘서 총 구매 금액이 나오게한다.

  return (
    <>
      <div className="cartWrapper">
        <div className="contentArea">
          <div className="cart">
            <div className="cartContents">
              <h2 className="cartTitle">장바구니</h2>
              <div className="cart">
                <span>{this.state.carts.length}개 상품</span>
              </div>
              <div className="itemContainer">
                <div className="info">
                  <p>사용 가능한 쿠폰이 있습니다.</p>
                  <p>아래 프로모 코드 입력란에 입력하여 사용하세요.</p>
                </div>
                <div className="cartPage">
                  <div className="cartFlex">
                    <div className="cartLeft">
                      <div
                        className="allDelete"
                        onClick={this.deleteAllHandler}
                      >
                        <a>전체삭제</a>
                        {this.state.isLoading && <LoadingModal />}
                      </div>
                      {carts.map((cart) => (
                        <CartList
                          cart={cart}
                          deleteOneHandler={this.deleteOneHandler}
                        />
                      ))}
                    </div>
                    <div className="cartRight">
                      <div className="rightTitle">주문예정금액</div>
                      <div className="payBox">
                        <div className="infoPrice">
                          <div className="itemPrice">
                            <div>상품 금액</div>
                            <div>{totalPrice} 원</div>
                          </div>
                          <div className="itemPrice">
                            <div>예상 배송비</div>
                            <div>0 원</div>
                          </div>
                          <div className="itemPrice">
                            <div>상품 할인 금액</div>
                            <div className="payColor">0 원</div>
                          </div>
                          <div className="itemPrice">
                            <div>주문 할인 금액</div>
                            <div className="payColor">0 원</div>
                          </div>
                        </div>
                        <div className="totalPrice">
                          <div className="totalPriceText">
                            총 결제 예정 금액
                          </div>
                          <div className="totalPricePay">{totalPrice} 원</div>
                        </div>
                        <div className="orderBtn">
                          <div className="orderButton">주문하기</div>
                        </div>
                      </div>
                      <img src="/Images/Cart/cart.png" />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </>
  );
}
}
export default Cart;