정산내역 뱃지

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

@@ -54,6 +54,13 @@ export const ListWrap = ({
   const { navigate } = useNavigate();
   const { t, i18n } = useTranslation();
   const userMid = useStore.getState().UserStore.mid;
+
+  const defaultParams = {
+    periodType: SettlementPeriodType.SETTLEMENT_DATE,
+    startDate: startDateFromCalendar? moment(startDateFromCalendar).format('YYYYMMDD'):  moment().format('YYYYMMDD'),
+    endDate: endDateFromCalendar? moment(endDateFromCalendar).format('YYYYMMDD'):  moment().format('YYYYMMDD'),
+    paymentMethod: SettlementPaymentMethod.ALL
+  };
   
   const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
 
@@ -63,10 +70,10 @@ export const ListWrap = ({
   const [filterOn, setFilterOn] = useState<boolean>(false);
   const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
   const [mid, setMid] = useState<string>(userMid);
-  const [periodType, setPeriodType] = useState<SettlementPeriodType>(SettlementPeriodType.SETTLEMENT_DATE);
+  const [periodType, setPeriodType] = useState<SettlementPeriodType>(defaultParams.periodType);
-  const [startDate, setStartDate] = useState(startDateFromCalendar? moment(startDateFromCalendar).format('YYYYMMDD'):  moment().format('YYYYMMDD'));
+  const [startDate, setStartDate] = useState<string>(defaultParams.startDate);
-  const [endDate, setEndDate] = useState(endDateFromCalendar? moment(endDateFromCalendar).format('YYYYMMDD'):  moment().format('YYYYMMDD'));
+  const [endDate, setEndDate] = useState<string>(defaultParams.endDate);
-  const [paymentMethod, setPaymentMethod] = useState<SettlementPaymentMethod>(SettlementPaymentMethod.ALL);
+  const [paymentMethod, setPaymentMethod] = useState<SettlementPaymentMethod>(defaultParams.paymentMethod);
 
   const [settlementAmount, setSettlementAmount] = useState<number>();
   const [transactionAmount, setTransactionAmount] = useState<number>();
@@ -92,6 +99,8 @@ export const ListWrap = ({
     
   const [listHeight, setListHeight] = useState<number>(0);
 
+  const [filterUsed, setFilterUsed] = useState<boolean>(false);
+
   const { mutateAsync: settlementsHistory } = useSettlementsHistoryMutation();
   const { mutateAsync: settlementsHistorySummary} = useSettlementsHistorySummaryMutation();
   const { mutateAsync: settlementsTransactionList } = useSettlementsTransactionListMutation();
@@ -426,8 +435,21 @@ export const ListWrap = ({
     }
   };
 
+  const checkUsedFilter = () => {
+    let rs: boolean = true;
+    if(periodType === defaultParams.periodType
+      && startDate === defaultParams.startDate
+      && endDate === defaultParams.endDate
+      && paymentMethod === defaultParams.paymentMethod
+    ){
+      rs =  false;
+    }
+    setFilterUsed(rs);
+	};
+
   useEffect(() => {
     callList();
+    checkUsedFilter();
   }, [
     mid, periodType, sortType,
     startDate, endDate,
@@ -469,6 +491,9 @@ export const ListWrap = ({
                 alt={t('transaction.searchOptions')}
                 onClick={ () => onClickToOpenFilter() }
               />
+              { filterUsed &&
+                <span className="notification-badge2"></span>
+              }
             </button>
           </div>
           <button className="download-btn">