정산달력 버그 픽스

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

@@ -33,6 +33,7 @@ export const CalendarWrap = () => {
   const [completedList, setCompletedList] = useState<Array<SettlementDays | undefined>>([]);
   const [scheduledDateList, setScheduledDateList] = useState<Array<number>>([]);
   const [completedDateList, setCompletedDateList] = useState<Array<number>>([]);
+  const [filterDate, setFilterDate] = useState<number>(0);
   
   const [lastMonth, setLastMonth] = useState<boolean>(false);
 
@@ -105,6 +106,7 @@ export const CalendarWrap = () => {
       let newYearMonth = moment(yearMonth).subtract(1, 'month').format('YYYYMM');
       setYearMonth(newYearMonth);
       setYearMonth(newYearMonth);
+      setFilterDate(0);
       initialList();
     }
   };
@@ -116,10 +118,14 @@ export const CalendarWrap = () => {
       let newYearMonthValue = moment(newYearMonth).format('YYYYMM');
       if(parseInt(newYearMonthValue) <= parseInt(maxYearMonthValue)){
         setYearMonth(newYearMonth);
+        setFilterDate(0);
         initialList();
       }
     }
   };
+  const onClickToCalendarDate = (day: number) => {
+    setFilterDate(day);
+  };
   
   useEffect(() => {
     if(!!mid){
@@ -196,6 +202,7 @@ export const CalendarWrap = () => {
           yearMonth={ yearMonth }
           scheduledDateList={ scheduledDateList }
           completedDateList={ completedDateList }
+          onClickToCalendarDate= { onClickToCalendarDate }
         ></CalendarGrid>
 
         <div className="settlement-list">
@@ -203,12 +210,14 @@ export const CalendarWrap = () => {
           <CalendarSettlementItem
             list={ scheduledList }
             settlementStatus={ SettlementStatus.SCHEDULED }
+            filterDate={ filterDate }
           ></CalendarSettlementItem>
         }
         { (!!completedList && completedList.length > 0) &&
           <CalendarSettlementItem
             list={ completedList }
             settlementStatus={ SettlementStatus.COMPLETED }
+            filterDate={ filterDate }
           ></CalendarSettlementItem>
         }
         </div>