안면인증 필터 뱃지

src/pages/additional-service/face-auth/face-auth-page.tsx

@@ -29,6 +29,13 @@ import { checkGrant } from '@/shared/lib/check-grant';
 import { showAlert } from '@/widgets/show-alert';
 import { snackBar } from '@/shared/lib';
 
+const defaultParams = {
+	userMallId: '',
+	fromDate: moment().format('YYYYMMDD'),
+	toDate: moment().format('YYYYMMDD'),
+	transType: FaceAuthTransType.ALL,
+	authResult: FaceAuthResult.ALL	
+};
 export const FaceAuthPage = () => {
 	const { navigate } = useNavigate();
 	const { t } = useTranslation();
@@ -46,11 +53,11 @@ export const FaceAuthPage = () => {
 	const [filterOn, setFilterOn] = useState<boolean>(false);
 	const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
 	const [mid, setMid] = useState<string>(userMid);
-	const [userMallId, setUserMallId] = useState<string>('');
+	const [userMallId, setUserMallId] = useState<string>(defaultParams.userMallId);
-	const [fromDate, setFromDate] = useState<string>(moment().format('YYYYMMDD'));
+	const [fromDate, setFromDate] = useState<string>(defaultParams.fromDate);
-	const [toDate, setToDate] = useState<string>(moment().format('YYYYMMDD'));
+	const [toDate, setToDate] = useState<string>(defaultParams.toDate);
-	const [transType, setTransType] = useState<FaceAuthTransType>(FaceAuthTransType.ALL);
+	const [transType, setTransType] = useState<FaceAuthTransType>(defaultParams.transType);
-	const [authResult, setAuthResult] = useState<FaceAuthResult>(FaceAuthResult.ALL);
+	const [authResult, setAuthResult] = useState<FaceAuthResult>(defaultParams.authResult);
 
 	const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
 
@@ -58,6 +65,7 @@ export const FaceAuthPage = () => {
   const [groupDateOn, setGroupDateOn] = useState<boolean>(false);
 		
 	const [listHeight, setListHeight] = useState<number>(0);
+	const [filterUsed, setFilterUsed] = useState<boolean>(false);
 
 	useSetHeaderTitle(t('faceAuth.title'));
 	useSetHeaderType(HeaderType.LeftArrow);
@@ -229,8 +237,22 @@ export const FaceAuthPage = () => {
 		return rs;
 	};
 
+	const checkUsedFilter = () => {
+    let rs: boolean = true;
+    if(userMallId === defaultParams.userMallId
+      && fromDate === defaultParams.fromDate
+      && toDate === defaultParams.toDate
+      && transType === defaultParams.transType
+      && authResult === defaultParams.authResult
+    ){
+      rs =  false;
+    }
+    setFilterUsed(rs);
+	};
+
 	useEffect(() => {
 		callList();
+		checkUsedFilter();
 	}, [
 		mid, userMallId, 
 		fromDate, toDate, 
@@ -256,10 +278,10 @@ export const FaceAuthPage = () => {
 		};
 	}, []);
 
-	if (!hasAccess) {
+	if(!hasAccess){
-	    return <AccessDeniedDialog />;
+	  return <AccessDeniedDialog />;
 	}
-    
+	    
 	return (
 		<>
 			<main>
@@ -283,6 +305,9 @@ export const FaceAuthPage = () => {
 											alt={t('transaction.searchOptions')}
 											onClick={ onClickToOpenFilter }
 										/>
+										{ filterUsed &&
+                      <span className="notification-badge2"></span>
+                    }
 									</button>
 								</div>
 								<button