계좌성명조회 뱃지 적용

src/pages/additional-service/account-holder-search/account-holder-search-page.tsx

@@ -30,6 +30,15 @@ import { AccountHolderSearchDetail } from '@/entities/additional-service/ui/acco
 import { showAlert } from '@/widgets/show-alert';
 import { checkGrant } from '@/shared/lib/check-grant';
 
+
+const defaultParams = {
+  searchCl: AccountHolderSearchCl.ACCOUNT_NAME,
+  searchValue: '',
+  startDate: moment().format('YYYYMMDD'),
+  endDate: moment().format('YYYYMMDD'),
+  bank: '',
+  resultStatus: AccountHolderResultStatus.ALL,
+};
 export const AccountHolderSearchPage = () => {
   const { navigate } = useNavigate();
   const { t } = useTranslation();
@@ -47,12 +56,12 @@ export const AccountHolderSearchPage = () => {
   const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
   const [filterOn, setFilterOn] = useState<boolean>(false);
   const [mid, setMid] = useState<string>(userMid);
-  const [searchCl, setSearchCl] = useState<AccountHolderSearchCl>(AccountHolderSearchCl.ACCOUNT_NAME)
+  const [searchCl, setSearchCl] = useState<AccountHolderSearchCl>(defaultParams.searchCl)
-  const [searchValue, setSearchValue] = useState<string>('');
+  const [searchValue, setSearchValue] = useState<string>(defaultParams.searchValue);
-  const [startDate, setStartDate] = useState(moment().format('YYYYMMDD'));
+  const [startDate, setStartDate] = useState<string>(defaultParams.startDate);
-  const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
+  const [endDate, setEndDate] = useState<string>(defaultParams.endDate);
-  const [bank, setBank] = useState<string>('');
+  const [bank, setBank] = useState<string>(defaultParams.bank);
-  const [resultStatus, setResultStatus] = useState<AccountHolderResultStatus>(AccountHolderResultStatus.ALL);
+  const [resultStatus, setResultStatus] = useState<AccountHolderResultStatus>(defaultParams.resultStatus);
   
   const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
 
@@ -60,6 +69,8 @@ export const AccountHolderSearchPage = () => {
   const [detailMid, setDetailMid] = useState<string>('');
   const [detailTid, setDetailTid] = useState<string>('');
 
+  const [filterUsed, setFilterUsed] = useState<boolean>(false);
+
   useSetHeaderTitle(t('additionalService.services.accountHolderSearch'));
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
@@ -200,8 +211,23 @@ export const AccountHolderSearchPage = () => {
     }
   };
 
+  const checkUsedFilter = () => {
+    let rs: boolean = true;
+    if(searchCl === defaultParams.searchCl
+      && searchValue === defaultParams.searchValue
+      && startDate === defaultParams.startDate
+      && endDate === defaultParams.endDate
+      && bank === defaultParams.bank
+      && resultStatus === defaultParams.resultStatus
+    ){
+      rs =  false;
+    }
+    setFilterUsed(rs);
+	};
+
   useEffect(() => {
     callList();
+    checkUsedFilter();
   }, [
     mid,
     searchCl,
@@ -212,10 +238,11 @@ export const AccountHolderSearchPage = () => {
     resultStatus,
     sortType
   ]);
-
+  
   if (!hasAccess) {
     return <AccessDeniedDialog />;
   }
+  
 
   return (
     <>
@@ -240,6 +267,9 @@ export const AccountHolderSearchPage = () => {
                       alt={t('common.searchOptions')}
                       onClick={ onClickToOpenFilter }
                     />
+                    { filterUsed &&
+                      <span className="notification-badge2"></span>
+                    }
                   </button>
                 </div>
                 <button