sms 결제 통보 필터 뱃지

src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx

@@ -98,8 +98,8 @@ export const SmsPaymentFilter = ({
 
             <FilterSelectInput
               title={t('additionalService.sms.buyerReceiveNumber')}
-              selectValue={searchCl}
-              selectSetter={setSearchCl}
+              selectValue={filterSearchCl}
+              selectSetter={setFilterSearchCl}
               selectOptions={searchTypeOption}
               inputValue={filterSearchValue}
               inputSetter={setFilterSearchValue}

src/pages/additional-service/sms-payment/sms-payment-page.tsx

@@ -28,6 +28,13 @@ import { checkGrant } from '@/shared/lib/check-grant';
 import { showAlert } from '@/widgets/show-alert';
 import { snackBar } from '@/shared/lib';
 
+const defaultParams = {
+  searchCl: SmsPaymentSearchCl.BUYER_NAME,
+  searchValue: '',
+  fromDate: moment().format('YYYYMMDD'),
+  toDate: moment().format('YYYYMMDD'),
+  smsCl: SmsCl.ALL
+};
 export const SmsPaymentPage = () => {
   const { t } = useTranslation();
   const { navigate } = useNavigate();
@@ -46,14 +53,15 @@ export const SmsPaymentPage = () => {
   const [filterOn, setFilterOn] = useState<boolean>(false);
   const [mid, setMid] = useState<string>(userMid);
   const [seq, setSeq] = useState<number>(0);
-  const [searchCl, setSearchCl] = useState<SmsPaymentSearchCl>(SmsPaymentSearchCl.BUYER_NAME)
-  const [searchValue, setSearchValue] = useState<string>('')
-  const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
-  const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
-  const [smsCl, setSmsCl] = useState<SmsCl>(SmsCl.ALL);
+  const [searchCl, setSearchCl] = useState<SmsPaymentSearchCl>(defaultParams.searchCl)
+  const [searchValue, setSearchValue] = useState<string>(defaultParams.searchValue)
+  const [fromDate, setFromDate] = useState<string>(defaultParams.fromDate);
+  const [toDate, setToDate] = useState<string>(defaultParams.toDate);
+  const [smsCl, setSmsCl] = useState<SmsCl>(defaultParams.smsCl);
   const [smsDetailData, setSmsDetailData] = useState<ExtensionSmsDetailResponse | null>(null);
 
   const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
+  const [filterUsed, setFilterUsed] = useState<boolean>(false);
 
   const { mutateAsync: smsPaymentList } = useExtensionSmsListMutation();
   const { mutateAsync: downloadExcel } = useExtensionSmsDownloadExcelMutation();
@@ -191,8 +199,22 @@ export const SmsPaymentPage = () => {
     setBottomSmsPaymentDetailResendOn(true);
   };
 
+  const checkUsedFilter = () => {
+    let rs: boolean = true;
+    if(searchCl === defaultParams.searchCl
+      && searchValue === defaultParams.searchValue
+      && fromDate === defaultParams.fromDate
+      && toDate === defaultParams.toDate
+      && smsCl === defaultParams.smsCl
+    ){
+      rs =  false;
+    }
+    setFilterUsed(rs);
+	};
+
   useEffect(() => {
     callList();
+    checkUsedFilter();
   }, [
     mid,
     searchCl,
@@ -229,6 +251,9 @@ export const SmsPaymentPage = () => {
                       alt="검색옵션"
                       onClick={() => onClickToOpenFilter()}
                     />
+                    { filterUsed &&
+                      <span className="notification-badge2"></span>
+                    }
                   </button>
                 </div>
                 <button