프리온보딩 FE 챌린지 10월 (2024) | 리액트 오픈소스 펼쳐보기

챌린지 과제 내용

1. [✅]하나의 SinglePage에 Intersection Observer를 이용해 무한스크롤을 구현하세요.
2. [✅]현재 가져온 상품 리스트들의 액수들의 합계를 화면에 보여주세요 (ex. 현재 20개의 상품을 가져온 상태라면 20개 물품의 가격 총 합을 보여주면 됨)

무한 스크롤의 조건

1. [✅]페이지를 현재 보여주는 페이지의 최하단으로 이동 시 다음 페이지 정보를 가져오게 합니다.
2. [✅]더이상 가져올 수 없는 상황이라면 더 이상 데이터를 가져오는 함수를 호출하지 않습니다.
3. [✅]로딩 시 로딩 UI가 보여아 합니다. (UI의 형식은 자유)

과제 유의 사항

1. [✅]React + 함수형 컴포넌트를 사용해서 개발해주세요
2. [✅]제공해드린 Mock 데이터는 수정 및 추가가 가능합니다.
3. [✅]무한스크롤 관련된 라이브러리 사용 절대 금지
4. [✅]비동기 상태 관리 라이브러리 사용 절대 금지 (ex. tanstack-query)
5. [✅]3, 4번 조건 외의 라이브러리는 자유롭게 사용하셔도 됩니다

시연영상

실행

npm run dev