[FEAT] Pagination 구현 (#24)

Hongmoon-gak · Jul 30, 2023 · 0fa5861 · 0fa5861
1 parent 74a3eda
commit 0fa5861
Show file tree

Hide file tree

Showing 8 changed files with 243 additions and 54 deletions.
diff --git a/job1/src/Main/Preview/DataSample.js b/job1/src/Main/Preview/DataSample.js
@@ -57,6 +57,17 @@ export const post = [
   {
     id: 6,
     title: "복리후생",
+    likes: "5",
+    date: "2023-09-01",
+    type: "community",
+    contents: "취약계층이 어쩌구 저쩌구..",
+    author: "author",
+    tags: "취업",
+    views: "45",
+  },
+  {
+    id: 7,
+    title: "복리후생",
     likes: "25",
     date: "2023-09-01",
     type: "community",
@@ -65,4 +76,81 @@ export const post = [
     tags: "취업",
     views: "45",
   },
+  {
+    id: 8,
+    title: "복리후생",
+    likes: "5",
+    date: "2023-09-01",
+    type: "community",
+    contents: "취약계층이 어쩌구 저쩌구..",
+    author: "author",
+    tags: "취업",
+    views: "45",
+  },
+  {
+    id: 9,
+    title: "복리후생",
+    likes: "5",
+    date: "2023-09-01",
+    type: "community",
+    contents: "취약계층이 어쩌구 저쩌구..",
+    author: "author",
+    tags: "취업",
+    views: "45",
+  },
+  {
+    id: 10,
+    title: "복리후생",
+    likes: "5",
+    date: "2023-09-01",
+    type: "community",
+    contents: "취약계층이 어쩌구 저쩌구..",
+    author: "author",
+    tags: "취업",
+    views: "45",
+  },
+  {
+    id: 11,
+    title: "복리후생",
+    likes: "5",
+    date: "2023-09-01",
+    type: "community",
+    contents: "취약계층이 어쩌구 저쩌구..",
+    author: "author",
+    tags: "취업",
+    views: "45",
+  },
+  {
+    id: 12,
+    title: "복리후생",
+    likes: "5",
+    date: "2023-09-01",
+    type: "community",
+    contents: "취약계층이 어쩌구 저쩌구..",
+    author: "author",
+    tags: "취업",
+    views: "45",
+  },
+  {
+    id: 13,
+    title: "복리후생",
+    likes: "5",
+    date: "2023-09-01",
+    type: "community",
+    contents: "취약계층이 어쩌구 저쩌구..",
+    author: "author",
+    tags: "취업",
+    views: "45",
+  },
+  {
+    id: 14,
+    title: "복리후생",
+    likes: "5",
+    date: "2023-09-01",
+    type: "community",
+    contents: "취약계층이 어쩌구 저쩌구..",
+    author: "author",
+    tags: "취업",
+    views: "45",
+  },
 ];
diff --git a/job1/src/Main/Preview/Pagination.js b/job1/src/Main/Preview/Pagination.js
@@ -0,0 +1,56 @@
+import "./Preview.css";
+
+function Pagination({ total, limit, page, setPage }) {
+  const numPages = Math.ceil(total / limit);
+
+  return (
+    <div className="pageContainer">
+      <button
+        className="pageBtn"
+        id="setPageBtn"
+        onClick={() => setPage(page - 5)}
+        disabled={page < 6}
+      >
+        &lt;&lt;
+      </button>
+      <button
+        className="pageBtn"
+        id="setPageBtn"
+        onClick={() => setPage(page - 1)}
+        disabled={page === 1}
+      >
+        &lt;
+      </button>
+      {Array(numPages)
+        .fill()
+        .map((_, i) => (
+          <button
+            className="pageBtn"
+            key={i + 1}
+            onClick={() => setPage(i + 1)}
+            aria-current={page === i + 1 ? "page" : null}
+          >
+            {i + 1}
+          </button>
+        ))}
+      <button
+        className="pageBtn"
+        id="setPageBtn"
+        onClick={() => setPage(page + 1)}
+        disabled={page === numPages}
+      >
+        &gt;
+      </button>
+      <button
+        className="pageBtn"
+        id="setPageBtn"
+        onClick={() => setPage(page + 5)}
+        disabled={page > numPages - 5}
+      >
+        &gt;&gt;
+      </button>
+    </div>
+  );
+}
+
+export default Pagination;
diff --git a/job1/src/Main/Preview/Preview.css b/job1/src/Main/Preview/Preview.css
@@ -1,5 +1,4 @@
 @import url("https://fonts.googleapis.com/css2?family=DM+Sans&family=Noto+Sans+KR:wght@500&family=Noto+Serif+KR&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=DM+Sans&family=Noto+Sans+KR:wght@500&family=Noto+Serif+KR&display=swap");
 
 hr {
   margin: 0 auto;
@@ -194,3 +193,44 @@ hr {
 
   text-decoration: none;
 }
+
+/**Pagination*/
+.pageContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 3.5rem;
+}
+
+.pageBtn {
+  border: 1px solid #979797;
+  border-radius: 50%;
+  background: #fff;
+  font-size: 1rem;
+  width: 3.125rem;
+  height: 3.125rem;
+  margin: 0 0.25rem;
+
+  text-align: center;
+  font-family: "DM Sans", "Noto Sans KR", sans-serif;
+  font-size: 1.25rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.5rem; /* 120% */
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &[aria-current] {
+    background: #31892f;
+    color: #fff;
+    font-weight: bold;
+    cursor: revert;
+    transform: revert;
+  }
+}
+
+#setPageBtn {
+  background: #f0f4f0;
+}
diff --git a/job1/src/Main/Preview/Preview.js b/job1/src/Main/Preview/Preview.js
@@ -4,18 +4,29 @@ import { useState } from "react";
 import "./Preview.css";
 
 import { post } from "./DataSample";
+import { useLocation } from "react-router-dom";
+
+import Pagination from "./Pagination";
 
 function Preview(props) {
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+  const query = searchParams.get("query");
+
   const [section, setSection] = useState("hot");
+  const [page, setPage] = useState(1);
+  const limit = 7;
+  const offset = (page - 1) * limit;
+
   const item = post.filter((data) => {
     if (data.type === props.type) {
       return data;
     }
   });
   const itemSearch = item.filter((data) => {
     if (
-      (data.title.toLowerCase().includes(props.query) ||
-        data.contents.toLowerCase().includes(props.query)) &&
+      (data.title.toLowerCase().includes(query) ||
+        data.contents.toLowerCase().includes(query)) &&
       data.type === props.type
     ) {
       return data;
@@ -31,10 +42,10 @@ function Preview(props) {
     .sort(function (a, b) {
       return new Date(b.date) - new Date(a.date);
     })
-    .slice(0, 6)
+    .slice(offset, offset + limit)
     .map((data) => {
       return (
-        <div className="cArtView">
+        <div className="cArtView" key={data.id}>
           <PrevArt
             title={data.title}
             type={props.type}
@@ -80,16 +91,20 @@ function Preview(props) {
     );
   };
   const selectBottom = () => {
-    return props.view !== "home" ? (
+    return props.view === "detail" ? (
+      <Pagination
+        total={itemSearch.length}
+        limit={limit}
+        page={page}
+        setPage={setPage}
+      />
+    ) : props.view === "home" ? null : (
       <div className="previewBottom">
-        <Link
-          to={`./${props.type}?query=${props.query}`}
-          className="moreResult"
-        >
+        <Link to={`/${props.type}?query=${query}`} className="moreResult">
           검색 결과 더 보기
         </Link>
       </div>
-    ) : null;
+    );
   };
   const selectBtn = () => {
     return props.view === "home" ? (

diff --git a/job1/src/View/Board.js b/job1/src/View/Board.js
@@ -1,15 +1,15 @@
-
 import Search from "./Search";
 import MoreInfo from "../Main/MoreInfo";
+import Preview from "../Main/Preview/Preview";
 
-function Board(){
-    return(
-        <div>
-            <Search />
-            board
-            <MoreInfo />
-        </div>
-    )
+function Board() {
+  return (
+    <div>
+      <Search />
+      <Preview typeTitle="게시판" type="community" view="detail" />
+      <MoreInfo />
+    </div>
+  );
 }
 
-export default Board;
+export default Board;
diff --git a/job1/src/View/Laws.js b/job1/src/View/Laws.js
@@ -1,15 +1,15 @@
-
 import Search from "./Search";
 import MoreInfo from "../Main/MoreInfo";
+import Preview from "../Main/Preview/Preview";
 
-function Laws(){
-    return(
-        <div>
-            <Search />
-            laws
-            <MoreInfo />
-        </div>
-    )
+function Laws() {
+  return (
+    <div>
+      <Search />
+      <Preview typeTitle="법률" type="laws" view="detail" />
+      <MoreInfo />
+    </div>
+  );
 }
 
-export default Laws;
+export default Laws;
diff --git a/job1/src/View/News.js b/job1/src/View/News.js
@@ -1,15 +1,15 @@
-
 import Search from "./Search";
 import MoreInfo from "../Main/MoreInfo";
+import Preview from "../Main/Preview/Preview";
 
-function News(){
-    return(
-        <div>
-            <Search />
-            news
-            <MoreInfo />
-        </div>
-    )
+function News() {
+  return (
+    <div>
+      <Search />
+      <Preview typeTitle="새소식" type="news" view="detail" />
+      <MoreInfo />
+    </div>
+  );
 }
 
-export default News;
+export default News;
diff --git a/job1/src/View/SearchResult.js b/job1/src/View/SearchResult.js
@@ -1,23 +1,13 @@
 import Preview from "../Main/Preview/Preview";
 import Search from "./Search";
 
-import { useLocation } from "react-router-dom";
-
 function SearchResult() {
-  const location = useLocation();
-  const searchParams = new URLSearchParams(location.search);
-  const query = searchParams.get("query");
   return (
     <div>
       <Search />
-      <Preview typeTitle="법률" resultNum="30" type="laws" query={query} />
-      <Preview typeTitle="새 소식" resultNum="30" type="news" query={query} />
-      <Preview
-        typeTitle="게시판"
-        resultNum="30"
-        type="community"
-        query={query}
-      />
+      <Preview typeTitle="법률" resultNum="30" type="laws" />
+      <Preview typeTitle="새 소식" resultNum="30" type="news" />
+      <Preview typeTitle="게시판" resultNum="30" type="community" />
     </div>
   );
 }