[style] pagination 수정

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
 }

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"
   },

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 />
+    </>
   )
 }
 

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;
+}

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

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>

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;
+  }
+}