refactor: 무한스크롤 공용컴포넌트 분리

[hakyoung12]

✏️ 작업 내용

• 무한스크롤 공용컴포넌트 분리

📷 스크린샷

데이터 없을 시 레이아웃

무한스크롤 시연(기존과 동일)

https://github.com/user-attachments/assets/35e16187-68c4-4d2c-ae6e-4260d6085bed

✍️ 사용법

• queryKey: React Query에서 사용하는 고유 쿼리 키입니다.
• queryFn: 데이터를 가져오는 비동기 함수로, 조회 시작 위치를 알기 위해 offset을 인자로 받아야 합니다.
• limit: 페이지당 가져올 항목 수를 설정합니다. 기본값은 5입니다.
• emptyText: 데이터가 없을 경우 사용자에게 표시할 텍스트입니다.
• renderItem: 각 항목을 렌더링하는 함수를 정의하여, 원하는 형태로 데이터를 표시할 수 있습니다.

<InfiniteScroll<T>
  queryKey: string[]; // React Query 쿼리 키
  queryFn: (offset?: number) => Promise<InfiniteQueryResponse<T>>; // 데이터 fetching 함수
  limit?: number; // 한 번에 가져올 항목 수 (기본값: 5)
  emptyText: string; // 데이터가 없을 때 표시할 텍스트
  renderItem: (item: T, index: number) => JSX.Element; // 각 항목을 렌더링하는 함수
/>

🎸 기타