- 자금이체_ 이체요청 Request,Response 수정

src/entities/additional-service/model/fund-account/types.ts

@@ -20,16 +20,15 @@ export enum FundAccountReceiveAccountNameNo {
 
 export interface ExtensionFundAccountTransferRequestParams {
   mid?: string;
-  transferAmount?: number;
-  receiveBankCode?: string;
-  receiveAccountNo?: string;
-  receiveAccountName?: string;
-  transferMemo?: string;
+  bankCode: string;
+  accountNo: string;
+  accountName: string;
+  amount: number;
+  moid: string;
+  depositParameter?: string;
 };
 export interface ExtensionFundAccountTransferRequestResponse {
-  tid: string;
-  result: string;
-  message: string;
+  status: boolean;
 };
 
 export enum FundAccountSearchCl {
@@ -96,7 +95,8 @@ export interface ExtensionFundAccountTransferDetailResponse {
   resultStatus: FundAccountStatus;
   requestDate: string;
   resultMessage: string;
-  bankName: string;
+  bankCode: string;
+  moid: string;
 };
 export interface ExtensionFundAccountResultSummaryParams {
   mid: string;

src/pages/additional-service/fund-account/transfer-detail-page.tsx

@@ -11,7 +11,7 @@ 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, ExtensionFundAccountTransferRequestParams, ExtensionFundAccountTransferRequestResponse } from '@/entities/additional-service/model/fund-account/types';
+import { ExtensionFundAccountTransferDetailParams, ExtensionFundAccountTransferDetailResponse, 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 { useExtensionFundAccountTransferRequestMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-request-mutation';
@@ -51,18 +51,23 @@ export const FundAccountTransferDetailPage = () => {
     callDetail();
   }, []);
 
-  const onClickToRequest = () =>{
+  const onClickToRequest = () => {
+    if (!detail) {
+      alert('상세 정보를 불러오는 중입니다.');
+      return;
+    }
+
     let params: ExtensionFundAccountTransferRequestParams = {
       mid: mid,
-      transferAmount: 0,
-      receiveBankCode: '',
-      receiveAccountNo: '',
-      receiveAccountName: '',
-      transferMemo: ''
+      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.message);
+      alert(rs.status ? '이체 요청이 완료되었습니다.' : '이체 요청에 실패했습니다.');
       navigate(PATHS.additionalService.fundAccount.transferList);
     });
   };
@@ -76,14 +81,14 @@ export const FundAccountTransferDetailPage = () => {
               <div className="num-amount">
                 <span className="amount">
                   <NumericFormat
-                    value={ detail?.amount } 
+                    value={detail?.amount}
                     thousandSeparator
                     displayType="text"
                     suffix='원'
                   ></NumericFormat>
                 </span>
               </div>
-              <div className="num-store">{ detail?.amount }({ detail?.accountName })</div>
+              <div className="num-store">{detail?.amount}({detail?.accountName})</div>
               <div className="num-day">
                 {detail?.registDate ? moment(detail.registDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD') : '-'}
               </div>
@@ -100,7 +105,7 @@ export const FundAccountTransferDetailPage = () => {
                 </li>
                 <li className="kv-row">
                   <span className="k">처리결과</span>
-                  <span className="v">{ getFundAccountStatusName(detail?.resultStatus) || '-' }</span>
+                  <span className="v">{getFundAccountStatusName(detail?.resultStatus) || '-'}</span>
                 </li>
                 <li className="kv-row">
                   <span className="k">요청일자</span>
@@ -110,23 +115,23 @@ export const FundAccountTransferDetailPage = () => {
                 </li>
                 <li className="kv-row">
                   <span className="k">이체결과</span>
-                  <span className="v">{ detail?.resultMessage || '-' }</span>
+                  <span className="v">{detail?.resultMessage || '-'}</span>
                 </li>
                 <li className="kv-row">
                   <span className="k">수취인명</span>
-                  <span className="v">{ detail?.accountName }</span>
+                  <span className="v">{detail?.accountName}</span>
                 </li>
                 <li className="kv-row">
                   <span className="k">은행</span>
-                  <span className="v">{ detail?.bankName }</span>
+                  <span className="v">{detail?.bankCode}</span>
                 </li>
                 <li className="kv-row">
                   <span className="k">계좌번호</span>
-                  <span className="v">{ detail?.accountNo }</span>
+                  <span className="v">{detail?.accountNo}</span>
                 </li>
                 <li className="kv-row">
                   <span className="k">MID</span>
-                  <span className="v">{ detail?.mid }</span>
+                  <span className="v">{detail?.mid}</span>
                 </li>
 
               </ul>
@@ -134,7 +139,8 @@ 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>
           </div>

src/pages/additional-service/fund-account/transfer-request-page.tsx

@@ -16,14 +16,16 @@ import { useStore } from '@/shared/model/store';
 export const FundAccountTransferRequestPage = () => {
   const { navigate } = useNavigate();
   const userMid = useStore.getState().UserStore.mid;
+  const midOptions = useStore.getState().UserStore.selectOptionsMids;
 
 
   const [mid, setMid] = useState<string>(userMid);
-  const [transferAmount, setTransferAmount] = useState<number>(0);
-  const [receiveBankCode, setReceiveBankCode] = useState<string>('');
-  const [receiveAccountNo, setReceiveAccountNo] = useState<string>('');
-  const [receiveAccountName, setReceiveAccountName] = useState<string>('');
-  const [transferMemo, setTransferMemo] = useState<string>('');
+  const [bankCode, setBankCode] = useState<string>('');
+  const [accountNo, setAccountNo] = useState<string>('');
+  const [accountName, setAccountName] = useState<string>('');
+  const [amount, setAmount] = useState<number>(0);
+  const [moid, setMoid] = useState<string>('');
+  const [depositParameter, setDepositParameter] = useState<string>('');
 
   const { mutateAsync: extensionFundAccountRequest } = useExtensionFundAccountTransferRequestMutation();
 
@@ -37,11 +39,12 @@ export const FundAccountTransferRequestPage = () => {
   const callExtensionFundAccountTransferRequest = () => {
     let params: ExtensionFundAccountTransferRequestParams = {
       mid: mid,
-      transferAmount: transferAmount,
-      receiveBankCode: receiveBankCode,
-      receiveAccountNo: receiveAccountNo,
-      receiveAccountName: receiveAccountName,
-      transferMemo: transferMemo
+      bankCode: bankCode,
+      accountNo: accountNo,
+      accountName: accountName,
+      amount: amount,
+      moid: moid,
+      depositParameter: depositParameter
     };
     extensionFundAccountRequest(params).then((rs: ExtensionFundAccountTransferRequestResponse) => {
       navigate(PATHS.additionalService.payout.list);
@@ -50,9 +53,12 @@ export const FundAccountTransferRequestPage = () => {
 
   const isFormValid = () => {
     return (
-      receiveAccountNo.trim() !== '' &&
-      receiveAccountName.trim() !== '' &&
-      transferAmount >0 
+      mid.trim() !== '' &&
+      //bankCode.trim() !== '' &&
+      accountNo.trim() !== '' &&
+      accountName.trim() !== '' &&
+      amount > 0 &&
+      moid.trim() !== ''
     )
   }
 
@@ -64,54 +70,66 @@ export const FundAccountTransferRequestPage = () => {
             <div className="ing-list">
               <div className="billing-form gap-30">
                 <div className="billing-row">
-                  <div className="billing-label">가맹점</div>
+                  <div className="billing-label">가맹점<span>*</span></div>
                   <div className="billing-field">
-                    <select>
-                      <option>userMid</option>
+                    <select value={mid} onChange={(e) => setMid(e.target.value)}>
+                      {
+                        midOptions.map((value, index) => (
+                          <option
+                            key={value.value}
+                            value={value.value}
+                          >{value.name}</option>
+                        ))
+                      }
                     </select>
                   </div>
                 </div>
                 <div className="billing-row">
-                  <div className="billing-label">은행</div>
+                  <div className="billing-label">은행<span>*</span></div>
                   <div className="billing-field">
-                    <select></select>
+                    <select value={bankCode} onChange={(e) => setBankCode(e.target.value)}>
+                      <option value="">선택하세요</option>
+                      {/* TODO: 은행 목록 옵션 추가 필요 */}
+                    </select>
                   </div>
                 </div>
                 <div className="billing-row">
-                  <div className="billing-label">계좌번호</div>
+                  <div className="billing-label">계좌번호<span>*</span></div>
                   <div className="billing-field">
                     <input
                       type="text"
-                      value={ receiveAccountNo }
-                      onChange={ (e) => setReceiveAccountNo(e.target.value) }
+                      value={accountNo}
+                      onChange={(e) => setAccountNo(e.target.value)}
                     />
                   </div>
                 </div>
                 <div className="billing-row">
-                  <div className="billing-label">예금주명</div>
+                  <div className="billing-label">예금주명<span>*</span></div>
                   <div className="billing-field">
                     <input
                       type="text"
-                      value={ receiveAccountName }
-                      onChange={ (e) => setReceiveAccountName(e.target.value) }
+                      value={accountName}
+                      onChange={(e) => setAccountName(e.target.value)}
                     />
                   </div>
                 </div>
                 <div className="billing-row">
-                  <div className="billing-label">이체금액</div>
+                  <div className="billing-label">이체금액<span>*</span></div>
                   <div className="billing-field">
                     <input
                       type="text"
-                      value={ transferAmount }
-                      onChange={ (e) => setTransferAmount(parseInt(e.target.value)) }
+                      value={amount}
+                      onChange={(e) => setAmount(parseInt(e.target.value))}
                     />
                   </div>
                 </div>
                 <div className="billing-row">
-                  <div className="billing-label">주문번호</div>
-                  <div className="billing-field">
+                  <div className="billing-label">주문번호<span>*</span></div>
+                  <div className="billing-field" style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
                     <input
                       type="text"
+                      value={moid}
+                      onChange={(e) => setMoid(e.target.value)}
                     />
                   </div>
                 </div>
@@ -120,6 +138,8 @@ export const FundAccountTransferRequestPage = () => {
                   <div className="billing-field">
                     <input
                       type="text"
+                      value={depositParameter}
+                      onChange={(e) => setDepositParameter(e.target.value)}
                     />
                   </div>
                 </div>
@@ -131,8 +151,8 @@ export const FundAccountTransferRequestPage = () => {
       <div className="apply-row">
         <button
           className="btn-50 btn-blue flex-1"
-          onClick={ callExtensionFundAccountTransferRequest }
-          disabled={!isFormValid}
+          onClick={callExtensionFundAccountTransferRequest}
+          disabled={!isFormValid()}
         >등록</button>
       </div>
     </>