✨ 피드 조회 API

package.json

@@ -17,6 +17,7 @@
     "axios": "^1.6.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-infinite-scroller": "^1.2.6",
     "react-router-dom": "6.22.2",
     "zustand": "^4.5.2"
   },
@@ -29,6 +30,7 @@
     "@types/node": "^20.12.4",
     "@types/react": "^18.2.56",
     "@types/react-dom": "^18.2.19",
+    "@types/react-infinite-scroller": "^1.2.5",
     "@types/react-router-dom": "^5.3.3",
     "@typescript-eslint/eslint-plugin": "^7.0.2",
     "@typescript-eslint/parser": "^7.0.2",

src/app/providers/query-client.ts

@@ -1,4 +1,12 @@
 import { QueryClient, QueryClientConfig } from '@tanstack/react-query';
 
-const queryClientOptions: QueryClientConfig = {};
+const queryClientOptions: QueryClientConfig = {
+  defaultOptions: {
+    queries: {
+      staleTime: 10 * 60 * 1000, // 10 minutes
+      gcTime: 15 * 60 * 1000, // 15 minutes
+      refetchOnWindowFocus: false,
+    },
+  },
+};
 export const queryClient = new QueryClient(queryClientOptions);

src/main.tsx

@@ -4,9 +4,9 @@ import App from './app/App';
 import { initWebViewInfo } from './app/webview';
 
 async function enableMocking() {
-  if (import.meta.env.PROD) {
-    return;
-  }
+  // if (import.meta.env.PROD) {
+  //   return;
+  // }
 
   const { worker } = await import('@/app/mocks/browser');
 

src/pages/feed-main/ui/FeedMainPage.tsx

@@ -1,45 +1,10 @@
-import { Feed, FeedMainHeader } from '@/widgets';
-
-import './FeedMainPage.scss';
-
-const DUMMY_FEED = {
-  id: 1,
-  user: {
-    id: 1,
-    profileImage: 'https://picsum.photos/200/200',
-    name: '인생은 한 방',
-    content: 'bangdori',
-  },
-  title: 'Feed Title 1',
-  content: '오늘은 쇼핑을 엄청나게 해서 거지가 됐습니다',
-  images: [
-    {
-      id: 1,
-      imageUrl: 'https://picsum.photos/200/200',
-    },
-  ],
-
-  likeCount: 0,
-  commentCount: 0,
-
-  isLiked: false,
-  isBookmark: false,
-
-  createdAt: '2024-04-16 12:00:00',
-  updatedAt: '2024-04-16 12:00:00',
-};
+import { FeedMainHeader, FeedMainList } from '@/widgets';
 
 export const FeedMainPage = () => {
   return (
-    <main className='feed-main'>
+    <main className='feed-main-page'>
       <FeedMainHeader />
-      <section className='feed-list-section'>
-        <Feed feed={DUMMY_FEED} />
-        <Feed feed={DUMMY_FEED} />
-        <Feed feed={DUMMY_FEED} />
-        <Feed feed={DUMMY_FEED} />
-        <Feed feed={DUMMY_FEED} />
-      </section>
+      <FeedMainList />
     </main>
   );
 };

src/shared/consts/index.ts

@@ -0,0 +1 @@
+export { QUERY_KEYS } from './query-key/queryKeys';

src/shared/consts/query-key/queryKeys.ts

@@ -0,0 +1,4 @@
+export const QUERY_KEYS = Object.freeze({
+  feeds: 'feeds',
+  feed: 'feed-detail',
+});

src/widgets/feed-main-list/api/useInfinityFeeds.tsx

@@ -0,0 +1,49 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+import { axiosInstance } from '@/shared/axios';
+import { QUERY_KEYS } from '@/shared/consts';
+import { FeedList } from '@/widgets/feed/consts/type';
+
+interface FetchFeeds {
+  code: string;
+  data: {
+    currentPageNumber: number;
+    feeds: FeedList;
+    hasNext: boolean;
+    numberOfElements: number;
+    pageSize: number;
+  };
+}
+
+async function fetchFeeds(page: number): Promise<FetchFeeds> {
+  const { data } = await axiosInstance.get(`/feeds?page=${page}`);
+
+  return data;
+}
+
+export const useInfinityFeeds = () => {
+  const {
+    data: feeds,
+    fetchNextPage: fetchNextFeeds,
+    isFetching,
+    hasNextPage: hasNextFeeds,
+    isLoading,
+    isError,
+  } = useInfiniteQuery({
+    queryKey: [QUERY_KEYS.feeds],
+    queryFn: ({ pageParam }) => fetchFeeds(pageParam),
+    initialPageParam: 1,
+    getNextPageParam: (currentPages, _, lastPageParam) => {
+      return currentPages.data.hasNext ? lastPageParam + 1 : null;
+    },
+  });
+
+  return {
+    feeds,
+    fetchNextFeeds,
+    isFetching,
+    hasNextFeeds,
+    isLoading,
+    isError,
+  };
+};

src/widgets/feed-main-list/index.ts

@@ -0,0 +1 @@
+export { FeedMainList } from './ui/FeedMainList';

src/widgets/feed-main-list/ui/FeedMainList.scss

@@ -0,0 +1,13 @@
+@use '@/shared/styles/_index.scss' as *;
+
+.feed-list-section {
+  margin: 16px 0 24px;
+
+  .feed-wrapper:not(:last-child)::after {
+    content: '';
+    display: block;
+    height: 1px;
+    background-color: $gray2;
+    margin: 15px 0 14px;
+  }
+}

src/widgets/feed-main-list/ui/FeedMainList.tsx

@@ -0,0 +1,42 @@
+import InfiniteScroll from 'react-infinite-scroller';
+
+import { Feed } from '@/widgets';
+
+import { useInfinityFeeds } from '../api/useInfinityFeeds';
+import './FeedMainList.scss';
+
+export const FeedMainList = () => {
+  const {
+    feeds,
+    fetchNextFeeds,
+    isFetching,
+    hasNextFeeds,
+    isLoading,
+    isError,
+  } = useInfinityFeeds();
+
+  if (isLoading) {
+    return <p>Loading...</p>;
+  }
+
+  if (isError) {
+    return <p>Error</p>;
+  }
+
+  return (
+    <section className='feed-list-section'>
+      <InfiniteScroll
+        loadMore={() => {
+          if (!isFetching) fetchNextFeeds();
+        }}
+        hasMore={hasNextFeeds}
+      >
+        {feeds?.pages.map((pageData) => {
+          return pageData.data.feeds.map((feed) => (
+            <Feed key={feed.id} feed={feed} />
+          ));
+        })}
+      </InfiniteScroll>
+    </section>
+  );
+};

src/widgets/feed/consts/type.ts

@@ -2,7 +2,9 @@ export interface FeedProps {
   feed: Feed;
 }
 
-interface Feed {
+export type FeedList = Feed[];
+
+export interface Feed {
   id: number;
 
   user: User;

src/widgets/index.ts

@@ -1,2 +1,3 @@
 export { FeedMainHeader } from './feed-main-header';
+export { FeedMainList } from './feed-main-list';
 export { Feed } from './feed';

yarn.lock

@@ -882,6 +882,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-infinite-scroller@^1.2.5":
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/@types/react-infinite-scroller/-/react-infinite-scroller-1.2.5.tgz#7c770be59465f3aaa1b86377d792d52de5e74047"
+  integrity sha512-fJU1jhMgoL6NJFrqTM0Ob7tnd2sQWGxe2ESwiU6FZWbJK/VO/Er5+AOhc+e2zbT0dk5pLygqctsulOLJ8xnSzw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-router-dom@^5.3.3":
   version "5.3.3"
   resolved "https://registry.yarnpkg.com/@types/react-router-dom/-/react-router-dom-5.3.3.tgz#e9d6b4a66fcdbd651a5f106c2656a30088cc1e83"
@@ -3486,7 +3493,7 @@ pretty-format@^29.7.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
-prop-types@^15.8.1:
+prop-types@^15.5.8, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -3528,6 +3535,13 @@ react-dom@^18.2.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.0"
 
+react-infinite-scroller@^1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/react-infinite-scroller/-/react-infinite-scroller-1.2.6.tgz#8b80233226dc753a597a0eb52621247f49b15f18"
+  integrity sha512-mGdMyOD00YArJ1S1F3TVU9y4fGSfVVl6p5gh/Vt4u99CJOptfVu/q5V/Wlle72TMgYlBwIhbxK5wF0C/R33PXQ==
+  dependencies:
+    prop-types "^15.5.8"
+
 react-is@^16.13.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"