[#12] 정산페이지 레이아웃 작업 및 더미 데이터를 사용한 기능 구현

package.json

@@ -18,18 +18,24 @@
     "axios": "^1.6.5",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
+    "react-datepicker": "^4.25.0",
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.12",
+    "react-paginate": "^8.2.0",
     "react-router-dom": "^6.21.1",
     "recoil": "^0.7.7",
-    "recoil-persist": "^5.1.0"
+    "recoil-persist": "^5.1.0",
+    "semantic-ui-css": "^2.5.0",
+    "semantic-ui-react": "^2.1.5",
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@swc/core": "^1.3.102",
     "@swc/jest": "^0.2.29",
     "@tanstack/eslint-plugin-query": "^5.17.7",
     "@types/jest": "^29.5.11",
     "@types/react": "^18.2.43",
+    "@types/react-datepicker": "^4.19.5",
     "@types/react-dom": "^18.2.17",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",

src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx

@@ -0,0 +1,95 @@
+import React, { useEffect } from 'react';
+import ReactPaginate from 'react-paginate';
+import styled from '@emotion/styled';
+
+interface SettlementsPaginationProps {
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+}
+
+const SettlementsPagination: React.FC<SettlementsPaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange
+}) => {
+  useEffect(() => {
+    onPageChange(currentPage);
+  }, [currentPage, onPageChange]);
+
+  return (
+    <PaginationContainer>
+      <ReactPaginate
+        previousLabel={'<'}
+        nextLabel={'>'}
+        breakLabel={'...'}
+        breakClassName={'hidden'}
+        pageCount={totalPages}
+        marginPagesDisplayed={2}
+        pageRangeDisplayed={5}
+        onPageChange={(selectedItem) => onPageChange(selectedItem.selected + 1)}
+        containerClassName={'pagination'}
+        activeClassName={'active'}
+        pageClassName={'pagination-li'}
+        pageLinkClassName={'pagination-link'}
+        previousClassName={'pagination-previous'}
+        nextClassName={'pagination-next'}
+      />
+    </PaginationContainer>
+  );
+};
+
+export default SettlementsPagination;
+
+const PaginationContainer = styled.div`
+  margin-top: 20px;
+  margin-bottom: 20px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  .pagination {
+    display: flex;
+    align-items: center;
+  }
+
+  .pagination-li {
+    margin: 5px;
+    padding: 9.4px 0px;
+    border: 1px solid #FFFFFF;
+    border-radius: 4px;
+    cursor: pointer;
+  }
+
+  .pagination-link {
+    padding: 8px 12px;
+
+    color: #FFFFFF;
+    text-decoration: none;
+  }
+
+  .pagination-li.active {
+    padding: 9.4px 0px;
+    border: 3px solid #FFFFFF;
+    border-radius: 4px;
+
+    font-weight: bold;
+  }
+
+  .pagination-previous,
+  .pagination-next {
+    padding: 8px 12px;
+    color: #FFFFFF !important;
+    text-decoration: none;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+
+  .pagination-previous a,
+  .pagination-next a {
+    color: white !important;
+  }
+`;