[React] ZARANARA👶🏻 프로젝트 (1) 디테일 페이지 장바구니 통신

디테일 페이지에서 장바구니 담기 버튼을 누르면 백엔드에 데이터를 보내주는 함수를 생성해보려 한다. 백엔드에 보내야 할 데이터는 상품 id와 수량이다. 가격이나 상품 관련 정보는 product_id만 보내줘도 다 처리가 가능하게끔 했다.

이전에 작성한 코드 >

const handleAddItemToCart = () => {
    fetch(`${API.USER}/cart`, {
      method: 'POST',
      body: JSON.stringify({
        product_id: detailContents.id,
        quantity: productAmount,
      }),
    })
      .then(response => response.json())
      .then(result => {
        if (result.MESSAGE === 'SUCCESS') {
          alert('장바구니에 담겼습니다.');
          window.location.reload();
      });
  };

수정한 코드 >

const handleAddItemToCart = () => {
    fetch(`${API.USER}/cart`, {
      method: 'POST',
      headers: {
        Authorization: localStorage.getItem('token'),
      },
      body: JSON.stringify({
        product_id: detailContents.id,
        quantity: productAmount,
      }),
    })
      .then(response => response.json())
      .then(result => {
        if (result.MESSAGE === 'SUCCESS') {
          alert('장바구니에 담겼습니다.');
          window.location.reload();
        } else if (result.MESSAGE === 'ITEM_ALREADY_EXIST')
          alert('이미 장바구니에 있는 상품입니다.');
        else if (result.ERROR === 'INVALID_TOKEN')
          alert('로그인 후 장바구니에 담아주세요.');
      });
  };

headers에 토큰을 실어주고, body에 우리가 데이터를 보내줄 product_id와 quantity를 담아준다. 이후에, 응답을 받고 그에 대한 각각의 메시지를 넣어준다. 수정한 코드에서 눈여겨 볼 부분은 headers이다. 로그인을 한 유저들만 장바구니에 상품을 담을 수 있도록 했는데, 그러려면 headers에 토큰이 있어야 가능하다. 수정 전에는 이 부분을 간과하고 넘어갔었다.

<Button
   handleClick={handleAddItemToCart}
   format="bigger"
   type="button"
   title={`장바구니에 담기 (${Number(
   productAmount * price?.split('.')[0]
   ).toLocaleString()} 원)`}
/>

위에 작성했던handleAddItemToCart함수를 장바구니 담기 버튼에 추가해주면 된다.