Merge pull request #77 from CoolPeace-yanolza/feature/#70

[#70] 정산페이지 api 연결

package.json

@@ -31,6 +31,7 @@
     "recoil-persist": "^5.1.0",
     "semantic-ui-css": "^2.5.0",
     "semantic-ui-react": "^2.1.5",
+    "styled-components": "^6.1.8",
     "xlsx": "^0.18.5"
   },
   "devDependencies": {

src/api/index.ts

@@ -18,3 +18,5 @@ export { default as getLocalCouponUsage } from './lib/getLocalCouponUsage';
 export { default as getMonthStatus } from './lib/getMonthStatus';
 export { default as getEmailValid } from './lib/getEmailValid';
 export { default as postSignUp } from './lib/postSignUp';
+export { default as getSettlements } from './lib/getSettlements';
+export { default as getSettlemented } from './lib/getSettlemented';

src/api/lib/getSettlemented.ts

@@ -0,0 +1,15 @@
+import { SettlementedBefore } from '@/types/settlements';
+import { instance } from '..';
+
+const getSettlemented = async (accommodation_id: number): Promise<SettlementedBefore> => {
+  try {
+    const response = await instance.get(`/v1/settlements/${accommodation_id}/summary`);
+
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching settlementedBefore:');
+    throw error;
+  }
+};
+
+export default getSettlemented;

src/api/lib/getSettlements.ts

@@ -0,0 +1,43 @@
+import { SettlementedList } from '@/types/settlements';
+import { instance } from '..';
+
+const getSettlements = async (
+  accommodationId: number,
+  start?: string,
+  end?: string,
+  order?: string,
+  page?: number,
+  pageSize?: number 
+): Promise<SettlementedList> => {
+
+  // 유효성 확인 및 기본값 설정
+  const validStart = start || 'defaultStartDate';
+  const validEnd = end || 'defaultEndDate';
+  const validOrder = order || 'defaultOrder';
+
+  // 파라미터 객체에서 undefined 값 제거
+  const params = {
+    ...(validStart && { start: validStart }),
+    ...(validEnd && { end: validEnd }),
+    ...(validOrder && { order: validOrder }),
+    ...(page && { page: page }), 
+    ...(pageSize && { pageSize: pageSize }) 
+  };
+
+  try {
+    const response = await instance.get(`/v1/settlements/${accommodationId}`, {
+      params,
+    });
+
+    console.log(response);
+    console.log(response.data);
+
+
+    return response.data;
+  } catch (error) {
+    console.error('Error fetching settlements:');
+    throw error;
+  }
+};
+
+export default getSettlements;

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

@@ -1,18 +1,27 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import ReactPaginate from 'react-paginate';
 import styled from '@emotion/styled';
 
-import { SettlementsPaginationProps } from '@/types/settlements';
+import { SettlementsPaginationProps, SelectedItem } from '@/types/settlements';
+import theme from '@styles/theme';
 
 const SettlementsPagination: React.FC<SettlementsPaginationProps> = ({
   currentPage,
   totalPages,
   onPageChange,
   totalItems
 }) => {
+  const [internalCurrentPage, setInternalCurrentPage] = useState(currentPage);
+
   useEffect(() => {
-    onPageChange(currentPage);
-  }, [currentPage, onPageChange]);
+    setInternalCurrentPage(currentPage);
+  }, [currentPage]);
+
+  const handlePageClick = (selectedItem: SelectedItem) => {
+    const selectedPage = selectedItem.selected + 1;
+    setInternalCurrentPage(selectedPage);
+    onPageChange(selectedPage);
+  };
 
   return (
     <PaginationContainer>
@@ -25,7 +34,8 @@ const SettlementsPagination: React.FC<SettlementsPaginationProps> = ({
           pageCount={totalPages}
           marginPagesDisplayed={2}
           pageRangeDisplayed={5}
-          onPageChange={(selectedItem) => onPageChange(selectedItem.selected + 1)}
+          forcePage={internalCurrentPage - 1}
+          onPageChange={handlePageClick}
           containerClassName={'pagination'}
           activeClassName={'active'}
           pageClassName={'pagination-li'}
@@ -61,7 +71,7 @@ const PaginationContainer = styled.div`
     border-radius: 4px;
     cursor: pointer;
 
-    @media (max-width: 900px) {
+    ${theme.response.tablet} {
       font-size: 12px;
     }
   }
@@ -96,4 +106,4 @@ const PaginationContainer = styled.div`
   .pagination-next a {
     color: white !important;
   }
-`;
+`;