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

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

@@ -0,0 +1,184 @@
+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,
+  useSetHeaderType,
+  useSetFooterMode
+} from '@/widgets/sub-layout/use-sub-layout';
+
+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(() => {
+    navigate(PATHS.transaction.billing.list);
+  });
+  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>
+        <div className="tab-content">
+          <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" 
+                      readOnly={ true }
+                      value={ billKey }
+                    />
+                  </div>
+                </div>
+                <div className="billing-row">
+                  <div className="billing-label">상품명 <span>*</span></div>
+                  <div className="billing-field">
+                    <input 
+                      type="text" 
+                      value={ productName }
+                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value) }
+                    />
+                  </div>
+                </div>
+                <div className="billing-row">
+                  <div className="billing-label">상품금액 <span>*</span></div>
+                  <div className="billing-field">
+                    <input 
+                      type="text" 
+                      value={ productAmount }
+                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductAmount(e.target.value) }
+                    />
+                  </div>
+                </div>
+                <div className="billing-row">
+                  <div className="billing-label">주문번호 <span>*</span></div>
+                  <div className="billing-field">
+                    <input 
+                      type="text" 
+                      value={ orderNumber }
+                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setOrderNumber(e.target.value) }
+                    />
+                  </div>
+                </div>
+                <div className="billing-row">
+                  <div className="billing-label">구매자명 <span>*</span></div>
+                  <div className="billing-field">
+                    <input 
+                      type="text" 
+                      value={ buyerName }
+                      onChange={ (e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value) }
+                    />
+                  </div>
+                </div>
+
+                <div className="billing-row">
+                  <div className="billing-label">결제 요청일자</div>
+                  <div className="billing-field">
+                    <div className="input-wrapper date wid-100">
+                      <input
+                        type="text"
+                        placeholder=""
+                        value={ paymentRequestDate }
+                      />
+                      <button
+                        className="date-btn"
+                        type="button"
+                        
+                      >
+                        <img 
+                          src={ IMAGE_ROOT + '/ico_date.svg' }
+                          alt="clear"
+                        />
+                      </button>
+                    </div>
+                  </div>
+                </div>
+
+                <div className="billing-row">
+                  <div className="billing-label">할부 개월</div>
+                  <div className="billing-field">
+                    <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"
+                onClick={ () => onClickToBillingCharge() }
+              >결제 신청</button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};