test

src/entities/common/api/use-codes-list-by-codeCl-mutaion.ts

@@ -2,29 +2,22 @@ import axios from 'axios';
 import { API_URL } from '@/shared/api/urls';
 import { resultify } from '@/shared/lib/resultify';
 import { CBDCAxiosError } from '@/shared/@types/error';
-import { 
+import { CodesListByCodeClParams } from '../model/types';
-  CodesListByCodeClParams,
-  CodesListByCodeClResponse
-} from '../model/types';
 import { 
   useMutation,
   UseMutationOptions
 } from '@tanstack/react-query';
 
-export const codesListByCodeCl = ({ codeCl }: CodesListByCodeClParams) => {
+export const codesListByCodeCl = (params: CodesListByCodeClParams) => {
   return resultify(
-    axios.get<CodesListByCodeClResponse>(API_URL.codesListByCodeCl(codeCl)),
+    axios.get<Array<any>>(API_URL.codesListByCodeCl(params.codeCl)),
   );
 };
 
-export const useCodesListByCodeClMutation = (options?: UseMutationOptions<CodesListByCodeClResponse, CBDCAxiosError, CodesListByCodeClParams>) => {
+export const useCodesListByCodeClMutation = (options?: UseMutationOptions<Array<any>, CBDCAxiosError, CodesListByCodeClParams>) => {
-  const mutation = useMutation<CodesListByCodeClResponse, CBDCAxiosError, CodesListByCodeClParams>({
+  const mutation = useMutation<Array<any>, CBDCAxiosError, CodesListByCodeClParams>({
     ...options,
-    mutationFn: ({ 
+    mutationFn: (params: CodesListByCodeClParams) => codesListByCodeCl(params),
-      codeCl 
-    }: CodesListByCodeClParams) => codesListByCodeCl({
-      codeCl
-    }),
   });
 
   return {

src/entities/common/model/types.ts

@@ -129,9 +129,7 @@ export interface CodesSelectPostResponse {
 export interface CodesListByCodeClParams {
   codeCl: string;
 };
-export interface CodesListByCodeClResponse {
+
-  codeList: Array<CodeListItem>;
-};
 export interface CodesGroupByCodeClParams {
   codeCl: string;
 };

src/entities/transaction/model/contant.ts

@@ -2,7 +2,7 @@ import {
   AllTransactionMoidTid,
   AllTransactionSearchCl,
   AllTransactionServiceCode,
-  AllTransactionStateCode,
+  AllTransactionStatusCode,
   BillingPaymentMethod, 
   BillingProcessResult,
   BillingRequestStatus,
@@ -20,11 +20,11 @@ export const AllTransactionMoidTidOptionsGroup = [
   {name: 'TID', value: AllTransactionMoidTid.TID},
 ];
 
-export const AllTransactionStateCodeBtnGroup = [
+export const AllTransactionStatusCodeBtnGroup = [
-  {name: '전체', value: AllTransactionStateCode.ALL},
+  {name: '전체', value: AllTransactionStatusCode.ALL},
-  {name: '승인/입금완료', value: AllTransactionStateCode.APPROVAL},
+  {name: '승인/입금완료', value: AllTransactionStatusCode.APPROVAL},
-  {name: '전취소/취소', value: AllTransactionStateCode.CANCEL},
+  {name: '전취소/취소', value: AllTransactionStatusCode.CANCEL},
-  {name: '후취소/환불', value: AllTransactionStateCode.REFUND}
+  {name: '후취소/환불', value: AllTransactionStatusCode.REFUND}
 ];
 export const AllTransactionServiceCodeOptionsGroup = [
   {name: '전체', value: AllTransactionServiceCode.ALL},
@@ -43,6 +43,8 @@ export const AllTransactionCardBankCodeOptionsGroup = {
 
 };
 
+
+
 export const CashReceiptPurposeTypeBtnGroup = [
   {name: '전체', value: CashReceiptPurposeType.ALL},
   {name: '소득공제', value: CashReceiptPurposeType.INCOME_DEDUCTION},

src/entities/transaction/model/types.ts

@@ -30,7 +30,7 @@ export enum AllTransactionMoidTid {
   MOID = 'MOID',
   TID = 'TID'
 };
-export enum AllTransactionStateCode {
+export enum AllTransactionStatusCode {
   ALL = '0',
   APPROVAL = '1',
   CANCEL = '2',
@@ -136,7 +136,7 @@ export interface ListDateGroupProps {
 };
 export interface AllTransactionListProps {
   transactionCategory: TransactionCategory;
-  listItems: Record<string, Array<ListItemProps>>
+  listItems: Array<any>;
 };
 export interface CashReceiptListProps {
   transactionCategory: TransactionCategory;
@@ -227,7 +227,7 @@ export interface AllTransactionListParams {
   tid?: string;
   fromDate: string;
   toDate: string;
-  stateCode?: string;
+  statusCode?: string;
   serviceCode?: string;
   minAmount?: number;
   maxAmount?: number;
@@ -508,8 +508,8 @@ export interface AllTransactionFilterProps extends FilterProps {
   mid: string;
   fromDate: string;
   toDate: string;
-  stateCode: AllTransactionStateCode;
+  statusCode: string;
-  serviceCode: AllTransactionServiceCode;
+  serviceCode: string;
   minAmount?: number;
   maxAmount?: number;
   cardCode?: string;
@@ -521,15 +521,15 @@ export interface AllTransactionFilterProps extends FilterProps {
   setTid: (tid: string) => void;
   setFromDate: (fromDate: string) => void;
   setToDate: (endDate: string) => void;
-  setStateCode: (stateCode: AllTransactionStateCode) => void;
+  setStatusCode: (statusCode: string) => void;
-  setServiceCode: (serviceCode: AllTransactionServiceCode) => void;
+  setServiceCode: (serviceCode: string) => void;
   setMinAmount: (minAmount?: number) => void;
   setMaxAmount: (maxAmount?: number) => void;
   setCardCode: (cardCode: string | undefined) => void;
   setBankCode: (bankCode: string | undefined) => void;
   setSearchCl: (searchCl: AllTransactionSearchCl | undefined) => void;
   setSearchValue: (searchValue: string | undefined) => void;
-
+  serviceCodeOptions?: Array<Record<string, any>>;
 };
 export interface CashReceiptFilterProps extends FilterProps {
   mid : string;

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

@@ -8,15 +8,26 @@ export const AllTransactionList = ({
   
   const getListDateGroup = () => {
     let rs = [];
-    for (const [key, value] of Object.entries(listItems)) {
+    let date = '';
+    let list = [];
+    for(let i=0;i<listItems.length;i++){
+      let transactionDateTime = listItems[i].transactionDateTime;
+      let transactionDate = transactionDateTime.substr(0, 8);
+      if(date !== transactionDate){
+        date = transactionDate;
+        if(list.length > 0){
           rs.push(
             <ListDateGroup
               transactionCategory={ transactionCategory }
-          key={ key }
+              key={ date }
-          date={ key }
+              date={ date }
-          items={ value }
+              items={ list }
             ></ListDateGroup>
-      );  
+          )
+        }
+        list = [];
+      }
+      list.push(listItems[i]);
     }
     return rs;
   };

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

@@ -9,14 +9,14 @@ import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
 import { 
   AllTransactionMoidTidOptionsGroup,
-  AllTransactionStateCodeBtnGroup,
+  AllTransactionStatusCodeBtnGroup,
   AllTransactionServiceCodeOptionsGroup,
   AllTransactionCardBankCodeOptionsGroup,
 } from '@/entities/transaction/model/contant';
 import { 
   AllTransactionFilterProps,
   AllTransactionSearchCl,
-  AllTransactionStateCode,
+  AllTransactionStatusCode,
   AllTransactionServiceCode,
   AllTransactionMoidTid
 } from '../../model/types';
@@ -33,7 +33,7 @@ export const AllTransactionFilter = ({
   mid,
   fromDate,
   toDate,
-  stateCode,
+  statusCode,
   serviceCode,
   minAmount,
   maxAmount,
@@ -46,7 +46,7 @@ export const AllTransactionFilter = ({
   setTid,
   setFromDate,
   setToDate,
-  setStateCode,
+  setStatusCode,
   setServiceCode,
   setMinAmount,
   setMaxAmount,
@@ -54,6 +54,7 @@ export const AllTransactionFilter = ({
   setBankCode,
   setSearchCl,
   setSearchValue,
+  serviceCodeOptions
 }: AllTransactionFilterProps) => {
 
   const [filterMid, setFilterMid] = useState<string>(mid);
@@ -61,8 +62,8 @@ export const AllTransactionFilter = ({
   const [filterMoidTidValue, setFilterMoidTidValue] = useState<string>('');
   const [filterFromDate, setFilterFromDate] = useState<string>(fromDate);
   const [filterToDate, setFilterToDate] = useState<string>(toDate);
-  const [filterStateCode, setFilterStateCode] = useState<AllTransactionStateCode>(stateCode);
+  const [filterStatusCode, setFilterStatusCode] = useState<string>(statusCode);
-  const [filterServiceCode, setFilterServiceCode] = useState<AllTransactionServiceCode>(serviceCode);
+  const [filterServiceCode, setFilterServiceCode] = useState<string>(serviceCode);
   const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
   const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
   
@@ -78,6 +79,8 @@ export const AllTransactionFilter = ({
 
   const midOptions = useStore.getState().UserStore.selectOptionsMids;
 
+  console.log(serviceCodeOptions)
+
   const onClickToClose = () => {
     setFilterOn(false);
   };
@@ -98,7 +101,7 @@ export const AllTransactionFilter = ({
     }
     setFromDate(filterFromDate);
     setToDate(filterToDate);
-    setStateCode(filterStateCode);
+    setStatusCode(filterStatusCode);
 
     setServiceCode(filterServiceCode);
     setMinAmount(filterMinAmount);
@@ -110,9 +113,11 @@ export const AllTransactionFilter = ({
     onClickToClose();
   };
   
-  let setSearchClOptions = (value: AllTransactionServiceCode) => {
+  let setSearchClOptions = (value: string) => {
     let options = [];
     setFilterServiceCode(value);
+
+    /*
     if(value === AllTransactionServiceCode.ALL){
 
     }
@@ -146,6 +151,7 @@ export const AllTransactionFilter = ({
       options.push({name: '티머니번호', value: AllTransactionSearchCl.TMONEY_CARD_NO}); 
     }
     setSearchClOptionsGroup(options);
+    */
   };
 
   /*
@@ -206,16 +212,19 @@ export const AllTransactionFilter = ({
             
             <FilterButtonGroups
               title='거래상태'
-              activeValue={ filterStateCode }
+              activeValue={ filterStatusCode }
-              btnGroups={ AllTransactionStateCodeBtnGroup }
+              btnGroups={ AllTransactionStatusCodeBtnGroup }
-              setter={ setFilterStateCode }
+              setter={ setFilterStatusCode }
             ></FilterButtonGroups>
+
+            { serviceCodeOptions && 
             <FilterSelect
               title='결제수단'
               selectValue={ filterServiceCode }
               selectSetter={ setSearchClOptions }
-              selectOptions={ AllTransactionServiceCodeOptionsGroup }
+              selectOptions={ serviceCodeOptions }
             ></FilterSelect>
+            }
             
             <FilterRangeAmount
               title='거래금액'

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 [statusCode, setStatusCode] = useState<string>('');
-  const [serviceCode, setServiceCode] = useState<AllTransactionServiceCode>(AllTransactionServiceCode.ALL);
+  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,
+      statusCode: statusCode,
-      serviceCode: serviceCode,
+      serviceCode: option?.val || serviceCode,
       minAmount: minAmount,
       maxAmount: maxAmount,
       dateCl: dateCl,
@@ -93,7 +94,7 @@ export const AllTransactionListPage = () => {
       ...{page: pageParam}
     };
     allTransactionList(listParams).then((rs) => {
-      setListItems(assembleData(rs.content));
+      setListItems(rs.content);
     });
     allTransactionListSummary(listSummaryParams).then((rs) => {
       setTotalAmount(rs.totalAmount);
@@ -101,23 +102,6 @@ export const AllTransactionListPage = () => {
     });
   };
   
-  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 = [
+    let useListCodes: Array<string> = ['01', '02', '03', '05', '14', '21', '24', '26', '31'];
-      {text: '계좌간편결제', value: 'simple'},
+    let params = {
-      {text: '신용카드', value: 'card'},
+      codeCl: '0022'
-      {text: '계좌이체', value: 'transfer'},
+    };
-      {text: '휴대폰', value: 'phone'},
+    let options = [];
-      {text: '문화상품권', value: 'gift'},
+    codesListByCodeCl(params).then((rs) => {
-      {text: '티머니페이', value: '티머니페이'}
+      options = rs.filter((value, index) => {
-    ];
+        return useListCodes.includes(value.code1);
+      }).map((value, index) => {
+        return {
+          name: value.desc1,
+          value: value.code1
+        }
+      });
       setServiceCodeOptions(options);
-    setSelectedServiceCode('simple');  
+      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 }
+                value={ serviceCode }
-                onChange={ (e) => onChangeSelectedServiceCode(e) }>
+                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>
     </>
 	);

src/shared/configs/axios/index.ts

@@ -48,7 +48,7 @@ const onResponseFulfilled = (response: AxiosResponse) => {
   extractRequestId(response);
   return {
     ...response,
-    data: response.data.data,
+    data: response.data.data || response.data,
   };
 };