[myCart] 주문하기 (checkout) 및 주문 페이지에서 백엔드(orders) 데이터 가져오기

 

orderService.js를 생성한다. 

 

그리고  App.jsx에서

 

cart 프로바이더에 setCart를 추가한다.

    <UserContext.Provider value={user}>

      <CartContext.Provider

        value={{ cart, addToCart, removeFromCart, updateCart, setCart }}

      >

 

setCart는 장바구니에 담는 함수 

 

CartPage.jsx에서  setCart를 가져온다. 

const CartPage = () => {

  const [subTotal, setSubTotal] = useState(0); //배송비 제외 합계

  const user = useContext(UserContext);

  const { cart, removeFromCart, updateCart, setCart } = useContext(CartContext);

 

그리고 결제하기를 클릭하면 실행될 checkout함수를 추가한다. 

 

  //주문하기

  const checkout = () => {

    const oldCart = [...cart];//기존의 장바구니

    setCart([]); //카트 비우기

    checkoutAPI()//백엔드에 요청

      .then(() => {

        toast.success("주문 성공!");

      })

      .catch(() => {

        toast.error("checkout 중 에러발생.");

        setCart(oldCart);

      });

  };

 

그리고 결제하기 버튼에 onClick 이벤트로 checkout함수를 실행한다. 

      <button onClick={checkout} className="search_button checkout_button">

        결제하기

      </button>

 

 

 

테스트

 

결제하기를 클릭하면 결제하기와 동시에 장바구니의 모든 상품들이 사라지고

몽고db에 order에 담겨야함

 

 

 

useData를 사용해서 order에 있는 데이터를 가져온다. 

[GET] 주문 상세 가져오기 - http://localhost:5000/api/order/

 

const MyOrderPage = () => {

  const { data: orders, error, isLoading } = useData("/order");

 

그리고 orders 데이터가 있으면 map으로 반복한다. 

section className="align_center myorder_page">

      <Table headings={["내주문", "상품들", "결재금액", "배송상태"]}>

        <tbody>

          {orders.map((order, index) => (

            <tr key={index}>

              <td>{index + 1}</td>

              <td>iPhone, Power Bank</td>

              <td>{order.total.toLocaleString("ko-KR")}원</td>

              <td>{order.status}</td>

            </tr>

          ))}

        </tbody>

      </Table>

 

 

상품들 항목의 경우 구매한 제품들과 개수를 나열하고자 해서 함수를 추가한다. 

const MyOrderPage = () => {

  const { data: orders, error, isLoading } = useData("/order");

  //주문 1개에 들어있는 제품들의 이름(수량)형식으로 문자열 리턴하는 함수

  const getProductString = (order) => {

    const productStringArr = order.products.map(

      (p) => `${p.product.title}(${p.quantity})`

    );

    return productStringArr.join(", ");

  };

 

 

그래서 getProductString 함수를 사용

      <Table headings={["내주문", "상품들", "결재금액", "배송상태"]}>

        <tbody>

          {orders.map((order, index) => (

            <tr key={index}>

              <td>{index + 1}</td>

              <td>{getProductString(order)}</td>

              <td>{order.total.toLocaleString("ko-KR")}원</td>

              <td>{order.status}</td>

            </tr>

          ))}

        </tbody>

      </Table>

 

 

 

 

 

index +1 이므로 

[0] 인덱스의 경우 1

[1] 인덱스의 경우 2 출력되면서

순서대로 늘어남