정산달력

src/entities/settlement/ui/calandar-wrap.tsx

@@ -1,16 +1,16 @@
 import moment from 'moment';
+import { useEffect, useState } from 'react';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useSettlementsCalendarMutation } from '../api/use-settlements-calendar-mutation';
-import { useEffect, useState } from 'react';
+import { CalendarAmountRow } from './calandar-amount-row';
+import { CalendarSettlementItem } from './calendar-settlement-item'; 
+import { CalendarGrid } from './calendar-grid';
 import { 
   SettlementDays,
   SettlementsCalendarParams,
   SettlementsCalendarResponse,
   SettlementStatus
 } from '../model/types';
-import { CalendarAmountRow } from './calandar-amount-row';
-import { CalendarSettlementItem } from './calendar-settlement-item'; 
-import { CalendarGrid } from './calendar-grid';
 
 export const CalendarWrap = () => {
   moment.locale('ko');
@@ -24,6 +24,7 @@ export const CalendarWrap = () => {
   const [scheduledDateList, setScheduledDateList] = useState<Array<number>>([]);
   const [completedDateList, setCompletedDateList] = useState<Array<number>>([]);
   
+  const [lastMonth, setLastMonth] = useState<boolean>(false);
 
   const { mutateAsync: settlementsCalendar } = useSettlementsCalendarMutation();
 
@@ -57,6 +58,17 @@ export const CalendarWrap = () => {
         setCompletedList(completedArr);
         setCompletedDateList(completedDateArr);
       }
+    }).finally(() => {
+      let maxYearMonth = moment().format('YYYY-MM');
+      let maxYearMonthValue = moment(maxYearMonth).format('YYYYMM');
+      let newYearMonth = moment(yearMonth).add(1, 'month').format('YYYY-MM');
+      let newYearMonthValue = moment(newYearMonth).format('YYYYMM');
+      if(parseInt(newYearMonthValue) <= parseInt(maxYearMonthValue)){
+        setLastMonth(false);
+      }
+      else{
+        setLastMonth(true);
+      }
     });
   };
 
@@ -101,7 +113,7 @@ export const CalendarWrap = () => {
           </button>
           <div className="month-title">{ moment(yearMonth).format('YYYY년 MM월') }</div>
           <button 
-            className="month-btn" 
+            className={ `month-btn ${lastMonth? 'disabled': ''}` }
             aria-label="다음 달"
             onClick={ onClickToMoveMonthNext }
           >