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

- 은행목록 추가
- 알림톡: 상세 페이지 및 Types 수정

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),
   );
 };
 

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,
+    };
+};

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: AccountHolderResultStatus.ALL },
-  { name: '성공', value: ProcessResult.SUCCESS },
+  { name: '성공', value: AccountHolderResultStatus.SUCCESS },
-  { name: '실패', value: ProcessResult.FAIL },
+  { name: '실패', value: AccountHolderResultStatus.FAIL },
 ]

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;
 }
 
 // 계좌 성명 조회 확장 서비스

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: '주문자', value: AlimtalkSearchCl.BUYER_NAME },
-  {name: 'TID', value: AlimtalkSearchCl.TID },
+    { name: 'TID', value: AlimtalkSearchCl.TID },
 ];
 
 export const AlimtalkServiceCodeOptionGroup = [
-    {name: '전체', value: ''},
+    { name: '전체', value: '' },
-    {name: '카드', value: ServiceCode.CARD },
+    { name: '카드', value: ServiceCode.CARD },
-    {name: '계좌이체', value: ServiceCode.BANK },
+    { name: '계좌이체', value: ServiceCode.BANK },
-    {name: '가상계좌', value: ServiceCode.VBANK },
+    { name: '가상계좌', value: ServiceCode.VBANK },
-    {name: '휴대폰', value: ServiceCode.PHONE }
+    { name: '휴대폰', value: ServiceCode.PHONE }
 ]
 
 // 알림구분 - 카드/계좌이체/휴대폰용
 export const AlimtalkAlimClBtnGroupForGeneral = [
-    {name: '전체', value: '' },
+    { name: '전체', value: '' },
-    {name: '승인', value: AlimtalkAlimCl.APPROVAL },
+    { name: '승인', value: AlimtalkAlimCl.APPROVAL },
-    {name: '취소', value: AlimtalkAlimCl.CANCEL }
+    { name: '취소', value: AlimtalkAlimCl.CANCEL }
 ]
 
 // 알림구분 - 가상계좌용
 export const AlimtalkAlimClBtnGroupForVBank = [
-    {name: '전체', value: '' },
+    { name: '전체', value: '' },
-    {name: '입금요청', value: AlimtalkAlimCl.DEPOSIT_REQUEST },
+    { name: '입금요청', value: AlimtalkAlimCl.DEPOSIT_REQUEST },
-    {name: '입금완료', value: AlimtalkAlimCl.DEPOSIT_COMPLETE },
+    { name: '입금완료', value: AlimtalkAlimCl.DEPOSIT_COMPLETE },
-    {name: '환불', value: AlimtalkAlimCl.REFUND }
+    { name: '환불', value: AlimtalkAlimCl.REFUND }
 ]
 
 export const AlimtalkSendTypeBtnGroup = [
-    {name: '전체', value: AlimtalkSendType.ALL },
+    { name: '전체', value: AlimtalkSendType.ALL },
-    {name: '카카오톡', value: AlimtalkSendType.KAKAOTALK },
+    { name: '카카오톡', value: AlimtalkSendType.KAKAOTALK },
-    {name: 'FB SMS', value: AlimtalkSendType.FB_SMS }
+    { name: 'FB SMS', value: AlimtalkSendType.FB_SMS }
 ]
 
 export const AlimtalkSendClBtnGroup = [
-    {name: '전체', value: AlimTalkSendCl.ALL },
+    { name: '전체', value: AlimTalkSendCl.ALL },
-    {name: '요청', value: AlimTalkSendCl.REQUEST },
+    { name: '요청', value: AlimTalkSendCl.REQUEST },
-    {name: '성공', value: AlimTalkSendCl.SUCCESS },
+    { name: '성공', value: AlimTalkSendCl.SUCCESS },
-    {name: '실패', value: AlimTalkSendCl.FAIL }
+    { 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': '카드',
+        '01': '카드',
-        'BANK': '계좌이체',
+        '02': '신용카드',
-        'VBANK': '가상계좌',
+        '03': '가상계좌',
-        'PHONE': '휴대폰'
+        '05': '휴대폰'
-    };
+    }
 
     return serviceCodeMap[status] || status;
 }

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;

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' }
 ];

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 {

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: AccountHolderSearchCl.ACCOUNT_NAME },
-		{ name: '계좌번호', value: AccountHolderSearchType.ACCOUNT_NO },
+		{ 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">

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='처리 결과'

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 
+      <motion.div
-        className="full-menu-modal" 
+        className="full-menu-modal"
         initial="hidden"
-        animate={ (filterOn)? 'visible': 'hidden' }
+        animate={(filterOn) ? 'visible' : 'hidden'}
-        variants={ FilterMotionVariants }
+        variants={FilterMotionVariants}
-        transition={ FilterMotionDuration }
+        transition={FilterMotionDuration}
-        style={ FilterMotionStyle }
+        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 
+                <img
-                  src={ IMAGE_ROOT + '/ico_close.svg' }
+                  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 }
+              selectValue={filterMid}
-              selectSetter={ setFilterMid }
+              selectSetter={setFilterMid}
-              selectOptions={ midOptions }
+              selectOptions={midOptions}
             ></FilterSelect>
             <FilterSelectInput
               title='수취인/계좌번호'
