dynamodb pagination 추가

유저조회 우편 페이징 처리
hook 수정

src/components/common/Pagination/DynamoPagination.js

@@ -0,0 +1,56 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const DynamoPagination = ({
+							  pagination,
+							  onNextPage,
+							  onPrevPage,
+							  className
+						  }) => {
+	return (
+		<PaginationButtons className={className}>
+			<PaginationButton
+				onClick={onPrevPage}
+				disabled={pagination.currentPage === 1}
+			>
+				이전
+			</PaginationButton>
+			<PageInfo>{pagination.currentPage}</PageInfo>
+			<PaginationButton
+				onClick={onNextPage}
+				disabled={!pagination.hasNextPage}
+			>
+				다음
+			</PaginationButton>
+		</PaginationButtons>
+	);
+};
+
+const PaginationButtons = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 10px;
+`;
+
+const PaginationButton = styled.button`
+  background-color: ${props => props.disabled ? '#e0e0e0' : '#6c7eb7'};
+  color: ${props => props.disabled ? '#a0a0a0' : 'white'};
+  border: none;
+  padding: 6px 12px;
+  border-radius: 4px;
+  font-size: 12px;
+  cursor: ${props => props.disabled ? 'not-allowed' : 'pointer'};
+  transition: background-color 0.2s;
+
+  &:hover {
+    background-color: ${props => props.disabled ? '#e0e0e0' : '#5a6a9b'};
+  }
+`;
+
+const PageInfo = styled.div`
+  font-size: 12px;
+  font-weight: 500;
+  color: #666;
+`;
+
+export default DynamoPagination;

src/components/common/index.js

@@ -11,6 +11,7 @@ import DynamicModal from './modal/DynamicModal';
 import CustomConfirmModal from './modal/CustomConfirmModal';
 import Modal from './modal/Modal';
 import Pagination from './Pagination/Pagination';
+import DynamoPagination from './Pagination/DynamoPagination';
 import ViewTableInfo from './Table/ViewTableInfo';
 import Loading from './Loading';
 import CDivider from './CDivider';
@@ -40,5 +41,6 @@ export { DateTimeInput,
 	ViewTableInfo,
 	Loading,
 	CDivider,
-	TopButton
+	TopButton,
+	DynamoPagination
 };