fix: 모바일 환경에서 충전소 리스트 더보기 버튼이 보이지 않는 문제를 해결한다. (#753)

* refactor: 기존의 더보기 버튼을 무한 스크롤로 대체 [#752] * refactor: 충전소 리스트 요청에 대한 디바운스 적용 및 리스트가 끝남을 알리는 기능 구현 [#752] * refactor: 불필요한 출력문 제거 [#752] * refactor: 함수명 개선 [#752] --------- Co-authored-by: Dain Lee <[email protected]>
woowacourse-teams · Sep 16, 2023 · f56f78c · f56f78c
1 parent 4c9209b
commit f56f78c
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 6 deletions.
diff --git a/frontend/src/components/ui/StationList/StationList.tsx b/frontend/src/components/ui/StationList/StationList.tsx
@@ -1,9 +1,14 @@
 import { css } from 'styled-components';
 
+import { useEffect, useRef } from 'react';
+
+import { debounce } from '@utils/debounce';
+
 import { useStationMarkers } from '@hooks/tanstack-query/station-markers/useStationMarkers';
 
-import ButtonNext from '@common/ButtonNext';
+import FlexBox from '@common/FlexBox';
 import List from '@common/List';
+import Text from '@common/Text';
 
 import EmptyStationsNotice from '@ui/StationList/EmptyStationsNotice';
 import StationSummaryCardSkeleton from '@ui/StationList/StationSummaryCardSkeleton';
@@ -27,6 +32,29 @@ const StationList = () => {
     hasNextPage,
   } = useFetchStationSummaries(filteredMarkers ?? []);
 
+  const loadMoreElementRef = useRef(null);
+  const loadMoreAfterDebounce = debounce(loadMore, 500);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting && hasNextPage) {
+          loadMoreAfterDebounce();
+        }
+      });
+    });
+
+    if (loadMoreElementRef.current) {
+      observer.observe(loadMoreElementRef.current);
+    }
+
+    return () => {
+      if (loadMoreElementRef.current) {
+        observer.unobserve(loadMoreElementRef.current);
+      }
+    };
+  }, [loadMore, hasNextPage]);
+
   const cachedStationSummaries = cachedStationSummariesActions.get();
 
   if (isFilteredMarkersLoading) {
@@ -61,10 +89,12 @@ const StationList = () => {
             ))}
           </>
         )}
-        {hasNextPage && (
-          <ButtonNext onClick={loadMore} fullWidth>
-            더 보 기
-          </ButtonNext>
+        {hasNextPage ? (
+          <div ref={loadMoreElementRef} />
+        ) : (
+          <FlexBox justifyContent="center" alignItems="center" my={3}>
+            <Text>주변의 모든 충전소를 불러왔습니다.</Text>
+          </FlexBox>
         )}
       </List>
     )

diff --git a/frontend/src/components/ui/StationList/hooks/useFetchStationSummaries.ts b/frontend/src/components/ui/StationList/hooks/useFetchStationSummaries.ts
@@ -46,7 +46,6 @@ export const useFetchStationSummaries = (markers: StationMarker[]) => {
       setIsLoading(true);
       fetchStationSummaries(uncachedStationSummaryIds).then((stationSummaries) => {
         cachedStationSummariesActions.add(stationSummaries);
-        console.log(cachedStationSummariesActions.get());
         setIsLoading(false);
       });
     }