- 신용카드ARS,지급대행,링크결제,자금이체-결과대기 필터 사용중 표시 추가

2025-11-17 20:17:49 +09:00
parent 5ca36c7322
commit 97407f52d7
6 changed files with 335 additions and 229 deletions
--- a/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx
+++ b/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx
@@ -23,6 +23,16 @@ import { checkGrant } from '@/shared/lib/check-grant';
 import { showAlert } from '@/widgets/show-alert';
 import { snackBar } from '@/shared/lib';

+const defaultParams = {
+  fromDate: moment().format('YYYYMMDD'),
+  toDate: moment().format('YYYYMMDD'),
+  searchDateType: FundAccountSearchDateType.REQUEST_DATE,
+  searchCl: FundAccountSearchCl.ACCOUNT_NAME,
+  searchValue: '',
+  bankCode: '',
+  resultStatus: FundAccountResultStatus.ALL
+}
+
 export const FundAccountResultListWrap = () => {
  const { navigate } = useNavigate();
  const { t } = useTranslation();
@@ -46,6 +56,7 @@ export const FundAccountResultListWrap = () => {
  const [bankCode, setBankCode] = useState<string>('');
  const [resultStatus, setResultStatus] = useState<FundAccountResultStatus>(FundAccountResultStatus.ALL);

+  const [filterUsed, setFilterUsed] = useState<boolean>(false);
  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

  const [totalRequestCount, setTotalRequestCount] = useState<number>(0);
@@ -69,8 +80,8 @@ export const FundAccountResultListWrap = () => {
  const { mutateAsync: extensionFundAccountResultSummary } = useExtensionFundAccountResultSummaryMutation();
  const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
    entries.forEach((entry: IntersectionObserverEntry) => {
-      if(entry.isIntersecting){
-        if(onActionIntersect && !!pageParam.cursor){
+      if (entry.isIntersecting) {
+        if (onActionIntersect && !!pageParam.cursor) {
          setOnActionIntersect(false);
          callList('page');
        }
@@ -95,34 +106,34 @@ export const FundAccountResultListWrap = () => {
      bankCode: bankCode,
      resultStatus: resultStatus,
      page: {
-				...pageParam,
-				...{ sortType: sortType }
-			}
+        ...pageParam,
+        ...{ sortType: sortType }
+      }
    };
-    if(type !== 'page' && listParams.page){
+    if (type !== 'page' && listParams.page) {
      listParams.page.cursor = null;
    }

    extensionFundAccountResultList(listParams).then((rs: any) => {
-      if(type === 'page'){
+      if (type === 'page') {
        setListItems([
          ...listItems,
          ...rs.content
        ]);
      }
-      else{
+      else {
        setListItems(rs.content);
      }
-			if(rs.hasNext 
+      if (rs.hasNext
        && rs.nextCursor !== pageParam.cursor
        && rs.content.length === DEFAULT_PAGE_PARAM.size
-      ){
+      ) {
        setPageParam({
          ...pageParam,
          ...{ cursor: rs.nextCursor }
        });
      }
-      else{
+      else {
        setPageParam({
          ...pageParam,
          ...{ cursor: null }
@@ -134,7 +145,7 @@ export const FundAccountResultListWrap = () => {
        && rs.content.length === DEFAULT_PAGE_PARAM.size
      );
    }).catch((e: any) => {
-      if(e.response?.data?.error?.message){
+      if (e.response?.data?.error?.message) {
        snackBar(e.response?.data?.error?.message);
        return;
      }
@@ -155,7 +166,7 @@ export const FundAccountResultListWrap = () => {
      setTotalFailCount(rs.totalFailCount);
      setTotalFailAmount(rs.totalFailAmount);
    }).catch((e: any) => {
-      if(e.response?.data?.error?.message){
+      if (e.response?.data?.error?.message) {
        snackBar(e.response?.data?.error?.message);
        return;
      }
@@ -171,12 +182,12 @@ export const FundAccountResultListWrap = () => {
  };

  const onRequestDownloadExcel = (
-		selectedMode: DownloadSelectedMode,
-		userEmail?: string
-	) => {
-    if(selectedMode === DownloadSelectedMode.EMAIL
+    selectedMode: DownloadSelectedMode,
+    userEmail?: string
+  ) => {
+    if (selectedMode === DownloadSelectedMode.EMAIL
      && userEmail
-    ){
+    ) {
      let params: ExtensionFundAccountResultExcelParams = {
        mid: mid,
        email: userEmail,
@@ -187,7 +198,7 @@ export const FundAccountResultListWrap = () => {
      extensionFundAccountResultExcel(params).then((rs: ExtensionFundAccountResultExcelResponse) => {
        console.log('Excel Download Status:', rs);
      }).catch((e: any) => {
-        if(e.response?.data?.error?.message){
+        if (e.response?.data?.error?.message) {
          snackBar(e.response?.data?.error?.message);
          return;
        }
@@ -201,10 +212,10 @@ export const FundAccountResultListWrap = () => {

  const setDetailData = (detailData: DetailData) => {
    setDetailOn(detailData.detailOn);
-    if(detailData.mid){
+    if (detailData.mid) {
      setDetailMid(detailData.mid);
    }
-    if(detailData.tid){
+    if (detailData.tid) {
      setDetailTid(detailData.tid);
    }
  };
@@ -233,12 +244,12 @@ export const FundAccountResultListWrap = () => {
            if (list.length > 0) {
              rs.push(
                <ListDateGroup
-                  additionalServiceCategory={ AdditionalServiceCategory.FundAccountResult }
-                  mid={ mid }
-                  key={ date + '-' + i }
-                  date={ date }
-                  items={ list }
-                  setDetailData={ setDetailData }
+                  additionalServiceCategory={AdditionalServiceCategory.FundAccountResult}
+                  mid={mid}
+                  key={date + '-' + i}
+                  date={date}
+                  items={list}
+                  setDetailData={setDetailData}
                ></ListDateGroup>
              );
            }
@@ -252,18 +263,33 @@ export const FundAccountResultListWrap = () => {
    if (list.length > 0) {
      rs.push(
        <ListDateGroup
-          additionalServiceCategory={ AdditionalServiceCategory.FundAccountResult }
-          mid={ mid }
-          key={ date + '-last' }
-          date={ date }
-          items={ list }
-          setDetailData={ setDetailData }
+          additionalServiceCategory={AdditionalServiceCategory.FundAccountResult}
+          mid={mid}
+          key={date + '-last'}
+          date={date}
+          items={list}
+          setDetailData={setDetailData}
        ></ListDateGroup>
      );
    }
    return rs;
  };

+  const checkUsedFilter = () => {
+    let rs: boolean = true;
+    if (fromDate === defaultParams.fromDate
+      && toDate === defaultParams.toDate
+      && searchCl === defaultParams.searchCl
+      && searchValue === defaultParams.searchValue
+      && searchDateType === defaultParams.searchDateType
+      && bankCode === defaultParams.bankCode
+      && resultStatus === defaultParams.resultStatus
+    ) {
+      rs = false;
+    }
+    setFilterUsed(rs);
+  }
+
  useEffect(() => {
    callSummary();
    ListScrollOn(true);
@@ -285,6 +311,7 @@ export const FundAccountResultListWrap = () => {

  useEffect(() => {
    callList();
+    checkUsedFilter();
  }, [
    mid,
    searchCl,
@@ -320,18 +347,21 @@ export const FundAccountResultListWrap = () => {
            <button
              className="filter-btn"
              aria-label="필터"
-              onClick={ onClickToOpenFilter }
+              onClick={onClickToOpenFilter}
            >
              <img
                src={IMAGE_ROOT + '/ico_setting.svg'}
                alt="검색옵션"
              />
+              {filterUsed &&
+                <span className="notification-badge2"></span>
+              }
            </button>
          </div>
          <button
            className="download-btn"
            aria-label="다운로드"
-            onClick={ onClickToOpenDownloadBottomSheet }
+            onClick={onClickToOpenDownloadBottomSheet}
          >
            <img
              src={IMAGE_ROOT + '/ico_download.svg'}
@@ -385,38 +415,38 @@ export const FundAccountResultListWrap = () => {
          </div>
        </div>
      </section>
-      { groupDateOn &&
-      <div className="summary-amount scroll-group-date">
-        <span className="amount-text">{ groupDate }</span>
-        <div className="summary-actions">
-          <button className="filter-btn">
-            <img
-              src={ IMAGE_ROOT + '/ico_setting.svg' }
-              alt={t('transaction.searchOptions')}
-              onClick={ onClickToOpenFilter }
-            />
-          </button>
-          <button className="download-btn">
-            <img
-              src={ IMAGE_ROOT + '/ico_download.svg' }
-              alt={t('transaction.download')}
-              onClick={ onClickToOpenDownloadBottomSheet }
-            />
-          </button>
+      {groupDateOn &&
+        <div className="summary-amount scroll-group-date">
+          <span className="amount-text">{groupDate}</span>
+          <div className="summary-actions">
+            <button className="filter-btn">
+              <img
+                src={IMAGE_ROOT + '/ico_setting.svg'}
+                alt={t('transaction.searchOptions')}
+                onClick={onClickToOpenFilter}
+              />
+            </button>
+            <button className="download-btn">
+              <img
+                src={IMAGE_ROOT + '/ico_download.svg'}
+                alt={t('transaction.download')}
+                onClick={onClickToOpenDownloadBottomSheet}
+              />
+            </button>
+          </div>
        </div>
-      </div>
      }
      <section
        className="transaction-list"
-        style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
+        style={{ height: (listHeight > 0) ? listHeight + 'px' : 'unset' }}
      >
-        { getListDateGroup() }
+        {getListDateGroup()}
      </section>
-      <div ref={ setTarget }></div>
+      <div ref={setTarget}></div>
      <div className="apply-row">
        <button
          className="btn-50 btn-blue flex-1"
-          onClick={ onClickToNavigate }
+          onClick={onClickToNavigate}
        >{t('additionalService.fundAccount.transferRegistration')}</button>
      </div>
      <FundAccountResultFilter
@@ -440,18 +470,18 @@ export const FundAccountResultListWrap = () => {
        setResultStatus={setResultStatus}
      ></FundAccountResultFilter>
      <FundAccountResultDetail
-        detailOn={ detailOn }
-        setDetailOn={ setDetailOn }
-        mid={ detailMid }
-        tid={ detailTid }
+        detailOn={detailOn}
+        setDetailOn={setDetailOn}
+        mid={detailMid}
+        tid={detailTid}
      ></FundAccountResultDetail>
-      { !!downloadBottomSheetOn && 
+      {!!downloadBottomSheetOn &&
        <DownloadBottomSheet
-          bottomSheetOn={ downloadBottomSheetOn }
-          setBottomSheetOn={ setDownloadBottomSheetOn }
-          imageMode={ false }
-          emailMode={ true }
-          sendRequest={ onRequestDownloadExcel }
+          bottomSheetOn={downloadBottomSheetOn}
+          setBottomSheetOn={setDownloadBottomSheetOn}
+          imageMode={false}
+          emailMode={true}
+          sendRequest={onRequestDownloadExcel}
        ></DownloadBottomSheet>
      }
    </>
--- a/src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx
@@ -30,6 +30,18 @@ const getPaymentResultBtnGroup = (t: any) => [
 	{ name: t('additionalService.linkPayment.paymentStopped'), value: LinkPaymentPaymentStatus.INACTIVE },
 ];

+const defaultParams = {
+	fromDate: moment().format('YYYYMMDD'),
+	toDate: moment().format('YYYYMMDD'),
+	searchCl: LinkPaymentSearchCl.PHONE,
+	searchValue: '',
+	paymentMethod: LinkPaymentPaymentMethod.CARD,
+	paymentStatus: LinkPaymentPaymentStatus.ALL,
+	sendStatus: LinkPaymentSendStatus.ALL,
+	sendMethod: LinkPaymentSendMethod.ALL
+}
+
+
 export const LinkPaymentHistoryWrap = () => {
 	const { t } = useTranslation();
 	const { navigate } = useNavigate();
@@ -42,14 +54,16 @@ export const LinkPaymentHistoryWrap = () => {
 	const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);

 	const [mid, setMid] = useState<string>(userMid);
-	const [searchCl, setSearchCl] = useState<LinkPaymentSearchCl>(LinkPaymentSearchCl.PHONE);
-	const [searchValue, setSearchValue] = useState<string>('');
-	const [paymentMethod, setPaymentMethod] = useState<LinkPaymentPaymentMethod>(LinkPaymentPaymentMethod.CARD);
-	const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
-	const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
-	const [paymentStatus, setPaymentStatus] = useState<LinkPaymentPaymentStatus>(LinkPaymentPaymentStatus.ALL);
-	const [sendStatus, setSendStatus] = useState<LinkPaymentSendStatus>(LinkPaymentSendStatus.ALL);
-	const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL);
+	const [searchCl, setSearchCl] = useState<LinkPaymentSearchCl>(defaultParams.searchCl);
+	const [searchValue, setSearchValue] = useState<string>(defaultParams.searchValue);
+	const [paymentMethod, setPaymentMethod] = useState<LinkPaymentPaymentMethod>(defaultParams.paymentMethod);
+	const [fromDate, setFromDate] = useState(defaultParams.fromDate);
+	const [toDate, setToDate] = useState(defaultParams.toDate);
+	const [paymentStatus, setPaymentStatus] = useState<LinkPaymentPaymentStatus>(defaultParams.paymentStatus);
+	const [sendStatus, setSendStatus] = useState<LinkPaymentSendStatus>(defaultParams.sendStatus);
+	const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(defaultParams.sendMethod);
+
+	const [filterUsed, setFilterUsed] = useState<boolean>(false);

 	const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

@@ -140,7 +154,7 @@ export const LinkPaymentHistoryWrap = () => {
 				&& rs.content.length === DEFAULT_PAGE_PARAM.size
 			);
 		}).catch((e: any) => {
-			if(e.response?.data?.error?.message){
+			if (e.response?.data?.error?.message) {
 				snackBar(e.response?.data?.error?.message);
 				return;
 			}
@@ -159,9 +173,9 @@ export const LinkPaymentHistoryWrap = () => {
 		selectedMode: DownloadSelectedMode,
 		userEmail?: string
 	) => {
-		if(selectedMode === DownloadSelectedMode.EMAIL
-      && userEmail
-    ){
+		if (selectedMode === DownloadSelectedMode.EMAIL
+			&& userEmail
+		) {
 			downloadExcel({
 				mid: mid,
 				email: userEmail,
@@ -176,11 +190,11 @@ export const LinkPaymentHistoryWrap = () => {
 			}).then((rs) => {
 				console.log('Excel Download Status: ' + rs.status);
 			}).catch((e: any) => {
-        if(e.response?.data?.error?.message){
-          snackBar(e.response?.data?.error?.message);
-          return;
-        }
-      });
+				if (e.response?.data?.error?.message) {
+					snackBar(e.response?.data?.error?.message);
+					return;
+				}
+			});
 		}
 	};

@@ -209,8 +223,25 @@ export const LinkPaymentHistoryWrap = () => {
 		}
 	};

+	const checkUsedFilter = () => {
+		let rs: boolean = true;
+		if (fromDate === defaultParams.fromDate
+			&& toDate === defaultParams.toDate
+			&& searchCl === defaultParams.searchCl
+			&& searchValue === defaultParams.searchValue
+			&& paymentMethod === defaultParams.paymentMethod
+			&& paymentStatus === defaultParams.paymentStatus
+			&& sendMethod === defaultParams.sendMethod
+			&& sendStatus === defaultParams.sendStatus
+		) {
+			rs = false;
+		}
+		setFilterUsed(rs);
+	}
+
 	useEffect(() => {
 		callList();
+		checkUsedFilter();
 	}, [
 		mid,
 		searchCl,
@@ -240,14 +271,17 @@ export const LinkPaymentHistoryWrap = () => {
 							<img
 								src={IMAGE_ROOT + '/ico_setting.svg'}
 								alt={t('common.searchOptions')}
-								onClick={ onClickToOpenFilter }
+								onClick={onClickToOpenFilter}
 							/>
+							{filterUsed &&
+								<span className="notification-badge2"></span>
+							}
 						</button>
 					</div>
 					<button
 						className="download-btn"
 						aria-label={t('common.download')}
-						onClick={ onClickToOpenDownloadBottomSheet }
+						onClick={onClickToOpenDownloadBottomSheet}
 					>
 						<img
 							src={IMAGE_ROOT + '/ico_download.svg'}
@@ -282,8 +316,8 @@ export const LinkPaymentHistoryWrap = () => {
 				additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
 				mid={mid}
 				setDetailData={setDetailData}
-				onClickToOpenFilter={ onClickToOpenFilter }
-      	onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
+				onClickToOpenFilter={onClickToOpenFilter}
+				onClickToOpenDownloadBottomSheet={onClickToOpenDownloadBottomSheet}
 			></LinkPaymentHistoryList>
 			<div ref={setTarget}></div>
 			<div className="apply-row">
@@ -319,13 +353,13 @@ export const LinkPaymentHistoryWrap = () => {
 				requestId={detailRequestId}
 				subReqId={detailSubReqId}
 			></LinkPaymentHistoryDetail>
-			{ !!downloadBottomSheetOn &&
+			{!!downloadBottomSheetOn &&
 				<DownloadBottomSheet
-					bottomSheetOn={ downloadBottomSheetOn }
-					setBottomSheetOn={ setDownloadBottomSheetOn }
-					imageMode={ false }
-					emailMode={ true }
-					sendRequest={ onRequestDownloadExcel }
+					bottomSheetOn={downloadBottomSheetOn}
+					setBottomSheetOn={setDownloadBottomSheetOn}
+					imageMode={false}
+					emailMode={true}
+					sendRequest={onRequestDownloadExcel}
 				></DownloadBottomSheet>
 			}
 		</>
--- a/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx
@@ -22,6 +22,15 @@ 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'),
+  searchType: LinkPaymentSearchCl.PHONE,
+  searchValue: '',
+  sendMethod: LinkPaymentSendMethod.ALL,
+  processStatus: LinkPaymentProcessStatus.ALL
+}
+

 export const LinkPaymentWaitSendWrap = () => {
  const { navigate } = useNavigate();
@@ -32,15 +41,17 @@ export const LinkPaymentWaitSendWrap = () => {
  const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
  const [filterOn, setFilterOn] = useState<boolean>(false);
  const [mid, setMid] = useState<string>(userMid);
-  const [searchType, setSearchType] = useState<LinkPaymentSearchCl>(LinkPaymentSearchCl.PHONE)
-  const [searchValue, setSearchValue] = useState<string>('');
-  const [startDate, setStartDate] = useState(moment().format('YYYYMMDD'));
-  const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
-  const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL);
-  const [processStatus, setProcessStatus] = useState<LinkPaymentProcessStatus>(LinkPaymentProcessStatus.ALL);
+  const [searchType, setSearchType] = useState<LinkPaymentSearchCl>(defaultParams.searchType)
+  const [searchValue, setSearchValue] = useState<string>(defaultParams.searchValue);
+  const [startDate, setStartDate] = useState(defaultParams.startDate);
+  const [endDate, setEndDate] = useState(defaultParams.endDate);
+  const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(defaultParams.sendMethod);
+  const [processStatus, setProcessStatus] = useState<LinkPaymentProcessStatus>(defaultParams.processStatus);
  const [listItems, setListItems] = useState<Array<LinkPaymentWaitListItem>>([]);
  const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);

+  const [filterUsed, setFilterUsed] = useState<boolean>(false);
+
  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

  const [detailOn, setDetailOn] = useState<boolean>(false);
@@ -51,8 +62,8 @@ export const LinkPaymentWaitSendWrap = () => {
  const { mutateAsync: downloadExcel } = useExtensionLinkPayWaitDownloadExcelMutation();
  const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
    entries.forEach((entry: IntersectionObserverEntry) => {
-      if(entry.isIntersecting){
-        if(onActionIntersect && !!pageParam.cursor){
+      if (entry.isIntersecting) {
+        if (onActionIntersect && !!pageParam.cursor) {
          setOnActionIntersect(false);
          callList('page');
        }
@@ -60,7 +71,7 @@ export const LinkPaymentWaitSendWrap = () => {
    });
  };

-	const { setTarget } = useIntersectionObserver({ 
+  const { setTarget } = useIntersectionObserver({
    threshold: 1,
    onIntersect
  });
@@ -87,34 +98,34 @@ export const LinkPaymentWaitSendWrap = () => {
      sendMethod: sendMethod,
      processStatus: processStatus,
      page: {
-				...pageParam,
-				...{ sortType: sortType }
-			}
+        ...pageParam,
+        ...{ sortType: sortType }
+      }
    }
-    if(type !== 'page' && listParams.page){
+    if (type !== 'page' && listParams.page) {
      listParams.page.cursor = null;
    }

    pendingSendList(listParams).then((rs) => {
-      if(type === 'page'){
+      if (type === 'page') {
        setListItems([
          ...listItems,
          ...rs.content
        ]);
      }
-      else{
+      else {
        setListItems(rs.content);
      }
-			if(rs.hasNext 
+      if (rs.hasNext
        && rs.nextCursor !== pageParam.cursor
        && rs.content.length === DEFAULT_PAGE_PARAM.size
-      ){
+      ) {
        setPageParam({
          ...pageParam,
          ...{ cursor: rs.nextCursor }
        });
      }
-      else{
+      else {
        setPageParam({
          ...pageParam,
          ...{ cursor: null }
@@ -137,12 +148,12 @@ export const LinkPaymentWaitSendWrap = () => {
  };

  const onRequestDownloadExcel = (
-		selectedMode: DownloadSelectedMode,
-		userEmail?: string
-	) => {
-    if(selectedMode === DownloadSelectedMode.EMAIL
+    selectedMode: DownloadSelectedMode,
+    userEmail?: string
+  ) => {
+    if (selectedMode === DownloadSelectedMode.EMAIL
      && userEmail
-    ){
+    ) {
      downloadExcel({
        mid: mid,
        email: userEmail,
@@ -155,7 +166,7 @@ export const LinkPaymentWaitSendWrap = () => {
      }).then((rs) => {
        console.log('Excel Download Status: ' + rs.status);
      }).catch((e: any) => {
-        if(e.response?.data?.error?.message){
+        if (e.response?.data?.error?.message) {
          snackBar(e.response?.data?.error?.message);
          return;
        }
@@ -169,10 +180,10 @@ export const LinkPaymentWaitSendWrap = () => {

  const setDetailData = (detailData: DetailData) => {
    setDetailOn(detailData.detailOn);
-    if(detailData.mid){
+    if (detailData.mid) {
      setDetailMid(detailData.mid);
    }
-    if(detailData.requestId){
+    if (detailData.requestId) {
      setDetailRequestId(detailData.requestId);
    }
  };
@@ -181,8 +192,23 @@ export const LinkPaymentWaitSendWrap = () => {
    setProcessStatus(val);
  };

+  const checkUsedFilter = () => {
+    let rs: boolean = true;
+    if (startDate === defaultParams.startDate
+      && endDate === defaultParams.endDate
+      && searchType === defaultParams.searchType
+      && searchValue === defaultParams.searchValue
+      && sendMethod === defaultParams.sendMethod
+      && processStatus === defaultParams.processStatus
+    ) {
+      rs = false;
+    }
+    setFilterUsed(rs);
+  }
+
  useEffect(() => {
    callList();
+    checkUsedFilter();
  }, [
    mid,
    searchType,
@@ -210,14 +236,17 @@ export const LinkPaymentWaitSendWrap = () => {
              <img
                src={IMAGE_ROOT + '/ico_setting.svg'}
                alt={t('common.searchOptions')}
-                onClick={ onClickToOpenFilter }
+                onClick={onClickToOpenFilter}
              />
+              {filterUsed &&
+                <span className="notification-badge2"></span>
+              }
            </button>
          </div>
          <button
            className="download-btn"
            aria-label={t('common.download')}
-            onClick={ onClickToOpenDownloadBottomSheet }
+            onClick={onClickToOpenDownloadBottomSheet}
          >
            <img
              src={IMAGE_ROOT + '/ico_download.svg'}
@@ -248,14 +277,14 @@ export const LinkPaymentWaitSendWrap = () => {
      </div>

      <LinkPaymentWaitList
-        listItems={ listItems }
-        additionalServiceCategory={ AdditionalServiceCategory.LinkPaymentWait }
-        mid={ mid }
-        setDetailData={ setDetailData }
-        onClickToOpenFilter={ onClickToOpenFilter }
-        onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
+        listItems={listItems}
+        additionalServiceCategory={AdditionalServiceCategory.LinkPaymentWait}
+        mid={mid}
+        setDetailData={setDetailData}
+        onClickToOpenFilter={onClickToOpenFilter}
+        onClickToOpenDownloadBottomSheet={onClickToOpenDownloadBottomSheet}
      ></LinkPaymentWaitList>
-      <div ref={ setTarget }></div>
+      <div ref={setTarget}></div>
      <div className="apply-row">
        <button
          className="btn-50 btn-blue flex-1"
@@ -281,18 +310,18 @@ export const LinkPaymentWaitSendWrap = () => {
        setProcessStatus={setProcessStatus}
      ></LinkPaymentWaitSendFilter>
      <LinkPaymentWaitDetail
-        detailOn={ detailOn }
-        setDetailOn={ setDetailOn }
-        mid={ detailMid }
-        requestId={ detailRequestId }
+        detailOn={detailOn}
+        setDetailOn={setDetailOn}
+        mid={detailMid}
+        requestId={detailRequestId}
      ></LinkPaymentWaitDetail>
-      { !!downloadBottomSheetOn &&
+      {!!downloadBottomSheetOn &&
        <DownloadBottomSheet
-          bottomSheetOn={ downloadBottomSheetOn }
-          setBottomSheetOn={ setDownloadBottomSheetOn }
-          imageMode={ false }
-          emailMode={ true }
-          sendRequest={ onRequestDownloadExcel }
+          bottomSheetOn={downloadBottomSheetOn}
+          setBottomSheetOn={setDownloadBottomSheetOn}
+          imageMode={false}
+          emailMode={true}
+          sendRequest={onRequestDownloadExcel}
        ></DownloadBottomSheet>
      }
    </>
--- a/src/pages/additional-service/alimtalk/list-page.tsx
+++ b/src/pages/additional-service/alimtalk/list-page.tsx
@@ -337,11 +337,11 @@ export const AlimtalkListPage = () => {
    };
  }, []);

-  /*
+
  if (!hasAccess) {
    return <AccessDeniedDialog />;
  }
-    */
+

  return (
    <>
--- a/src/pages/additional-service/ars/list-page.tsx
+++ b/src/pages/additional-service/ars/list-page.tsx
@@ -12,7 +12,7 @@ import { JSX, useEffect, useState } from 'react';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
 import { ArsListItem, ExtensionArsDownloadExcelParams, ExtensionArsDownloadExcelResponse, ExtensionArsListParams, ExtensionArsListResponse, OrderStatus, PaymentStatus } from '@/entities/additional-service/model/ars/types';
 import { useExtensionArsListMutation } from '@/entities/additional-service/api/ars/use-extension-ars-list-mutation';
-import moment from 'moment';
+import moment, { max } from 'moment';
 import { useExtensionArsDownloadExcelMutation } from '@/entities/additional-service/api/ars/use-extension-ars-download-excel-mutation';
 import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group';
 import { AdditionalServiceCategory, DetailData } from '@/entities/additional-service/model/types';
@@ -30,6 +30,16 @@ import { checkGrant } from '@/shared/lib/check-grant';
 import { showAlert } from '@/widgets/show-alert';
 import { snackBar } from '@/shared/lib';

+const defaultParams = {
+  moid: '',
+  fromDate: moment().format('YYYYMMDD'),
+  toDate: moment().format('YYYYMMDD'),
+  orderStats: OrderStatus.ALL,
+  paymentStatus: PaymentStatus.ALL,
+  minAmount: undefined,
+  maxAmount: undefined
+}
+
 export const ArsListPage = () => {
  const { navigate } = useNavigate();
  const { t } = useTranslation();
@@ -47,13 +57,14 @@ export const ArsListPage = () => {
  const [filterOn, setFilterOn] = useState<boolean>(false);
  const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
  const [mid, setMid] = useState<string>(userMid);
-  const [moid, setMoid] = useState<string>('');
-  const [fromDate, setFromDate] = useState<string>(moment().format('YYYYMMDD'));
-  const [toDate, setToDate] = useState<string>(moment().format('YYYYMMDD'));
-  const [paymentStatus, setPaymentStatus] = useState<PaymentStatus>(PaymentStatus.ALL);
-  const [orderStatus, setOrderStatus] = useState<OrderStatus>(OrderStatus.ALL);
+  const [moid, setMoid] = useState<string>(defaultParams.moid);
+  const [fromDate, setFromDate] = useState<string>(defaultParams.fromDate);
+  const [toDate, setToDate] = useState<string>(defaultParams.toDate);
+  const [paymentStatus, setPaymentStatus] = useState<PaymentStatus>(defaultParams.paymentStatus);
+  const [orderStatus, setOrderStatus] = useState<OrderStatus>(defaultParams.orderStats);
  const [minAmount, setMinAmount] = useState<number>();
  const [maxAmount, setMaxAmount] = useState<number>();
+  const [filterUsed, setFilterUsed] = useState<boolean>(false);

  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

@@ -137,7 +148,7 @@ export const ArsListPage = () => {
        && rs.content.length === DEFAULT_PAGE_PARAM.size
      );
    }).catch((e: any) => {
-      if(e.response?.data?.error?.message){
+      if (e.response?.data?.error?.message) {
        snackBar(e.response?.data?.error?.message);
        return;
      }
@@ -210,8 +221,24 @@ export const ArsListPage = () => {
    setPaymentStatus(val);
  };

+  const checkUsedFilter = () => {
+    let rs: boolean = true;
+    if (fromDate === defaultParams.fromDate
+      && toDate === defaultParams.toDate
+      && moid === defaultParams.moid
+      && paymentStatus === defaultParams.paymentStatus
+      && orderStatus === defaultParams.orderStats
+      && minAmount === defaultParams.minAmount
+      && maxAmount === defaultParams.maxAmount
+    ) {
+      rs = false;
+    }
+    setFilterUsed(rs);
+  }
+
  useEffect(() => {
    callList();
+    checkUsedFilter();
  }, [
    mid,
    moid,
@@ -245,18 +272,21 @@ export const ArsListPage = () => {
                  <button
                    className="filter-btn"
                    aria-label={t('filter.filter')}
-                    onClick={ onClickToOpenFilter }
+                    onClick={onClickToOpenFilter}
                  >
                    <img
                      src={IMAGE_ROOT + '/ico_setting.svg'}
                      alt={t('common.searchOptions')}
                    />
+                    {filterUsed &&
+                      <span className="notification-badge2"></span>
+                    }
                  </button>
                </div>
                <button
                  className="download-btn"
                  aria-label={t('common.download')}
-                  onClick={ onClickToOpenDownloadBottomSheet }
+                  onClick={onClickToOpenDownloadBottomSheet}
                >
                  <img
                    src={IMAGE_ROOT + '/ico_download.svg'}
@@ -291,8 +321,8 @@ export const ArsListPage = () => {
              listItems={listItems}
              mid={mid}
              setDetailData={setDetailData}
-              onClickToOpenFilter={ onClickToOpenFilter }
-              onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
+              onClickToOpenFilter={onClickToOpenFilter}
+              onClickToOpenDownloadBottomSheet={onClickToOpenDownloadBottomSheet}
            ></ArsList>
            <div ref={setTarget}></div>
          </div>
@@ -330,13 +360,13 @@ export const ArsListPage = () => {
        mid={detailMid}
        tid={detailTid}
      ></ArsDetail>
-      { !!downloadBottomSheetOn &&
+      {!!downloadBottomSheetOn &&
        <DownloadBottomSheet
-          bottomSheetOn={ downloadBottomSheetOn }
-          setBottomSheetOn={ setDownloadBottomSheetOn }
-          imageMode={ false }
-          emailMode={ true }
-          sendRequest={ onRequestDownloadExcel }
+          bottomSheetOn={downloadBottomSheetOn}
+          setBottomSheetOn={setDownloadBottomSheetOn}
+          imageMode={false}
+          emailMode={true}
+          sendRequest={onRequestDownloadExcel}
        ></DownloadBottomSheet>
      }
    </>
--- a/src/pages/additional-service/payout/list-page.tsx
+++ b/src/pages/additional-service/payout/list-page.tsx
@@ -38,6 +38,15 @@ import { checkGrant } from '@/shared/lib/check-grant';
 import { showAlert } from '@/widgets/show-alert';
 import { snackBar } from '@/shared/lib';

+const defaultParams = {
+  fromDate: moment().format('YYYYMMDD'),
+  toDate: moment().format('YYYYMMDD'),
+  searchDateType: PayoutSearchDateType.REQUEST_DATE,
+  disbursementStatus: PayoutDisbursementStatus.ALL,
+  minAmount: undefined,
+  maxAmount: undefined
+}
+
 export const PayoutListPage = () => {
  // Access check
  const { hasAccess, AccessDeniedDialog } = useExtensionAccessCheck({
@@ -53,13 +62,13 @@ export const PayoutListPage = () => {
  const [filterOn, setFilterOn] = useState<boolean>(false);
  const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
  const [mid, setMid] = useState<string>(userMid);
-  const [searchDateType, setSearchDateType] = useState<PayoutSearchDateType>(PayoutSearchDateType.REQUEST_DATE);
-  const [fromDate, setFromDate] = useState<string>(moment().format('YYYYMMDD'));
-  const [toDate, setToDate] = useState<string>(moment().format('YYYYMMDD'));
-  const [status, setStatus] = useState<PayoutDisbursementStatus>(PayoutDisbursementStatus.ALL);
-  const [minAmount, setMinAmount] = useState<number | undefined>();
-  const [maxAmount, setMaxAmount] = useState<number | undefined>();
-
+  const [searchDateType, setSearchDateType] = useState<PayoutSearchDateType>(defaultParams.searchDateType);
+  const [fromDate, setFromDate] = useState<string>(defaultParams.fromDate);
+  const [toDate, setToDate] = useState<string>(defaultParams.toDate);
+  const [status, setStatus] = useState<PayoutDisbursementStatus>(defaultParams.disbursementStatus);
+  const [minAmount, setMinAmount] = useState<number | undefined>(defaultParams.minAmount);
+  const [maxAmount, setMaxAmount] = useState<number | undefined>(defaultParams.maxAmount);
+  const [filterUsed, setFilterUsed] = useState<boolean>(false);
  const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);

  const [detailOn, setDetailOn] = useState<boolean>(false);
@@ -212,8 +221,23 @@ export const PayoutListPage = () => {
    setStatus(val);
  };

+  const checkUsedFilter = () => {
+    let rs: boolean = true;
+    if (fromDate === defaultParams.fromDate
+      && toDate === defaultParams.toDate
+      && searchDateType === defaultParams.searchDateType
+      && status === defaultParams.disbursementStatus
+      && minAmount === defaultParams.minAmount
+      && maxAmount === defaultParams.maxAmount
+    ) {
+      rs = false;
+    }
+    setFilterUsed(rs);
+  }
+
  useEffect(() => {
    callList();
+    checkUsedFilter();
  }, [
    mid,
    searchDateType,
@@ -225,51 +249,7 @@ export const PayoutListPage = () => {
    sortType
  ]);

-  const getListDateGroup = () => {
-    let rs = [];
-    let date = '';
-    let list = [];
-    for (let i = 0; i < listItems.length; i++) {
-      let itemDateStr = '';
-      if (searchDateType === PayoutSearchDateType.REQUEST_DATE) {
-        itemDateStr = listItems[i]?.requestDate || '';
-      } else if (searchDateType === PayoutSearchDateType.SETTLEMENT_DATE) {
-        itemDateStr = listItems[i]?.settlementDate || '';
-      }
-      let itemDate = itemDateStr.substring(0, 8);
-      if (i === 0) {
-        date = itemDate;
-      }
-      if (date !== itemDate) {
-        if (list.length > 0) {
-          rs.push(
-            <ListDateGroup
-              additionalServiceCategory={AdditionalServiceCategory.Payout}
-              mid={mid}
-              key={date + '-' + i}
-              date={date}
-              items={list as any}
-            ></ListDateGroup>
-          );
-        }
-        date = itemDate;
-        list = [];
-      }
-      list.push(listItems[i] as any);
-    }
-    if (list.length > 0) {
-      rs.push(
-        <ListDateGroup
-          additionalServiceCategory={AdditionalServiceCategory.Payout}
-          mid={mid}
-          key={date + '-last'}
-          date={date}
-          items={list as any}
-        ></ListDateGroup>
-      );
-    }
-    return rs;
-  };
+

  if (!hasAccess) {
    return <AccessDeniedDialog />;
@@ -298,6 +278,9 @@ export const PayoutListPage = () => {
                      src={IMAGE_ROOT + '/ico_setting.svg'}
                      alt={t('common.searchOptions')}
                    />
+                    {filterUsed &&
+                      <span className="notification-badge2"></span>
+                    }
                  </button>
                </div>
                <button