자금이체 - 이체요청 필터 블릿

src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx

@@ -32,6 +32,15 @@ import { checkGrant } from '@/shared/lib/check-grant';
 import { showAlert } from '@/widgets/show-alert';
 import { snackBar } from '@/shared/lib';
 
+const defaultParams = {
+  searchCl: FundAccountSearchCl.ACCOUNT_NAME,
+  searchValue: '',
+  fromDate: moment().format('YYYYMMDD'),
+  toDate: moment().format('YYYYMMDD'),
+  status: FundAccountStatus.ALL,
+  bankCode: '',
+};
+
 export const FundAccountTransferListWrap = () => {
   const { navigate } = useNavigate();
   const { t } = useTranslation();
@@ -44,12 +53,12 @@ export const FundAccountTransferListWrap = () => {
   const [filterOn, setFilterOn] = useState<boolean>(false);
   const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
   const [mid, setMid] = useState<string>(userMid);
-  const [searchCl, setSearchCl] = useState<FundAccountSearchCl>(FundAccountSearchCl.ACCOUNT_NAME);
+  const [searchCl, setSearchCl] = useState<FundAccountSearchCl>(defaultParams.searchCl);
-  const [searchValue, setSearchValue] = useState<string>('');
+  const [searchValue, setSearchValue] = useState<string>(defaultParams.searchValue);
-  const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
+  const [fromDate, setFromDate] = useState(defaultParams.fromDate);
-  const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
+  const [toDate, setToDate] = useState(defaultParams.toDate);
-  const [status, setStatus] = useState<FundAccountStatus>(FundAccountStatus.ALL);
+  const [status, setStatus] = useState<FundAccountStatus>(defaultParams.status);
-  const [bankCode, setBankCode] = useState<string>('');
+  const [bankCode, setBankCode] = useState<string>(defaultParams.bankCode);
 
   const [detailOn, setDetailOn] = useState<boolean>(false);
   const [detailSeq, setDetailSeq] = useState<number>(0);
@@ -62,6 +71,7 @@ export const FundAccountTransferListWrap = () => {
   const [groupDateOn, setGroupDateOn] = useState<boolean>(false);
     
   const [listHeight, setListHeight] = useState<number>(0);
+  const [filterUsed, setFilterUsed] = useState<boolean>(false);
 
   const { mutateAsync: extensionFundAccountTransferList } = useExtensionFundAccountTransferListMutation();
   const { mutateAsync: extensionFundAccountTransferExcel } = useExtensionFundAccountTransferExcelMutation();
@@ -260,8 +270,23 @@ export const FundAccountTransferListWrap = () => {
     navigate(PATHS.additionalService.fundAccount.transferRequest);
   };
 
+  const checkUsedFilter = () => {
+    let rs: boolean = true;
+    if(searchCl === defaultParams.searchCl
+      && searchValue === defaultParams.searchValue
+      && fromDate === defaultParams.fromDate
+      && toDate === defaultParams.toDate
+      && status === defaultParams.status
+      && bankCode === defaultParams.bankCode
+    ){
+      rs =  false;
+    }
+    setFilterUsed(rs);
+	};
+
   useEffect(() => {
     callList();
+    checkUsedFilter();
   }, [
     mid,
     searchCl,
@@ -311,6 +336,9 @@ export const FundAccountTransferListWrap = () => {
                 src={IMAGE_ROOT + '/ico_setting.svg'}
                 alt="검색옵션"
               />
+              { filterUsed &&
+                <span className="notification-badge2"></span>
+              }
             </button>
           </div>
           <button