컴포넌트
Infinite Scroll List
스크롤 끝을 IntersectionObserver 센티넬로 감지해 다음 배치를 로드하고, 각 항목이 순차적으로 페이드+슬라이드 인 하는 무한 스크롤 리스트. 로딩 스피너·에러 재시도·리스트 끝 안내를 포함하며 데모는 로컬 생성 데이터를 사용한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/InfiniteScrollList-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| loadMore | (page: number) => Promise<InfiniteScrollPage> | 내부 기본 더미 로더 | 다음 페이지(배치)를 로드하는 함수. 0부터 시작하는 page 인덱스를 받아 items 배열과 hasMore를 반환한다. 미제공 시 내부 기본 더미 로더가 동작한다. |
| initialItems | InfiniteScrollItem[] | [] | 최초 렌더 시 미리 채워둘 항목. 비어 있으면 마운트 후 첫 배치를 자동 로드한다. |
| pageSize | number | 5 | 기본 로더가 한 배치에 생성하는 항목 수이자 배치 내 stagger 계산 기준. |
| maxPages | number | 6 | 기본 로더가 로드할 최대 페이지 수(무한 로드 방지). |
| loadDelayMs | number | 700 | 기본 로더의 배치 로딩 지연(ms). 로딩 UX 표현용. |
| maxHeight | number | 320 | 내부 스크롤 컨테이너의 최대 높이(px). |
| ariaLabel | string | "무한 스크롤 리스트" | 리스트 feed 영역의 접근성 레이블. |