[React] 장바구니 api

장바구니 기능을 만들때, 상품을 프론트엔드에서 관리해도 되고, 백엔드에서 관리해도 됐기 때문에 어느쪽에서 그 일을 맡을지 역할을 분담해야 됐었다. 보통의 사이트에서는 백엔드 쪽에서 관리한다고 들었는데, 공부를 하는 입장에서 내가 있는 프론트쪽에서 한번 구현해보고 싶어서 달려들었지만, 시간이 부족해서 중간에 포기했다.

this.state = {
  products: {},
  totalPrice: 0,
}
componentDidMount() {
    const { products, totalPrice } = this.state;
    fetch(cartAPI, {
      headers: {
        Authorization: sessionStorage.getItem("access_token"),
      },
    })
      .then((res) => res.json())
      .then((res) => {
        this.setState({
          products: res.pending_orders,
          totalPrice: Number(res.total_price).toLocaleString(),
        });
      })
  }

장바구니 기능은 로그인이 되어있는 회원만 주문이 가능해야 했기 때문에, method는 GET이지만, componentDidMount에서 내가 sessionStorage 혹은 localStorage에 토큰이 있는지 확인한 후에 데이터를 받아와야 했다.

makeEmptyCart = () => {
    fetch(cartDeleteAPI, {
      method: "POST",
      headers: {
        Authorization: sessionStorage.getItem("access_token"),
      },
    })
      .then((res) => res.json())
      .then((res) => {
        this.setState({
          products: res.pending_orders,
        });
      });
  };

장바구니를 비울때는 fetch에 POST요청을 보내면, API에서 빈 배열을 돌려줬다.

countHandler = (num) => {
    const { order_id } = this.props.product;
    const { totalPrice } = this.props;
    const { quantity, eachPrice, price } = this.state;

    if (num === -1 && quantity === 1) {
      return;
    } else if (num === 1 && quantity === 5) {
      this.setState({
        limit: true,
        quantity: 5,
      });
    } else if (num === -1 && quantity === 5) {
      this.setState({
        limit: false,
        quantity: quantity + num,
      });
    } else {
      this.setState(
        {
          quantity: quantity + num,
          price: eachPrice * (quantity + num),
        },
        () => {
          this.setState({
            totalPrice: totalPrice + price,
          });
        },
      );
    }

    if (num === 1 && quantity === 5) {
      return;
    } else {
      fetch(cartUpdateAPI, {
        method: "POST",
        headers: {
          Authorization: sessionStorage.getItem("access_token"),
        },
        body: JSON.stringify({
          order_id: order_id,
          calculate: num === 1 ? "plus" : "minus",
        }),
      })
        .then((res) => res.json())
        .then((res) => {
          res.message === "OUT_OF_STOCK"
            ? alert("재고가 부족합니다.")
            : this.setState(
                {
                  products: res.pending_orders,
                  totalPrice: Number(res.total_price).toLocaleString(),
                });
        });
    }
  };

장바구니에서 수량을 조절하는 함수인데, 수량을 변경할 때마다 로컬에서 뿐만 아니라, 백엔드쪽에 정보를 계속해서 보냈다. 몰랐는데 method를 POST로 보내도 들어오는 데이터가 있었다. 변경된 수량을 보내다가, 백엔드쪽에서 재고가 부족하면 경고메시지를 띄우는 처리도 이런식으로 해결했다.