From f56f78cdf4cbd14d5dbb3efa86f21033255ca151 Mon Sep 17 00:00:00 2001
From: "Gabriel Ju Hyun, Yoon" <gabrielyoon7@gmail.com>
Date: Sat, 16 Sep 2023 14:30:11 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=ED=99=98?=
 =?UTF-8?q?=EA=B2=BD=EC=97=90=EC=84=9C=20=EC=B6=A9=EC=A0=84=EC=86=8C=20?=
 =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=8D=94=EB=B3=B4=EA=B8=B0=20?=
 =?UTF-8?q?=EB=B2=84=ED=8A=BC=EC=9D=B4=20=EB=B3=B4=EC=9D=B4=EC=A7=80=20?=
 =?UTF-8?q?=EC=95=8A=EB=8A=94=20=EB=AC=B8=EC=A0=9C=EB=A5=BC=20=ED=95=B4?=
 =?UTF-8?q?=EA=B2=B0=ED=95=9C=EB=8B=A4.=20(#753)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 기존의 더보기 버튼을 무한 스크롤로 대체

[#752]

* refactor: 충전소 리스트 요청에 대한 디바운스 적용 및 리스트가 끝남을 알리는 기능 구현

[#752]

* refactor: 불필요한 출력문 제거

[#752]

* refactor: 함수명 개선

[#752]

---------

Co-authored-by: Dain Lee <feb.dain@gmail.com>
---
 .../components/ui/StationList/StationList.tsx | 40 ++++++++++++++++---
 .../hooks/useFetchStationSummaries.ts         |  1 -
 2 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/ui/StationList/StationList.tsx b/frontend/src/components/ui/StationList/StationList.tsx
index 90f427e66..3e5c53c1d 100644
--- 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
index 711872d0f..0fb467c9a 100644
--- 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);
       });
     }