From dc85e1343f6c07ee0c52ab7210495fb8e900aee3 Mon Sep 17 00:00:00 2001
From: suu3 <dev.suu3@gmail.com>
Date: Fri, 1 Mar 2024 00:27:11 +0900
Subject: [PATCH] =?UTF-8?q?[style]=20pagination=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 gatsby-browser.tsx                            |  24 +--
 package.json                                  |   2 +-
 pnpm-lock.yaml                                |  32 ----
 src/components/@core/layout.tsx               |  21 ++-
 src/components/@layout/footer.module.css      |   9 ++
 src/components/@layout/footer.tsx             |  14 ++
 src/components/@layout/post-list-template.tsx |  13 +-
 src/components/pagination.module.css          |  66 ++++++++
 src/components/pagination.tsx                 | 152 ++++++++++++++++++
 9 files changed, 273 insertions(+), 60 deletions(-)
 create mode 100644 src/components/@layout/footer.module.css
 create mode 100644 src/components/@layout/footer.tsx
 create mode 100644 src/components/pagination.module.css
 create mode 100644 src/components/pagination.tsx

diff --git a/gatsby-browser.tsx b/gatsby-browser.tsx
index ad3857e5..3a5dd6dd 100644
--- a/gatsby-browser.tsx
+++ b/gatsby-browser.tsx
@@ -36,24 +36,24 @@ export const shouldUpdateScroll = ({
   getSavedScrollPosition,
 }) => {
   // transition duration from `layout.js` * 1000 to get time in ms
-  const TRANSITION_DELAY = 0.3 * 1000 * 2
+  // const TRANSITION_DELAY = 0.3 * 1000 * 2
 
   // if it's a "normal" route
-  if (location.action === "PUSH") {
-    window.setTimeout(() => window.scrollTo(0, 0), TRANSITION_DELAY)
-  }
+  // if (location.action === "PUSH") {
+  //   window.setTimeout(() => window.scrollTo(0, 0), TRANSITION_DELAY)
+  // }
 
   // if we used the browser's forwards or back button
-  else {
-    // breaking change in shouldUpdateScroll browser API hook:
-    // https://github.com/gatsbyjs/gatsby/issues/23842
-    // looks like they fixed it in Gatsby v. 2.28.1
-    // https://github.com/gatsbyjs/gatsby/pull/27384
+  // else {
+  //   // breaking change in shouldUpdateScroll browser API hook:
+  //   // https://github.com/gatsbyjs/gatsby/issues/23842
+  //   // looks like they fixed it in Gatsby v. 2.28.1
+  //   // https://github.com/gatsbyjs/gatsby/pull/27384
 
-    const savedPosition = getSavedScrollPosition(location) || [0, 0]
+  //   const savedPosition = getSavedScrollPosition(location) || [0, 0]
 
-    window.setTimeout(() => window.scrollTo(...savedPosition), TRANSITION_DELAY)
-  }
+  //   window.setTimeout(() => window.scrollTo(...savedPosition), TRANSITION_DELAY)
+  // }
 
   return false
 }
