feat:BLOG-67 페이지 넘기는 컴포넌트 추가

src/app/_components/Pagination/index.module.scss

@@ -0,0 +1,4 @@
+.pagination_wrapper {
+  display: flex;
+  gap: 10px;
+}

src/app/_components/Pagination/index.tsx

@@ -0,0 +1,43 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname, useSearchParams } from "next/navigation";
+import styles from "./index.module.scss";
+
+export const Pagination = () => {
+  const searchParams = useSearchParams();
+  const pathname = usePathname();
+  const currentPage = Number(searchParams.get("currentPage"));
+  const pageSize = Number(searchParams.get("pageSize"));
+
+  return (
+    <ul className={styles.pagination_wrapper}>
+      <li>
+        <Link
+          href={{
+            pathname: `${pathname}`,
+            query: {
+              currentPage: currentPage - 1,
+              pageSize,
+            },
+          }}
+        >
+          이전 페이지
+        </Link>
+      </li>
+      <li>
+        <Link
+          href={{
+            pathname: `${pathname}`,
+            query: {
+              currentPage: currentPage + 1,
+              pageSize,
+            },
+          }}
+        >
+          다음 페이지
+        </Link>
+      </li>
+    </ul>
+  );
+};

src/app/_components/Posts/index.tsx

@@ -1,5 +1,15 @@
 import React, { PropsWithChildren } from "react";
 import styles from "./index.module.scss";
-export const Posts = ({ children }: PropsWithChildren) => (
-  <section className={styles["post_wrapper"]}>{children}</section>
+import Cards from "@/app/_components/Cards";
+import { Pagination } from "@/app/_components/Pagination";
+import { PostType } from "@/types";
+
+interface PostsProps {
+  posts: PostType[];
+}
+export const Posts = ({ posts }: PostsProps) => (
+  <section className={styles["post_wrapper"]}>
+    <Cards articles={posts} />
+    <Pagination />
+  </section>
 );

src/app/posts/[category]/[subCategory]/page.tsx

@@ -1,4 +1,3 @@
-import Cards from "@/app/_components/Cards";
 import { Posts } from "@/app/_components/Posts";
 import { getPosts } from "@/app/api/dato/getPosts";
 import { PostType, SearchParamsType } from "@/types";
@@ -67,9 +66,7 @@ export default async function PostsPageFilteredBySubCategory({
     <>
       <h2 className={styles.heading}>{`${subCategory}`}</h2>
 
-      <Posts>
-        <Cards articles={posts} />
-      </Posts>
+      <Posts posts={posts} />
     </>
   );
 }

src/app/posts/[category]/page.tsx

@@ -1,4 +1,3 @@
-import Cards from "@/app/_components/Cards";
 import { Posts } from "@/app/_components/Posts";
 import { getPosts } from "@/app/api/dato/getPosts";
 import { PostType, SearchParamsType } from "@/types";
@@ -58,9 +57,7 @@ export default async function PostsPageFilteredByCategory({
     <>
       <h2 className={styles.heading}>{`${category}`}</h2>
 
-      <Posts>
-        <Cards articles={posts} />
-      </Posts>
+      <Posts posts={posts} />
     </>
   );
 }

src/app/posts/page.tsx

@@ -1,4 +1,3 @@
-import Cards from "@/app/_components/Cards";
 import { getPosts } from "@/app/api/dato/getPosts";
 import { Metadata } from "next";
 import { PostType, SearchParamsType } from "@/types";
@@ -27,9 +26,7 @@ export default async function Home({ searchParams }: SearchParamsType) {
   return (
     <>
       <h2 className={styles.heading}>{`게시글 전체 보기`}</h2>
-      <Posts>
-        <Cards articles={posts} />
-      </Posts>
+      <Posts posts={posts} />
     </>
   );
 }