seongjinme / react-shopping-products

react-shopping-products

1단계 구현 사항

1단계 : 결국 우리가 무엇을 하려는 거지?

• 아르

  비동기 데이터를 사용자에게 제공하는 과정에서 발생하는 다양한 시나리오에 대응하고, 모킹을 통해 비동기 데이터 요청에 대한 테스트를 수행할 수 있다.

• 해리

  비동기 데이터인 상품 목록 데이터를 가져오고, 비동기 데이터를 가져올 때 발생할 수 있는 다양한 시나리오에 따른 UI를 사용자에게 보여줄 수 있다.

2단계 : 핵심 기능을 1줄로 정의해보기

• 아르

  상품 목록 데이터를 가공하여 사용자에게 보여주고, 사용자가 원하는 상품을 장바구니에 담을 수 있도록 한다.

• 해리

  상품 목록 데이터를 사용자가 원하는 옵션에 따라 가공해서 보여주고, 장바구니에 상품을 담을 수 있는 경험을 제공한다.

3단계 : 동작 가능한 가장 작은 버전부터 시뮬레이션 해보기

• 아르

1. 상품 목록 데이터 가져오기
2. 로딩 상태 및 에러 처리하기

• 200(OK)
• 400(Bad Request)/404(Not Found)
• 500(Server Error)

3. 페이지네이션
4. 상품 정렬 설정에 대응하기
5. 상품 카테고리 설정에 대응하기
6. 개별 상품의 장바구니 추가/제거 처리하기

• 해리

1. 상품 목록 데이터 페칭하기

2. 페칭 과정에서 발생할 수 있는 예외 시나리오 딱 하나에만 대응해보기! (500)

• 200(OK)
• 500(Internal Server Error)
• 404(Not Found)

3. 사용자가 선택한 옵션에 따라, 상품 목록 데이터 가공하기 (옵션, 정렬)

4. 대응 완료 후, 페이지네이션 경험 제공해주기

4단계 : 핵심과 가까우면서 쉽게 할 수 있는 적절한 것 선택하기

1. 첫 페이지에서 보여 줄 20개의 데이터 페칭하기

1-1. 200, 500

발생할 수 있는 비동기 시나리오에 대응하기

✨ 기능 요구 사항

1. 상품 목록 조회

• useFetch 커스텀 훅 구현 ✅

데이터 페칭 책임을 가지는 커스텀 훅

• 에러 상태

• 로딩 상태

• 네트워크 요청의 결과인 비동기 데이터

• usePagination 커스텀 훅 구현

페이지 상태 관리 책임을 가지는 커스텀 훅 ✅

• 페이지 상태

• 마지막 페이지 상태

• 다음 페이지 이동 함수

• MSW를 이용하여 /products API를 모킹하고 상품 목록 데이터를 가져온다.

• 맨 처음 불러 오는 갯수는 20개다.

• 이후 추가로는 4개씩 불러온다.

• 상품 목록을 무한스크롤 방식으로 표시한다.

2. 상품 정렬 및 필터링 - useProducts

• 상품 필터링
• 카테고리
• 상품 정렬
• 낮은 가격 순
• 높은 가격 순

3. 상품 장바구니 담기

• 사용자가 담기 버튼을 누르면, 장바구니에 추가된다. 이 때 장바구니에 담긴 아이템 '종류' 의 갯수로 숫자를 표시한다.
• 장바구니 담기 요청 중 에러가 발생한 경우, 에러 메시지를 사용자에게 알려주는 UI를 표시한다.
• 장바구니에서 빼기 버튼을 누르면, 장바구니에서 해당 아이템이 제거된다.