diff --git a/package.json b/package.json
index c9d78ee2..074c4db2 100644
--- a/package.json
+++ b/package.json
@@ -1,3 +1,4 @@
+
 {
   "name": "gatsby-blog",
   "private": true,
@@ -28,7 +29,6 @@
     "lodash": "^4.17.21",
     "postcss": "^8.4.30",
     "prismjs": "^1.29.0",
-    "rc-pagination": "^3.6.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 371829e0..9b700ecd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -74,9 +74,6 @@ dependencies:
   prismjs:
     specifier: ^1.29.0
     version: 1.29.0
-  rc-pagination:
-    specifier: ^3.6.1
-    version: 3.6.1(react-dom@18.1.0)(react@18.1.0)
   react:
     specifier: ^18.1.0
     version: 18.1.0
@@ -3877,10 +3874,6 @@ packages:
   /ci-info@2.0.0:
     resolution: {integrity: sha512-5tK7EtrZ0N+OLFMthtqOj4fI2Jeb88C4CAZPu25LDVUgXJ0A3Js4PMGqrn0JU1W0Mh1/Z8wZzYPxqUrXeBboCQ==}
 
-  /classnames@2.3.2:
-    resolution: {integrity: sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==}
-    dev: false
-
   /cli-boxes@2.2.1:
     resolution: {integrity: sha512-y4coMcylgSCdVinjiDBuR8PCC2bLjyGTwEmPb9NHR/QaNU6EUOXcTY/s6VjGMD6ENSEaeQYHCY0GNGS5jfMwPw==}
     engines: {node: '>=6'}
@@ -9032,31 +9025,6 @@ packages:
       schema-utils: 3.3.0
       webpack: 5.88.2
 
-  /rc-pagination@3.6.1(react-dom@18.1.0)(react@18.1.0):
-    resolution: {integrity: sha512-R/sUnKKXx1Nm4kZfUKS3YKa7yEPF1ZkVB/AynQaHt+nMER7h9wPTfliDJFdYo+RM/nk2JD4Yc5QpUq8fIQHeug==}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.22.6
-      classnames: 2.3.2
-      rc-util: 5.37.0(react-dom@18.1.0)(react@18.1.0)
-      react: 18.1.0
-      react-dom: 18.1.0(react@18.1.0)
-    dev: false
-
-  /rc-util@5.37.0(react-dom@18.1.0)(react@18.1.0):
-    resolution: {integrity: sha512-cPMV8DzaHI1KDaS7XPRXAf4J7mtBqjvjikLpQieaeOO7+cEbqY2j7Kso/T0R0OiEZTNcLS/8Zl9YrlXiO9UbjQ==}
-    peerDependencies:
-      react: '>=16.9.0'
-      react-dom: '>=16.9.0'
-    dependencies:
-      '@babel/runtime': 7.22.6
-      react: 18.1.0
-      react-dom: 18.1.0(react@18.1.0)
-      react-is: 16.13.1
-    dev: false
-
   /rc@1.2.8:
     resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==}
     hasBin: true
diff --git a/src/components/@core/layout.tsx b/src/components/@core/layout.tsx
index 98294c29..0d014be0 100644
--- a/src/components/@core/layout.tsx
+++ b/src/components/@core/layout.tsx
@@ -1,22 +1,21 @@
 import * as React from "react"
 import Navigation from "../@layout/navigation"
+import Footer from "../@layout/footer"
 
 const Layout = ({ location, children }) => {
   const rootPath = `${__PATH_PREFIX__}`
   const isRootPath = location.pathname === rootPath
 
   return (
-    <div className="global-wrapper" data-is-root-path={isRootPath}>
-      <header className="global-header">
-        <Navigation />
-      </header>
-      {children}
-      <footer>
-        © {new Date().getFullYear()}, Built with
-        {` `}
-        <a href="https://www.gatsbyjs.com">Gatsby</a>
-      </footer>
-    </div>
+    <>
+      <div className="global-wrapper" data-is-root-path={isRootPath}>
+        <header className="global-header">
+          <Navigation />
+        </header>
+        {children}
+      </div>
+      <Footer />
+    </>
   )
 }
 
