키인결제 필터 뱃지

src/pages/additional-service/key-in-payment/key-in-payment-page.tsx

@@ -29,6 +29,14 @@ import { checkGrant } from '@/shared/lib/check-grant';
 import { showAlert } from '@/widgets/show-alert';
 import { snackBar } from '@/shared/lib';
 
+const defaultParams = {
+  startDate: moment().format('YYYYMMDD'),
+  endDate: moment().format('YYYYMMDD'),
+  transactionType: KeyInPaymentTansactionType.ALL,
+  status: KeyInPaymentStatus.ALL,
+  minAmount: undefined,
+  maxAmount: undefined
+};
 export const KeyInPaymentPage = () => {
   const { navigate } = useNavigate();
   const { t } = useTranslation();
@@ -45,15 +53,17 @@ export const KeyInPaymentPage = () => {
   const [filterOn, setFilterOn] = useState<boolean>(false);
   const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
   const [mid, setMid] = useState<string>(userMid);
-  const [startDate, setStartDate] = useState(moment().format('YYYYMMDD'));
+  const [startDate, setStartDate] = useState<string>(moment().format('YYYYMMDD'));
-  const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
+  const [endDate, setEndDate] = useState<string>(moment().format('YYYYMMDD'));
   const [transactionType, setTransactionType] = useState<KeyInPaymentTansactionType>(KeyInPaymentTansactionType.ALL)
   const [status, setStatus] = useState<KeyInPaymentStatus>(KeyInPaymentStatus.ALL);
-  const [minAmount, setMinAmount] = useState<number>();
+  const [minAmount, setMinAmount] = useState<number | undefined>();
-  const [maxAmount, setMaxAmount] = useState<number>();
+  const [maxAmount, setMaxAmount] = useState<number | undefined>();
 
   const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
 
+  const [filterUsed, setFilterUsed] = useState<boolean>(false);
+  
   useSetHeaderTitle(t('additionalService.keyIn.title'));
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
@@ -184,8 +194,23 @@ export const KeyInPaymentPage = () => {
     setTransactionType(val);
   };
 
+  const checkUsedFilter = () => {
+    let rs: boolean = true;
+    if(startDate === defaultParams.startDate
+      && endDate === defaultParams.endDate
+      && transactionType === defaultParams.transactionType
+      && status === defaultParams.status
+      && minAmount === defaultParams.minAmount
+      && maxAmount === defaultParams.maxAmount
+    ){
+      rs =  false;
+    }
+    setFilterUsed(rs);
+	};
+
   useEffect(() => {
     callList();
+    checkUsedFilter();
   }, [
     mid,
     startDate,
@@ -200,7 +225,6 @@ export const KeyInPaymentPage = () => {
     return <AccessDeniedDialog />;
   }
 
-
   return (
     <>
       <main>
@@ -224,6 +248,9 @@ export const KeyInPaymentPage = () => {
                       alt="검색옵션"
                       onClick={ onClickToOpenFilter }
                     />
+                    { filterUsed &&
+                      <span className="notification-badge2"></span>
+                    }
                   </button>
                 </div>
                 <button