- 자금이체 : 이체신청 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) {
--- a/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx
+++ b/src/pages/additional-service/account-holder-search/account-holder-search-page.tsx
@@ -19,7 +19,7 @@ import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
 import { SortTypeKeys } from '@/entities/common/model/types';
 import { AccountHolderSearchList } from '@/entities/additional-service/ui/account-holder-search/account-holder-search-list';
 import { useStore } from '@/shared/model/store';
-import { AccountHolderSearchListItem, AccountHolderSearchType } from '@/entities/additional-service/model/account-holder-search/types';
+import { AccountHolderSearchListItem, AccountHolderSearchCl, AccountHolderResultStatus } from '@/entities/additional-service/model/account-holder-search/types';
 import { resultStatusBtnGroup } from '@/entities/additional-service/model/account-holder-search/constant';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';

@@ -33,12 +33,12 @@ export const AccountHolderSearchPage = () => {
  const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
  const [filterOn, setFilterOn] = useState<boolean>(false);
  const [mid, setMid] = useState<string>(userMid);
-  const [searchType, setSearchType] = useState<AccountHolderSearchType>(AccountHolderSearchType.ACCOUNT_NAME)
-  const [searchKeyword, setSearchKeyword] = useState<string>('');
+  const [searchCl, setSearchCl] = useState<AccountHolderSearchCl>(AccountHolderSearchCl.ACCOUNT_NAME)
+  const [searchValue, setSearchValue] = useState<string>('');
  const [startDate, setStartDate] = useState(moment().format('YYYYMMDD'));
  const [endDate, setEndDate] = useState(moment().format('YYYYMMDD'));
  const [bank, setBank] = useState<string>('');
-  const [processResult, setProcessResult] = useState<ProcessResult>(ProcessResult.ALL);
+  const [resultStatus, setResultStatus] = useState<AccountHolderResultStatus>(AccountHolderResultStatus.ALL);
  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);

  useSetHeaderTitle('계좌성명조회');
@@ -53,16 +53,16 @@ export const AccountHolderSearchPage = () => {

  const callList = (option?: {
    sortType?: SortTypeKeys,
-    processResult?: ProcessResult
+    resultStatus?: AccountHolderResultStatus
  }) => {
    let listParams = {
      mid: mid,
-      searchCl: searchType,
-      searchValue: searchKeyword,
+      searchCl: searchCl,
+      searchValue: searchValue,
      fromDate: startDate,
      toDate: endDate,
      bankCode: bank,
-      resultStatus: option?.processResult ?? processResult,
+      resultStatus: option?.resultStatus ?? resultStatus,
      page: pageParam
    }

@@ -89,12 +89,12 @@ export const AccountHolderSearchPage = () => {
      downloadExcel({
        mid: mid,
        //email: selectedEmail,
-        searchCl: searchType,
-        searchValue: searchKeyword,
+        searchCl: searchCl,
+        searchValue: searchValue,
        fromDate: startDate,
        toDate: endDate,
        bankCode: bank,
-        resultStatus: processResult
+        resultStatus: resultStatus
      }).then((rs) => {
        console.log('Excel Download Status: ' + rs.status);
      });
@@ -109,10 +109,10 @@ export const AccountHolderSearchPage = () => {
    });
  };

-  const onClickToTransactionStatus = (val: ProcessResult) => {
-    setProcessResult(val);
+  const onClickToTransactionStatus = (val: AccountHolderResultStatus) => {
+    setResultStatus(val);
    callList({
-      processResult: val
+      resultStatus: val
    });
  };

@@ -120,12 +120,12 @@ export const AccountHolderSearchPage = () => {
    callList();
  }, [
    mid,
-    searchType,
-    searchKeyword,
+    searchCl,
+    searchValue,
    startDate,
    endDate,
    bank,
-    processResult
+    resultStatus
  ]);

  return (
@@ -176,7 +176,7 @@ export const AccountHolderSearchPage = () => {
                    resultStatusBtnGroup.map((value, index) => (
                      <span
                        key={`key-service-code=${index}`}
-                        className={`keyword-tag ${(processResult === value.value) ? 'active' : ''}`}
+                        className={`keyword-tag ${(resultStatus === value.value) ? 'active' : ''}`}
                        onClick={() => onClickToTransactionStatus(value.value)}
                      >{value.name}</span>
                    ))
@@ -195,19 +195,19 @@ export const AccountHolderSearchPage = () => {
        filterOn={filterOn}
        setFilterOn={setFilterOn}
        mid={mid}
-        searchType={searchType}
-        searchKeyword={searchKeyword}
+        searchType={searchCl}
+        searchKeyword={searchValue}
        startDate={startDate}
        endDate={endDate}
        bank={bank}
-        processResult={processResult}
+        resultStatus={resultStatus}
        setMid={setMid}
-        setSearchType={setSearchType}
-        setSearchKeyword={setSearchKeyword}
+        setSearchType={setSearchCl}
+        setSearchKeyword={setSearchValue}
        setStartDate={setStartDate}
        setEndDate={setEndDate}
        setBank={setBank}
-        setProcessResult={setProcessResult}
+        setResultStatus={setResultStatus}
      ></AccountHolderSearchFilter>

      <EmailBottomSheet
--- a/src/pages/additional-service/alimtalk/detail-page.tsx
+++ b/src/pages/additional-service/alimtalk/detail-page.tsx
@@ -12,6 +12,7 @@ import { useEffect, useState } from 'react';
 import { ExtensionAlimtalkDetailParams, ExtensionAlimtalkDetailResponse } from '@/entities/additional-service/model/alimtalk/types';
 import { useExtensionAlimtalkDetailMutation } from '@/entities/additional-service/api/alimtalk/use-extansion-alimtalk-detail-mutation';
 import moment from 'moment';
+import { getAlimtalkAlimClText, getAlimtalkSendClTypeText, getAlimtalkSendTypeText } from '@/entities/additional-service/model/alimtalk/constant';

 export const AlimtalkDetailPage = () => {
  const { navigate } = useNavigate();
@@ -26,8 +27,8 @@ export const AlimtalkDetailPage = () => {

  const callDetail = () => {
    let params: ExtensionAlimtalkDetailParams = {
-      tid: tid,
      mid: mid,
+      tid: tid
    };

    extensionAlimtalkDetail(params).then((rs: ExtensionAlimtalkDetailResponse) => {
@@ -47,7 +48,7 @@ export const AlimtalkDetailPage = () => {
  }, []);

  const getDate = (date?: string) => {
-    return (date)? moment(date.substr(0, 8)).format('YYYY.MM.DD'): '';
+    return (date)? moment(date, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss'): '';
  };

  return (
@@ -76,15 +77,15 @@ export const AlimtalkDetailPage = () => {
                </li>
                <li className="kv-row">
                  <span className="k">서비스명</span>
-                  <span className="v">{ detail?.serviceName }</span>
+                  <span className="v">{ detail?.extensionServiceName }</span>
                </li>
                <li className="kv-row">
                  <span className="k">발송 종류</span>
-                  <span className="v">{ detail?.sendType }</span>
+                  <span className="v">{ getAlimtalkSendTypeText(detail?.sendType) }</span>
                </li>
                <li className="kv-row">
-                  <span className="k">주문자명</span>
-                  <span className="v">{detail?.senderName }</span>
+                  <span className="k">주문자명</span> 
+                  <span className="v">{detail?.receiverName }</span>
                </li>
                <li className="kv-row">
                  <span className="k">결제서비스</span>
@@ -92,11 +93,11 @@ export const AlimtalkDetailPage = () => {
                </li>
                <li className="kv-row">
                  <span className="k">알림구분</span>
-                  <span className="v">{ detail?.alimCl }</span>
+                  <span className="v">{ getAlimtalkAlimClText(detail?.alimCl) }</span>
                </li>
                <li className="kv-row">
                  <span className="k">발송구분</span>
-                  <span className="v">{ detail?.sendCl }</span>
+                  <span className="v">{ getAlimtalkSendClTypeText(detail?.sendCl) }</span>
                </li>
              </ul>
            </div>
--- a/src/pages/additional-service/alimtalk/list-page.tsx
+++ b/src/pages/additional-service/alimtalk/list-page.tsx
@@ -43,7 +43,7 @@ export const AlimtalkListPage = () => {
  const [mid, setMid] = useState<string>(userMid);
  const [searchCl, setSearchCl] = useState<AlimtalkSearchCl>(AlimtalkSearchCl.BUYER_NAME);
  const [searchValue, setSearchValue] = useState<string>('');
-  const [serviceCode, setServiceCode] = useState<ServiceCode>(ServiceCode.CARD);
+  const [serviceCode, setServiceCode] = useState<ServiceCode>(ServiceCode.ALL);
  const [alimCl, setAlimCl] = useState<AlimtalkAlimCl>(AlimtalkAlimCl.DEPOSIT_REQUEST);
  const [fromDate, setFromDate] = useState<string>(moment().format('YYYYMMDD'));
  const [toDate, setToDate] = useState<string>(moment().format('YYYYMMDD'));
--- a/src/pages/additional-service/fund-account/transfer-detail-page.tsx
+++ b/src/pages/additional-service/fund-account/transfer-detail-page.tsx
@@ -11,10 +11,12 @@ import { useLocation } from 'react-router';
 import { useEffect, useState } from 'react';
 import { NumericFormat } from 'react-number-format';
 import { useExtensionFundAccountTransferDetailMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-detail-mutation';
-import { ExtensionFundAccountTransferDetailParams, ExtensionFundAccountTransferDetailResponse, ExtensionFundAccountTransferRegistParams, ExtensionFundAccountTransferRequestResponse, FundAccountStatus } from '@/entities/additional-service/model/fund-account/types';
+import { ExtensionFundAccountTransferDetailParams, ExtensionFundAccountTransferDetailResponse, ExtensionFundAccountTransferRegistParams, ExtensionFundAccountTransferRequestParams, ExtensionFundAccountTransferRequestResponse, FundAccountStatus } from '@/entities/additional-service/model/fund-account/types';
 import { getFundAccountStatusName } from '@/entities/additional-service/model/fund-account/constant';
 import moment from 'moment';
 import { useExtensionFundAccountTransferRegistMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-regist-mutation';
+import { snackBar } from '@/shared/lib';
+import { useExtensionFundAccountTransferRequestMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-request-mutation';

 export const FundAccountTransferDetailPage = () => {
  const { navigate } = useNavigate();
@@ -25,7 +27,7 @@ export const FundAccountTransferDetailPage = () => {
  const [detail, setDetail] = useState<ExtensionFundAccountTransferDetailResponse>();

  const { mutateAsync: extensionFundAccountTransferDetail } = useExtensionFundAccountTransferDetailMutation();
-  const { mutateAsync: extensionFundAccountTransferRequest } = useExtensionFundAccountTransferRegistMutation();
+  const { mutateAsync: extensionFundAccountTransferRequest } = useExtensionFundAccountTransferRequestMutation();

  const callDetail = () => {
    let params: ExtensionFundAccountTransferDetailParams = {
@@ -48,26 +50,15 @@ export const FundAccountTransferDetailPage = () => {
    callDetail();
  }, []);

-  // const onClickToRequest = () => {
-  //   if (!detail) {
-  //     alert('상세 정보를 불러오는 중입니다.');
-  //     return;
-  //   }
-
-  //   let params: ExtensionFundAccountTransferRegistParams = {
-  //     mid: mid,
-  //     bankCode: detail.bankCode || '',
-  //     accountNo: detail.accountNo || '',
-  //     accountName: detail.accountName || '',
-  //     amount: detail.amount || 0,
-  //     moid: detail.moid || ''
-  //   };
-  //   extensionFundAccountTransferRequest(params).then((rs: ExtensionFundAccountTransferRequestResponse) => {
-  //     console.log(rs)
-  //     alert(rs.status ? '이체 요청이 완료되었습니다.' : '이체 요청에 실패했습니다.');
-  //     navigate(PATHS.additionalService.fundAccount.transferList);
-  //   });
-  // };
+  const onClickToRequest = () => {
+    let params: ExtensionFundAccountTransferRequestParams = {
+      seq: seq
+    };
+    extensionFundAccountTransferRequest(params).then((rs: ExtensionFundAccountTransferRequestResponse) => {
+      callDetail();
+      snackBar("이체요청을 성공하였습니다.")
+    });
+  };

  return (
    <>
@@ -136,7 +127,7 @@ export const FundAccountTransferDetailPage = () => {
            <div className="apply-row">
              <button
                className="btn-50 btn-blue flex-1"
-                //onClick={() => onClickToRequest()}
+                onClick={() => onClickToRequest()}
                disabled={detail?.resultStatus !== FundAccountStatus.REGIST_COMPLETE}
              >이체 요청</button>
            </div>
--- a/src/pages/additional-service/fund-account/transfer-request-page.tsx
+++ b/src/pages/additional-service/fund-account/transfer-request-page.tsx
@@ -12,12 +12,15 @@ import { ExtensionFundAccountTransferRegistParams, ExtensionFundAccountTransferR
 import { useStore } from '@/shared/model/store';
 import { snackBar } from '@/shared/lib';
 import { useExtensionFundAccountTransferRegistMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-regist-mutation';
+import { NumericFormat } from 'react-number-format';
+import { useExtensionFundAccountTransferRequestMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-request-mutation';


 export const FundAccountTransferRequestPage = () => {
  const { navigate } = useNavigate();
  const midOptions = useStore.getState().UserStore.selectOptionsMids;
  const userMid = useStore.getState().UserStore.mid;
+  const bankList = useStore.getState().CommonStore.bankList;

  const [mid, setMid] = useState<string>(userMid);
  const [bankCode, setBankCode] = useState<string>('');
@@ -28,7 +31,7 @@ export const FundAccountTransferRequestPage = () => {
  const [depositParameter, setDepositParameter] = useState<string>('');

  const { mutateAsync: extensionFundAccountRegist } = useExtensionFundAccountTransferRegistMutation();
-
+  
  useSetHeaderTitle('자금이체 이체등록');
  useSetHeaderType(HeaderType.RightClose);
  useSetFooterMode(false);
@@ -70,6 +73,7 @@ export const FundAccountTransferRequestPage = () => {
      mid.trim() !== '' &&
      bankCode.trim() !== '' &&
      accountNo.trim() !== '' &&
+      accountNo.length > 9 &&
      accountName.trim() !== '' &&
      amount > 0 &&
      moid.trim() !== ''
@@ -88,7 +92,7 @@ export const FundAccountTransferRequestPage = () => {
                  <div className="billing-field">
                    <select value={mid} onChange={(e) => setMid(e.target.value)}>
                      {
-                        midOptions.map((value, index) => (
+                        midOptions.map((value) => (
                          <option
                            key={value.value}
                            value={value.value}
@@ -103,17 +107,28 @@ export const FundAccountTransferRequestPage = () => {
                  <div className="billing-field">
                    <select value={bankCode} onChange={(e) => setBankCode(e.target.value)}>
                      <option value="">선택하세요</option>
-                      {/* TODO: 은행 목록 옵션 추가 필요 */}
+                      {
+                        bankList
+                          .filter((bank) => bank.code1 !== '****')
+                          .map((bank) => (
+                            <option
+                              key={bank.code1}
+                              value={bank.code1}
+                            >{bank.desc1}</option>
+                          ))
+                      }
                    </select>
                  </div>
                </div>
                <div className="billing-row">
                  <div className="billing-label">계좌번호<span>*</span></div>
                  <div className="billing-field">
-                    <input
-                      type="text"
+                    <NumericFormat
                      value={accountNo}
-                      onChange={(e) => setAccountNo(e.target.value)}
+                      valueIsNumericString
+                      allowNegative={false}
+                      decimalScale={0}
+                      onValueChange={(values) => setAccountNo(values.value)}
                    />
                  </div>
                </div>
@@ -130,11 +145,12 @@ export const FundAccountTransferRequestPage = () => {
                <div className="billing-row">
                  <div className="billing-label">이체금액<span>*</span></div>
                  <div className="billing-field">
-                    <input
-                      type="text"
+                    <NumericFormat
                      value={amount}
-                      onChange={(e) => setAmount(parseInt(e.target.value))}
-                    />
+                      allowNegative={false}
+                      displayType='input'
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => setAmount(parseInt(e.target.value))}
+                    ></NumericFormat>
                  </div>
                </div>
                <div className="billing-row">