페이지네이션 기능을 추가합니다.

apps/web/app/(articles)/_api/get-articles.ts

@@ -6,9 +6,7 @@ export const getArticles = (params: ArticlesQueryParamsType): Promise<ArticlesDT
   const newSearchParams = new URLSearchParams();
 
   Object.entries(params).forEach(([key, value]) => {
-    if (value) {
-      newSearchParams.append(key, `${value}`);
-    }
+    newSearchParams.append(key, `${value}`);
   });
 
   return http.get({

apps/web/app/(articles)/_hooks/use-get-articles.tsx

@@ -1,4 +1,4 @@
-import type { QueryOptions, UseQueryResult } from "@tanstack/react-query";
+import type { UseQueryResult } from "@tanstack/react-query";
 import { useQuery } from "@tanstack/react-query";
 import type { ArticlesDTO, ArticlesQueryParamsType } from "../_types/articles.types";
 import { queryKeys } from "../_constants/querykeys";
@@ -8,7 +8,8 @@ export const useGetArticles = (
   params: ArticlesQueryParamsType = {
     offset: 0,
     limit: 10,
-  },
-  options?: QueryOptions<ArticlesDTO, Error, ArticlesDTO, readonly ["articles", ArticlesQueryParamsType]>
+  }
 ): UseQueryResult<ArticlesDTO | undefined, Error> =>
-  useQuery(queryKeys.articles(params), () => getArticles(params), options);
+  useQuery(queryKeys.articles(params), () => getArticles(params), {
+    suspense: true,
+  });

apps/web/app/page.tsx → apps/web/app/[page]/page.tsx

@@ -1,14 +1,14 @@
 import { dehydrate } from "@tanstack/query-core";
-import getQueryClient from "../lib/get-query-clinet";
-import Hydrate from "../lib/query-hydrate";
-import { DEFAULT_ARTICLES_LIMIT, DEFAULT_ARTICLES_OFFSET } from "./(articles)/_constants";
-import { queryKeys } from "./(articles)/_constants/querykeys";
-import ArticleList from "./_components/article-list";
-import FeedToggle from "./_components/feed-toggle";
-import HomeBanner from "./_components/home-banner";
-import { getArticles } from "./(articles)/_api/get-articles";
-import Pagination from "./_components/pagination";
-import type { ArticlesQueryParamsType } from "./(articles)/_types/articles.types";
+import { Suspense } from "react";
+import getQueryClient from "../../lib/get-query-clinet";
+import Hydrate from "../../lib/query-hydrate";
+import { DEFAULT_ARTICLES_LIMIT, DEFAULT_ARTICLES_OFFSET } from "../(articles)/_constants";
+import { queryKeys } from "../(articles)/_constants/querykeys";
+import ArticleList from "../_components/article-list";
+import FeedToggle from "../_components/feed-toggle";
+import HomeBanner from "../_components/home-banner";
+import { getArticles } from "../(articles)/_api/get-articles";
+import type { ArticlesQueryParamsType } from "../(articles)/_types/articles.types";
 
 export default async function Page(): Promise<JSX.Element> {
   const queryClient = getQueryClient();
@@ -30,8 +30,9 @@ export default async function Page(): Promise<JSX.Element> {
           <div className="row">
             <div className="col-md-9">
               <FeedToggle />
-              <ArticleList />
-              <Pagination />
+              <Suspense fallback={<div className="article-preview">loading...</div>}>
+                <ArticleList />
+              </Suspense>
             </div>
 
             <div className="col-md-3">

apps/web/app/_components/article-list.tsx

@@ -1,13 +1,21 @@
 "use client";
 
-import { Suspense } from "react";
+import { usePathname } from "next/navigation";
 import { useGetArticles } from "../(articles)/_hooks/use-get-articles";
+import { DEFAULT_ARTICLES_LIMIT } from "../(articles)/_constants";
+import Pagination from "./pagination";
 
 export default function ArticleList(): JSX.Element {
-  const { data } = useGetArticles();
+  const pathname = usePathname();
+  const currentPage = Number(pathname.split("/").filter(value => value !== "")[0]);
+
+  const { data } = useGetArticles({
+    offset: currentPage - 1,
+    limit: DEFAULT_ARTICLES_LIMIT,
+  });
 
   return (
-    <Suspense fallback={<>Loading...</>}>
+    <>
       {data?.articles.map(({ slug, author, title, description, favoritesCount, updatedAt, tagList }) => {
         const { image, username } = author;
 
@@ -45,6 +53,8 @@ export default function ArticleList(): JSX.Element {
           </div>
         );
       })}
-    </Suspense>
+
+      {data ? <Pagination articlesCount={data.articlesCount} currentPage={currentPage} /> : null}
+    </>
   );
 }

apps/web/app/_components/gnb.tsx

@@ -2,12 +2,12 @@ export default function Gnb(): JSX.Element {
   return (
     <nav className="navbar navbar-light">
       <div className="container">
-        <a className="navbar-brand" href="/">
+        <a className="navbar-brand" href="/1">
           conduit
         </a>
         <ul className="nav navbar-nav pull-xs-right">
           <li className="nav-item">
-            <a className="nav-link active" href="/">
+            <a className="nav-link active" href="/1">
               Home
             </a>
           </li>

apps/web/app/_components/pagination.tsx

@@ -1,16 +1,32 @@
-export default function Pagination(): JSX.Element {
+"use client";
+
+import Link from "next/link";
+import { DEFAULT_ARTICLES_LIMIT } from "../(articles)/_constants";
+
+interface PaginationProps {
+  articlesCount: number;
+  currentPage: number;
+}
+
+export default function Pagination({ articlesCount, currentPage }: PaginationProps): JSX.Element {
+  const articlesPageCount = Math.ceil(articlesCount / DEFAULT_ARTICLES_LIMIT);
+
+  const pages = Array.from({ length: articlesPageCount }, (_, page) => page + 1);
+
   return (
     <ul className="pagination">
-      <li className="page-item active">
-        <a className="page-link" href="/">
-          1
-        </a>
-      </li>
-      <li className="page-item">
-        <a className="page-link" href="/">
-          2
-        </a>
-      </li>
+      {pages.map(page => (
+        <li className={`page-item ${page === currentPage ? "active" : ""}`} key={page}>
+          <Link
+            className="page-link"
+            href={{
+              pathname: `${page}`,
+            }}
+          >
+            {page}
+          </Link>
+        </li>
+      ))}
     </ul>
   );
 }

apps/web/lib/providers.tsx

@@ -5,7 +5,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import type { PropsWithChildren } from "react";
 
-export default function Providers({ children }: PropsWithChildren) {
+export default function Providers({ children }: PropsWithChildren): JSX.Element {
   const [client] = useState(() => new QueryClient());
 
   return (

apps/web/package.json

@@ -16,7 +16,6 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-error-boundary": "^4.0.11",
-    "react-ionicons": "^4.2.1",
     "ui": "workspace:*"
   },
   "devDependencies": {

packages/ui/index.tsx

@@ -1,3 +1,2 @@
 // component exports
 export * from "./button";
-export * from "./header";