Fix: PortfolioList.tsx 무한 스크롤 에러를 해결한다

[Kim-DaHam]

개요

PortfolioList.tsx 무한 스크롤이 다음 페이지 데이터를 불러오지 않는 문제를 해결합니다.

작업사항

• /mocks/handler/portfolio.ts api 핸들러 코드를 수정한다.
  • no-sql 데이터 형식에 맞춰 작동하도록 수정한다.
  • 데이터 목록을 map으로 바로 불러오기 위해 key-value 형태를 Array[]로 바꾼다.
  • 각 포트폴리오의 id역할을 하는 key는 portfolios[docKey].id = docKey 로 하여금 새 요소로 넣는다.

변경로직

• useIntersectionObserver 훅에 초기값으로 들어가는 callback 함수는 fetchNextPage()만 실행시키게 한다.
• 그 외 상태값을 조작하는 로직은 useEffect(()=>void, [portfolios]) 훅 안에서 처리한다.
• useSuspenseInfiniteQuery의 반환 데이터를 다음과 같이 1차원 배열로 변경해서 받는다.
  • select: data => data.pages.flat()

변경후

https://github.com/Kim-DaHam/Portfolly/assets/81691456/3b653012-654c-4c83-90e7-0e36de37e257

총 데이터는 30개, 한 페이지당 10개씩 불러오며 화면에는 6개씩 끊어 보여줍니다.

10개 데이터를 화면에 전부 그렸을 경우 다음 페이지 데이터를 불러옵니다.

page가 3에 도달했을 때 마지막 데이터 반환값은 []이고, 더이상 데이터가 fetch되지 않습니다.