🧑🏻‍💻 Infinite Scroll Challenge

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

미리보기

챌린지 과제 내용

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

무한 스크롤의 조건

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

과제 유의 사항

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