From 2c48f4bd0cd4b2a4d291a6e017881b29f3871ceb Mon Sep 17 00:00:00 2001 From: "wonsic3686@gmail.com" Date: Wed, 26 Jun 2024 08:18:35 +0900 Subject: [PATCH 1/3] =?UTF-8?q?feat(Sprint5):=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EB=84=A4=EC=9D=B4=EC=85=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../items/PaginationBar/PaginatinoBar.css | 33 +++++++++++ .../items/PaginationBar/PaginationBar.jsx | 55 +++++++++++++++++++ src/components/items/SailItems/SailItems.jsx | 14 +++++ src/pages/items/Items.css | 4 ++ 4 files changed, 106 insertions(+) create mode 100644 src/components/items/PaginationBar/PaginatinoBar.css create mode 100644 src/components/items/PaginationBar/PaginationBar.jsx diff --git a/src/components/items/PaginationBar/PaginatinoBar.css b/src/components/items/PaginationBar/PaginatinoBar.css new file mode 100644 index 000000000..a2cb0298f --- /dev/null +++ b/src/components/items/PaginationBar/PaginatinoBar.css @@ -0,0 +1,33 @@ +.pagination-bar { + display: flex; + align-items: center; + justify-content: center; +} + +.btn-pagination { + border: 1px solid #e5e7eb; + border-radius: 50%; + width: 40px; + height: 40px; + color: #6b7280; + font-weight: 600; + font-size: 16px; + display: flex; + align-items: center; + justify-content: center; + margin-right: 20px; +} + +.btn-pagination:last-child { + margin-right: 0; +} + +.btn-pagination:disabled { + cursor: default; + opacity: 0.5; +} + +.btn-pagination.active { + background-color: var(--blue); + color: #fff; +} diff --git a/src/components/items/PaginationBar/PaginationBar.jsx b/src/components/items/PaginationBar/PaginationBar.jsx new file mode 100644 index 000000000..4060b546a --- /dev/null +++ b/src/components/items/PaginationBar/PaginationBar.jsx @@ -0,0 +1,55 @@ +import React from 'react'; +import './PaginatinoBar.css'; +import { ReactComponent as IconArrowLeft } from '../../../assets/images/icons/arrow_left.svg'; +import { ReactComponent as IconArrowRight } from '../../../assets/images/icons/arrow_right.svg'; + +function PaginationBar({ totalPageNum, activePageNum, onPageChange }) { + const maxVisiblePages = 5; + let startPage; + + if (totalPageNum <= maxVisiblePages) { + startPage = 1; + } else { + startPage = Math.max(activePageNum - Math.floor(maxVisiblePages / 2), 1); + startPage = Math.min(startPage, totalPageNum - maxVisiblePages + 1); + } + + const pages = Array.from( + { length: Math.min(maxVisiblePages, totalPageNum - startPage + 1) }, + (_, i) => startPage + i + ); + return ( + <> +
+ + {/* 반복 */} + {pages.map((page) => ( + + ))} + +
+ + ); +} + +export default PaginationBar; diff --git a/src/components/items/SailItems/SailItems.jsx b/src/components/items/SailItems/SailItems.jsx index 4582f9b6e..5e5d761ea 100644 --- a/src/components/items/SailItems/SailItems.jsx +++ b/src/components/items/SailItems/SailItems.jsx @@ -4,6 +4,7 @@ import { ReactComponent as IconSort } from '../../../assets/images/icons/ic_sort import { useEffect, useState } from 'react'; import { getProducts } from '../../../pages/api/Items'; import Item from '../Item/Item'; +import PaginationBar from '../PaginationBar/PaginationBar'; const getPageSize = () => { const width = window.innerWidth; @@ -26,7 +27,12 @@ function SailItems() { const [keyword, setKeyword] = useState(''); // 검색 const [isDropdownVisible, setIsDropdownVisible] = useState(false); + // 페이지네이션 + const [totalPageNum, setTotalPageNum] = useState(); + const handlePageChange = (pageNumber) => { + setPage(pageNumber); + }; const handleClickDropdown = () => { setIsDropdownVisible(!isDropdownVisible); }; @@ -44,6 +50,7 @@ function SailItems() { const fetchItemList = async ({ order, page, pageSize, keyword }) => { let products = await getProducts({ order, page, pageSize, keyword }); setItemList(products.list); + setTotalPageNum(Math.ceil(products.totalCount / pageSize)); }; useEffect(() => { @@ -112,6 +119,13 @@ function SailItems() { ))} +
+ +
); diff --git a/src/pages/items/Items.css b/src/pages/items/Items.css index 1ff75f2ee..fc3ae5148 100644 --- a/src/pages/items/Items.css +++ b/src/pages/items/Items.css @@ -101,6 +101,10 @@ grid-template-columns: repeat(2, 1fr); } +.wrapper-pagination-bar { + padding: 40px 0 80px; +} + /* Item */ .wrapper-item { overflow: hidden; From 06306ab632fe643e82679fe8be643102232e5f82 Mon Sep 17 00:00:00 2001 From: "wonsic3686@gmail.com" Date: Wed, 26 Jun 2024 09:07:53 +0900 Subject: [PATCH 2/3] =?UTF-8?q?feat(Sprint5):=20=EB=84=A4=EB=B9=84?= =?UTF-8?q?=EA=B2=8C=EC=9D=B4=EC=85=98=20=ED=97=A4=EB=8D=94=20NavLink=20?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../navigationBar/NavigationBar.css | 16 +++++---- .../navigationBar/NavigationBar.jsx | 36 +++++++++++++------ 2 files changed, 36 insertions(+), 16 deletions(-) diff --git a/src/components/navigationBar/NavigationBar.css b/src/components/navigationBar/NavigationBar.css index d4f2845ca..e43bbd72d 100644 --- a/src/components/navigationBar/NavigationBar.css +++ b/src/components/navigationBar/NavigationBar.css @@ -12,33 +12,37 @@ border-bottom: 1px solid #dfdfdf; } -.navbarLeft { +.navbar-left { display: flex; align-items: center; } -.navbarHomeLogo { +.navbar-home-logo { width: 153px; } -.navbarMenu { +.navbar-menu { margin: 0 15px; text-decoration: none; } -.navbarMenu ol { +.navbar-menu ol { list-style-type: none; padding-left: 0; } -.navbarMenuItem { +.navbar-menu-item { display: inline-block; margin: 10px; font-size: 18px; font-weight: bold; } -.navbarMenuItem.active { +.navbar-menu-item.active { + color: var(--blue); +} + +.nav-bar-menu-link.active { color: var(--blue); } diff --git a/src/components/navigationBar/NavigationBar.jsx b/src/components/navigationBar/NavigationBar.jsx index ccbd95479..9b616613d 100644 --- a/src/components/navigationBar/NavigationBar.jsx +++ b/src/components/navigationBar/NavigationBar.jsx @@ -1,29 +1,45 @@ -import { useEffect, useState } from 'react'; +import { NavLink } from 'react-router-dom'; import imgPandaMarketLogo from '../../assets/images/logo/panda-market-logo.png'; import './NavigationBar.css'; function NavigationBar() { return (
-
+
판다마켓 홈 -