빌키 에스크로 추가 api 연ㄱㅕㄹ

src/pages/transaction/billing/charge-page.tsx

@@ -1,7 +1,9 @@
+import { ChangeEvent, useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { HeaderType } from '@/entities/common/model/types';
+import { useBillingChargeMutation } from '@/entities/transaction/api/use-billing-charge-mutation';
 import {
   useSetOnBack,
   useSetHeaderTitle,
@@ -9,9 +11,17 @@ import {
   useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
 
-export const BillingPaymentRequestPage = () => {
+export const BillingChargePage = () => {
   const { navigate } = useNavigate();
 
+  const [billKey, setBillKey] = useState<string>('BIKYvattest01m');
+  const [productName, setProductName] = useState<string>('테스트상품123');
+  const [productAmount, setProductAmount] = useState<number | string>(1000000);
+  const [orderNumber, setOrderNumber] = useState<string>('P146733723');
+  const [buyerName, setBuyerName] = useState<string>('김테스트');
+  const [paymentRequestDate, setPaymentRequestDate] = useState<string>('2025-06-08');
+  const [installmentMonth, setInstallmentMonth] = useState<string>('00');
+
   useSetHeaderTitle('빌링 결제 신청');
   useSetHeaderType(HeaderType.RightClose);
   useSetOnBack(() => {
@@ -19,6 +29,52 @@ export const BillingPaymentRequestPage = () => {
   });
   useSetFooterMode(false);
 
+  const { mutateAsync: billingCharge } = useBillingChargeMutation();
+
+  const onClickToBillingCharge = () => {
+    let params = {
+      billKey: billKey,
+      productName: productName,
+      productAmount: productAmount,
+      orderNumber: orderNumber,
+      buyerName: buyerName,
+      paymentRequestDate: paymentRequestDate,
+      installmentMonth: installmentMonth
+    };
+    billingCharge(params).then((rs) => {
+      console.log(rs);
+      alert('성공')
+      navigate(PATHS.transaction.billing.list);
+    });
+  };
+
+  const makeInstallmentMonthSelect = () => {
+    let rs = [];
+    
+    rs.push(
+      <option 
+        key={ `key-installment` }
+        value=''
+      >선택</option>
+    );
+    rs.push(
+      <option 
+        key={ `key-installment-0` }
+        value='00'
+      >일시불</option>
+    );
+    for(let i=2;i<=24;i++){
+      let val = (i < 10)? '0'+i: ''+i;
+      rs.push(
+        <option 
+          key={ `key-installment-${i}`}
+          value={ val }
+        >{i}개월</option>
+      );
+    };
+    return rs;
+  };
+
   return (
     <>
       <main>
@@ -26,15 +82,14 @@ export const BillingPaymentRequestPage = () => {
           <div className="tab-pane sub active">
             <div className="option-list">
               <div className="billing-title">결제 정보 입력</div>
-
               <div className="billing-form">
                 <div className="billing-row">
                   <div className="billing-label">빌키 <span>*</span></div>
                   <div className="billing-field">
                     <input 
                       type="text" 
-                      value="BIKYvattest01m" 
                       readOnly={ true }
+                      value={ billKey }
                     />
                   </div>
                 </div>
@@ -43,7 +98,8 @@ export const BillingPaymentRequestPage = () => {
                   <div className="billing-field">
                     <input 
                       type="text" 
-                      value="테스트상품123"
+                      value={ productName }
+                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value) }
                     />
                   </div>
                 </div>
@@ -52,7 +108,8 @@ export const BillingPaymentRequestPage = () => {
                   <div className="billing-field">
                     <input 
                       type="text" 
-                      value="1,000,000"
+                      value={ productAmount }
+                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductAmount(e.target.value) }
                     />
                   </div>
                 </div>
@@ -61,7 +118,8 @@ export const BillingPaymentRequestPage = () => {
                   <div className="billing-field">
                     <input 
                       type="text" 
-                      value="P146733723"
+                      value={ orderNumber }
+                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setOrderNumber(e.target.value) }
                     />
                   </div>
                 </div>
@@ -70,7 +128,8 @@ export const BillingPaymentRequestPage = () => {
                   <div className="billing-field">
                     <input 
                       type="text" 
-                      value="김테스트"
+                      value={ buyerName }
+                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value) }
                     />
                   </div>
                 </div>
@@ -81,8 +140,8 @@ export const BillingPaymentRequestPage = () => {
                     <div className="input-wrapper date wid-100">
                       <input
                         type="text"
-                        value="2025/03/21"
                         placeholder=""
+                        value={ paymentRequestDate }
                       />
                       <button
                         className="date-btn"
@@ -101,19 +160,21 @@ export const BillingPaymentRequestPage = () => {
                 <div className="billing-row">
                   <div className="billing-label">할부 개월</div>
                   <div className="billing-field">
-                    <select>
-                      <option value="">선택</option>
-                      <option value="0">일시불</option>
-                      <option value="2">2개월</option>
-                      <option value="3">3개월</option>
-                      <option value="6">6개월</option>
+                    <select
+                      value={ installmentMonth }
+                      onChange={ (e: ChangeEvent<HTMLSelectElement>) => setBuyerName(e.target.value) }
+                    >
+                      { makeInstallmentMonthSelect() }
                     </select>
                   </div>
                 </div>
               </div>
             </div>
             <div className="apply-row">
-              <button className="btn-50 btn-blue flex-1">결제 신청</button>
+              <button 
+                className="btn-50 btn-blue flex-1"
+                onClick={ () => onClickToBillingCharge() }
+              >결제 신청</button>
             </div>
           </div>
         </div>