feat: 소식 페이지 무한 스크롤 추가

depromeet · Aug 27, 2024 · a4db487 · a4db487
1 parent 748fd30
commit a4db487
Showing 1 changed file with 31 additions and 20 deletions.
diff --git a/features/news/components/organisms/news-list.tsx b/features/news/components/organisms/news-list.tsx
@@ -1,22 +1,28 @@
+/* eslint-disable */
 'use client';
 
 import { useRef } from 'react';
 
 import { PullToRefresh } from '@/components/atoms';
-import { HeaderBar } from '@/components/molecules';
+import { HeaderBar, InfiniteScroller } from '@/components/molecules';
 import { TimeLineCard, TimeLineContent } from '@/features/main';
 import { css } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
-import { NewsItem } from '../../types';
+import { NewsContent } from '../../types';
 import { EmptyNews, NewsItemWrapper, NewsItemWrapperProps } from '../molecules';
 import { FindMemberButton, FollowingListLinkButton } from '../atoms';
+import { useNewsData } from '../../hooks';
 
 export const NewsList = () => {
   const ptrRef = useRef(null);
-  const data: Array<NewsItem> = [];
-  const isEmpty = data.length === 0;
-  const lastItemIndex = data.length - 1;
+  const { data: newsData, fetchNextPage, hasNextPage } = useNewsData();
+
+  if (!newsData) return null;
+
+  const contents = newsData.pages.flatMap(({ data }) => data.content);
+  const isEmpty = contents.length === 0;
+  const lastItemIndex = contents.length - 1;
 
   return isEmpty ? (
     <section className={emptySectionStyle}>
@@ -38,26 +44,31 @@ export const NewsList = () => {
           ref={ptrRef}
           onRefresh={() => console.log('refreshing')}
         />
-        <ol className={listStyles}>
-          {data.map((content, index) => {
-            const { wrapperProps, cardContent } = getPropsObjects(content);
-            return (
-              <NewsItemWrapper
-                key={cardContent.memoryId}
-                {...wrapperProps}
-                isLast={lastItemIndex === index}
-              >
-                <TimeLineCard content={cardContent} isViewDate={false} />
-              </NewsItemWrapper>
-            );
-          })}
-        </ol>
+        <InfiniteScroller
+          isLastPage={!hasNextPage}
+          onIntersect={() => fetchNextPage()}
+        >
+          <ol className={listStyles}>
+            {contents.map((content, index) => {
+              const { wrapperProps, cardContent } = getPropsObjects(content);
+              return (
+                <NewsItemWrapper
+                  key={cardContent.memoryId}
+                  {...wrapperProps}
+                  isLast={lastItemIndex === index}
+                >
+                  <TimeLineCard content={cardContent} isViewDate={false} />
+                </NewsItemWrapper>
+              );
+            })}
+          </ol>
+        </InfiniteScroller>
       </div>
     </>
   );
 };
 
-const getPropsObjects = (content: NewsItem) => {
+const getPropsObjects = (content: NewsContent) => {
   const {
     memberId,
     memberNickName,