diff --git a/src/components/@layout/footer.module.css b/src/components/@layout/footer.module.css
new file mode 100644
index 00000000..79e89a92
--- /dev/null
+++ b/src/components/@layout/footer.module.css
@@ -0,0 +1,9 @@
+.footer-cls {
+  border-top: 1px solid #2a2b31;
+  margin-top: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 36px 10px 64px 10px;
+}
diff --git a/src/components/@layout/footer.tsx b/src/components/@layout/footer.tsx
new file mode 100644
index 00000000..9e7bd59f
--- /dev/null
+++ b/src/components/@layout/footer.tsx
@@ -0,0 +1,14 @@
+import React from "react"
+import { footerCls } from "./footer.module.css"
+
+const Footer = () => {
+  return (
+    <footer className={footerCls}>
+      © {new Date().getFullYear()}, Built with
+      {` `}
+      <a href="https://www.gatsbyjs.com">Gatsby</a>
+    </footer>
+  )
+}
+
+export default Footer
diff --git a/src/components/@layout/post-list-template.tsx b/src/components/@layout/post-list-template.tsx
index 9bf49222..58bc99c8 100644
--- a/src/components/@layout/post-list-template.tsx
+++ b/src/components/@layout/post-list-template.tsx
@@ -1,8 +1,9 @@
 import * as React from "react"
-import { Link, graphql, navigate, withPrefix } from "gatsby"
+import { Link, navigate } from "gatsby"
 import Layout from "../@core/layout"
 import PostListItem from "../post-list-item"
-import Pagination from "rc-pagination"
+// import Pagination from "rc-pagination"
+import Pagination from "../pagination"
 import CategoryMenu from "./category-menu"
 import TransitionMain from "./transition-main"
 import { POST_PER_PAGE } from "../../constants/page"
@@ -13,7 +14,6 @@ import {
   sideMenu,
   paginationCls,
 } from "./post-list-template.module.css"
