[#104] 이전 정산 내역 쿼리 사용

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

@@ -55,10 +55,28 @@ const Settlemented = () => {
     }
   };
 
+  const getCurrentEndDate = () => {
+    const today = new Date();
+    if (today.getDate() <= 10) {
+      return new Date(today.getFullYear(), today.getMonth() - 2, 31).toISOString().split('T')[0];
+    } else if (today.getDate() > 10 && today.getDate() <= 31) {
+      return new Date(today.getFullYear(), today.getMonth() - 1, 31).toISOString().split('T')[0];
+    } else {
+      return today.toISOString().split('T')[0];
+    }
+  };
+
+  let adjustedStartDate: string | null = null;
+  if (startDate !== null) {
+    const startDateObj = new Date(startDate);
+    startDateObj.setDate(startDateObj.getDate() + 1);
+    adjustedStartDate = startDateObj.toISOString().split('T')[0];
+  }
+
   const { data: settlements } = useGetSettlements(
     accommodation.id,
-    startDate ? startDate.toISOString().split('T')[0] : '2000-01-01',
-    endDate ? endDate.toISOString().split('T')[0] : new Date().toISOString().split('T')[0],
+    adjustedStartDate ? adjustedStartDate : '2000-01-01',
+    endDate ? endDate.toISOString().split('T')[0] : getCurrentEndDate(),
     orderBy,
     currentPage - 1,
     itemsPerPage
@@ -70,7 +88,6 @@ const Settlemented = () => {
         ...data,
         NO: (currentPage - 1) * itemsPerPage + index + 1,
       }));
-
       setCurrentData(newSettlementData);
       setTotalItems(settlements.total_settlement_count);
       setTotalPages(settlements.total_page_count);
