- 자금이체 : 이체신청 API 추가

- 은행목록 추가 - 알림톡: 상세 페이지 및 Types 수정
2025-10-23 17:18:05 +09:00
parent 20e532bd68
commit 7ce247a743
18 changed files with 243 additions and 168 deletions
--- a/src/entities/additional-service/api/alimtalk/use-extansion-alimtalk-detail-mutation.ts
+++ b/src/entities/additional-service/api/alimtalk/use-extansion-alimtalk-detail-mutation.ts
@@ -13,7 +13,7 @@ import {

 export const extensionAlimtalkDetail = (params: ExtensionAlimtalkDetailParams) => {
  return resultify(
-    axios.post<ExtensionAlimtalkDetailResponse>(API_URL_ADDITIONAL_SERVICE.extensionArsDetail(), params),
+    axios.post<ExtensionAlimtalkDetailResponse>(API_URL_ADDITIONAL_SERVICE.extensionAlimtalkDetail(), params),
  );
 };

--- a/src/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-request-mutation.ts
+++ b/src/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-request-mutation.ts
@@ -0,0 +1,23 @@
+import { resultify } from "@/shared/lib/resultify";
+import { ExtensionFundAccountTransferRequestParams, ExtensionFundAccountTransferRequestResponse } from "../../model/fund-account/types";
+import { API_URL_ADDITIONAL_SERVICE } from "@/shared/api/api-url-additional-service";
+import axios from "axios";
+import { useMutation, UseMutationOptions } from "@tanstack/react-query";
+import { CBDCAxiosError } from "@/shared/@types/error";
+
+export const extensionFundAccountTransferRequest = (params: ExtensionFundAccountTransferRequestParams) => {
+    return resultify(
+        axios.post<ExtensionFundAccountTransferRequestResponse>(API_URL_ADDITIONAL_SERVICE.extensionFundAccountTransferRequest(), params),
+    );
+};
+
+export const useExtensionFundAccountTransferRequestMutation = (options?: UseMutationOptions<ExtensionFundAccountTransferRequestResponse, CBDCAxiosError, ExtensionFundAccountTransferRequestParams>) => {
+    const mutation = useMutation<ExtensionFundAccountTransferRequestResponse, CBDCAxiosError, ExtensionFundAccountTransferRequestParams>({
+        ...options,
+        mutationFn: (params: ExtensionFundAccountTransferRequestParams) => extensionFundAccountTransferRequest(params),
+    });
+
+    return {
+        ...mutation,
+    };
+};
--- a/src/entities/additional-service/model/account-holder-search/constant.ts
+++ b/src/entities/additional-service/model/account-holder-search/constant.ts
@@ -1,8 +1,9 @@
 import { ProcessResult } from "../types";
+import { AccountHolderResultStatus } from "./types";


 export const resultStatusBtnGroup = [
-  { name: '전체', value: ProcessResult.ALL },
-  { name: '성공', value: ProcessResult.SUCCESS },
-  { name: '실패', value: ProcessResult.FAIL },
+  { name: '전체', value: AccountHolderResultStatus.ALL },
+  { name: '성공', value: AccountHolderResultStatus.SUCCESS },
+  { name: '실패', value: AccountHolderResultStatus.FAIL },
 ]
--- a/src/entities/additional-service/model/account-holder-search/types.ts
+++ b/src/entities/additional-service/model/account-holder-search/types.ts
@@ -2,15 +2,15 @@
 // 계좌성명 조회 관련 타입들
 // ========================================

-export enum AccountHolderSearchType {
+export enum AccountHolderSearchCl {
  ACCOUNT_NAME = 'ACCOUNT_NAME',
  ACCOUNT_NO = 'ACCOUNT_NO'
 }

 export enum AccountHolderResultStatus {
-  ALL = "ALL",
+  ALL = "",
  SUCCESS = "SUCCESS",
-  FAIl = "FAIL"
+  FAIL = "FAIL"
 }

 export interface AccountHolderSearchListItem {
@@ -28,19 +28,19 @@ export interface AccountHolderSearchListProps {

 export interface AccountHolderSearchFilterProps extends FilterProps {
  mid: string;
-  searchType: AccountHolderSearchType;
+  searchType: AccountHolderSearchCl;
  searchKeyword: string;
  startDate: string;
  endDate: string;
  bank: string;
-  processResult: ProcessResult;
+  resultStatus: AccountHolderResultStatus;
  setMid: (mid: string) => void;
-  setSearchType: (searchType: AccountHolderSearchType) => void;
+  setSearchType: (searchType: AccountHolderSearchCl) => void;
  setSearchKeyword: (searchKeyWorld: string) => void;
  setStartDate: (startDate: string) => void;
  setEndDate: (endDate: string) => void;
  setBank: (bank: string) => void;
-  setProcessResult: (processResult: ProcessResult) => void;
+  setResultStatus: (resultStatus: AccountHolderResultStatus) => void;
 }

 // 계좌 성명 조회 확장 서비스
--- a/src/entities/additional-service/model/alimtalk/constant.ts
+++ b/src/entities/additional-service/model/alimtalk/constant.ts
@@ -1,55 +1,91 @@
 import { AlimtalkAlimCl, AlimtalkSearchCl, AlimTalkSendCl, AlimtalkSendType, ServiceCode } from "./types";

 export const AlimtalkSearchClOptionGroup = [
-  {name: '주문자', value: AlimtalkSearchCl.BUYER_NAME },
-  {name: 'TID', value: AlimtalkSearchCl.TID },
+    { name: '주문자', value: AlimtalkSearchCl.BUYER_NAME },
+    { name: 'TID', value: AlimtalkSearchCl.TID },
 ];

 export const AlimtalkServiceCodeOptionGroup = [
-    {name: '전체', value: ''},
-    {name: '카드', value: ServiceCode.CARD },
-    {name: '계좌이체', value: ServiceCode.BANK },
-    {name: '가상계좌', value: ServiceCode.VBANK },
-    {name: '휴대폰', value: ServiceCode.PHONE }
+    { name: '전체', value: '' },
+    { name: '카드', value: ServiceCode.CARD },
+    { name: '계좌이체', value: ServiceCode.BANK },
+    { name: '가상계좌', value: ServiceCode.VBANK },
+    { name: '휴대폰', value: ServiceCode.PHONE }
 ]

 // 알림구분 - 카드/계좌이체/휴대폰용
 export const AlimtalkAlimClBtnGroupForGeneral = [
-    {name: '전체', value: '' },
-    {name: '승인', value: AlimtalkAlimCl.APPROVAL },
-    {name: '취소', value: AlimtalkAlimCl.CANCEL }
+    { name: '전체', value: '' },
+    { name: '승인', value: AlimtalkAlimCl.APPROVAL },
+    { name: '취소', value: AlimtalkAlimCl.CANCEL }
 ]

 // 알림구분 - 가상계좌용
 export const AlimtalkAlimClBtnGroupForVBank = [
-    {name: '전체', value: '' },
-    {name: '입금요청', value: AlimtalkAlimCl.DEPOSIT_REQUEST },
-    {name: '입금완료', value: AlimtalkAlimCl.DEPOSIT_COMPLETE },
-    {name: '환불', value: AlimtalkAlimCl.REFUND }
+    { name: '전체', value: '' },
+    { name: '입금요청', value: AlimtalkAlimCl.DEPOSIT_REQUEST },
+    { name: '입금완료', value: AlimtalkAlimCl.DEPOSIT_COMPLETE },
+    { name: '환불', value: AlimtalkAlimCl.REFUND }
 ]

 export const AlimtalkSendTypeBtnGroup = [
-    {name: '전체', value: AlimtalkSendType.ALL },
-    {name: '카카오톡', value: AlimtalkSendType.KAKAOTALK },
-    {name: 'FB SMS', value: AlimtalkSendType.FB_SMS }
+    { name: '전체', value: AlimtalkSendType.ALL },
+    { name: '카카오톡', value: AlimtalkSendType.KAKAOTALK },
+    { name: 'FB SMS', value: AlimtalkSendType.FB_SMS }
 ]

 export const AlimtalkSendClBtnGroup = [
-    {name: '전체', value: AlimTalkSendCl.ALL },
-    {name: '요청', value: AlimTalkSendCl.REQUEST },
-    {name: '성공', value: AlimTalkSendCl.SUCCESS },
-    {name: '실패', value: AlimTalkSendCl.FAIL }
+    { name: '전체', value: AlimTalkSendCl.ALL },
+    { name: '요청', value: AlimTalkSendCl.REQUEST },
+    { name: '성공', value: AlimTalkSendCl.SUCCESS },
+    { name: '실패', value: AlimTalkSendCl.FAIL }
 ]

+export const getAlimtalkAlimClText = (status?: string): string => {
+    if (!status) return '';
+
+    const alimClMap: Record<string, string> = {
+        'APPROVAL' : '승인',
+        'CANCEL' : '취소',
+        'DEPOSIT_REQUEST' : '입금요청',
+        'DEPOSIT_COMPLETE' : '입금완료',
+        'REFUND' : '환불'
+    }
+    return alimClMap[status] || status;
+
+}
+
+export const getAlimtalkSendTypeText = (status?: string): string => {
+    if (!status) return '';
+
+    const sendTypeMap: Record<string, string> = {
+        "KAKAOTALK": '카카오톡',
+        'FB SMS': '페이스북',
+    };
+
+    return sendTypeMap[status] || status;
+}
+
+export const getAlimtalkSendClTypeText = (status?: string): string => {
+    if (!status) return '';
+
+    const sendClMap: Record<string, string> = {
+        'REQUEST': '요청',
+        'SUCCESS': '성공',
+        'FAIL': '실패'
+    };
+    return sendClMap[status] || status;
+}
+
 export const getAlimtalkServiceCodeText = (status?: string): string => {
    if (!status) return '';

    const serviceCodeMap: Record<string, string> = {
-        'CARD': '카드',
-        'BANK': '계좌이체',
-        'VBANK': '가상계좌',
-        'PHONE': '휴대폰'
-    };
+        '01': '카드',
+        '02': '신용카드',
+        '03': '가상계좌',
+        '05': '휴대폰'
+    }

    return serviceCodeMap[status] || status;
 }
--- a/src/entities/additional-service/model/alimtalk/types.ts
+++ b/src/entities/additional-service/model/alimtalk/types.ts
@@ -33,6 +33,7 @@ export enum AlimTalkSendCl {
 };

 export enum ServiceCode {
+  ALL = '',
  CARD = 'CARD',
  BANK = 'BANK',
  VBANK = 'VBANK',
@@ -128,7 +129,7 @@ export interface ExtensionAlimtalkDetailResponse {
  sendDate: string;
  mid: string;
  tid: string;
-  serviceName: string;
+  extensionServiceName: string;
  sendType: AlimtalkSendType;
  senderName: string;
  paymentMethod: string;
--- a/src/entities/additional-service/model/fund-account/constant.ts
+++ b/src/entities/additional-service/model/fund-account/constant.ts
@@ -43,8 +43,4 @@ export const FundAccountResultSearchDateTypeBtnGroup = [
 export const FundAccountSearchClOptionsGroup = [
  { name: '수취인', value: FundAccountSearchCl.ACCOUNT_NAME },
  { name: '계좌번호', value: FundAccountSearchCl.ACCOUNT_NO },
-];
-
-export const FundAccountReceiveBankCodeOptionsGroup = [
-  { name: 'KB', value: 'KB' }
 ];
--- a/src/entities/additional-service/model/fund-account/types.ts
+++ b/src/entities/additional-service/model/fund-account/types.ts
@@ -35,11 +35,11 @@ export interface ExtensionFundAccountTransferRegistResponse {
 };

 export interface ExtensionFundAccountTransferRequestParams {
-
+  seq: string;
 }

 export interface ExtensionFundAccountTransferRequestResponse {
-
+  status: boolean
 }

 export enum FundAccountSearchCl {
--- a/src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx
+++ b/src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx
@@ -12,7 +12,7 @@ import { FilterCalendar } from '@/shared/ui/filter/calendar';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
 import { useStore } from '@/shared/model/store';
-import { AccountHolderSearchFilterProps, AccountHolderSearchType } from '@/entities/additional-service/model/account-holder-search/types';
+import { AccountHolderSearchFilterProps, AccountHolderSearchCl, AccountHolderResultStatus } from '@/entities/additional-service/model/account-holder-search/types';

 export const AccountHolderSearchFilter = ({
 	filterOn,
@@ -23,23 +23,23 @@ export const AccountHolderSearchFilter = ({
 	startDate,
 	endDate,
 	bank,
-	processResult,
+	resultStatus,
 	setMid,
 	setSearchType,
 	setSearchKeyword,
 	setStartDate,
 	setEndDate,
 	setBank,
-	setProcessResult
+	setResultStatus
 }: AccountHolderSearchFilterProps) => {

 	const [filterMid, setFilterMid] = useState<string>(mid);
-	const [filterSearchType, setFilterSearchType] = useState<AccountHolderSearchType>(searchType);
+	const [filterSearchType, setFilterSearchType] = useState<AccountHolderSearchCl>(searchType);
 	const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
 	const [filterStartDate, setFilterStartDate] = useState<string>(moment(startDate).format('YYYY.MM.DD'));
 	const [filterEndDate, setFilterEndDate] = useState<string>(moment(endDate).format('YYYY.MM.DD'));
 	const [filterBank, setFilterBank] = useState<string>(bank)
-	const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
+	const [filterResultStatus, setFilterResultStatus] = useState<AccountHolderResultStatus>(resultStatus);

 	const midOptions = useStore.getState().UserStore.selectOptionsMids;

@@ -58,7 +58,7 @@ export const AccountHolderSearchFilter = ({
 		setStartDate(filterStartDate);
 		setEndDate(filterEndDate);
 		setBank(filterBank);
-		setProcessResult(filterProcessResult);
+		setResultStatus(filterResultStatus);
 		onClickToClose();
 	};
 	
@@ -68,8 +68,8 @@ export const AccountHolderSearchFilter = ({
 	];

 	let searchTypeOption = [
-		{ name: '예금주', value: AccountHolderSearchType.ACCOUNT_NAME },
-		{ name: '계좌번호', value: AccountHolderSearchType.ACCOUNT_NO },
+		{ name: '예금주', value: AccountHolderSearchCl.ACCOUNT_NAME },
+		{ name: '계좌번호', value: AccountHolderSearchCl.ACCOUNT_NO },
 	];

 	let processResultBtnGroup = [
@@ -137,9 +137,9 @@ export const AccountHolderSearchFilter = ({

 						<FilterButtonGroups
 							title='조회결과'
-							activeValue={filterProcessResult}
+							activeValue={filterResultStatus}
 							btnGroups={processResultBtnGroup}
-							setter={setFilterProcessResult}
+							setter={setFilterResultStatus}
 						></FilterButtonGroups>
 					</div>
 					<div className="apply-row">
--- a/src/entities/additional-service/ui/filter/fund-account-result-filter.tsx
+++ b/src/entities/additional-service/ui/filter/fund-account-result-filter.tsx
@@ -6,7 +6,7 @@ import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterCalendar } from '@/shared/ui/filter/calendar';
-import {  FundAccountReceiveBankCodeOptionsGroup, FundAccountResultSearchDateTypeBtnGroup, FundAccountResultStatusBtnGroup, FundAccountSearchClOptionsGroup, FundAccountStatusBtnGroup } from '../../model/fund-account/constant';
+import {  FundAccountResultSearchDateTypeBtnGroup, FundAccountResultStatusBtnGroup, FundAccountSearchClOptionsGroup, FundAccountStatusBtnGroup } from '../../model/fund-account/constant';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { useStore } from '@/shared/model/store';
@@ -61,6 +61,11 @@ export const FundAccountResultFilter = ({
  const [filterBankCode, setFilterBankCode] = useState<string>(bankCode);
  const [filterResultStatus, setFilterResultStatus] = useState<FundAccountResultStatus>(resultStatus);

+  const bankList = useStore.getState().CommonStore.bankList;
+  const bankOptions = bankList
+    .filter((bank) => bank.code1 !== '****')
+    .map((bank) => ({ name: bank.desc1, value: bank.code1 }));
+
  const midOptions = useStore.getState().UserStore.selectOptionsMids;

  const onClickToClose = () => {
@@ -147,7 +152,7 @@ export const FundAccountResultFilter = ({
              title='은행'
              selectValue={filterBankCode}
              selectSetter={setFilterBankCode}
-              selectOptions={FundAccountReceiveBankCodeOptionsGroup}
+              selectOptions={bankOptions}
            ></FilterSelect>
            <FilterButtonGroups
              title='처리 결과'
--- a/src/entities/additional-service/ui/filter/fund-account-trnasaction-filter.tsx
+++ b/src/entities/additional-service/ui/filter/fund-account-trnasaction-filter.tsx
@@ -6,7 +6,7 @@ import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { FilterSelect } from '@/shared/ui/filter/select';
 import { FilterCalendar } from '@/shared/ui/filter/calendar';
-import { FundAccountReceiveBankCodeOptionsGroup, FundAccountSearchClOptionsGroup, FundAccountStatusBtnGroup } from '../../model/fund-account/constant';
+import { FundAccountSearchClOptionsGroup, FundAccountStatusBtnGroup } from '../../model/fund-account/constant';
 import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
 import { FilterSelectInput } from '@/shared/ui/filter/select-input';
 import { useStore } from '@/shared/model/store';
@@ -49,7 +49,7 @@ export const FundAccountTransactionFilter = ({
 }: FundAccountTransactionFilterProps) => {

  const [filterMid, setFilterMid] = useState<string>(mid);
-  const [filterSearchCl,setFilterSearchCl] = useState<FundAccountSearchCl>(searchCl);
+  const [filterSearchCl, setFilterSearchCl] = useState<FundAccountSearchCl>(searchCl);
  const [filterSearchValue, setFilterSearchValue] = useState<string>(searchValue);
  const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYYMMDD'));
  const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYYMMDD'));
@@ -57,21 +57,26 @@ export const FundAccountTransactionFilter = ({
  const [filterStatus, setFilterStatus] = useState<FundAccountStatus>(status);
  const midOptions = useStore.getState().UserStore.selectOptionsMids;

+  const bankList = useStore.getState().CommonStore.bankList;
+  const bankOptions = bankList
+    .filter((bank) => bank.code1 !== '****')
+    .map((bank) => ({ name: bank.desc1, value: bank.code1 }));
+
  const onClickToClose = () => {
    setFilterOn(false);
  };

  const onClickToSetFilter = () => {
    setMid(filterMid);
-    if(filterSearchCl === FundAccountSearchCl.ACCOUNT_NAME){
+    if (filterSearchCl === FundAccountSearchCl.ACCOUNT_NAME) {
      setSearchCl(filterSearchCl);
      setSearchValue(filterSearchValue);
    }
-    else if(filterSearchCl === FundAccountSearchCl.ACCOUNT_NO){
+    else if (filterSearchCl === FundAccountSearchCl.ACCOUNT_NO) {
      setSearchCl(filterSearchCl);
-      setSearchValue(filterSearchValue);  
+      setSearchValue(filterSearchValue);
    }
-    
+
    setFromDate(filterFromDate);
    setToDate(filterToDate);
    setBankCode(filterBankCode);
@@ -85,26 +90,26 @@ export const FundAccountTransactionFilter = ({

  return (
    <>
-      <motion.div 
-        className="full-menu-modal" 
+      <motion.div
+        className="full-menu-modal"
        initial="hidden"
-        animate={ (filterOn)? 'visible': 'hidden' }
-        variants={ FilterMotionVariants }
-        transition={ FilterMotionDuration }
-        style={ FilterMotionStyle }
+        animate={(filterOn) ? 'visible' : 'hidden'}
+        variants={FilterMotionVariants}
+        transition={FilterMotionDuration}
+        style={FilterMotionStyle}
      >
        <div className="full-menu-container">
          <div className="full-menu-header">
            <div className="full-menu-title center">필터</div>
            <div className="full-menu-actions">
-              <button 
+              <button
                id="closeFullMenu"
                className="full-menu-close"
              >
-                <img 
-                  src={ IMAGE_ROOT + '/ico_close.svg' }
+                <img
+                  src={IMAGE_ROOT + '/ico_close.svg'}
                  alt="닫기"
-                  onClick={ () => onClickToClose() }
+                  onClick={() => onClickToClose()}
                />
              </button>
            </div>
@@ -112,42 +117,42 @@ export const FundAccountTransactionFilter = ({
          <div className="option-list pt-16">
            <FilterSelect
              title='가맹점'
-              selectValue={ filterMid }
-              selectSetter={ setFilterMid }
-              selectOptions={ midOptions }
+              selectValue={filterMid}
+              selectSetter={setFilterMid}
+              selectOptions={midOptions}
            ></FilterSelect>
            <FilterSelectInput
              title='수취인/계좌번호'
-              selectValue={ filterSearchCl }
-              selectSetter={ setFilterSearchCl }
-              selectOptions={ FundAccountSearchClOptionsGroup }
-              inputValue={ filterSearchValue }
-              inputSetter={ setFilterSearchValue }
+              selectValue={filterSearchCl}
+              selectSetter={setFilterSearchCl}
+              selectOptions={FundAccountSearchClOptionsGroup}
+              inputValue={filterSearchValue}
+              inputSetter={setFilterSearchValue}
            ></FilterSelectInput>
            <FilterCalendar
              title='조회기간'
-              startDate={ filterFromDate }
-              endDate={ filterToDate }
-              setStartDate={ setFilterFromDate }
-              setEndDate={ setFilterToDate }
+              startDate={filterFromDate}
+              endDate={filterToDate}
+              setStartDate={setFilterFromDate}
+              setEndDate={setFilterToDate}
            ></FilterCalendar>
            <FilterSelect
              title='은행'
-              selectValue={ filterBankCode }
-              selectSetter={ setFilterBankCode }
-              selectOptions={ FundAccountReceiveBankCodeOptionsGroup }
+              selectValue={filterBankCode}
+              selectSetter={setFilterBankCode}
+              selectOptions={bankOptions}
            ></FilterSelect>
            <FilterButtonGroups
              title='처리 결과'
-              activeValue={ filterStatus }
-              btnGroups={ FundAccountStatusBtnGroup }
-              setter={ setFilterStatus }
+              activeValue={filterStatus}
+              btnGroups={FundAccountStatusBtnGroup}
+              setter={setFilterStatus}
            ></FilterButtonGroups>
          </div>
          <div className="apply-row">
-            <button 
+            <button
              className="btn-50 btn-blue flex-1"
-              onClick={ () => onClickToSetFilter() }
+              onClick={() => onClickToSetFilter()}
            >적용</button>
          </div>
        </div>
--- a/src/entities/additional-service/ui/list-date-group.tsx
+++ b/src/entities/additional-service/ui/list-date-group.tsx
@@ -68,6 +68,7 @@ export const ListDateGroup = ({
            sendCl={ items[i]?.sendCl }
            paymentMethod={ items[i]?.paymentMethod }
            receiverName={ items[i]?.receiverName }
+            serviceCode={ items[i]?.serviceCode}

            smsCl= { items[i]?.smsCl }
            onResendClick={ onResendClick }
--- a/src/entities/additional-service/ui/list-item.tsx
+++ b/src/entities/additional-service/ui/list-item.tsx
@@ -10,7 +10,7 @@ import { getSmsClName } from '../model/sms-payment/constant';
 import { getKeyInPaymentPaymentStatusName } from '../model/key-in/constant';
 import { getArsPaymentStatusName, getArsOrderStatusName } from '../model/ars/constant';
 import { ServiceCode } from '../model/alimtalk/types';
-import { getAlimtalkServiceCodeText } from '../model/alimtalk/constant';
+import { getAlimtalkAlimClText, getAlimtalkSendClTypeText, getAlimtalkSendTypeText, getAlimtalkServiceCodeText } from '../model/alimtalk/constant';

 export const ListItem = ({
  additionalServiceCategory,
@@ -30,7 +30,7 @@ export const ListItem = ({
  paymentMethod, receiverName,
  requestId,subReqId,
  buyerName,receiverInfo,
-  seq,serviceCode,
+  seq,serviceCode,sendDate,

  smsCl,
  name,
@@ -277,7 +277,7 @@ export const ListItem = ({
      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
-      let time = paymentDate?.substring(8, 12);
+      let time = sendDate?.substring(8, 12);
      timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
    }
    else {
@@ -353,7 +353,7 @@ export const ListItem = ({
      str = '이름(' + tid + ')';
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
-      str = `${receiverName}(${getAlimtalkServiceCodeText(serviceCode)})`;
+      str = `${receiverName}(${getAlimtalkSendTypeText(sendType)})`;
    }

    return str;
@@ -478,13 +478,14 @@ export const ListItem = ({
      );
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
+            console.log(serviceCode)
      rs.push(
        <div className="transaction-details">
          <span>{getTime()}</span>
          <span className="separator">|</span>
-          <span>{paymentMethod}</span>
+          <span>{getAlimtalkServiceCodeText(serviceCode)}</span>
          <span className="separator">|</span>
-          <span>{alimCl}</span>
+          <span>{getAlimtalkAlimClText(alimCl)}</span>
        </div>
      );
    }
@@ -598,10 +599,8 @@ export const ListItem = ({
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
      rs.push(
-        <div
-          key="payout-item-amount"
-          className="transaction-amount"
-        >{sendCl}</div>
+        <div key="payout-item-amount" className={`status-label ${(sendCl === 'REQUEST' || sendCl === 'SUCCESS') ? 'success' : 'fail'}`}
+        >{getAlimtalkSendClTypeText(sendCl)}</div>
      );
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment && onResendClick && tid) {