test

src/entities/common/model/store.ts

@@ -7,10 +7,19 @@ export interface BannerInfoState {
   setBannerInfo: (update: SetStateAction<Partial<BannerInfo>>) => void;
 };
 
-const initialBannerInfoState = {
+export interface CommonState {
+  serviceCodes: Array<any>;
+  setServiceCodes: (update: SetStateAction<Array<any>>) => void;
+};
+
+const initialBannerInfoState = {         
   bannerInfo: {} as BannerInfo,
 } as BannerInfoState;
 
+const initialCommonState = {
+  serviceCodes: [] as Array<any>,
+} as CommonState;
+
 export const createBannerInfoStore = lens<BannerInfoState>((set, get) => ({
   ...initialBannerInfoState,
   setBannerInfo: (update) => {
@@ -28,3 +37,19 @@ export const createBannerInfoStore = lens<BannerInfoState>((set, get) => ({
   },
   
 }));
+
+export const createCommonStore = lens<CommonState>((set, get) => ({
+  ...initialCommonState,
+  setServiceCodes: (update) => {
+    set((state: CommonState) => {
+      const newServiceCodes = (typeof update === 'function')
+        ? update(state.serviceCodes): update;
+        return {
+          ...state,
+          serviceCodes: [
+            ...newServiceCodes
+          ]
+        };
+    });
+  }
+}));

src/entities/transaction/model/contant.ts

@@ -39,6 +39,101 @@ export const AllTransactionServiceCodeOptionsGroup = [
   {name: '티머니페이', value: AllTransactionServiceCode.TMONEY},
 
 ];
+
+export const AllTracsactionStatusCode = [
+  {
+    serviceCode: '', 
+    list: [
+      {code: '', ko: '전체', en: 'All'},
+      {code: '0', ko: '승인/입금완료', en: 'Approval'},
+      {code: '1', ko: '전취소/취소', en: 'Total Cancellation'},
+      {code: '2', ko: '후취소/환불', en: 'Cancellation'}
+    ]
+  },
+  {
+    serviceCode: '01', 
+    list: [
+      {code: '', ko: '전체', en: 'All'},
+      {code: '0', ko: '승인', en: 'Approval'},
+      {code: '1', ko: '전취소', en: 'Total Cancellation'},
+      {code: '2', ko: '후취소', en: 'Cancellation'}
+    ]
+  },
+  {
+    serviceCode: '02',
+    list: [
+      {code: '', ko: '전체', en: 'All'},
+      {code: '0', ko: '승인', en: 'Approval'},
+      {code: '1', ko: '취소', en: 'Cancellation'},
+      {code: '2', ko: '환불', en: 'Refund'},
+    ]
+  },
+  {
+    serviceCode: '03',
+    list: [
+      {code: '', ko: '전체', en: 'All'},
+      {code: '0', ko: '입금', en: 'Payment Complete'},
+      {code: '2', ko: '환불', en: 'Refund'},
+      {code: '3', ko: '입금대기', en: 'Waiting Payment'},
+      {code: '4', ko: '채번취소', en: 'Cancellation Issue'},
+    ]
+  },
+  {
+    serviceCode: '05',
+    list: [
+      {code: '', ko: '전체', en: 'All'},
+      {code: '0', ko: '승인', en: 'Approval'},
+      {code: '1', ko: '취소', en: 'Cancellation'},
+      {code: '2', ko: '환불', en: 'Refund'},
+    ]
+  },
+  {
+    serviceCode: '14',
+    list: [
+      {code: '', ko: '전체', en: 'All'},
+      {code: '0', ko: '승인', en: 'Approval'},
+      {code: '1', ko: '취소', en: 'Cancellation'},
+      {code: '2', ko: '환불', en: 'Refund'},
+    ]
+  },
+  {
+    serviceCode: '21',
+    list: [
+      {code: '', ko: '전체', en: 'All'},
+      {code: '0', ko: '승인', en: 'Approval'},
+      {code: '1', ko: '취소', en: 'Cancellation'},
+      {code: '2', ko: '환불', en: 'Refund'},
+    ]
+  },
+  {
+    serviceCode: '24',
+    list: [
+      {code: '', ko: '전체', en: 'All'},
+      {code: '0', ko: '승인', en: 'Approval'},
+      {code: '1', ko: '취소', en: 'Cancellation'},
+      {code: '2', ko: '환불', en: 'Refund'},
+    ]
+  },
+  {
+    serviceCode: '26',
+    list: [
+      {code: '', ko: '전체', en: 'All'},
+      {code: '0', ko: '승인', en: 'Approval'},
+      {code: '1', ko: '취소', en: 'Cancellation'},
+      {code: '2', ko: '환불', en: 'Refund'},
+    ]
+  },
+  {
+    serviceCode: '31',
+    list: [
+      {code: '', ko: '전체', en: 'All'},
+      {code: '0', ko: '승인', en: 'Approval'},
+      {code: '1', ko: '전취소', en: 'Total Cancellation'},
+      {code: '2', ko: '후취소', en: 'Cancellation'},
+    ]
+  },
+];
+
 export const AllTransactionCardBankCodeOptionsGroup = {
 
 };

src/entities/transaction/model/types.ts

@@ -156,6 +156,7 @@ export interface AllTransactionListItem {
   transactionDateTime?: string;
   statusCode?: string;
   installmentMonth?: string;
+  serviceName?: string;
   serviceCode?: string;
   serviceDetailName?: string;
   goodsAmount?: number;
@@ -279,7 +280,7 @@ export interface BillingListParams {
 };
 
 export interface AllTransactionDetailParams {
-  svcCd?: string;
+  serviceCode?: string;
   tid?: string;
 };
 export interface CashReceiptDetailParams {
@@ -309,20 +310,17 @@ export interface AmountInfo {
   escrowFee?: number;
 };
 export interface ImportantInfo {
-  ordNo?: string;
+  moid?: string;
   tid?: string;
-  tradeStatus?: string;
+  transactionStatus?: string;
-  tradeMethod?: string;
+  statusName?: string;
-  productName?: string;
+  serviceCode?: string;
+  serviceName?: string;
   approvalDate?: string;
-  tradeDate?: string;
+  transactionDate?: string;
   requestDate?: string;
   cancelDate?: string;
-  mid?: string;
+  goodsName?: string;
-  orderNumber?: string;
-  transactionStatus?: string;
-  paymentMethod?: string;
-  approvalDateTime?: string;
 };
 export interface PaymentInfo {
   approvalAcquire?: string;

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

@@ -5,7 +5,6 @@ export const AllTransactionList = ({
   transactionCategory,
   listItems 
 }: AllTransactionListProps) => {
-  
   const getListDateGroup = () => {
     let rs = [];
     let date = '';
@@ -13,13 +12,16 @@ export const AllTransactionList = ({
     for(let i=0;i<listItems.length;i++){
       let transactionDateTime = listItems[i].transactionDateTime;
       let transactionDate = transactionDateTime.substr(0, 8);
+      if(i === 0){
+        date = transactionDate;
+      }
       if(date !== transactionDate){
         date = transactionDate;
         if(list.length > 0){
           rs.push(
             <ListDateGroup
               transactionCategory={ transactionCategory }
-              key={ date }
+              key={ date + '-' + i }
               date={ date }
               items={ list }
             ></ListDateGroup>
@@ -29,6 +31,16 @@ export const AllTransactionList = ({
       }
       list.push(listItems[i]);
     }
+    if(list.length > 0){
+      rs.push(
+        <ListDateGroup
+          transactionCategory={ transactionCategory }
+          key={ date + '-last' }
+          date={ date }
+          items={ list }
+        ></ListDateGroup>
+      )
+    }
     return rs;
   };
 

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

@@ -12,6 +12,7 @@ import {
   AllTransactionStatusCodeBtnGroup,
   AllTransactionServiceCodeOptionsGroup,
   AllTransactionCardBankCodeOptionsGroup,
+  AllTracsactionStatusCode,
 } from '@/entities/transaction/model/contant';
 import { 
   AllTransactionFilterProps,
@@ -79,7 +80,7 @@ export const AllTransactionFilter = ({
 
   const midOptions = useStore.getState().UserStore.selectOptionsMids;
 
-  console.log(serviceCodeOptions)
+  const [statusCodeBtns, setStatusCodeBtns] = useState<Array<Record<string, string>>>();
 
   const onClickToClose = () => {
     setFilterOn(false);
@@ -112,53 +113,68 @@ export const AllTransactionFilter = ({
     setSearchValue(filterSearchValue);
     onClickToClose();
   };
+
+  
   
   let setSearchClOptions = (value: string) => {
     let options = [];
     setFilterServiceCode(value);
 
-    /*
+    if(value === ''){
-    if(value === AllTransactionServiceCode.ALL){
 
     }
-    else if(value === AllTransactionServiceCode.CREDIT_CARD){
+    else if(value === '01'){
       options.push({name: '카드번호', value: AllTransactionSearchCl.CARD_NO});
       options.push({name: '승인번호', value: AllTransactionSearchCl.CARD_APPROVAL_NO});
     }
-    else if(value === AllTransactionServiceCode.VIRTUAL_ACCOUNT){
+    else if(value === '02'){
+      options.push({name: '구매자명', value: AllTransactionSearchCl.BANK_BUYER_NM});
+    }
+    else if(value === '03'){
       options.push({name: '가상계좌번호', value: AllTransactionSearchCl.VACCT_NO});
       options.push({name: '입금자명', value: AllTransactionSearchCl.VACCT_DEPOSIT_NM});
     }
-    else if(value === AllTransactionServiceCode.ACCOUNT_TRANSFER){
+    else if(value === '05'){
-      options.push({name: '구매자명', value: AllTransactionSearchCl.BANK_BUYER_NM});
-    }
-    else if(value === AllTransactionServiceCode.ACCOUNT_SIMPLE_TRANSFER){
-      
-    }
-    else if(value === AllTransactionServiceCode.MOBILE_PAYMENT){
       options.push({name: '휴대폰번호', value: AllTransactionSearchCl.TEL_NO});
     }
-    else if(value === AllTransactionServiceCode.SSGMONEY){
+    else if(value === '14'){
       options.push({name: '상품권번호', value: AllTransactionSearchCl.SSGMONEY_GIFT_NO}); 
     }
-    else if(value === AllTransactionServiceCode.SSGBANK){
+    else if(value === '21'){
       options.push({name: '승인번호', value: AllTransactionSearchCl.SSGBANK_APPROVAL_NO}); 
     }
-    else if(value === AllTransactionServiceCode.CULT){
+    else if(value === '24'){
+      options.push({name: '고객ID', value: AllTransactionSearchCl.CMSBANK_USER_ID}); 
+    }
+    else if(value === '26'){
       options.push({name: '컬처랜드ID', value: AllTransactionSearchCl.SSGBANK_APPROVAL_NO}); 
     }
-    else if(value === AllTransactionServiceCode.TMONEY){
+    else if(value === '31'){
-      options.push({name: '티머니번호', value: AllTransactionSearchCl.TMONEY_CARD_NO}); 
+      options.push({name: '카드번호', value: AllTransactionSearchCl.TMONEY_CARD_NO}); 
     }
     setSearchClOptionsGroup(options);
-    */
+    
+  };
+  
+  const onChangeServiceCode = (val: string) => {
+    let list = AllTracsactionStatusCode.filter((value, index) => {
+      return val === value.serviceCode;
+    })[0]?.list;
+    let btns = list?.map((value, index) => {
+      return {
+        name: value.ko,
+        value: value.code
+      }
+    });
+    setStatusCodeBtns(btns);
+    setSearchClOptions(val);
   };
 
-  /*
+
   useEffect(() => {
-    setFilterDeliveryStatus(deliveryStatus);
+    onChangeServiceCode(serviceCode);
-  }, [deliveryStatus]);
+    setFilterServiceCode(serviceCode);
-  */
+  }, [serviceCode]);
 
   return (
     <>
@@ -213,7 +229,7 @@ export const AllTransactionFilter = ({
             <FilterButtonGroups
               title='거래상태'
               activeValue={ filterStatusCode }
-              btnGroups={ AllTransactionStatusCodeBtnGroup }
+              btnGroups={ statusCodeBtns }
               setter={ setFilterStatusCode }
             ></FilterButtonGroups>
 
@@ -221,7 +237,7 @@ export const AllTransactionFilter = ({
             <FilterSelect
               title='결제수단'
               selectValue={ filterServiceCode }
-              selectSetter={ setSearchClOptions }
+              selectSetter={ onChangeServiceCode }
               selectOptions={ serviceCodeOptions }
             ></FilterSelect>
             }

src/entities/transaction/ui/list-date-group.tsx

@@ -2,6 +2,7 @@ import moment from 'moment';
 import 'moment/dist/locale/ko';
 import { ListDateGroupProps } from '../model/types';
 import { ListItem } from './list-item';
+import { useStore } from '@/shared/model/store';
 
 export const ListDateGroup = ({
   transactionCategory,
@@ -9,16 +10,35 @@ export const ListDateGroup = ({
   items
 }: ListDateGroupProps) => {
   moment.locale('ko');
+  let serviceCodes = useStore.getState().CommonStore.serviceCodes;
   const getStateDate = () => {
     let stateDate = moment(date).format('YY.MM.DD(ddd)');
     return stateDate;
   };
 
+  const getServiceName = (serviceCode: string) => {
+    let serviceName = '';
+    for(let i=0;i<serviceCodes.length;i++){
+      if(serviceCodes[i].value === serviceCode){
+        serviceName = serviceCodes[i].name;
+        break;
+      }
+    }
+    return serviceName;
+  };
+
   const getListItem = () => {
     let rs = [];
+    console.log('items', items)
     if(!!items && items.length>0){
       for(let i=0;i<items.length;i++){
         let key = 'ListItem-'+i;
+        let serviceName = '';
+        let serviceCode = items[i]?.serviceCode
+        if(serviceCode){
+          serviceName = getServiceName(serviceCode);
+        }
+        
         rs.push(
           <ListItem
             transactionCategory={ transactionCategory }
@@ -27,7 +47,8 @@ export const ListDateGroup = ({
             mid={ items[i]?.mid }
             statusCode={ items[i]?.statusCode }
             installmentMonth={ items[i]?.installmentMonth }
-            serviceCode={ items[i]?.serviceCode }
+            serviceName={ serviceName }
+            serviceCode={ serviceCode }
             serviceDetailName={ items[i]?.serviceDetailName }
             goodsAmount={ items[i]?.goodsAmount }
 

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

@@ -3,11 +3,13 @@ import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { ListItemProps, TransactionCategory } from '../model/types';
 import moment from 'moment';
+import { useStore } from '@/shared/model/store';
+import { AllTracsactionStatusCode } from '../model/contant';
 
 export const ListItem = ({
   transactionCategory,
   tid, mid, statusCode,
-  installmentMonth, serviceCode,
+  installmentMonth, serviceName, serviceCode,
   serviceDetailName, goodsAmount,
   id, amount, customerName, issueNumber,
   issueStatus, paymentMethod, processResult, 
@@ -94,15 +96,20 @@ export const ListItem = ({
   const getTitle = () => {
     let str = '';
     if(transactionCategory === TransactionCategory.AllTransaction){
-      let strDetailName = serviceDetailName?.split('|').join(',');
+      let strDetailName = '';
+      if(serviceDetailName){
+        strDetailName = serviceDetailName?.split('|').join(',');
+      }
       if(strDetailName){
         let last = strDetailName.slice(-1);
         if(last === ','){
           strDetailName = strDetailName.substring(0, strDetailName.length - 1);
         }
-        str = `(${strDetailName})`;
+        str = `${serviceName}(${strDetailName})`;
+      }
+      else{
+        str = `${serviceName}`;
       }
-      
     }
     else if(transactionCategory === TransactionCategory.CashReceipt){
       str = `${customerName}(${issueNumber})`
@@ -116,14 +123,39 @@ export const ListItem = ({
     return str;
   };
 
+  const getStatusName = () => {
+    let str;
+    if(transactionCategory === TransactionCategory.AllTransaction){
+      Loop1: 
+      for(let i=0;i<AllTracsactionStatusCode.length;i++){
+        if(serviceCode === AllTracsactionStatusCode[i]?.serviceCode){
+          let list = AllTracsactionStatusCode[i]?.list;
+          if(!!list){
+            Loop2:
+            for(let j=0;j<list.length;j++){
+              if(list[j]?.code === statusCode){
+                str = list[j]?.ko;
+                break Loop1;
+              }
+            }
+          }
+        }
+      }
+    }
+    return str || '';
+  };
+
   const getDetail = () => {
     let rs = [];
     if(transactionCategory === TransactionCategory.AllTransaction){
       rs.push(
-        <div className="transaction-details">
+        <div 
+          className="transaction-details"
+          key={ tid }
+        >
           <span>{ getTime() }</span>
           <span className="separator">|</span>
-          <span>{ statusCode }</span>
+          <span>{ getStatusName() }</span>
           <span className="separator">|</span>
           <span>{ mid }</span>
           {

src/entities/transaction/ui/section/important-info-section.tsx

@@ -1,53 +1,104 @@
 import moment from 'moment';
 import { NumericFormat } from 'react-number-format';
 import { InfoSectionProps, TransactionCategory } from '../../model/types';
+import { useStore } from '@/shared/model/store';
+import { AllTracsactionStatusCode } from '../../model/contant';
 
 export const ImportantInfoSection = ({
   transactionCategory,
   importantInfo,
   serviceCode
-  }: InfoSectionProps) => {
+}: InfoSectionProps) => {
+  let serviceCodes = useStore.getState().CommonStore.serviceCodes;
+  let serviceName = '';
+  let statusName = '';
+
+  const getServiceName = (serviceCode: string) => {
+    let serviceName = '';
+    for(let i=0;i<serviceCodes.length;i++){
+      if(serviceCodes[i].value === serviceCode){
+        serviceName = serviceCodes[i].name;
+        break;
+      }
+    }
+    return serviceName;
+  };
+
+  const getStatusName = (serviceCode: string, statusCode: string) => {
+    let str;
+    if(transactionCategory === TransactionCategory.AllTransaction){
+      Loop1: 
+      for(let i=0;i<AllTracsactionStatusCode.length;i++){
+        if(serviceCode === AllTracsactionStatusCode[i]?.serviceCode){
+          let list = AllTracsactionStatusCode[i]?.list;
+          if(!!list){
+            Loop2:
+            for(let j=0;j<list.length;j++){
+              if(list[j]?.code === statusCode){
+                str = list[j]?.ko;
+                break Loop1;
+              }
+            }
+          }
+        }
+      }
+    }
+    return str || '';
+  };
   
+  if(serviceCode){
+    serviceName = getServiceName(serviceCode);
+    if(importantInfo){
+      importantInfo.serviceName = serviceName;
+    }
+  }
+  if(serviceCode && importantInfo?.transactionStatus){
+    statusName = getStatusName(serviceCode, importantInfo.transactionStatus);
+    if(importantInfo){
+      importantInfo.statusName = statusName;
+    }
+  }
+
   const subItems: Record<string, Record<string, string>> = {
-    ordNo: {name: '주문번호', type: 'string'},
+    moid: {name: '주문번호', type: 'string'},
     tid: {name: 'TID', type: 'string'},
-    tradeStatus: {name: '거래상태', type: 'string'},
+    statusName: {name: '거래상태', type: 'string'},
-    tradeMethod: {name: '거래수단', type: 'string'},
+    serviceName: {name: '거래수단', type: 'string'},
     approvalDate: {name: '승인일', type: 'date'},
-    tradeDate: {name: '거래일', type: 'date'},
+    transactionDate: {name: '거래일', type: 'date'},
     requestDate: {name: '요청일', type: 'date'},
     cancelDate: {name: '취소일', type: 'date'},
-    productName: {name: '상품명', type: 'string'}
+    goodsName: {name: '상품명', type: 'string'}
   };
   
   const openSubItems: Record<string, Array<string>> = {
     // 신용카드
-    '01': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
+    '01': ['moid', 'tid', 'statusName', 'serviceName', 
-      'approvalDate', 'cancelDate', 'productName'],
+      'approvalDate', 'cancelDate', 'goodsName'],
     // 계좌이체
-    '02': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod',
+    '02': ['moid', 'tid', 'statusName', 'serviceName',
-      'tradeDate', 'cancelDate', 'productName'],
+      'transactionDate', 'cancelDate', 'goodsName'],
     // 가상계좌
-    '03': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
+    '03': ['moid', 'tid', 'statusName', 'serviceName', 
-      'requestDate', 'cancelDate', 'productName'],
+      'requestDate', 'cancelDate', 'goodsName'],
     // 휴대폰
-    '04': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
+    '05': ['moid', 'tid', 'statusName', 'serviceName', 
-      'tradeDate', 'cancelDate', 'productName'],
+      'transactionDate', 'cancelDate', 'goodsName'],
-    // 계좌간편결제
-    '26': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
-      'tradeDate', 'cancelDate', 'productName'],
-    // SSG머니
-    '21': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
-      'tradeDate', 'cancelDate', 'productName'],
-    // SSG은행계좌
-    '24': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
-      'tradeDate', 'cancelDate', 'productName'],
     // 문화상품권
-    '14': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
+    '14': ['moid', 'tid', 'statusName', 'serviceName', 
-      'tradeDate', 'cancelDate', 'productName'],
+      'transactionDate', 'cancelDate', 'goodsName'],
+    // SSG머니
+    '21': ['moid', 'tid', 'statusName', 'serviceName', 
+      'transactionDate', 'cancelDate', 'goodsName'],
+    // SSG은행계좌
+    '24': ['moid', 'tid', 'statusName', 'serviceName', 
+      'transactionDate', 'cancelDate', 'goodsName'],
+    // 계좌간편결제
+    '26': ['moid', 'tid', 'statusName', 'serviceName', 
+      'transactionDate', 'cancelDate', 'goodsName'],
     // 티머니페이
-    '31': ['ordNo', 'tid', 'tradeStatus', 'tradeMethod', 
+    '31': ['moid', 'tid', 'statusName', 'serviceName', 
-      'tradeDate', 'cancelDate', 'productName'],
+      'transactionDate', 'cancelDate', 'goodsName'],
   };
   
   const checkValue = (val: any) => {
@@ -56,7 +107,7 @@ export const ImportantInfoSection = ({
   let newImportantInfo: Record<string, any> | undefined = importantInfo;
   const subLi = () => {
     let rs = [];
-
+    
     if(!!newImportantInfo && !!serviceCode && !!openSubItems[serviceCode]){
       for(let i=0;i<openSubItems[serviceCode].length;i++){
         let k = openSubItems[serviceCode][i];
@@ -100,7 +151,9 @@ export const ImportantInfoSection = ({
           { (transactionCategory === TransactionCategory.AllTransaction) && 
             subLi()
           }
-          { (transactionCategory === TransactionCategory.Escrow) && 
+          { 
+          /*
+          (transactionCategory === TransactionCategory.Escrow) && 
             <>
               <li className="kv-row">
                 <span className="k">주문번호</span>
@@ -120,17 +173,18 @@ export const ImportantInfoSection = ({
               </li>
               <li className="kv-row">
                 <span className="k">승인일</span>
-                <span className="v">{ moment(importantInfo?.approvalDateTime).format('YYYY.MM.DD HH:mm:ss') }</span>
+                <span className="v">{ moment(importantInfo?.approvalDate).format('YYYY.MM.DD') }</span>
               </li>
               <li className="kv-row">
                 <span className="k">취소일</span>
-                <span className="v">{ importantInfo?.cancelDate }</span>
+                <span className="v">{ moment(importantInfo?.cancelDate).format('YYYY.MM.DD') }</span>
               </li>
               <li className="kv-row">
                 <span className="k">상품명</span>
-                <span className="v">{ importantInfo?.productName }</span>
+                <span className="v">{ importantInfo?.goodsName }</span>
               </li>
             </>
+            */
           }
           
         </ul>

src/entities/transaction/ui/section/settlement-info-section.tsx

@@ -14,40 +14,40 @@ export const SettlementInfoSection = ({
 }: InfoSectionProps) => {
   
   const subItems: Record<string, Record<string, string>> = {
-    approvalSettleDate: {name: '승인정산일', type: 'date'},
+    approvalSettlementDate: {name: '승인정산일', type: 'date'},
-    approvalSettleAmount: {name: '승인정산금액', type: 'number'},
+    approvalSettlementAmount: {name: '승인정산금액', type: 'number'},
-    cancelSettleDate: {name: '취소정산일', type: 'date'},
+    cancelSettlementDate: {name: '취소정산일', type: 'date'},
-    cancelSettleAmount: {name: '취소정산금액', type: 'number'},
+    cancelSettlementAmount: {name: '취소정산금액', type: 'number'},
   };
 
   const openSubItems: Record<string, Array<string>> = {
     // 신용카드
-    '01': ['approvalSettleDate', 'approvalSettleAmount', 
+    '01': ['approvalSettlementDate', 'approvalSettlementAmount', 
-      'cancelSettleDate', 'cancelSettleAmount'],
+      'cancelSettlementDate', 'cancelSettlementAmount'],
     // 계좌이체
-    '02': ['approvalSettleDate', 'approvalSettleAmount', 
+    '02': ['approvalSettlementDate', 'approvalSettlementAmount', 
-      'cancelSettleDate', 'cancelSettleAmount'],
+      'cancelSettlementDate', 'cancelSettlementAmount'],
     // 가상계좌
-    '03': ['approvalSettleDate', 'approvalSettleAmount', 
+    '03': ['approvalSettlementDate', 'approvalSettlementAmount', 
-      'cancelSettleDate', 'cancelSettleAmount'],
+      'cancelSettlementDate', 'cancelSettlementAmount'],
     // 휴대폰
-    '04': ['approvalSettleDate', 'approvalSettleAmount', 
+    '05': ['approvalSettlementDate', 'approvalSettlementAmount', 
-      'cancelSettleDate', 'cancelSettleAmount'],
+      'cancelSettlementDate', 'cancelSettlementAmount'],
-    // 계좌간편결제
-    '26': ['approvalSettleDate', 'approvalSettleAmount', 
-      'cancelSettleDate', 'cancelSettleAmount'],
-    // SSG머니
-    '21': ['approvalSettleDate', 'approvalSettleAmount', 
-      'cancelSettleDate', 'cancelSettleAmount'],
-    // SSG은행계좌
-    '24': ['approvalSettleDate', 'approvalSettleAmount', 
-      'cancelSettleDate', 'cancelSettleAmount'],
     // 문화상품권
-    '14': ['approvalSettleDate', 'approvalSettleAmount', 
+    '14': ['approvalSettlementDate', 'approvalSettlementAmount', 
-      'cancelSettleDate', 'cancelSettleAmount'],
+      'cancelSettlementDate', 'cancelSettlementAmount'],
+    // SSG머니
+    '21': ['approvalSettlementDate', 'approvalSettlementAmount', 
+      'cancelSettlementDate', 'cancelSettlementAmount'],
+    // SSG은행계좌
+    '24': ['approvalSettlementDate', 'approvalSettlementAmount', 
+      'cancelSettlementDate', 'cancelSettlementAmount'],
+    // 계좌간편결제
+    '26': ['approvalSettlementDate', 'approvalSettlementAmount', 
+      'cancelSettlementDate', 'cancelSettlementAmount'],
     // 티머니페이
-    '31': ['approvalSettleDate', 'approvalSettleAmount', 
+    '31': ['approvalSettlementDate', 'approvalSettlementAmount', 
-      'cancelSettleDate', 'cancelSettleAmount'],
+      'cancelSettlementDate', 'cancelSettlementAmount'],
   };
 
   const checkValue = (val: any) => {

src/entities/user/model/store.ts

@@ -2,7 +2,6 @@ import { lens } from '@dhmk/zustand-lens';
 import { SetStateAction } from 'react';
 import { UserFavorite, UserInfo } from './types';
 import { StorageKeys } from '@/shared/constants/local-storage';
-import { StatementSync } from 'node:sqlite';
 
 export interface UserInfoState {
   userInfo: UserInfo;

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

@@ -60,7 +60,7 @@ export const AllTransactionDetailPage = () => {
   
   const callDetail = () => {
     let allTransactionDetailParams: AllTransactionDetailParams = {
-      svcCd: 'st',
+      serviceCode: serviceCode,
       tid: tid
     };
     allTransactionDetail(allTransactionDetailParams).then((rs: DetailResponse) => {

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

@@ -94,6 +94,7 @@ export const AllTransactionListPage = () => {
       ...{page: pageParam}
     };
     allTransactionList(listParams).then((rs) => {
+      console.log(rs.content)
       setListItems(rs.content);
     });
     allTransactionListSummary(listSummaryParams).then((rs) => {
@@ -120,23 +121,9 @@ export const AllTransactionListPage = () => {
     });
   };
   const callServiceCodeOptions = () => {
-    let useListCodes: Array<string> = ['01', '02', '03', '05', '14', '21', '24', '26', '31'];
+    let serviceCodes = useStore.getState().CommonStore.serviceCodes;
-    let params = {
+    setServiceCodeOptions(serviceCodes);
-      codeCl: '0022'
+    setServiceCode(serviceCodes[0].value);
-    };
-    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 onChangeServiceCode = (e: ChangeEvent<HTMLSelectElement>) => {
@@ -169,13 +156,12 @@ export const AllTransactionListPage = () => {
   useEffect(() => {
     callList();
   }, [
-    mid, moid, 
+    mid, moid, tid, 
-    tid, fromDate, 
+    fromDate, toDate, 
-    toDate, statusCode, 
+    statusCode, serviceCode, 
-    serviceCode, minAmount, 
+    minAmount, maxAmount, 
-    maxAmount, bankCode,
+    bankCode, cardCode, 
-    cardCode, searchCl,
+    searchCl, searchValue
-    searchValue
   ]);
 
 

src/shared/model/store.ts

@@ -3,12 +3,13 @@ import { create } from 'zustand';
 import { devtools, persist } from 'zustand/middleware';
 import { immer } from 'zustand/middleware/immer';
 import { createUserInfoStore, UserInfoState } from '@/entities/user/model/store';
-import { createBannerInfoStore, BannerInfoState } from '@/entities/common/model/store';
+import { createBannerInfoStore, BannerInfoState, createCommonStore, CommonState } from '@/entities/common/model/store';
 import { StorageKeys } from '@/shared/constants/local-storage';
 
 export type RootStore = {
   UserStore: UserInfoState;
   BannerStore: BannerInfoState;
+  CommonStore: CommonState;
 };
 export const useStore = create<RootStore>()(
   devtools(
@@ -17,6 +18,7 @@ export const useStore = create<RootStore>()(
         withLenses(() => ({
           UserStore: createUserInfoStore,
           BannerStore: createBannerInfoStore,
+          CommonStore: createCommonStore,
         })),
       ),
       {

src/widgets/sub-layout/index.tsx

@@ -19,6 +19,7 @@ import { getLocalStorage, setLocalStorage } from '@/shared/lib';
 import { StorageKeys } from '@/shared/constants/local-storage';
 import { HomeGroupsParams, HomeGroupsResponse } from '@/entities/home/model/types';
 import { LoginResponse } from '@/entities/user/model/types';
+import { useCodesListByCodeClMutation } from '@/entities/common/api/use-codes-list-by-codeCl-mutaion';
 
 export interface ContextType {
   setOnBack: (onBack: () => void) => void;
@@ -31,8 +32,18 @@ export interface ContextType {
   setFavoriteEdit: (favoriteEdit?: boolean) => void;
 };
 
+export interface CallServiceCodeProps {
+  codeCl: string;
+  code1Filter?: Array<any>;
+};
+
 export const SubLayout = () => {
   useScrollToTop();
+  const { 
+    callLogin,
+    updateUserData
+  } = useUserInfo();
+
   const [onBack, setOnBack] = useState(undefined);
   const [headerTitle, setHeaderTitle] = useState<string>('');
   const [isPullToRefreshEnabled, setIsPullToRefreshEnabled] = useState<boolean>(false);
@@ -42,15 +53,12 @@ export const SubLayout = () => {
   const [footerCurrentPage, setFooterCurrentPage] = useState<undefined | string | null>(undefined);
   const [favoriteEdit, setFavoriteEdit] = useState<boolean>(false);
   const [headerNavigationKey, setHeaderNavigationKey] = useState<number>(1);
-
+  const [loginSuccess, setLoginSuccess] = useState<boolean>(false);
-  const { 
+  
-    callLogin,
-    updateUserData
-  } = useUserInfo();
-
   const { isNativeEnvironment } = useAppBridge();
   const { mutateAsync: homeGroups } = useHomeGroupsMutation();
-  const [loginSuccess, setLoginSuccess] = useState<boolean>(false);
+  const { mutateAsync: codesListByCodeCl} = useCodesListByCodeClMutation();
+  
 
   const wrapperClassName = 'wrapper';
   
@@ -68,13 +76,19 @@ export const SubLayout = () => {
         };
       });
       useStore.getState().UserStore.setSelectOptionsMids(options);
-      console.log('mids: [' + JSON.stringify(rs.mids) + ']');
+      
       if(!!rs.mids[0]){
         useStore.getState().UserStore.setMid(rs.mids[0]);
       }
       setLoginSuccess(true);
       setHeaderNavigationKey(headerNavigationKey + 1);
-     
+
+      let filter0022: Array<string> = ['01', '02', '03', '05', '14', '21', '24', '26', '31'];
+      callServiceCode({
+        codeCl: '0022', 
+        code1Filter: filter0022
+      });
+      
     });
   };
     
@@ -93,6 +107,34 @@ export const SubLayout = () => {
     });
   }, []);
 
+  const callServiceCode = ({
+    codeCl, 
+    code1Filter
+  }: CallServiceCodeProps) => {
+    let params = {
+      codeCl: codeCl
+    };
+    let options = [];
+    codesListByCodeCl(params).then((rs) => {
+      options = rs.map((value, index) => {
+        return {
+          name: value.desc1,
+          value: value.code1
+        }
+      });
+      if(!!code1Filter){
+        options = options.filter((value, index) => {
+          return code1Filter.includes(value.value);
+        });
+      }
+      options = options.sort((a, b) => a.value - b.value);
+      options.unshift({
+        name: '전체', value: ''
+      });
+      useStore.getState().CommonStore.setServiceCodes(options);
+    });
+  };
+
   const saveToken = (token: LoginResponse) => {
     updateUserData(token);
   };
@@ -101,6 +143,7 @@ export const SubLayout = () => {
   
   useEffect(() => {
     handleLogin();
+    
   }, []);
 
   return (