빌링

src/entities/transaction/model/types.ts

@@ -318,7 +318,7 @@ export interface EscrowDetailParams {
   tid?: string;
 };
 export interface BillingDetailParams {
-  billKey?: string;
+  tid?: string;
 };
 
 export interface AmountInfo {
@@ -361,6 +361,8 @@ export interface AmountInfo {
   discountType?: string | null;
   discountAmount?: number;
   simplePaymentServiceCode?: string;
+
+  buyerName?: string;
 };
 export interface ImportantInfo {
   moid?: string;
@@ -522,6 +524,7 @@ export interface BillingInfo {
   orderNumber: string;
   approvalNumber: string;
   approvalDate: string;
+  transactionAmount?: number;
   requestStatus: string;
   processResult: string;
   installmentMonth: string;

src/entities/transaction/ui/list-item.tsx

@@ -73,7 +73,7 @@ export const ListItem = ({
     else if(transactionCategory === TransactionCategory.Billing){
       navigate(PATHS.transaction.billing.detail, {
         state: {
-          billKey: billKey
+          tid: tid,
         }
       });
     }

src/entities/transaction/ui/section/amount-info-section.tsx

@@ -461,8 +461,7 @@ export const AmountInfoSection = ({
         <div className="txn-doc">
           {
             ((transactionCategory === TransactionCategory.CashReceipt) || 
-            (transactionCategory === TransactionCategory.Escrow) || 
+            (transactionCategory === TransactionCategory.Escrow)) &&
-            (transactionCategory === TransactionCategory.Billing)) &&
             !!canDownloadReceipt &&
             <button 
               className="doc-btn" 

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

@@ -9,7 +9,8 @@ import {
   TransactionCategory,
   BillingDetailParams,
   BillingDetailResponse,
-  BillingInfo
+  BillingInfo,
+  AmountInfo
 } from '@/entities/transaction/model/types';
 import {
   useSetOnBack, 
@@ -18,13 +19,19 @@ import {
   useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
 import { NumericFormat } from 'react-number-format';
+import { C } from 'node_modules/react-router/dist/development/index-react-server-client-DRhjXpk2.mjs';
+import { AmountInfoSection } from '@/entities/transaction/ui/section/amount-info-section';
 
 export const BillingDetailPage = () => {
   const { navigate } = useNavigate();
   const location = useLocation();
+  const tid = location?.state.tid;
+  const serviceCode = location?.state.serviceCode;
+
     
   const [billingInfo, setBillingInfo] = useState<BillingInfo>();
-  
+  const [amountInfo, setAmountInfo] = useState<AmountInfo>();
+
   useSetHeaderTitle('빌링 상세');
   useSetHeaderType(HeaderType.RightClose);
   useSetOnBack(() => {
@@ -36,10 +43,14 @@ export const BillingDetailPage = () => {
     
   const callDetail = () => {
     let billingDetailParams: BillingDetailParams = {
-      billKey: location?.state.billKey
+      tid: tid
     };
     billingDetail(billingDetailParams).then((rs: BillingDetailResponse) => {
       setBillingInfo(rs);
+      setAmountInfo({
+        transactionAmount: rs.transactionAmount,
+        buyerName: rs.buyerName
+      })
     });
   };
   useEffect(() => {
@@ -57,17 +68,17 @@ export const BillingDetailPage = () => {
                   <div className="txn-amount">
                     <div className="value">
                       <NumericFormat
-                        value={ 100000000 } 
+                        value={ amountInfo?.transactionAmount } 
                         thousandSeparator
                         displayType="text"
                       ></NumericFormat>
                       <span className="unit">원</span>
                     </div>
-                    <div className="txn-mid">
-                      <span className="value">{ 'nitnitni' }</span>
-                    </div>
                   </div>
-
+                  <div className="txn-mid">
+                    <span className="value">{ amountInfo?.buyerName }</span>
+                  </div>
+                  <div className="txn-doc"></div>
                 </div>
                 <div className="txn-divider"></div>
                 <BillingInfoSection