Merge pull request #55 from CoolPeace-yanolza/feature/#12

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

package.json

@@ -16,20 +16,28 @@
     "@tanstack/react-query": "^5.17.9",
     "@tanstack/react-query-devtools": "^5.17.9",
     "axios": "^1.6.5",
+    "date-fns": "^2.0.0-alpha.27",
+    "date-fns-tz": "^2.0.0",
     "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,99 @@
+import React, { useEffect } from 'react';
+import ReactPaginate from 'react-paginate';
+import styled from '@emotion/styled';
+
+import { SettlementsPaginationProps } from '@/types/settlements';
+
+const SettlementsPagination: React.FC<SettlementsPaginationProps> = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  totalItems
+}) => {
+  useEffect(() => {
+    onPageChange(currentPage);
+  }, [currentPage, onPageChange]);
+
+  return (
+    <PaginationContainer>
+      {totalItems > 0 && (
+        <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;
+
+    @media (max-width: 900px) {
+      font-size: 12px;
+    }
+  }
+
+  .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;
+  }
+`;