-              selectValue={ filterSearchCl }
+              selectValue={filterSearchCl}
-              selectSetter={ setFilterSearchCl }
+              selectSetter={setFilterSearchCl}
-              selectOptions={ FundAccountSearchClOptionsGroup }
+              selectOptions={FundAccountSearchClOptionsGroup}
-              inputValue={ filterSearchValue }
+              inputValue={filterSearchValue}
-              inputSetter={ setFilterSearchValue }
+              inputSetter={setFilterSearchValue}
             ></FilterSelectInput>
             <FilterCalendar
               title='조회기간'
-              startDate={ filterFromDate }
+              startDate={filterFromDate}
-              endDate={ filterToDate }
+              endDate={filterToDate}
-              setStartDate={ setFilterFromDate }
+              setStartDate={setFilterFromDate}
-              setEndDate={ setFilterToDate }
+              setEndDate={setFilterToDate}
             ></FilterCalendar>
             <FilterSelect
               title='은행'
-              selectValue={ filterBankCode }
+              selectValue={filterBankCode}
-              selectSetter={ setFilterBankCode }
+              selectSetter={setFilterBankCode}
-              selectOptions={ FundAccountReceiveBankCodeOptionsGroup }
+              selectOptions={bankOptions}
             ></FilterSelect>
             <FilterButtonGroups
               title='처리 결과'
-              activeValue={ filterStatus }
+              activeValue={filterStatus}
-              btnGroups={ FundAccountStatusBtnGroup }
+              btnGroups={FundAccountStatusBtnGroup}
-              setter={ setFilterStatus }
+              setter={setFilterStatus}
             ></FilterButtonGroups>
           </div>
           <div className="apply-row">
-            <button 
+            <button
               className="btn-50 btn-blue flex-1"
-              onClick={ () => onClickToSetFilter() }
+              onClick={() => onClickToSetFilter()}
             >적용</button>
           </div>
         </div>

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 }

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
+        <div key="payout-item-amount" className={`status-label ${(sendCl === 'REQUEST' || sendCl === 'SUCCESS') ? 'success' : 'fail'}`}
-          key="payout-item-amount"
+        >{getAlimtalkSendClTypeText(sendCl)}</div>
-          className="transaction-amount"
-        >{sendCl}</div>
       );
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment && onResendClick && tid) {

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 [searchCl, setSearchCl] = useState<AccountHolderSearchCl>(AccountHolderSearchCl.ACCOUNT_NAME)
-  const [searchKeyword, setSearchKeyword] = useState<string>('');
+  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,
+      searchCl: searchCl,
-      searchValue: searchKeyword,
+      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,
+        searchCl: searchCl,
-        searchValue: searchKeyword,
+        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) => {
+  const onClickToTransactionStatus = (val: AccountHolderResultStatus) => {
-    setProcessResult(val);
+    setResultStatus(val);
     callList({
-      processResult: val
+      resultStatus: val
     });
   };
 
@@ -120,12 +120,12 @@ export const AccountHolderSearchPage = () => {
     callList();
   }, [
     mid,
-    searchType,
+    searchCl,
-    searchKeyword,
+    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}
+        searchType={searchCl}
-        searchKeyword={searchKeyword}
+        searchKeyword={searchValue}
         startDate={startDate}
         endDate={endDate}
         bank={bank}
-        processResult={processResult}
+        resultStatus={resultStatus}
         setMid={setMid}
-        setSearchType={setSearchType}
+        setSearchType={setSearchCl}
-        setSearchKeyword={setSearchKeyword}
+        setSearchKeyword={setSearchValue}
         setStartDate={setStartDate}
         setEndDate={setEndDate}
         setBank={setBank}
-        setProcessResult={setProcessResult}
+        setResultStatus={setResultStatus}
       ></AccountHolderSearchFilter>
 
       <EmailBottomSheet

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="k">주문자명</span> 
-                  <span className="v">{detail?.senderName }</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>

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'));

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 = () => {
+  const onClickToRequest = () => {
-  //   if (!detail) {
+    let params: ExtensionFundAccountTransferRequestParams = {
-  //     alert('상세 정보를 불러오는 중입니다.');
+      seq: seq
-  //     return;
+    };
-  //   }
+    extensionFundAccountTransferRequest(params).then((rs: ExtensionFundAccountTransferRequestResponse) => {
-
+      callDetail();
-  //   let params: ExtensionFundAccountTransferRegistParams = {
+      snackBar("이체요청을 성공하였습니다.")
-  //     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);
-  //   });
-  // };
 
   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>

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
+                    <NumericFormat
-                      type="text"
                       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
+                    <NumericFormat
-                      type="text"
                       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">