@@ -93,12 +110,12 @@ const Settlemented = () => {
       const response = await getSettlements(
         accommodation.id,
         startDate ? startDate.toISOString().split('T')[0] : '2000-01-01',
-        endDate ? endDate.toISOString().split('T')[0] : new Date().toISOString().split('T')[0],
+        endDate ? endDate.toISOString().split('T')[0] : getCurrentEndDate(),
         orderBy,
         0,
         totalItems
       );
-  
+
       const allData = response.settlement_responses.map((data: SettlementedItem, index: number) => ({
         ...data,
         NO: index + 1,
@@ -108,13 +125,17 @@ const Settlemented = () => {
       const workSheet = XLSX.utils.json_to_sheet(allData);
 
       XLSX.utils.book_append_sheet(workBook, workSheet, "Sheet1");
-
       XLSX.writeFile(workBook, "SettlementedDownload.xlsx");
     } catch (error) {
       console.error('Error fetching all settlements data for download:', error);
     }
   };
 
+
+  useEffect(() => {
+    setCurrentPage(1);
+  }, [accommodation]);
+
   return (
     <Container>
       <SettlementedHeader>

src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/SettlementsPopup/index.tsx

@@ -3,6 +3,7 @@ import styled from '@emotion/styled';
 import { SettlementsPopupProps } from '@/types/settlements';
 
 const SettlementsPopup: React.FC<SettlementsPopupProps> = ({ isOpen, onClose }) => {
+
   return (
     <PopupContainer isOpen={isOpen}>
       <PopupHeader>
@@ -28,22 +29,28 @@ const SettlementsPopup: React.FC<SettlementsPopupProps> = ({ isOpen, onClose })
   );
 };
 
-const PopupContainer = styled.div<{ isOpen: boolean }>`
-  display: ${({ isOpen }) => (isOpen ? 'block' : 'none')};
-  position: fixed;
-  top: 50%;
-  left: 50%;
+const PopupContainer = styled.div<{ isOpen: boolean; style?: React.CSSProperties }>`
+  position: absolute;
 
   padding: 20px;
+  margin-top: 22px;
+  margin-left: 10px;
   border-radius: 6px;
 
-  transform: translate(-50%, -50%);
+  width: 500px;
+
+  display: ${({ isOpen }) => (isOpen ? 'block' : 'none')};
+  top: 50%;
+  left: 100%;
+
+  transform: translateY(-50%);
   background-color: white;
   box-shadow: 0px 2px 64px rgba(0, 0, 0, 0.1);
 
   z-index: 90;
 `;
 
+
 const PopupHeader = styled.div`
   display: flex;
   flex-direction: row;

src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx

@@ -86,6 +86,7 @@ const MiddleText = styled.div`
 const InformationContainer = styled.div`
   display: flex;
   align-items: center;
+  position: relative;
 `;
 
 const InformationIcon = styled.img`

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

@@ -43,10 +43,24 @@ const SettlementsSetting = () => {
   };
 
   const handleButtonClick = () => {
+    const currentDate = new Date();
+    const currentMonth = currentDate.getMonth();
+    const currentYear = currentDate.getFullYear();
+
     if (startDate && endDate) {
-        setSettlementsDate({ startDate, endDate });
+      if (
+        (startDate.getFullYear() === currentYear && startDate.getMonth() === currentMonth) ||
+        endDate.getFullYear() > currentYear || 
+        (endDate.getFullYear() === currentYear && endDate.getMonth() >= currentMonth) ||
+        (startDate > endDate)
+      ) {
+        alert("조회할 기간을 다시 선택해주세요.");
+        return;
+      }
+      setSettlementsDate({ startDate, endDate });
     }
   };
+
 
   const DatePickerCustom = createGlobalStyle`
   .react-datepicker {

src/components/Settlements/SettlementsRight/SettlementsBefore/SettlementsBeforeUpdate/index.error.tsx

@@ -0,0 +1,136 @@
+import { FallbackProps } from 'react-error-boundary';
+import styled from '@emotion/styled';
+
+import theme from '@styles/theme';
+import errorIcon from '@assets/icons/ic-error.svg';
+import reloadIcon from '@assets/icons/ic-reload.svg';
+
+const ErrorFallback = ({ resetErrorBoundary }: FallbackProps) => {
+  return (
+    <Container>
+      <ErrorContainer>
+      <ErrorIcon
+        src={errorIcon}
+        alt="에러 발생"
+      />
+      <ErrorWord>이전 정산 내역을 불러올 수 없습니다.</ErrorWord>
+      </ErrorContainer>
+      <ReLoadButton onClick={resetErrorBoundary}>
+        <ReloadIcon
+          src={reloadIcon}
+          alt="에러 발생"
+        />
+        다시 시도 하기
+      </ReLoadButton>
+    </Container>
+  );
+};
+
+export default ErrorFallback;
+
+const Container = styled.div`
+  width: 100%;
+  height: 72.67px;
+
+  margin-top: 20px;
+  border: 1px solid white;
+  border-radius: 5px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  background-color: white;
+
+
+  ${theme.response.tablet} {
+    padding: 15px 15px;
+    border-radius: 5px;
+
+    background-color: #f2f4f5;
+  }
+`;
+
+const ErrorContainer = styled.div`
+  display: flex;
+  align-items: center;
+`;
+
+const ErrorIcon = styled.img`
+  width: 35px;
+  height: 35px;
+
+  margin-right: 3px;
+
+  ${theme.response.tablet} {
+    width: 30px;
+    height: 30px;
+  }
+
+  @media (max-width: 592px) {
+    width: 25px;
+    height: 25px;
+  }
+`;
+
+const ErrorWord = styled.span`
+  font-size: 12px;
+  font-weight: 500;
+
+  @media (max-width: 592px) {
+    font-size: 10px;
+  }
+
+  @media (max-width: 526px) {
+    font-size: 8px;
+  }
+`;
+
+const ReLoadButton = styled.button`
+  margin-left: 3px;
+  border: none;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  background-color: transparent;
+  font-size: 10px;
+  text-align: center;
+
+  transition: all 0.5s;
+
+  &:hover {
+    color: gray;
+  }
+
+  ${theme.response.tablet} {
+    margin: 0;
+  }
+
+  @media (max-width: 592px) {
+    font-size: 8px;
+  }
+
+  @media (max-width: 526px) {
+    font-size: 6px;
+  }
+`;
+
+const ReloadIcon = styled.img`
+  width: 20px;
+  height: 20px;
+
+  margin-right: 3px;
+
+  ${theme.response.tablet} {
+    width: 15px;
+    height: 15px;
+  }
+
+  @media (max-width: 592px) {
+    width: 22px;
+    height: 12px;
+  }
+`;

src/components/Settlements/SettlementsRight/SettlementsBefore/SettlementsBeforeUpdate/index.loading.tsx

@@ -0,0 +1,81 @@
+import styled from '@emotion/styled';
+import Skeleton from 'react-loading-skeleton';
+import 'react-loading-skeleton/dist/skeleton.css';
+
+import theme from '@styles/theme';
+
+const Loading = () => {
+  return (
+    <Container>
+      <ContentsWrapper>
+        <ContentsTop />
+      </ContentsWrapper>
+    </Container>
+  );
+};
+
+export default Loading;
+
+const Container = styled.div`
+width: 100%;
+height: 72.67px;
+
+margin-top: 20px;
+padding-top: 15px;
+border: 1px solid white;
+border-radius: 5px;
+
+display: flex;
+flex-direction: column;
+justify-content: center;
+align-items: center;
+
+background-color: white;
+
+  ${theme.response.tablet} {    
+    border-radius: 5px;
+
+    gap: 15px;
+
+    background-color: #f2f4f5;
+  }
+`;
+
+const BaseSkeleton = styled(Skeleton)`
+  width: 100%;
+
+  border-radius: 16px;
+
+  background-color: #f2f4f5;
+`;
+
+const ContentsWrapper = styled.div`
+  width: 100%;
+
+  border-radius: 16px;
+
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+
+  ${theme.response.tablet} {
+    border-radius: 10px;
+
+    gap: 5px;
+  }
+`;
+
+const ContentsTop = styled(BaseSkeleton)`
+  padding-top: 10px;
+  margin-top: auto;
+  margin-bottom: auto;
+
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+
+  ${theme.response.tablet} {
+    width: 100%;
+    height: 50px;
+  }
+`;