feat: infinite scroll just working on frontend bottomsheet (#136)

* feat: infinite scroll just working on frontend in bottomsheet

* chore: delete log

src/app/map/[mapId]/place-list-bottom-sheet.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { forwardRef, Fragment, useEffect, useState } from 'react'
+import { forwardRef, useEffect, useState } from 'react'
 
 import type { FilterIdsType } from './page'
 
@@ -11,6 +11,7 @@ import PlaceListItem from '@/components/place/place-list-item'
 import useFetch from '@/hooks/use-fetch'
 import { APIError } from '@/models/api/index'
 import type { PlaceType } from '@/models/api/place'
+import { useInfiniteScroll } from '@/hooks/use-infinite-scroll'
 import { api } from '@/utils/api'
 
 interface PlaceListBottomSheetProps {
@@ -38,6 +39,11 @@ const PlaceListBottomSheet = forwardRef<
       (selectedFilter?.category !== 'all' ? 1 : 0) +
       (selectedFilter?.tags.length ?? 0)
 
+    const { data: slicedPlaceList, listRef } = useInfiniteScroll<PlaceType>({
+      totalData: placeList,
+      itemsPerPage: 10,
+    })
+
     const getIsLike = (place: PlaceType): boolean => {
       if (typeof userId === 'undefined') return false
 
@@ -119,17 +125,20 @@ const PlaceListBottomSheet = forwardRef<
             필터
           </FilterButton>
         </div>
-        {placeList.length > 0 ? (
-          <div className="no-scrollbar flex-1 overflow-y-scroll overscroll-contain px-5">
+        {slicedPlaceList.length > 0 ? (
+          <div
+            ref={listRef}
+            className="no-scrollbar flex-1 overflow-y-scroll overscroll-contain px-5"
+          >
             <ul
               ref={(element) => {
                 if (typeof ref !== 'function' && ref?.current) {
                   ref.current[1] = element as HTMLUListElement
                 }
               }}
             >
-              {placeList.map((place) => (
-                <Fragment key={`bottom-sheet-${place.place.kakaoPlace.id}`}>
+              {slicedPlaceList.map((place, index) => (
+                <li key={`bottom-sheet-${place.place.kakaoPlace.id}-${index}`}>
                   <PlaceListItem
                     placeId={place.place.kakaoPlace.id}
                     address={place.place.kakaoPlace.address}
@@ -153,7 +162,7 @@ const PlaceListBottomSheet = forwardRef<
                     className="first:pt-1"
                   />
                   <hr className="my-[2px] h-[1px] border-0 bg-neutral-600 last:hidden" />
-                </Fragment>
+                </li>
               ))}
             </ul>
           </div>

src/components/place/place-list-item.tsx

@@ -50,7 +50,7 @@ const PlaceListItem = ({
             <ProxyImage
               key={`${placeId}-${image}-${index}`}
               src={image}
-              className="aspect-square w-[calc(33.4%-8px)] rounded-md object-cover"
+              className="aspect-square w-[calc(33.4%-8px)] min-w-[calc(33.4%-8px)] rounded-md object-cover"
               alt={`${name}${index}`}
             />
           ))}

src/hooks/use-infinite-scroll.ts

@@ -0,0 +1,70 @@
+import debounce from 'lodash.debounce'
+import { useState, useEffect, useCallback, useRef } from 'react'
+
+interface UseInfiniteScrollProps<T> {
+  totalData: T[]
+  itemsPerPage: number
+  threshold?: number
+}
+
+const INITIAL_PAGE = 1
+
+export const useInfiniteScroll = <T extends any>({
+  totalData,
+  itemsPerPage,
+  threshold = 100,
+}: UseInfiniteScrollProps<T>) => {
+  const [data, setData] = useState<T[]>(totalData.slice(0, itemsPerPage))
+  const [page, setPage] = useState(INITIAL_PAGE)
+  const [isLoading, setIsLoading] = useState(false)
+  const [hasMore, setHasMore] = useState(totalData.length > itemsPerPage)
+  const listRef = useRef<HTMLDivElement | null>(null)
+
+  const loadMoreData = useCallback(() => {
+    if (isLoading || !hasMore) return
+
+    setIsLoading(true)
+    setTimeout(() => {
+      const startIndex = page * itemsPerPage
+      const endIndex = startIndex + itemsPerPage
+      const newData = totalData.slice(startIndex, endIndex)
+
+      if (newData.length === 0) {
+        setHasMore(false)
+      } else {
+        setData((prevData) => [...prevData, ...newData])
+        setPage((prevPage) => prevPage + 1)
+      }
+
+      setIsLoading(false)
+    }, 100)
+  }, [page, itemsPerPage, totalData, isLoading, hasMore])
+
+  const handleScroll = useCallback(() => {
+    if (!listRef.current) return
+
+    const { scrollTop, scrollHeight, clientHeight } = listRef.current
+    if (
+      scrollHeight - scrollTop <= clientHeight + threshold &&
+      !isLoading &&
+      hasMore
+    ) {
+      loadMoreData()
+    }
+  }, [isLoading, hasMore, loadMoreData, threshold])
+
+  useEffect(() => {
+    const ref = listRef.current
+    if (!ref) return
+
+    const debouncedHandleScroll = debounce(handleScroll, 300)
+
+    ref.addEventListener('scroll', debouncedHandleScroll)
+
+    return () => {
+      ref.removeEventListener('scroll', debouncedHandleScroll)
+    }
+  }, [handleScroll])
+
+  return { data, isLoading, listRef }
+}