결제하기 버튼을 눌렀을 때 주문 페이지로 이동
useLocation 을 활용한 데이터 스테이트 값 가져오기
우선 라우트 지정을 해준다
<Route path="order-summary"
element={
<ProtectedRoute>
<Order/>
</ProtectedRout> }
/>
[Checkout.js]
결제 모달창에서 결제하기 버튼을 클릭했을 때 state 값으로 useEffect를 통해 가져온 데이터와 상태값을 넘겨준다 (true / false)
navigate("/order-summary", {
state: {
data: data,
status: true,
},
});
[Order.js]
export const Order = () => {
const { state } = useLocation();
return <main>{state ? <Success data={state.data} /> : <Fail />}</main>;
};
주문 페이지에서는 가져온 데이터는 받아온 status 값에 따라 보여지며 성공했을 때 받아온 state 값으로 데이터를 불러올 수 있다
Success 컴포넌트에는 받아온 데이터를 뿌려서 작성해준다
주문완료 후 주문내역 페이지 만들기
[Dashboard.js]
const response = await fetch(
`http://localhost:8000/660/orders?user.id=${cbid}`,
api 엔드포인트는 json-server-auth 에서 사용한 660 번에 유저 아이디를 가져와서 데이터를 가져올 수 있다
가져온 데이터를 통해서 빈 카트 또는 가져온 데이터에서 카트 데이터를 뽑아내서 뿌려주어 주문내역 카드 컴포넌트를 만들 수 있다
