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

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);
@@ -264,6 +275,21 @@ export const FundAccountResultListWrap = () => {
     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,
@@ -326,6 +353,9 @@ export const FundAccountResultListWrap = () => {
                 src={IMAGE_ROOT + '/ico_setting.svg'}
                 alt="검색옵션"
               />
+              {filterUsed &&
+                <span className="notification-badge2"></span>
+              }
             </button>
           </div>
           <button

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 [searchCl, setSearchCl] = useState<LinkPaymentSearchCl>(defaultParams.searchCl);
-	const [searchValue, setSearchValue] = useState<string>('');
+	const [searchValue, setSearchValue] = useState<string>(defaultParams.searchValue);
-	const [paymentMethod, setPaymentMethod] = useState<LinkPaymentPaymentMethod>(LinkPaymentPaymentMethod.CARD);
+	const [paymentMethod, setPaymentMethod] = useState<LinkPaymentPaymentMethod>(defaultParams.paymentMethod);
-	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 [paymentStatus, setPaymentStatus] = useState<LinkPaymentPaymentStatus>(LinkPaymentPaymentStatus.ALL);
+	const [paymentStatus, setPaymentStatus] = useState<LinkPaymentPaymentStatus>(defaultParams.paymentStatus);
-	const [sendStatus, setSendStatus] = useState<LinkPaymentSendStatus>(LinkPaymentSendStatus.ALL);
+	const [sendStatus, setSendStatus] = useState<LinkPaymentSendStatus>(defaultParams.sendStatus);
-	const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL);
+	const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(defaultParams.sendMethod);
+
+	const [filterUsed, setFilterUsed] = useState<boolean>(false);
 
 	const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
 
@@ -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,
@@ -242,6 +273,9 @@ export const LinkPaymentHistoryWrap = () => {
 								alt={t('common.searchOptions')}
 								onClick={onClickToOpenFilter}
 							/>
+							{filterUsed &&
+								<span className="notification-badge2"></span>
+							}
 						</button>
 					</div>
 					<button

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 [searchType, setSearchType] = useState<LinkPaymentSearchCl>(defaultParams.searchType)
-  const [searchValue, setSearchValue] = useState<string>('');
+  const [searchValue, setSearchValue] = useState<string>(defaultParams.searchValue);
-  const [startDate, setStartDate] = useState(moment().format('YYYYMMDD'));
+  const [startDate, setStartDate] = useState(defaultParams.startDate);
-  const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
+  const [endDate, setEndDate] = useState(defaultParams.endDate);
-  const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL);
+  const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(defaultParams.sendMethod);
-  const [processStatus, setProcessStatus] = useState<LinkPaymentProcessStatus>(LinkPaymentProcessStatus.ALL);
+  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);
@@ -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,
@@ -212,6 +238,9 @@ export const LinkPaymentWaitSendWrap = () => {
                 alt={t('common.searchOptions')}
                 onClick={onClickToOpenFilter}
               />
+              {filterUsed &&
+                <span className="notification-badge2"></span>
+              }
             </button>
           </div>
           <button

src/pages/additional-service/alimtalk/list-page.tsx

@@ -337,11 +337,11 @@ export const AlimtalkListPage = () => {
     };
   }, []);
 
-  /*
+
   if (!hasAccess) {
     return <AccessDeniedDialog />;
   }
-    */
+
 
   return (
     <>

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 [moid, setMoid] = useState<string>(defaultParams.moid);
-  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 [paymentStatus, setPaymentStatus] = useState<PaymentStatus>(PaymentStatus.ALL);
+  const [paymentStatus, setPaymentStatus] = useState<PaymentStatus>(defaultParams.paymentStatus);
-  const [orderStatus, setOrderStatus] = useState<OrderStatus>(OrderStatus.ALL);
+  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);
 
@@ -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,
@@ -251,6 +278,9 @@ export const ArsListPage = () => {
                       src={IMAGE_ROOT + '/ico_setting.svg'}
                       alt={t('common.searchOptions')}
                     />
+                    {filterUsed &&
+                      <span className="notification-badge2"></span>
+                    }
                   </button>
                 </div>
                 <button

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 [searchDateType, setSearchDateType] = useState<PayoutSearchDateType>(defaultParams.searchDateType);
-  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 [status, setStatus] = useState<PayoutDisbursementStatus>(PayoutDisbursementStatus.ALL);
+  const [status, setStatus] = useState<PayoutDisbursementStatus>(defaultParams.disbursementStatus);
-  const [minAmount, setMinAmount] = useState<number | undefined>();
+  const [minAmount, setMinAmount] = useState<number | undefined>(defaultParams.minAmount);
-  const [maxAmount, setMaxAmount] = useState<number | undefined>();
+  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