react로 쇼핑몰 만들기(5) - 상세페이지, 장바구니, MockAPI

상세페이지 데이터 생성하기

product.slice.js코드입니다.

store폴더안의 index.js에 productSlice를 등록합니다.

DetailPage폴더안의 index.jsx의 코드입니다.

 

상세페이지 UI 생성하기

左1) Loader.jsx의 코드입니다.

中, 右) Loader.module.scss의 코드입니다.

DetailPage.module.scss의 코드입니다.

DetailPage폴더안의 index.jsx의 추가 코드입니다.

 

장바구니 기능 생성하기

cart.slice.js의 변경 및 추가 코드입니다.

下1,2)는 cartSlice의 reducers부분입니다.

左) SignIn.jsx의 추가 코드입니다.

右) SignUp.jsx의 추가 코드입니다.

 

장바구니 페이지 생성하기

우선 src폴더 안에 pages폴더 안에 CartPage부분에서 파일들을 위처럼 추가합니다.

左) CartList.jsx의 코드입니다.

右) CartList.module.scss의 코드입니다.

左) components폴더 안에 CartEmpty.jsx의 파일입니다.

右) components폴더 안에 CartEmpty.module.scss의 파일입니다.

 

장바구니 페이지 UI 생성하기

CartPage폴더 안에 index.jsx의 코드입니다.

CardItem.jsx의 코드입니다.

CardItem.module.scss의 코드입니다.

 

Checkout컴포넌트 생성하기

Checkout.jsx과 Checkout.module.scss의 코드입니다.

useAuth.js의 코드입니다.

위 Checkout.jsx에서 useAuth.js 훅을 사용했습니다. 

useAuth중 isAuth: !!email는 email이 string형이며, !가 하나만 있을 때 false나오고, 두개면 true가 나옵니다.

그의 반대 email가 비어 있는 경우, !! 두개일 경우 false나옵니다.

 

MockAPI를 사용해서 주문보내기

이 프로젝트는 백엔드없이 순수한 프론트엔드의 작업입니다. 

MockAPI를 사용해서 백엔드로 보내는 기능을 실행해보겠습니다.

MockAPI 홈페이지:  https://mockapi.io/

우선 왼쪽 사진처럼 + 버튼을 클릭하고 프로젝트를 생성합니다.

그리고 NEW RESOURCE를 클릭해서 orders인 데이터를 저장, 불러오기 할 수 있습니다.

 

Checkout.jsx의 추가 코드입니다.

1) cart.slice.js에 mockAPI를 사용할 수 있게 thunkAPI를 사용했습니다.

    여기서 axio의 api주소는 MockAPI에 들어가서 확인해야 합니다. 각각 다릅니다.

2) cart.slice.js의 reducers에 sendOrder action을 추가합니다.

3) cart.slice.js에 sendOrder action을 내보냅니다.