init

src/components/common/Pagination/Pagination.js

@@ -0,0 +1,106 @@
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+import { useEffect, useState } from 'react';
+
+import PaginationIcon from '../../../assets/img/icon/icon-pagination.png';
+
+const Pagination = ({ postsPerPage, totalPosts, setCurrentPage, currentPage, pageLimit }) => {
+	const pageNumbers = [];
+	const maxPage = Math.ceil(totalPosts / postsPerPage);
+
+	const [blockNum, setBlockNum] = useState(0);
+
+	for (let i = 1; i <= maxPage; i++) {
+		pageNumbers.push(i);
+	}
+
+	const v = blockNum * pageLimit;
+	let pArr = pageNumbers.slice(v, pageLimit + v);
+
+	useEffect(() => {
+		setBlockNum(0);
+	}, [postsPerPage, totalPosts]);
+
+	const firstPage = () => {
+		setBlockNum(0);
+		setCurrentPage(1);
+	};
+
+	const lastPage = () => {
+		setBlockNum(Math.ceil(maxPage / pageLimit) - 1);
+		setCurrentPage(maxPage);
+	};
+
+	const prePage = () => {
+		if (currentPage <= 1) return;
+		else if (currentPage - 1 <= pageLimit * blockNum) {
+			setBlockNum(n => n - 1);
+		}
+		setCurrentPage(n => n - 1);
+	};
+
+	const nextPage = () => {
+		if (currentPage >= maxPage) return;
+		else if (pageLimit * (blockNum + 1) <= currentPage) {
+			setBlockNum(n => n + 1);
+		}
+		setCurrentPage(n => n + 1);
+	};
+
+	const clickPage = number => {
+		setCurrentPage(number);
+	};
+
+	return (
+		<>
+			<PaginationWrapper>
+				<Button $position="0" onClick={firstPage} />
+				<Button $position="-20px" onClick={prePage} />
+				{pArr.map(number => (
+					<PageNum
+						$state={currentPage === number ? 'on' : ''}
+						key={number}
+						onClick={() => {
+							clickPage(number);
+						}}>
+						{number}
+					</PageNum>
+				))}
+
+				<Button $position="-40px" onClick={nextPage} />
+				<Button $position="-60px" onClick={lastPage} />
+			</PaginationWrapper>
+		</>
+	);
+};
+
+export default Pagination;
+
+const PaginationWrapper = styled.div`
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	margin-top: 20px;
+`;
+const Button = styled.button`
+	background: url('${PaginationIcon}') no-repeat;
+	background-position: ${props => props.$position} 0;
+	width: 20px;
+	height: 20px;
+
+	&:hover {
+		background-position: ${props => props.$position} -20px;
+	}
+`;
+
+const PageNum = styled(Link)`
+	width: 20px;
+	height: 20px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: ${props => (props.$state === 'on' ? '#2c2c2c' : '#CECECE')};
+	&:hover {
+		color: #2c2c2c;
+	}
+`;