배포

배포링크 : 배포링크

( http api사용으로 인해, 안전하지 않은 콘텐츠를 허용해주셔야, 빈 페이지가 아닌 정상적 페이지가 보입니다. :) )

구현에 신경 쓴 부분

• 각 비동기 API는 커스텀훅에서 담당하고, (useFetchAddCarts , useFetchProducts)
• 무한스크롤을 위한 훅을 만들어 구현하였습니다. (useIntersectionObserver)
• 테스팅을 위해 msw로 API 서버를 모킹하였습니다.
• react-query로 서버실패 상태에대한 로직 구현
• RTL 비동기 테스트
• 지난미션에서 만든 모달 npm 모듈을 활용하여 장바구니 모달 구현
• api호출 공통로직 ApiClient로 리팩토링

Figma

기능 요구 사항

1. 상품 목록 조회

   • API를 통해 상품 목록을 가져올 수 있다.
   • 맨 처음 API 호출 시 20개의 목록을 불러온다.
   • 이 후 추가 API 호출 시 4개의 목록을 불러온다.
   • 무한 스크롤을 할 수 있다.

2. 상품 정렬 및 필터링

   • 상품 카테고리별 필터링을 할 수 있다.
   • 상품을 정렬 할 수 있다. (낮은 가격 순, 높은 가격 순)

3. 상품 장바구니 담기

   • 사용자가 담기 버튼을 누르면, API를 통해 장바구니에 추가 될 수 있다.
   • 이 때 장바구니에 담긴 상품 '종류'의 갯수로 장바구니 아이콘에 숫자를 표시한다.
   • 장바구니에서 빼기 버튼을 누르면, 장바구니에서 해당 아이템이 제거되고 상품 목록 페이지의 담기 버튼은 활성화된다.

4. 테스트

   • API 요청 시 MSW 서버를 모킹한다.
   • API 요청 상태에 따른 변화(로딩상태 표시, 에러메세지 표시)를 검증한다.

5. 에러

   • 상품목록을 불러오는 중 에러가 발생할 경우, 에러 메시지를 사용자에게 알려주는 UI를 표시한다.