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

2025-09-11 18:04:29 +09:00
parent 48a3bd1ed4
commit 84288188dc
24 changed files with 542 additions and 180 deletions
--- a/src/pages/transaction/billing/payment-request-page.tsx
+++ b/src/pages/transaction/billing/payment-request-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>
--- a/src/pages/transaction/cash-receipt/detail-page.tsx
+++ b/src/pages/transaction/cash-receipt/detail-page.tsx
@@ -21,7 +21,7 @@ import {
  useSetHeaderType,
  useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
-import { BottomSheetCashReceitPurposeUpdate } from '@/entities/transaction/ui/bottom-sheet-cash-receit-purpose-update';
+import { CashReceitPurposeUpdateBottomSheet } from '@/entities/transaction/ui/cash-receit-purpose-update-bottom-sheet';
 import { useCashReceiptPurposeUpdateMutation } from '@/entities/transaction/api/use-cash-receipt-purpose-update';

 export const CashReceiptDetailPage = () => {
@@ -116,11 +116,11 @@ export const CashReceiptDetailPage = () => {
          </div>
        </div>
      </main>
-      <BottomSheetCashReceitPurposeUpdate
+      <CashReceitPurposeUpdateBottomSheet
        setBottomSheetOn={ setBottomSheetOn }
        bottomSheetOn={ bottomSheetOn }
        callPurposeUpdate={ callPurposeUpdate }
-      ></BottomSheetCashReceitPurposeUpdate>
+      ></CashReceitPurposeUpdateBottomSheet>
    </>
  );
 };
--- a/src/pages/transaction/escrow/detail-page.tsx
+++ b/src/pages/transaction/escrow/detail-page.tsx
@@ -28,6 +28,8 @@ import {
  useSetHeaderType,
  useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
+import { EscrowMailResendBottomSheet } from '@/entities/transaction/ui/escrow-mail-resend-bottom-sheet';
+import { useEscrowMailResendMutation } from '@/entities/transaction/api/use-escrow-mail-resend-mutation';

 export const EscrowDetailPage = () => {
  const { navigate } = useNavigate();
@@ -45,7 +47,10 @@ export const EscrowDetailPage = () => {
  const [showPaymentInfo, setShowPaymentInfo] = useState<boolean>(false);
  const [showTransactionInfo, setShowTransactionInfo] = useState<boolean>(false);
  const [showSettlementInfo, setShowSettlementInfo] = useState<boolean>(false);
-  
+  const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
+
+  const [orderNumber, setOrderNumber] = useState<string>();
+  const [tid, setTid] = useState<string>();

  useSetHeaderTitle('에스크로 상세');
  useSetHeaderType(HeaderType.RightClose);
@@ -54,23 +59,41 @@ export const EscrowDetailPage = () => {
  });
  useSetFooterMode(false);

-  const { mutateAsync: escroDetail } = useEscrowDetailMutation();
+  const { mutateAsync: escrowDetail } = useEscrowDetailMutation();
+  const { mutateAsync: escrowMailResend } = useEscrowMailResendMutation() 
    
  const callDetail = () => {
    let escroDetailParams: EscrowDetailParams = {
      issueNumber: location?.state.issueNumber,
    };
-    escroDetail(escroDetailParams).then((rs: DetailResponse) => {
+    escrowDetail(escroDetailParams).then((rs: DetailResponse) => {
      setImportantInfo(rs.importantInfo);
      setEscrowInfo(rs.escrowInfo);
      setPaymentInfo(rs.paymentInfo);
      setTransactionInfo(rs.transactionInfo);
      setSettlementInfo(rs.settlementInfo);
+
+      setOrderNumber(rs.importantInfo?.ordNo);
+      setTid(rs.importantInfo?.tid);
    });
  };
  useEffect(() => {
    callDetail();
  }, []);
+
+  const onClickToShowMailResend = () => {
+    setBottomSheetOn(true);
+  };
+
+  const callMailResend = () => {
+    let params = {
+      orderNumber: orderNumber,
+      tid: tid,
+    };
+    escrowMailResend(params).then((rs: any) => {
+      console.log(rs);
+    });
+  };
  
  const onClickToShowInfo = (infoWrapKey: InfoWrapKeys) => {
    if(infoWrapKey === InfoWrapKeys.Amount){
@@ -136,9 +159,20 @@ export const EscrowDetailPage = () => {
                <div className="txn-divider"></div>
              </div>
            </div>
+            <div className="apply-row">
+              <button 
+                className="btn-50 btn-blue flex-1"
+                onClick={ () => onClickToShowMailResend() }
+              >메일 재발송</button>
+            </div>
          </div>
        </div>
      </main>
+      <EscrowMailResendBottomSheet
+        setBottomSheetOn={ setBottomSheetOn }
+        bottomSheetOn={ bottomSheetOn }
+        callMailResend={ callMailResend }
+      ></EscrowMailResendBottomSheet>
    </>
  );
 };
--- a/src/pages/transaction/transaction-pages.tsx
+++ b/src/pages/transaction/transaction-pages.tsx
@@ -11,7 +11,7 @@ import { EscrowListPage } from './escrow/list-page';
 import { EscrowDetailPage } from './escrow/detail-page';
 import { BillingListPage } from './billing/list-page';
 import { BillingDetailPage } from './billing/detail-page';
-import { BillingPaymentRequestPage } from './billing/payment-request-page';
+import { BillingChargePage } from './billing/charge-page';


 export const TransactionPages = () => {
@@ -35,7 +35,7 @@ export const TransactionPages = () => {
        <Route path={ROUTE_NAMES.transaction.billing.base}>
          <Route path={ROUTE_NAMES.transaction.billing.list} element={<BillingListPage />} />
          <Route path={ROUTE_NAMES.transaction.billing.detail} element={<BillingDetailPage />} />
-          <Route path={ROUTE_NAMES.transaction.billing.paymentRequest} element={<BillingPaymentRequestPage />} />
+          <Route path={ROUTE_NAMES.transaction.billing.charge} element={<BillingChargePage />} />
        </Route>
      </SentryRoutes>
    </>