react-shopping-cart

구조

1. Header
   • Navigating
2. Main
   1. Cart Title
      • 페이지 설명
      • 총 상품 개수 출력
   2. Cart Item Container
      1. CartItemControls
         • 전체 선택 기능
      2. CartItemList
         1. CartItem
            • 아이템 수량 조절(-, +)
            • 개수가 0이 되면 삭제 (TODO: 자동 처리되는지 확인)
            • 해당 아이템 삭제 기능
            • 해당 아이템 선택 기능
   3. Cart Results
      • 배송비 관련 문구 출력
      • 주문 금액 계산
      • 배송비 출력
      • 총 결제 금액 출력
3. Footer
   • 아이템이 있는 경우에만 ‘주문 확인’ 버튼 활성화

기능

• /cart-items API를 호출하여 장바구니 상품 데이터를 불러온다.
• 불러온 데이터를 기반으로 Recoil을 사용하여 클라이언트 상태를 관리한다.
  • 개별 상품의 선택 여부, 결제 금액, 배송비 등의 상태를 Recoil로 관리한다.
• 상품 선택에 따른 결제 금액, 배송비 등의 동적인 변경 사항을 처리한다.
  • 상품 선택/해제 시 결제 금액을 동적으로 변경한다.
  • 결제 금액이 10만원 이상일 경우 배송비는 무료이다.
• 장바구니 상품의 수량 변경을 할 수 있다.
• 장바구니에 담긴 상품을 제거할 수 있다.
• 새로고침해도 선택한 상품 상태를 유지해서 보여준다.
  • 로컬 스토리지
    1. check 객체를 만든다. {id1:true, id2:false, ...}
    2. set
       1. cartState -> cartid -> localStorage에 추가 및 삭제.
       2. check 로컬스토리지 직접 접근해서 수정
       3. 아이템 삭제시 localStorage에서 삭제.
    3. Get (Client)
       1. default -> localStorage에 없으면 true 있으면 로컬스토리지 값

테스트

<총 상품 개수 출력>

• 담겨있는 상품의 갯수를 잘 출력하는가?
• 상품이 없으면 아예 출력하지 않는가?

<전체 선택 기능>

• 전체 선택 클릭시 모두 선택되는가?
• 전체 선택이 된 상태에서 클릭시 모두 해제되는가?

<아이템 수량 조절>

• 각 버튼을 눌렀을 때 개수가 잘 증감되는가?

<개수가 0이 되면 삭제>

• 개수가 1일 때 - 버튼을 누르면 해당 아이템이 삭제되는가?

<해당 아이템 삭제 기능>

• 삭제 버튼을 눌렀을 경우 해당 아이템이 장바구니에서 삭제 되는가?

<해당 아이템 선택 기능>

• 선택 버튼을 눌렀을 경우 해당 아이템이 선택되는가?

<주문 금액 계산>

• 선택한 아이템의 금액을 잘 더해서 출력하는가?

<배송비 출력>

• 계산된 금액을 토대로 배송비를 적절하게 출력하는가?