장바구니에 아이템 추가하고 결제하기까지

우리 사이트의 결제 로직은 '장바구니에서 결제로 가기'와 '상세페이지에서 바로구매를 통해 결제로 가기' 두가지가 있었다.

이번에는 '장바구니에서 결제로 가기'에 대해 이야기 해보려고 한다.

바로구매 버튼을 통해 결제로 가는 내용은 이글을 클릭하면 확인할 수 있다.

 

장바구니와 연결된 백엔드 api에 post 요청 보내기

유저가 수량과 가격을 확인 후 장바구니 버튼 클릭 시 백엔드에게 post요청을 보낼 수 있는 함수를 onclick을 사용해 연결해주었다.

먼저 버튼에 onclick을 통해 goToCart라는 함수를 연결해주었다.

<button
 onClick={() => goToCart()}
 >
 장바구니
 </button>

그리고 goToCart함수 안에 fetch 함수를 호출해주었다.

백엔드쪽에서 header에 token값을 보내달라고 요청했기때문에 넣어주었고 body에 필요한 아이템 정보들도 담아 주었다.

마지막으로 response로 온 값이 "CART_ADD_SUCCESS"라면 상품이 추가되었다는 alert를 띄워주었다.

 const goToCart = () => {
    fetch('API_URL/carts', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${token}`,
      },
      body: JSON.stringify({
        productId: product.productId,
        productOptionId: product.productOptions[0].optionId,
        quantity: number,
      }),
    })
      .then(response => response.json())
      .then(data => {
        if (data.message === 'CART_ADD_SUCCESS') {
          alert('상품 추가 성공');
        } 
      });
  };

 

장바구니 아이템 결제하기

먼저 장바구니에 있던 아이템들을 get 요청을 통해 가져온 뒤 useState에 저장해준다.

const [productDatas, setProductData] = useState([]);

 useEffect(() => {
    fetch('API_URL/carts/list')
      .then(response => response.json())
      .then(result => setProductData(result));
  }, []);

그리고 map을 통해 데이터들을 나열해준다.

우리사이트의 결제로직은 두가지이기 때문에 바로구매버튼을 통해 온것인지 장바구니를 통해 온것인지 구별을 해줘야하고

그에 따라 데이터를 나열하는 것과 총가격을 계산하는 것도 두가지로 분기되어있다. 관련 내용은 이곳에 포함이 되어있다.

{productDatas.map(productData => {
  const { productId, productName, productCount } = productData;
  
   return (
    <div className="purchaseProduct" key={productId}>
     <p>{productName}</p>
     <p>{productCount}개</p>
    </div>
    );
   })
  }

 

유저가 결제 버튼 클릭 시 결제가 되었다는 모달을 띄워주는 것으로 마무리했다.

  const goToPay = () => {
    setIsModalOpen(true);
  };
  
  
 <button
  onClick={goToPay}
  >
  결제하기
  </button>

  const [isModalOpen, setIsModalOpen] = useState(false);
  
   {isModalOpen && (
        <div className="modalBlack">
          <div className="purchaseModal">
            <div className="purchaseModalText">
              <p>상품 주문이 완료되었습니다.</p>
              <p>주문페이지로 넘어갑니다.</p>
            </div>
            <button
              className="ok"
              onClick={() => {
                setIsModalOpen(false);
              }}
            >
              확인
            </button>
          </div>
        </div>
      )}