-import Badge from "../badge"
 
 const PostListTemplate = ({ data, location, pageContext }) => {
   const { currentPage, totalCount } = pageContext
@@ -85,6 +85,11 @@ const PostListTemplate = ({ data, location, pageContext }) => {
           <ol className={ol}>{renderPosts}</ol>
           <hr />
           <Pagination
+            onPageChange={handlePageChange}
+            currentPage={currentPage}
+            totalPages={totalCount / POST_PER_PAGE}
+          />
+          {/* <Pagination
             itemRender={textItemRender}
             current={currentPage}
             className={paginationCls}
@@ -93,7 +98,7 @@ const PostListTemplate = ({ data, location, pageContext }) => {
             pageSize={POST_PER_PAGE}
             jumpNextIcon={"..."}
             jumpPrevIcon={"..."}
-          />
+          /> */}
         </TransitionMain>
       </div>
     </Layout>
diff --git a/src/components/pagination.module.css b/src/components/pagination.module.css
new file mode 100644
index 00000000..af4cbc36
--- /dev/null
+++ b/src/components/pagination.module.css
@@ -0,0 +1,66 @@
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 86px;
+}
+
+.btn {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  border: 1px solid #2a2b31;
+  color: #000000;
+
+  font-family: IBM Plex Mono;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 14px;
+  cursor: pointer;
+
+  &.prev-btn {
+    margin-right: 35px;
+  }
+
+  &.next-btn {
+    margin-left: 35px;
+  }
+
+  &.disabled {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+}
+
+.pages {
+  display: flex;
+  column-gap: 13px;
+  margin: 0;
+}
+
+.page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  width: 40px;
+  height: 40px;
+  border: 1px solid #2a2b31;
+  color: #000000;
+
+  font-family: IBM Plex Mono;
+  font-size: 14;
+  font-weight: 400;
+  line-height: 14;
+
+  cursor: pointer;
+
+  &.active {
+    background-color: #ff740f;
+  }
+
+  &.ellipsis {
+    cursor: default;
+    color: $ellipsis--color;
+  }
+}
diff --git a/src/components/pagination.tsx b/src/components/pagination.tsx
new file mode 100644
index 00000000..2ee85c86
--- /dev/null
+++ b/src/components/pagination.tsx
@@ -0,0 +1,152 @@
+import React from "react"
+import clsx from "clsx"
+import * as styles from "./pagination.module.css"
+
+type PaginationProps = {
+  pagesToShow?: number
+  currentPage: number
+  totalPages: number
+  onPageChange: (page: number) => void
+}
+
+const Pagination = ({
+  pagesToShow = 10,
+  currentPage,
+  totalPages,
+  onPageChange,
+}: PaginationProps) => {
+  const isFirstPage = currentPage === 1
+  const isLastPage = currentPage === totalPages
+  const ellipsis = "..."
+  const halfPagesToShow = Math.floor(pagesToShow / 2) // 5 => 2, 6 => 3
+
+  const handlePrevPage = () => {
+    if (currentPage > 1) onPageChange(currentPage - 1)
+  }
+
+  const handleNextPage = () => {
+    if (currentPage < totalPages) onPageChange(currentPage + 1)
+  }
+
+  const getPageNumbers = () => {
+    if (totalPages <= pagesToShow)
+      // 1. 전체 페이지 수가 보여줄 페이지 개수보다 작거나 같을 때 : ...없이 모든 페이지를 보여준다.
+      return Array.from({ length: totalPages }, (_, i) => i + 1)
+
+    // 2. 페이지 수가 pageToShow를 넘었을 때
+    if (currentPage <= halfPagesToShow)
+      // 2-1. 첫 번째 그룹 ex) 1 2 3 4 5 ... 40
+      return [
+        ...Array.from({ length: pagesToShow }, (_, i) => i + 1),
+        ellipsis,
+        totalPages,
+      ]
+    else if (currentPage > totalPages - halfPagesToShow)
+      // 2-2. 중간 그룹 ex) 1 ... 2 3 4 5 ... 40
+      return [
+        1,
+        ellipsis,
+        ...Array.from(
+          { length: pagesToShow },
+          (_, i) => totalPages - pagesToShow + i + 1
+        ),
+      ]
+    // 2-3. 마지막 그룹 ex) 1 ... 36 37 38 39 40
+    else
+      return [
+        1,
+        ellipsis,
+        ...Array.from(
+          { length: pagesToShow },
+          (_, i) => currentPage - halfPagesToShow + i
+        ),
+        ellipsis,
+        totalPages,
+      ]
+  }
+
+  const renderPages = getPageNumbers().map((page, i) => {
+    const isActive = page === currentPage
+    const isEllipsis = page === ellipsis
+    return (
+      <span
+        key={`${page} + ${i}`}
+        onClick={() => {
+          if (isEllipsis) return
+          onPageChange(Number(page))
+        }}
+        className={clsx(styles["page"], {
+          [styles["active"]]: isActive,
+          [styles["ellipsis"]]: isEllipsis,
+        })}
+      >
+        {page}
+      </span>
+    )
+  })
+
+  return (
+    <div className={styles["wrapper"]}>
+      <button
+        onClick={handlePrevPage}
+        className={clsx(styles["btn"], {
+          [styles["prevBtn"]]: true,
+          [styles["disabled"]]: isFirstPage,
+        })}
+      >
+        <svg
+          width="9"
+          height="16"
+          viewBox="0 0 9 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M8 15L0.999998 8L8 1"
+            stroke="#2A2B31"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+        {/* <Image
+          src={prevArrow}
+          width={24}
+          height={24}
+          alt="Prev Button"
+          
+        /> */}
+      </button>
+      <ol className={styles["pages"]}>{renderPages}</ol>
+      <button
+        className={clsx(styles["btn"], styles["nextBtn"], {
+          [styles["disabled"]]: isLastPage,
+        })}
+        onClick={handleNextPage}
+      >
+        <svg
+          width="9"
+          height="16"
+          viewBox="0 0 9 16"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M1 1L8 8L0.999999 15"
+            stroke="#2A2B31"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </svg>
+        {/* <Image
+          src={nextArrow}
+          width={24}
+          height={24}
+          alt="Next Button"
+          onClick={handleNextPage}
+        /> */}
+      </button>
+    </div>
+  )
+}
+
+export default Pagination