/react-shopping-cart

⚛️ React 장바구니 애플리케이션 🛒

Primary LanguageTypeScript

데모 주소

스토리북 배포주소

테스트

  • 스토리북 RTL,Jest 테스트 적용

필수 요구사항 (Final)

기능요구사항 (step1 ~ step3)

상품목록

  • 페이징 혹은 인피니티 스크롤 적용

장바구니

  • 해당 상품의 수량을 변경할 수 있다.
  • 상품의 수량은 항상 1이상, 20이하여야 한다
  • 상품의 수량이 1이면 상품 수량 감소할 수 없다.
  • 상품의 수량이 20이면 상품 수량 증가할 수 없다.
  • 해당 상품의 총 금액이 변경된다.
  • 해당 상품이 체크되어있으면, 결제예상금액도 변경된다.
  • 모두선택 버튼이 체크되면, 상품들이 모두 선택된다.
  • 모두선택 버튼이 체크가 풀리면, 상품들의 선택이 모두 해제된다.
  • 상품 삭제 버튼을 누르면, confirm 메시지가 보여진다.
  • 확인을 누르면, 선택된 상품이 모두 삭제된다.
  • 결제예상금액이 0원이 된다.
  • 🗑 버튼을 누르면 confirm 메시지가 보여진다.
  • 확인을 누르면, 해당 상품이 삭제된다.
  • 체크된 상품 개수에 따라 주문하기 버튼 내부에 수량이 변경된다.
  • 주문하기 버튼을 누르면, confirm 메시지가 보여진다.
  • 확인을 누르면, 주문/결제 페이지로 이동한다.
  • 확인을 누르면, 장바구니에서 선택된 상품들이 삭제된다.
  • 확인을 누르면, 체크된 상품들을 데이터베이스에서 제거한다.
  • 주문할 상품이 0개이면 버튼이 비활성화된다.

선택 요구사항 (심화)

상품상세

  • 페이지에는 상품 사진, 이름, 금액 정보가 보여진다.
  • 장바구니 버튼을 클릭하면 장바구니 페이지로 이동한다.
  • 장바구니 버튼을 클릭하면 해당 상품이 장바구니에 담긴다.

주문 상세

  • 주문 정보가 보여진다.
  • 장바구니 버튼을 클릭하면, 해당 상품이 장바구니에 담기고 장바구니 이동 선택 모달이 보여진다.
  • 장바구니 이동 버튼을 누르면 장바구니 페이지로 이동한다.

UX/UI (추가요구사항)

  • 반응형 레이아웃을 구현한다.
  • 사용성 개선
  • 사용자를 위한 로딩 환경 개선
  • 상품이 없을 때와 같은 다양한 Edge Case 대응
  • 별도의 모바일 레이아웃 추가 제공