React & Redux 데스크탑 장바구니 애플리케이션
다수의 컴포넌트를 페이지로 구성하고 복잡해진 상태를 관리합니다.
✔️ 데스크탑 타겟의 웹 앱을 구현하며 구매로 이어지는 것에 끊김이 없고 재방문을 고려한 UI/UX에 대해 고민해봅니다.
✔️ 상태 관리를 위해 Flux Architecture 기반의 Redux를 활용합니다.
✔️ Router를 활용해 여러 페이지 전환을 고려합니다.
✔️ 배민상회 서비스 참고
- 네비게이션 기능
- 네이게이션의 타이틀을 클릭하면, 상품 목록 페이지로 이동한다.
- 네비게이션의 목록에는 장바구니와 주문목록이 있다.
- 장바구니를 클릭하면, 장바구니 페이지로 이동한다.
- 주문목록을 클릭하면, 주문목록 페이지로 이동한다.
- 상품 목록 페이지
- 상품 목록을 보여준다.
- 상품 목록은 json-sever를 통해 받아온다.
- 각 상품을 클릭하면, 상품 상세 페이지로 이동한다.
- 각 상품의 카트 모양의 버튼을 클릭하면, 상품이 장바구니에 추가된다.
- 이미 장바구니에 존재하는 상품일 시, 안내 메시지를 띄운다.
- 상품 목록을 보여준다.
- 상품 상세 페이지
- 장바구니 버튼을 누르면, 해당 상품을 장바구니에 추가한다.
- 버튼을 눌렀을 때, 수량을 선택할 수 있는 선택창이 나온다. [심화]
- 상품의 이미지, 이름, 금액을 화면에 표시한다.
- 장바구니 버튼을 누르면, 해당 상품을 장바구니에 추가한다.
- 장바구니 페이지
- 장바구니에 담긴 상품들을 화면에 표시한다.
- 장바구니에 담긴 상품의 수량을 표시한다.
- 특정 상품에 대한 삭제를 할 수 있는 버튼이 있다.
- 특정 상품의 수량을 조작할 수 있는 버튼이 있다.
- 모든 상품에 일괄 선택, 일괄 선택 해제를 할 수 있는 토글이 있다.
- 선택된 상품을 삭제할 수 있는 버튼이 있다.
- 선택된 제품과 그 수량에 따라 결제 예상 금액을 보여준다.
- 주문하기 버튼을 누르면 주문할 수 있다. [심화]
- 장바구니에 담긴 상품들을 화면에 표시한다.
만약 미션 수행 중에 개선사항이 보인다면, 언제든 자유롭게 PR을 보내주세요.
버그를 발견한다면, Issues에 등록해주세요.