빌링

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