[#15] react pdf 무한 스크롤을 구현합니다.

packages/react-pdf/src/components/Pages.tsx

@@ -1,6 +1,7 @@
-import {PropsWithChildren, memo, useState} from 'react'
+import {PropsWithChildren, memo, useCallback, useState} from 'react'
 
 import {usePdfContext} from '../contexts/pdf'
+import useInfiniteScroll from '../hooks/useInfiniteScroll'
 import {useIsomorphicLayoutEffect} from '../hooks/useIsomorphicLayoutEffect'
 import {PDFPageProxy} from '../pdfjs-dist/types/pdfjs'
 import {AnnotationLayer} from './layer/Annotation'
@@ -10,6 +11,7 @@ import {PageSvg} from './page/Svg'
 
 export interface PagesProps {
     renderMode?: 'canvas' | 'svg'
+    lazyLoading?: boolean
 }
 
 export const Page = memo(function Page({renderMode, pageNumber}: PagesProps & {pageNumber: number}) {
@@ -38,15 +40,30 @@ export const Page = memo(function Page({renderMode, pageNumber}: PagesProps & {p
     )
 })
 
-export const Pages = memo(function Pages({renderMode, children}: PropsWithChildren<PagesProps>) {
+export const Pages = memo(function Pages({renderMode, lazyLoading, children}: PropsWithChildren<PagesProps>) {
     const {pdf} = usePdfContext()
+    const pageNumbers = Array.from({length: pdf.numPages}, (_, index) => index + 1)
+    const [renderPages, setRenderPages] = useState<number[]>(pdf.numPages > 0 ? [1] : [])
 
-    // TODO : 무한 스크롤
+    const handleIntersect = useCallback(() => {
+        setRenderPages((prev) => {
+            if (prev.length < pageNumbers.length) {
+                return [...prev, prev.length + 1]
+            }
+            return prev
+        })
+    }, [pageNumbers])
+
+    const ref = useInfiniteScroll(handleIntersect, {threshold: 0.5})
 
     return (
         <>
-            {Array.from({length: pdf.numPages}).map((_, index) => {
-                return <Page key={index} renderMode={renderMode} pageNumber={index + 1} />
+            {(lazyLoading ? renderPages : pageNumbers).map((pageNum) => {
+                return (
+                    <div key={pageNum} ref={lazyLoading && renderPages.length === pageNum ? ref : null}>
+                        <Page renderMode={renderMode} pageNumber={pageNum} />
+                    </div>
+                )
             })}
             {children}
         </>

packages/react-pdf/src/components/PdfViewer.tsx

@@ -54,7 +54,7 @@ export function PDFViewer({pdfUrl, renderMode = 'canvas', header, footer, option
     return (
         <PDFProvider pdf={pdf} options={options}>
             {header}
-            <Pages renderMode={renderMode} />
+            <Pages renderMode={renderMode} lazyLoading={options?.lazyLoading || true} />
             {footer}
         </PDFProvider>
     )

packages/react-pdf/src/hooks/useInfiniteScroll.ts

@@ -0,0 +1,29 @@
+import {useEffect, useCallback, useMemo, useRef} from 'react'
+
+export default function useInfiniteScroll(onIntersect: () => void, options?: IntersectionObserverInit) {
+    const ref = useRef<HTMLDivElement | null>(null)
+
+    const handleIntersect = useCallback(
+        ([entry]: IntersectionObserverEntry[]) => {
+            if (entry.isIntersecting) {
+                onIntersect()
+            }
+        },
+        [onIntersect],
+    )
+
+    const observer = useMemo(() => {
+        return new IntersectionObserver(handleIntersect, options)
+    }, [handleIntersect, options])
+
+    useEffect(() => {
+        if (ref.current) {
+            observer.observe(ref.current)
+        }
+        return () => {
+            observer.disconnect()
+        }
+    }, [ref, observer])
+
+    return ref
+}