- 부가서비스 : 자금이체_이체신청 List,필터 재구성

2025-10-17 13:10:59 +09:00
parent 5be4d3b0cf
commit c2079b1204
7 changed files with 268 additions and 190 deletions
--- a/src/entities/additional-service/model/fund-account/constant.ts
+++ b/src/entities/additional-service/model/fund-account/constant.ts
@@ -5,12 +5,19 @@ import {
 } from './types';

 export const FundAccountStatusBtnGroup = [
-  {name: '등록성공', value: FundAccountStatus.REGIST_COMPLETE},
-  {name: '성공', value: FundAccountStatus.REQUEST_SUCCESS},
-  {name: '실패', value: FundAccountStatus.REQUEST_FAIL},
-  {name: '요청', value: FundAccountStatus.TRANSFER_REQUEST},
+  {name: '전체', value: FundAccountStatus.ALL},
+  {name: '등록완료', value: FundAccountStatus.REGIST_COMPLETE},
+  {name: '이체요청', value: FundAccountStatus.TRANSFER_REQUEST},
+  {name: '요청성공', value: FundAccountStatus.REQUEST_SUCCESS},
+  {name: '요청실패', value: FundAccountStatus.REQUEST_FAIL}
 ];

+export const getFundAccountStatusName = (status?: string): string => {
+  if (!status) return '';
+  const found = FundAccountStatusBtnGroup.find(item => item.value === status);
+  return found ? found.name : status;
+};
+
 export const FundAccountResultTypeBtnGroup = [
  {name: '요청일자', value: FundAccountResultType.RequestDate},
  {name: '이체일자', value: FundAccountResultType.ProcessDate}
--- a/src/entities/additional-service/model/fund-account/types.ts
+++ b/src/entities/additional-service/model/fund-account/types.ts
@@ -34,10 +34,11 @@ export interface ExtensionFundAccountTransferRequestResponse {

 export enum FundAccountSearchCl {
  ACCOUNT_NAME = 'ACCOUNT_NAME',
-  ACCOUNT_ID = 'ACCOUNT_ID'
+  ACCOUNT_NO = 'ACCOUNT_NO'
 }

 export enum FundAccountStatus {
+  ALL = '',
  REGIST_COMPLETE = 'REGIST_COMPLETE',
  TRANSFER_REQUEST = 'TRANSFER_REQUEST',
  REQUEST_SUCCESS = 'REQUEST_SUCCESS',
@@ -47,27 +48,32 @@ export interface ExtensionFundAccountTransferListParams {
  mid: string;
  searchCl: string;
  searchValue: string;
+  bankCode: string;
  fromDate: string;
  toDate: string;
  resultStatus: FundAccountStatus;
  page: DefaultRequestPagination;
 }
-export interface ExtensionFundAccountTransferListResponse extends DefaulResponsePagination {
-  content: Array<FundAccountTransferContent>;
-};
+export interface ExtensionFundAccountTransferListResponse {
+  status: boolean;
+  data: {
+    content: Array<FundAccountTransferContentItem>;
+    nextCursor: string;
+    hasNext: boolean;
+  };
+}
 export interface FundAccountTransferContent {
  pagination: string;
  items: Array<FundAccountTransferContentItem>;
 };
 export interface FundAccountTransferContentItem {
  tid?: string;
-  requestDate?: string;
-  transferAmount?: number;
-  receiveBankName?: string;
-  receiveAccountNo?: string;
-  receiveAccountName?: string;
-  status?: FundAccountStatus;
-  processDate?: string;
+  registDate?: string;
+  amount?: number;
+  accountName?: string;
+  accountNo?: string;
+  resultMessage?: string;
+  resultStatus?: string;
 };
 export interface ExtensionFundAccountTransferExcelParams {
  mid: string;
@@ -82,16 +88,15 @@ export interface ExtensionFundAccountTransferDetailParams {
 };
 export interface ExtensionFundAccountTransferDetailResponse {
  tid: string;
+  mid: string;
+  amount: number;
+  accountName: string;
+  accountNo: string;
+  registDate: string;
+  resultStatus: FundAccountStatus;
  requestDate: string;
-  transferAmount: number;
-  receiveBankName: string;
-  receiveAccountNo: string;
-  receiveAccountName: string;
-  status: FundAccountStatus;
-  processDate: string;
-  failReason: string;
-  fee: number;
-  afterBalance: number;
+  resultMessage: string;
+  bankName: string;
 };
 export interface ExtensionFundAccountResultSummaryParams {
  mid: string;
@@ -129,7 +134,7 @@ export interface FundAccountResultContentItem {
  receiveBankName?: string;
  receiveAccountNo?: string;
  receiveAccountName?: string;
-  status?: FundAccountStatus;
+  status?: string;
  processDate?: string;
  failReason?: string;
 };
--- a/src/entities/additional-service/ui/filter/fund-account-trnasaction-filter.tsx
+++ b/src/entities/additional-service/ui/filter/fund-account-trnasaction-filter.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react';
-import { FundAccountReceiveAccountNameNo, FundAccountStatus } from '../../model/fund-account/types';
+import { FundAccountReceiveAccountNameNo, FundAccountSearchCl, FundAccountStatus } from '../../model/fund-account/types';
 import moment from 'moment';
 import { motion } from 'framer-motion';
 import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
@@ -15,55 +15,52 @@ export interface FundAccountTransactionFilterProps {
  filterOn: boolean;
  setFilterOn: (filterOn: boolean) => void;
  mid: string;
-  receiveAccountName: string;
-  receiveAccountNo: string;
+  searchCl: FundAccountSearchCl;
+  searchValue: string;
  fromDate: string;
  toDate: string;
-  receiveBankCode: string;
+  bankCode: string;
  status: FundAccountStatus;
  setMid: (mid: string) => void;
-  setReceiveAccountName: (receiveAccountName: string) => void;
-  setReceiveAccountNo: (receiveAccountNo: string) => void;
+  setSearchCl: (searchCl: FundAccountSearchCl) => void;
+  setSearchValue: (searchValue: string) => void;
  setFromDate: (fromDate: string) => void;
  setToDate: (toDate: string) => void;
-  setReceiveBankCode: (receiveBankCode: string) => void;
+  setBankCode: (bankCode: string) => void;
  setStatus: (status: FundAccountStatus) => void;
 };
 export const FundAccountTransactionFilter = ({
  filterOn,
  setFilterOn,
  mid,
-  receiveAccountName,
-  receiveAccountNo,
+  searchCl,
+  searchValue,
  fromDate,
  toDate,
-  receiveBankCode,
+  bankCode,
  status,
  setMid,
-  setReceiveAccountName,
-  setReceiveAccountNo,
+  setSearchCl,
+  setSearchValue,
  setFromDate,
  setToDate,
-  setReceiveBankCode,
+  setBankCode,
  setStatus
 }: FundAccountTransactionFilterProps) => {

  const [filterMid, setFilterMid] = useState<string>(mid);
-  const [filterReceiveAccountName, setFilterReceiveAccountName] = useState<string>(receiveAccountName);
-  const [filterReceiveAccountNo, setFilterReceiveAccountNo] = useState<string>(receiveAccountNo);
+    const [
+    filterSearchCl,
+    setFilterSearchCl
+  ] = useState<FundAccountSearchCl>(searchCl);
+  const [
+    filterSearchValue, 
+    setFilterSearchValue
+  ] = useState<string>(searchValue);
  const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYY.MM.DD'));
  const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYY.MM.DD'));
-  const [filterReceiveBankCode, setFilterReceiveBankCode] = useState<string>(receiveBankCode);
+  const [filterBankCode, setFilterBankCode] = useState<string>(bankCode);
  const [filterStatus, setFilterStatus] = useState<FundAccountStatus>(status);
-  const [
-    filterReceiveAccountNameNoSelectValue,
-    setFilterReceiveAccountNameNoSelectValue
-  ] = useState<FundAccountReceiveAccountNameNo>(FundAccountReceiveAccountNameNo.ReceiveAccountName);
-  const [
-    filterReceiveAccountNameNoInputValue, 
-    setFilterReceiveAccountNameNoInputValue
-  ] = useState<string>('');
-
  const midOptions = useStore.getState().UserStore.selectOptionsMids;

  const onClickToClose = () => {
@@ -72,18 +69,18 @@ export const FundAccountTransactionFilter = ({

  const onClickToSetFilter = () => {
    setMid(filterMid);
-    if(filterReceiveAccountNameNoSelectValue === FundAccountReceiveAccountNameNo.ReceiveAccountName){
-      setReceiveAccountName(filterReceiveAccountNameNoInputValue);
-      setReceiveAccountNo('');
+    if(filterSearchCl === FundAccountSearchCl.ACCOUNT_NAME){
+      setSearchCl(filterSearchCl);
+      setSearchValue(filterSearchValue);
    }
-    else if(filterReceiveAccountNameNoSelectValue === FundAccountReceiveAccountNameNo.ReceiveAccountNo){
-      setReceiveAccountName('');
-      setReceiveAccountNo(filterReceiveAccountNameNoInputValue);  
+    else if(filterSearchCl === FundAccountSearchCl.ACCOUNT_NO){
+      setSearchCl(filterSearchCl);
+      setSearchValue(filterSearchValue);  
    }
    
    setFromDate(filterFromDate);
    setToDate(filterToDate);
-    setReceiveBankCode(filterReceiveBankCode);
+    setBankCode(filterBankCode);
    setStatus(filterStatus);
    onClickToClose();
  };
@@ -127,11 +124,11 @@ export const FundAccountTransactionFilter = ({
            ></FilterSelect>
            <FilterSelectInput
              title='수취인/계좌번호'
-              selectValue={ filterReceiveAccountNameNoSelectValue }
-              selectSetter={ setFilterReceiveAccountNameNoSelectValue }
+              selectValue={ filterSearchCl }
+              selectSetter={ setFilterSearchCl }
              selectOptions={ FundAccountReceiveAccountNameNoOptionsGroup }
-              inputValue={ filterReceiveAccountNameNoInputValue }
-              inputSetter={ setFilterReceiveAccountNameNoInputValue }
+              inputValue={ filterSearchValue }
+              inputSetter={ setFilterSearchValue }
            ></FilterSelectInput>
            <FilterCalendar
              title='조회기간'
@@ -142,8 +139,8 @@ export const FundAccountTransactionFilter = ({
            ></FilterCalendar>
            <FilterSelect
              title='은행'
-              selectValue={ filterReceiveBankCode }
-              selectSetter={ setFilterReceiveBankCode }
+              selectValue={ filterBankCode }
+              selectSetter={ setFilterBankCode }
              selectOptions={ FundAccountReceiveBankCodeOptionsGroup }
            ></FilterSelect>
            <FilterButtonGroups
--- a/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
+++ b/src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
@@ -1,18 +1,17 @@
 import { SortTypeKeys } from '@/entities/common/model/types';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { useEffect, useState } from 'react';
-import { 
+import { JSX, useEffect, useState } from 'react';
+import {
  ExtensionFundAccountBalanceParams,
  ExtensionFundAccountBalanceResponse,
-  ExtensionFundAccountTransferExcelParams, 
-  ExtensionFundAccountTransferExcelResponse, 
-  ExtensionFundAccountTransferListParams, 
-  ExtensionFundAccountTransferListResponse, 
-  FundAccountSearchCl, 
-  FundAccountStatus, 
-  FundAccountTransferContent, 
-  FundAccountTransferContentItem 
+  ExtensionFundAccountTransferExcelParams,
+  ExtensionFundAccountTransferExcelResponse,
+  ExtensionFundAccountTransferListParams,
+  ExtensionFundAccountTransferListResponse,
+  FundAccountSearchCl,
+  FundAccountStatus,
+  FundAccountTransferContentItem
 } from '../../model/fund-account/types';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
 import moment from 'moment';
@@ -33,18 +32,16 @@ export const FundAccountTransferListWrap = () => {
  const userMid = useStore.getState().UserStore.mid;

  const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
-  const [listItems, setListItems] = useState<Record<string, Array<FundAccountTransferContentItem>>>({});
+  const [listItems, setListItems] = useState<Array<FundAccountTransferContentItem>>([]);
  const [filterOn, setFilterOn] = useState<boolean>(false);
  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
  const [mid, setMid] = useState<string>(userMid);
-  const [receiveAccountName, setReceiveAccountName] = useState<string>('');
-  const [receiveAccountNo, setReceiveAccountNo] = useState<string>('');
  const [searchCl, setSearchCl] = useState<FundAccountSearchCl>(FundAccountSearchCl.ACCOUNT_NAME);
  const [searchValue, setSearchValue] = useState<string>('');
  const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
  const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
-  const [status, setStatus] = useState<FundAccountStatus>(FundAccountStatus.REQUEST_FAIL);
-  const [receiveBankCode, setReceiveBankCode] = useState<string>('');
+  const [status, setStatus] = useState<FundAccountStatus>(FundAccountStatus.ALL);
+  const [bankCode, setBankCode] = useState<string>('');

  const [balance, setBalance] = useState<number>(0);

@@ -53,28 +50,29 @@ export const FundAccountTransferListWrap = () => {
  const { mutateAsync: extensionFundAccountBalance } = useExtensionFundAccountBalanceMutation();

  const callList = (option?: {
-    sortType?: SortTypeKeys, 
-    val?: string
+    sortType?: SortTypeKeys,
+    status?: FundAccountStatus
  }) => {
-    
-    pageParam.sortType = (option?.sortType)? option.sortType: sortType;
+    pageParam.sortType = (option?.sortType) ? option.sortType : sortType;
    setPageParam(pageParam);

-    let params: ExtensionFundAccountTransferListParams = {
-      mid: mid,
+    let listSummaryParams: ExtensionFundAccountTransferListParams = {
+      mid: "nictest80m",
      searchCl: searchCl,
      searchValue: searchValue,
-      fromDate: fromDate,
-      toDate: toDate,
-      resultStatus: status,
+      bankCode: bankCode,
+      fromDate: "20210101",
+      toDate: "20221231",
+      resultStatus: option?.status ?? status,
      page: pageParam
    };

-    extensionFundAccountTransferList(params).then((rs: ExtensionFundAccountTransferListResponse) => {
-      console.log(rs);
-      setListItems(assembleData(rs.content));
+    extensionFundAccountTransferList(listSummaryParams).then((rs: any) => {
+      const content = rs.content || [];
+      setListItems(rs.content);
    });

+    callBalance();
  };

  const callDownloadExcel = () => {
@@ -99,22 +97,6 @@ export const FundAccountTransferListWrap = () => {
    });
  };

-  const assembleData = (content: Array<FundAccountTransferContent>) => {
-    let data: any = {};
-    if(content && !!content[0] && content.length > 0){
-      let items: Array<FundAccountTransferContentItem> = content[0].items;
-      for(let i=0;i<items.length;i++){
-        let groupDate = moment(items[i]?.requestDate).format('YYYYMMDD');
-        if(!!groupDate && !data.hasOwnProperty(groupDate)){
-          data[groupDate] = [];
-        }
-        if(!!groupDate && data.hasOwnProperty(groupDate)){
-          data[groupDate].push(items[i]);
-        }
-      }
-    }
-    return data;
-  };

  const onClickToDownloadExcel = () => {
    callDownloadExcel();
@@ -126,37 +108,68 @@ export const FundAccountTransferListWrap = () => {

  const onClickToSort = (sort: SortTypeKeys) => {
    setSortType(sort);
-    callList({sortType: sort});
+    callList({ sortType: sort });
  };
  const onClickToStatus = (val: FundAccountStatus) => {
    setStatus(val);
    callList({
-      val: val
+      status: val
    });
  };

  const getListDateGroup = () => {
-    let rs = [];
-    if(Object.keys(listItems).length > 0){
-      for (const [key, value] of Object.entries(listItems)) {
-        rs.push(
-          <ListDateGroup
-            additionalServiceCategory={ AdditionalServiceCategory.FundAccountTransfer }
-            mid={ mid }
-            key={ key }
-            date={ key }
-            items={ value }
-          ></ListDateGroup>
-        );  
+    let rs: JSX.Element[] = [];
+    let date = '';
+    let list: FundAccountTransferContentItem[] = [];
+    for (let i = 0; i < listItems.length; i++) {
+      // registDate format: "20211018140420" (YYYYMMDDHHmmss)
+      let registDate = listItems[i]?.registDate || '';
+      let itemDate = registDate.substring(0, 8);
+      if (i === 0) {
+        date = itemDate;
      }
+      if (date !== itemDate) {
+        date = itemDate;
+        if (list.length > 0) {
+          rs.push(
+            <ListDateGroup
+              additionalServiceCategory={AdditionalServiceCategory.FundAccountTransfer}
+              mid={"nictest80m"}
+              key={date + '-' + i}
+              date={date}
+              items={list as any}
+            ></ListDateGroup>
+          );
+        }
+        list = [];
+      }
+      list.push(listItems[i] as any);
+    }
+    if (list.length > 0) {
+      rs.push(
+        <ListDateGroup
+          additionalServiceCategory={AdditionalServiceCategory.FundAccountTransfer}
+          mid={"nictest80m"}
+          key={date + '-last'}
+          date={date}
+          items={list as any}
+        ></ListDateGroup>
+      );
    }
    return rs;
  };

  useEffect(() => {
    callList();
-    callBalance();
-  }, []);
+  }, [
+    mid,
+    searchCl,
+    searchValue,
+    fromDate,
+    toDate,
+    bankCode,
+    status
+  ]);

  const onClickToNavigate = () => {
    navigate(PATHS.additionalService.fundAccount.transferRequest);
@@ -167,30 +180,30 @@ export const FundAccountTransferListWrap = () => {
      <section className="summary-section pt-30">
        <div className="credit-controls">
          <div>
-            <input 
+            <input
              className="credit-period"
              type="text"
-              value={ moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD') } 
-              readOnly={ true }
+              value={moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD')}
+              readOnly={true}
            />
-            <button 
-              className="filter-btn" 
+            <button
+              className="filter-btn"
              aria-label="필터"
-              onClick={ () => onClickToOpenFilter() }
+              onClick={() => onClickToOpenFilter()}
            >
-              <img 
-                src={ IMAGE_ROOT + '/ico_setting.svg' } 
+              <img
+                src={IMAGE_ROOT + '/ico_setting.svg'}
                alt="검색옵션"
              />
            </button>
          </div>
-          <button 
-            className="download-btn" 
+          <button
+            className="download-btn"
            aria-label="다운로드"
-            onClick={ () => onClickToDownloadExcel() }
+            onClick={() => onClickToDownloadExcel()}
          >
-            <img 
-              src={ IMAGE_ROOT + '/ico_download.svg' }
+            <img
+              src={IMAGE_ROOT + '/ico_download.svg'}
              alt="다운로드"
            />
          </button>
@@ -201,7 +214,7 @@ export const FundAccountTransferListWrap = () => {
              <span className="label">잔액</span>
              <span className="amount22">
                <NumericFormat
-                  value={ balance }
+                  value={balance}
                  thousandSeparator
                  displayType="text"
                ></NumericFormat><span className="unit">원</span>
@@ -216,50 +229,50 @@ export const FundAccountTransferListWrap = () => {

      <section className="filter-section">
        <SortTypeBox
-          sortType={ sortType }
-          onClickToSort={ onClickToSort }
+          sortType={sortType}
+          onClickToSort={onClickToSort}
        ></SortTypeBox>
        <div className="excrow mr-0">
          <div className="full-menu-keywords no-padding">
-          {
-            FundAccountStatusBtnGroup.map((value, index) => (
-              <span 
-                key={ `key-service-code=${ index }` }
-                className={ `keyword-tag ${(status === value.value)? 'active': ''}` }
-                onClick={ () => onClickToStatus(value.value) }
-              >{ value.name }</span>
-            ))
-          }
+            {
+              FundAccountStatusBtnGroup.map((value, index) => (
+                <span
+                  key={`key-service-code=${index}`}
+                  className={`keyword-tag ${(status === value.value) ? 'active' : ''}`}
+                  onClick={() => onClickToStatus(value.value)}
+                >{value.name}</span>
+              ))
+            }
          </div>
        </div>
      </section>
-    
+
      <section className="transaction-list pb-86">
-        { getListDateGroup() }
+        {getListDateGroup()}
      </section>
      <div className="apply-row">
-        <button 
+        <button
          className="btn-50 btn-blue flex-1"
-          onClick={ onClickToNavigate }
+          onClick={onClickToNavigate}
        >이체 등록</button>
      </div>
      <FundAccountTransactionFilter
-        filterOn={ filterOn }
-        setFilterOn={ setFilterOn }
-        mid={ mid }
-        receiveAccountName={ receiveAccountName }
-        receiveAccountNo={ receiveAccountNo }
-        fromDate={ fromDate }
-        toDate={ toDate }
-        receiveBankCode= { receiveBankCode }
-        status={ status }
-        setMid={ setMid }
-        setReceiveAccountName={ setReceiveAccountName }
-        setReceiveAccountNo={ setReceiveAccountNo }
-        setFromDate={ setFromDate }
-        setToDate={ setToDate }
-        setReceiveBankCode={ setReceiveBankCode }
-        setStatus={ setStatus }
+        filterOn={filterOn}
+        setFilterOn={setFilterOn}
+        mid={mid}
+        searchCl={searchCl}
+        searchValue={searchValue}
+        fromDate={fromDate}
+        toDate={toDate}
+        bankCode={bankCode}
+        status={status}
+        setMid={setMid}
+        setSearchCl={setSearchCl}
+        setSearchValue={setSearchValue}
+        setFromDate={setFromDate}
+        setToDate={setToDate}
+        setBankCode={setBankCode}
+        setStatus={setStatus}
      ></FundAccountTransactionFilter>
    </>
  );
--- a/src/entities/additional-service/ui/list-date-group.tsx
+++ b/src/entities/additional-service/ui/list-date-group.tsx
@@ -30,11 +30,13 @@ export const ListDateGroup = ({
            paymentDate= { items[i]?.paymentDate}
            paymentStatus={ items[i]?.paymentStatus}
            requestDate={ items[i]?.requestDate }
+            registDate={ items[i]?.registDate }
            bankName={ items[i]?.bankName}
            accountName={ items[i]?.accountName}
            accountNo={ items[i]?.accountNo }
            transferStatus={ items[i]?.transferStatus}
            resultStatus={ items[i]?.resultStatus }
+            resultMessage={ items[i]?.resultMessage }

            amount={ items[i]?.amount }
            sendDate={ items[i]?.sendDate }
--- a/src/entities/additional-service/ui/list-item.tsx
+++ b/src/entities/additional-service/ui/list-item.tsx
@@ -3,15 +3,17 @@ import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { ListItemProps, AdditionalServiceCategory } from '../model/types';
 import { getPaymentStatusText, getProcessStatusText, getSendMethodText } from '../lib/payment-status-utils';
+import { getFundAccountStatusName } from '../model/fund-account/constant';
 import moment from 'moment';

 export const ListItem = ({
  additionalServiceCategory,
  mid, tid, paymentDate, paymentStatus,

-  requestDate, bankName, accountNo, resultStatus,
+  requestDate, bankName, accountNo, resultStatus,resultMessage,
  amount, sendDate, sendStatus, sendMethod,
  scheduledSendDate, processStatus,
+  registDate,

  accountName, transferStatus,

@@ -118,6 +120,18 @@ export const ListItem = ({
      } else {
        rs = 'gray'
      }
+    } else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
+      if (resultStatus === "REQUEST_SUCCESS" || resultStatus === "REGIST_COMPLETE" || resultStatus === "TRANSFER_REQUEST") {
+        rs = 'blue';
+      } else if (resultStatus === "REQUEST_FAIL") {
+        rs = 'gray';
+      }
+    } else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
+      if (status === "REQUEST_SUCCESS" || status === "REGIST_COMPLETE") {
+        rs = 'blue';
+      } else if (status === "REQUEST_FAIL") {
+        rs = 'gray';
+      }
    }
    return rs;

@@ -242,7 +256,9 @@ export const ListItem = ({
      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4) + ':' + time?.substring(4, 6);
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
-      timeStr = moment(requestDate).format('mm:ss');
+      if (registDate && registDate.length >= 12) {
+        timeStr = registDate.substring(8, 10) + ':' + registDate.substring(10, 12);
+      }
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
      timeStr = moment(requestDate).format('mm:ss');
@@ -261,6 +277,29 @@ export const ListItem = ({
    return timeStr;
  };

+  const getStatus = () => {
+    let statusText = '';
+    if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
+      statusText = getFundAccountStatusName(resultStatus);
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
+      statusText = getFundAccountStatusName(status);
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
+      statusText = resultStatus || '';
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
+      statusText = transferStatus || '';
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
+      statusText = status || '';
+    }
+    else {
+      statusText = resultStatus || status || '';
+    }
+    return statusText;
+  };
+
  const getTitle = () => {
    let str: string | undefined = '';
    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
@@ -288,7 +327,7 @@ export const ListItem = ({
      str = companyName;
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
-      str = `${receiveAccountName}(${receiveAccountNo})`;
+      str = `${accountName}(${accountNo})`;
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
      str = `${receiveAccountName}(${receiveAccountNo})`;
@@ -337,7 +376,7 @@ export const ListItem = ({
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
      rs.push(
-        //TODO : 추후 수정 필요
+        //TODO : 
        <div key="face-auth" className="transaction-details">
          <span>{processStatus}</span>
          <span className="separator">|</span>
@@ -386,10 +425,17 @@ export const ListItem = ({
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
      rs.push(
-        <div className="transaction-details">
+        <div key="fund-account-transfer" className="transaction-details">
          <span>{getTime()}</span>
          <span className="separator">|</span>
-          <span>{status}</span>
+          <span>{getStatus()}</span>
+          {resultMessage && (
+            <>
+              <span className="separator">|</span>
+              <span>{resultMessage}</span>
+            </>
+          )}
+
        </div>
      );
    }
@@ -505,11 +551,11 @@ export const ListItem = ({
    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
      rs.push(
        <div
-          key="payout-item-amount"
+          key="fund-account-transfer-amount"
          className="transaction-amount"
        >
          <NumericFormat
-            value={transferAmount}
+            value={amount}
            thousandSeparator
            displayType="text"
            suffix='원'