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);
       });
     }