정산달력 연속 클릭 방어코드 추가

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

@@ -29,9 +29,12 @@ export const CalendarWrap = () => {
   
   const [lastMonth, setLastMonth] = useState<boolean>(false);
 
+  const [onActionCalendar, setOnActionCalendar] = useState<boolean>(true);
+
   const { mutateAsync: settlementsCalendar } = useSettlementsCalendarMutation();
 
   const callCalendar = () => {
+    
     let params: SettlementsCalendarParams = {
       mid: mid,
       yearMonth: yearMonth
@@ -72,20 +75,37 @@ export const CalendarWrap = () => {
       else{
         setLastMonth(true);
       }
+      setOnActionCalendar(true);
     });
   };
 
+  const initialList = () => {
+    // API 응답시간 문제로 초기화 한다
+    setScheduledList([]);
+    setCompletedList([]);
+    setScheduledDateList([]);
+    setCompletedDateList([]);
+    setOnActionCalendar(false);
+  };
+
   const onClickToMoveMonthPrev = () => {
-    let newYearMonth = moment(yearMonth).subtract(1, 'month').format('YYYYMM');
+    if(onActionCalendar){
-    setYearMonth(newYearMonth);
+      let newYearMonth = moment(yearMonth).subtract(1, 'month').format('YYYYMM');
+      setYearMonth(newYearMonth);
+      setYearMonth(newYearMonth);
+      initialList();
+    }
   };
   const onClickToMoveMonthNext = () => {
-    let maxYearMonth = moment().format('YYYYMM');
+    if(onActionCalendar){
-    let maxYearMonthValue = moment(maxYearMonth).format('YYYYMM');
+      let maxYearMonth = moment().format('YYYYMM');
-    let newYearMonth = moment(yearMonth).add(1, 'month').format('YYYYMM');
+      let maxYearMonthValue = moment(maxYearMonth).format('YYYYMM');
-    let newYearMonthValue = moment(newYearMonth).format('YYYYMM');
+      let newYearMonth = moment(yearMonth).add(1, 'month').format('YYYYMM');
-    if(parseInt(newYearMonthValue) <= parseInt(maxYearMonthValue)){
+      let newYearMonthValue = moment(newYearMonth).format('YYYYMM');
-      setYearMonth(newYearMonth);
+      if(parseInt(newYearMonthValue) <= parseInt(maxYearMonthValue)){
+        setYearMonth(newYearMonth);
+        initialList();
+      }
     }
   };
   
@@ -116,7 +136,7 @@ export const CalendarWrap = () => {
         
         <div className="month-group">
           <button 
-            className="month-btn" 
+            className={ `month-btn ${(!onActionCalendar)? 'disabled': ''}` }
             aria-label="이전 달"
             onClick={ onClickToMoveMonthPrev }
           >
@@ -127,7 +147,7 @@ export const CalendarWrap = () => {
           </button>
           <div className="month-title">{ moment(yearMonth).format('YYYY년 MM월') }</div>
           <button 
-            className={ `month-btn ${lastMonth? 'disabled': ''}` }
+            className={ `month-btn ${(lastMonth || !onActionCalendar)? 'disabled': ''}` }
             aria-label="다음 달"
             onClick={ onClickToMoveMonthNext }
           >

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

@@ -307,8 +307,7 @@ export const ListWrap = ({
     mid, periodType, 
     startDate, endDate,
     paymentMethod
-  ]);
+  ]);  
-  
 
   return (
     <>