정산달력 버그 픽스

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
@@ -51,27 +57,42 @@ 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() }
     </>
   )
 };