test

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

@@ -5,7 +5,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { AllTransactionList } from '@/entities/transaction/ui/all-transaction-list';
-import { AllTransactionListItem, TransactionCategory, AllTransactionStateCode, AllTransactionServiceCode, AllTransactionSearchCl, AllTransactionListParams } from '@/entities/transaction/model/types';
+import { AllTransactionListItem, TransactionCategory, AllTransactionStatusCode, AllTransactionServiceCode, AllTransactionSearchCl, AllTransactionListParams } from '@/entities/transaction/model/types';
 import { useAllTransactionListMutation } from '@/entities/transaction/api/use-all-transaction-list-mutation';
 import { useAllTransactionListSummaryMutation } from '@/entities/transaction/api/use-all-transaction-list-summary-mutation';
 import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
@@ -20,16 +20,16 @@ import {
 	useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
 import { useStore } from '@/shared/model/store';
+import { useCodesListByCodeClMutation } from '@/entities/common/api/use-codes-list-by-codeCl-mutaion';
 
 export const AllTransactionListPage = () => {
   const { navigate } = useNavigate();
   const userMid = useStore.getState().UserStore.mid;
 
   const [serviceCodeOptions, setServiceCodeOptions] = useState<Array<Record<string, any>>>();
-  const [selectedServiceCode, setSelectedServiceCode] = useState<string>('st');
   
   const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
-  const [listItems, setListItems] = useState({});
+  const [listItems, setListItems] = useState<Array<any>>([]);
   const [filterOn, setFilterOn] = useState<boolean>(false);
   const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
   const [mid, setMid] = useState<string>(userMid);
@@ -40,8 +40,8 @@ export const AllTransactionListPage = () => {
   // const [fromDate, setFromDate] = useState(moment().subtract(1, 'month').format('YYYYMMDD'));
   const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
   const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
-  const [stateCode, setStateCode] = useState<AllTransactionStateCode>(AllTransactionStateCode.ALL);
-  const [serviceCode, setServiceCode] = useState<AllTransactionServiceCode>(AllTransactionServiceCode.ALL);
+  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>();
@@ -62,6 +62,7 @@ export const AllTransactionListPage = () => {
   
   const { mutateAsync: allTransactionList } = useAllTransactionListMutation();
   const { mutateAsync: allTransactionListSummary } = useAllTransactionListSummaryMutation();
+  const { mutateAsync: codesListByCodeCl} = useCodesListByCodeClMutation();
   const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
   
   const callList = (option?: {
@@ -73,8 +74,8 @@ export const AllTransactionListPage = () => {
       tid: tid,
       fromDate: fromDate,
       toDate: toDate,
-      stateCode: stateCode,
-      serviceCode: serviceCode,
+      statusCode: statusCode,
+      serviceCode: option?.val || serviceCode,
       minAmount: minAmount,
       maxAmount: maxAmount,
       dateCl: dateCl,
@@ -93,30 +94,13 @@ export const AllTransactionListPage = () => {
       ...{page: pageParam}
     };
     allTransactionList(listParams).then((rs) => {
-      setListItems(assembleData(rs.content));
+      setListItems(rs.content);
     });
     allTransactionListSummary(listSummaryParams).then((rs) => {
       setTotalAmount(rs.totalAmount);
       setTotalCount(rs.totalCount);
     });
   };
-
-  const assembleData = (content: Array<AllTransactionListItem>) => {
-    let data: any = {};
-    if(content && content.length > 0){
-      for(let i=0;i<content?.length;i++){
-        let transactionDateTime = content[i]?.transactionDateTime?.substring(0, 8);
-        let groupDate = moment(transactionDateTime).format('YYYYMMDD');
-        if(!!groupDate && !data.hasOwnProperty(groupDate)){
-          data[groupDate] = [];
-        }
-        if(!!groupDate && data.hasOwnProperty(groupDate)){
-          data[groupDate].push(content[i]);
-        }
-      }
-    }
-    return data;
-  };
   
   const onClickToOpenFilter = () => {
     setFilterOn(!filterOn);
@@ -131,25 +115,34 @@ export const AllTransactionListPage = () => {
   };
   const onClickToSort = (sort: SortTypeKeys) => {
     setSortType(sort);
-    callList({sortType: sort});
+    callList({
+      sortType: sort
+    });
   };
   const callServiceCodeOptions = () => {
-    let options = [
-      {text: '계좌간편결제', value: 'simple'},
-      {text: '신용카드', value: 'card'},
-      {text: '계좌이체', value: 'transfer'},
-      {text: '휴대폰', value: 'phone'},
-      {text: '문화상품권', value: 'gift'},
-      {text: '티머니페이', value: '티머니페이'}
-    ];
-    setServiceCodeOptions(options);
-    setSelectedServiceCode('simple');  
+    let useListCodes: Array<string> = ['01', '02', '03', '05', '14', '21', '24', '26', '31'];
+    let params = {
+      codeCl: '0022'
+    };
+    let options = [];
+    codesListByCodeCl(params).then((rs) => {
+      options = rs.filter((value, index) => {
+        return useListCodes.includes(value.code1);
+      }).map((value, index) => {
+        return {
+          name: value.desc1,
+          value: value.code1
+        }
+      });
+      setServiceCodeOptions(options);
+      setServiceCode('01');
+    });
   };
 
-  const onChangeSelectedServiceCode = (e: ChangeEvent<HTMLSelectElement>) => {
+  const onChangeServiceCode = (e: ChangeEvent<HTMLSelectElement>) => {
     let val = e.target.value;
     // onchagne 에서 useState가 즉시 반영 안되므로 값을 직접 바로 넘긴다.
-    setSelectedServiceCode(val);
+    setServiceCode(val);
     callList({
       val: val
     });
@@ -163,7 +156,7 @@ export const AllTransactionListPage = () => {
         <option 
           key={`key-${i}`}
           value={serviceCodeOptions[i]?.value}
-        >{ serviceCodeOptions[i]?.text }</option>
+        >{ serviceCodeOptions[i]?.name }</option>
       )
     }
     return rs;
@@ -178,7 +171,7 @@ export const AllTransactionListPage = () => {
   }, [
     mid, moid, 
     tid, fromDate, 
-    toDate, stateCode, 
+    toDate, statusCode, 
     serviceCode, minAmount, 
     maxAmount, bankCode,
     cardCode, searchCl,
@@ -245,8 +238,8 @@ export const AllTransactionListPage = () => {
                 onClickToSort={ onClickToSort }
               ></SortTypeBox>
 							<select 
-                value={ selectedServiceCode }
-                onChange={ (e) => onChangeSelectedServiceCode(e) }>
+                value={ serviceCode }
+                onChange={ (e) => onChangeServiceCode(e) }>
                 { getServiceCodeOptions() }
 							</select>
 						</div>
@@ -263,7 +256,7 @@ export const AllTransactionListPage = () => {
         mid={ mid }
         fromDate={ fromDate }
         toDate={ toDate }
-        stateCode={ stateCode }
+        statusCode={ statusCode }
         serviceCode={ serviceCode }
         minAmount={ minAmount }
         maxAmount={ maxAmount }
@@ -276,7 +269,7 @@ export const AllTransactionListPage = () => {
         setTid={ setTid }
         setFromDate={ setFromDate }
         setToDate={ setToDate }
-        setStateCode={ setStateCode }
+        setStatusCode={ setStatusCode }
         setServiceCode={ setServiceCode }
         setMinAmount={ setMinAmount }
         setMaxAmount={ setMaxAmount }
@@ -284,6 +277,7 @@ export const AllTransactionListPage = () => {
         setBankCode={ setBankCode }
         setSearchCl={ setSearchCl }
         setSearchValue={ setSearchValue }
+        serviceCodeOptions={ serviceCodeOptions }
       ></AllTransactionFilter>
     </>
 	);