정산달력 버그 픽스

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

@@ -7,12 +7,14 @@ export interface CalendarGridProps {
   yearMonth: string;
   scheduledDateList: Array<number>;
   completedDateList: Array<number>;
+  onClickToCalendarDate: (day: number) => void;
 };
 
 export const CalendarGrid = ({
   yearMonth,
   scheduledDateList,
-  completedDateList
+  completedDateList,
+  onClickToCalendarDate
 }: CalendarGridProps) => {
   const { t } = useTranslation();
 
@@ -39,6 +41,7 @@ export const CalendarGrid = ({
           <div 
             key={ `key-day-item-${i}` }
             className="day scheduled"
+            onClick={ () => onClickToCalendarDate(i) }
           >{ i }</div>
         );
       }
@@ -47,6 +50,7 @@ export const CalendarGrid = ({
           <div 
             key={ `key-day-item-${i}` }
             className="day complete"
+            onClick={ () => onClickToCalendarDate(i) }
           >{ i }</div>
         );
       }

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

@@ -3,19 +3,25 @@ import { useTranslation } from 'react-i18next';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { SettlementDays, SettlementStatus } from '../model/types';
+import { useState } from 'react';
 
 export interface CalendarSettlementItemProps {
   list: Array<SettlementDays | undefined>;
   settlementStatus: SettlementStatus;
+  filterDate?: number;
 };
 
 export const CalendarSettlementItem = ({
   list,
-  settlementStatus
+  settlementStatus,
+  filterDate
 }: CalendarSettlementItemProps) => {
+  console.log(list)
   const { navigate } = useNavigate();
   const { t } = useTranslation();
 
+  const [newList, setNewList] = useState<Array<SettlementDays | undefined>>(list);
+
   const getAmount = (
     scheduledAmount: number | undefined, 
     completedAmount: number | undefined
@@ -52,26 +58,41 @@ export const CalendarSettlementItem = ({
     }
   };
   
-  return (
-    <>
-      { list.map((value, index) => (
+  const showFilterDate = () => {
+    let rs = [];
+    for(let i=0;i<newList.length;i++){
+      let item = newList[i];
+      if(filterDate && filterDate > 0){
+        let shortDate = item?.settlementDate.substring(6, 8);
+        if(shortDate){
+          let checkDate = parseInt(shortDate);
+          if(filterDate !== checkDate){
+            continue;
+          }
+        }
+      }
+      rs.push(
         <div 
-          key={ `settlement-item-${index}` }
+          key={ `settlement-item-${i}` }
           className="settlement-item"
-          onClick={ () => onClickToMoveList(value?.settlementDate) }
+          onClick={ () => onClickToMoveList(item?.settlementDate) }
         >
-          <div className={ `settlement-tag ${getClassName()}` }>{ value?.settlementStatus }</div>
+          <div className={ `settlement-tag ${getClassName()}` }>{ item?.settlementStatus }</div>
           <div className="settlement-date">
-            { moment(value?.settlementDate).format('MM.DD(ddd)') }
+            { moment(item?.settlementDate).format('MM.DD(ddd)') }
           </div>
           <div className="settlement-amount">
-            {t('home.money', { value: new Intl.NumberFormat('en-US').format(getAmount(value?.scheduledAmount, value?.completedAmount)) })}
+            {t('home.money', { value: new Intl.NumberFormat('en-US').format(getAmount(item?.scheduledAmount, item?.completedAmount)) })}
           </div>
         </div>
-        ))
+      );
     }
+    return rs;
+  };
   
-      
+  return (
+    <>
+      { showFilterDate() }
     </>
   )
 };

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>