$ npx json-server ./data.json --port 4000
$ yarn install
$ yarn start
- React, React Hooks
- Redux
- immer, axios, json-server, antd, react-router-dom
.
-- api : axios로 데이터 받아오는 함수
-- components : 컴포넌트
-- containers : 상태를 불러오거나 dispatch하는데 사용
-- lib : 비동기에 사용하는 thunk 함수들
-- routes : routing에 필요한 상수들
-- services : localStorage CRUD 함수
-- store : 리듀서 모듈과 스토어
-- modules
- 상품 목록 페이지 (route:
/products)
- 각 상품은
가격,사진,상품 제목을 표시한다 - 상품의
score를 기준으로 내림차순 정렬하여5개씩 보여주는 페이지네이션을 구현한다. - 각 상품에는
장바구니 버튼이 있다.
-
- 상품이 장바구니에 담겨 있지 않은 경우 -
담기버튼 구현
- 상품이 장바구니에 담겨 있지 않은 경우 -
-
- 상품이 장바구니에 담겨 있는 경우 -
빼기버튼 구현
- 상품이 장바구니에 담겨 있는 경우 -
- 장바구니 페이지 (route:
/cart)
- 장바구니에는 최대
3개의 상품이 담길 수 있다. - 장바구니의 상품 중 결제에 포함할 상품을
체크박스로 선택할 수 있다. - 장바구니에 담긴 각 상품의
수량을 선택할 수 있다.
- 단, 최소 1개의 수량이 지정되어야 함
- 장바구니에 담긴 전체 상품의
최종 결제 금액에 대하여쿠폰을 적용할 수 있다.
- 쿠폰은 두 가지 type을 가지고 있다.
-
- 정액 할인(amount) -
{discountAmount}원만큼 할인한다.
- 정액 할인(amount) -
-
- 비율 할인(rate) -
{discountRate}%만큼 할인한다.
- 비율 할인(rate) -
- 상품 중에는 쿠폰 사용이 불가능한 상품(
availableCoupon == false)이 존재한다.- 이 상품들은 쿠폰 할인 계산에서 제외한다.
-
최종 결제 금액을 장바구니 페이지 하단에 보여준다
-
장바구니 비우기