거래내역 조회 필터 뱃지

src/entities/transaction/ui/filter/all-transaction-filter.tsx

@@ -52,7 +52,7 @@ export const AllTransactionFilter = ({
   setBankCode,
   setSearchCl,
   setSearchValue,
-  serviceCodeOptions
+  serviceCodeOptions,
 }: AllTransactionFilterProps) => {
   const { t } = useTranslation();
 
@@ -144,13 +144,12 @@ export const AllTransactionFilter = ({
   };
 
   
-  
   let setSearchClOptions = (value: string) => {
     let options = [];
     setFilterServiceCode(value);
 
     if(value === ''){
-
+      setFilterSearchCl(undefined);
     }
     else if(value === '01'){
       options.push({name: t('filter.searchOptions.cardNumber'), value: AllTransactionSearchCl.CARD_NO});

src/pages/transaction/all-transaction/list-page.tsx

@@ -40,6 +40,22 @@ import { useTransactionDownloadExcelMutation } from '@/entities/transaction/api/
 
 /* 거래내역조회 31 */
 const menuId = 31;
+const defaultParams = {
+  moid: '',
+  tid: '',
+  dateCl: '',
+  goodsName: '',
+  fromDate: moment().format('YYYYMMDD'),
+  toDate: moment().format('YYYYMMDD'), 
+  statusCode: '',
+  serviceCode: '',
+  minAmount: undefined,
+  maxAmount: undefined,
+  cardCode: undefined,
+  bankCode: undefined,
+  searchCl: undefined,
+  searchValue: undefined
+};
 export const AllTransactionListPage = () => {
   const { navigate } = useNavigate();
   
@@ -54,20 +70,20 @@ export const AllTransactionListPage = () => {
   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 [tid, setTid] = useState<string>('');
-  const [dateCl, setDateCl] = useState<string>('');
-  const [goodsName, setGoodsName] = useState<string>('');
-  const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
-  const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
-  const [statusCode, setStatusCode] = useState<string>('');
-  const [serviceCode, setServiceCode] = useState<string>('01');
-  const [minAmount, setMinAmount] = useState<number>();
-	const [maxAmount, setMaxAmount] = useState<number>();
-  const [cardCode, setCardCode] = useState<string | undefined>();
-  const [bankCode, setBankCode] = useState<string | undefined>();
-  const [searchCl, setSearchCl] = useState<AllTransactionSearchCl | undefined>();
-  const [searchValue, setSearchValue] = useState<string | undefined>();
+  const [moid, setMoid] = useState<string>(defaultParams.moid);
+  const [tid, setTid] = useState<string>(defaultParams.tid);
+  const [dateCl, setDateCl] = useState<string>(defaultParams.dateCl);
+  const [goodsName, setGoodsName] = useState<string>(defaultParams.goodsName);
+  const [fromDate, setFromDate] = useState<string>(defaultParams.fromDate);
+  const [toDate, setToDate] = useState<string>(defaultParams.toDate);
+  const [statusCode, setStatusCode] = useState<string>(defaultParams.statusCode);
+  const [serviceCode, setServiceCode] = useState<string>(defaultParams.serviceCode);
+  const [minAmount, setMinAmount] = useState<number | undefined>(defaultParams.minAmount);
+	const [maxAmount, setMaxAmount] = useState<number | undefined>(defaultParams.maxAmount);
+  const [cardCode, setCardCode] = useState<string | undefined>(defaultParams.cardCode);
+  const [bankCode, setBankCode] = useState<string | undefined>(defaultParams.bankCode);
+  const [searchCl, setSearchCl] = useState<AllTransactionSearchCl | undefined>(defaultParams.searchCl);
+  const [searchValue, setSearchValue] = useState<string | undefined>(defaultParams.searchValue);
 
   const [totalCount, setTotalCount] = useState<number>(0);
   const [totalAmount, setTotalAmount] = useState<number>(0);
@@ -78,6 +94,8 @@ export const AllTransactionListPage = () => {
   const [detailTid, setDetailTid] = useState<string>('');
   const [detailServiceCode, setDetailServiceCode] = useState<string>('');
 
+  const [filterUsed, setFilterUsed] = useState<boolean>(false);
+      
 	useSetHeaderTitle(t('transaction.listTitle'));
 	useSetHeaderType(HeaderType.LeftArrow);
 	useSetOnBack(() => {
@@ -296,8 +314,31 @@ export const AllTransactionListPage = () => {
     callServiceCodeOptions();
   }, []);
 
+  const checkUsedFilter = () => {
+    let rs: boolean = true;
+    if(moid === defaultParams.moid
+      && tid === defaultParams.tid
+      && dateCl === defaultParams.dateCl
+      && goodsName === defaultParams.goodsName
+      && fromDate === defaultParams.fromDate
+      && toDate === defaultParams.toDate
+      && statusCode === defaultParams.statusCode
+      && serviceCode === defaultParams.serviceCode
+      && minAmount === defaultParams.minAmount
+      && maxAmount === defaultParams.maxAmount
+      && cardCode === defaultParams.cardCode
+      && bankCode === defaultParams.bankCode
+      && searchCl === defaultParams.searchCl
+      && searchValue === defaultParams.searchValue
+    ){
+      rs =  false;
+    }
+    setFilterUsed(rs);
+  };
+
   useEffect(() => {
     callList();
+    checkUsedFilter();
   }, [
     mid, moid, tid, sortType,
     fromDate, toDate, 
@@ -325,6 +366,9 @@ export const AllTransactionListPage = () => {
                       alt={t('transaction.searchOptions')}
                       onClick={ onClickToOpenFilter }
                     />
+                    { filterUsed &&
+                      <span className="notification-badge2"></span>
+                    }
 									</button>
 									<button className="download-btn">
 										<img

src/shared/ui/assets/css/style-fix.css

@@ -555,3 +555,17 @@ main.pop{
 .resend-text {
   word-break: break-all !important;
 }
+.filter-btn{
+  position: relative;
+}
+.notification-badge2{
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  width: 10px;
+  height: 10px;
+  background-color: #ff4757;
+  border-radius: 50%;
+  border: 2px solid var(--color-white);
+  z-index: 100;
+}