- 자금이체 : 이체신청 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/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">