현금영수증 빠진 항목 수정 에스크로 amountInfo 셋팅

src/entities/transaction/model/types.ts

@@ -336,6 +336,7 @@ export interface AmountInfo {
   receiptAmount?: number;
   cupDepositAmount?: number;
 
+  customerName?: string;
   amount?: number;
   supplyAmount?: number;
   vat?: number;
@@ -486,6 +487,8 @@ export interface MerchantInfo {
 }
 
 export interface DetailResponse {
+  amount?: number;
+  customerName?: string;
   amountDetail?: AmountInfo; 
   amountInfo?: AmountInfo;
   importantInfo?: ImportantInfo;

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

@@ -18,7 +18,6 @@ export const AmountInfoSection = ({
   const { mutateAsync: downloadConfirmation } = useDownloadConfirmationMutation();
   let newAmountInfo: Record<string, any> | undefined = amountInfo;
 
-  console.log('amountInfo --> ', amountInfo);
   const subItems: Record<string, Record<string, string>> = {
     mid: {name: 'MID', type: 'string'}, 
     transactionRequestAmount: {name: '거래요청금액', type: 'number'},
@@ -274,17 +273,166 @@ export const AmountInfoSection = ({
                 </>
               }
               { (transactionCategory === TransactionCategory.Escrow) && 
-                <></>
+                <>
+                  { (serviceCode === '02' || serviceCode === '03') &&
+                    <li className="amount-item">
+                      <span className="label">·&nbsp;&nbsp;거래금액</span>
+                      <span className="value">
+                        <NumericFormat
+                          value={ amountInfo?.supplyAmount } 
+                          thousandSeparator
+                          displayType="text"
+                        ></NumericFormat>
+                      </span>
+                    </li>
+                  }
+                  { (serviceCode === '01') && 
+                    <>
+                      <li className="amount-item">
+                        <span className="label">·&nbsp;&nbsp;신용카드금액</span>
+                        <span className="value">
+                          <NumericFormat
+                            value={ amountInfo?.supplyAmount } 
+                            thousandSeparator
+                            displayType="text"
+                          ></NumericFormat>
+                        </span>
+                      </li>
+                      <li className="amount-item">
+                        <span className="label">·&nbsp;&nbsp;포인트금액</span>
+                        <span className="value">
+                          <NumericFormat
+                            value={ amountInfo?.supplyAmount } 
+                            thousandSeparator
+                            displayType="text"
+                          ></NumericFormat>
+                        </span>
+                      </li>
+                      <li className="amount-item">
+                        <span className="label">·&nbsp;&nbsp;쿠폰금액</span>
+                        <span className="value">
+                          <NumericFormat
+                            value={ amountInfo?.supplyAmount } 
+                            thousandSeparator
+                            displayType="text"
+                          ></NumericFormat>
+                        </span>
+                      </li>
+                    </>
+                  }
+                  { (serviceCode === '02' || serviceCode === '03') &&
+                    <li className="amount-item">
+                      <span className="label">·&nbsp;&nbsp;에스크로수수료</span>
+                      <span className="value">
+                        <NumericFormat
+                          value={ amountInfo?.supplyAmount } 
+                          thousandSeparator
+                          displayType="text"
+                        ></NumericFormat>
+                      </span>
+                    </li>
+                  }
+                  { (serviceCode === '01') &&
+                    <>
+                      <li className="amount-item">
+                        <span className="label">·&nbsp;&nbsp;카카오머니</span>
+                        <span className="value">
+                          <NumericFormat
+                            value={ amountInfo?.supplyAmount } 
+                            thousandSeparator
+                            displayType="text"
+                          ></NumericFormat>
+                        </span>
+                      </li>
+                      <li className="amount-item">
+                        <span className="label">·&nbsp;&nbsp;카카오포인트</span>
+                        <span className="value">
+                          <NumericFormat
+                            value={ amountInfo?.supplyAmount } 
+                            thousandSeparator
+                            displayType="text"
+                          ></NumericFormat>
+                        </span>
+                      </li>
+                      <li className="amount-item">
+                        <span className="label">·&nbsp;&nbsp;카카오즉시할인</span>
+                        <span className="value">
+                          <NumericFormat
+                            value={ amountInfo?.supplyAmount } 
+                            thousandSeparator
+                            displayType="text"
+                          ></NumericFormat>
+                        </span>
+                      </li>
+                      <li className="amount-item">
+                        <span className="label">·&nbsp;&nbsp;네이버포인트</span>
+                        <span className="value">
+                          <NumericFormat
+                            value={ amountInfo?.supplyAmount } 
+                            thousandSeparator
+                            displayType="text"
+                          ></NumericFormat>
+                        </span>
+                      </li>
+                      <li className="amount-item">
+                        <span className="label">·&nbsp;&nbsp;토스머니</span>
+                        <span className="value">
+                          <NumericFormat
+                            value={ amountInfo?.supplyAmount } 
+                            thousandSeparator
+                            displayType="text"
+                          ></NumericFormat>
+                        </span>
+                      </li>
+                      <li className="amount-item">
+                        <span className="label">·&nbsp;&nbsp;토스할인</span>
+                        <span className="value">
+                          <NumericFormat
+                            value={ amountInfo?.supplyAmount } 
+                            thousandSeparator
+                            displayType="text"
+                          ></NumericFormat>
+                        </span>
+                      </li>
+                      <li className="amount-item">
+                        <span className="label">·&nbsp;&nbsp;페이코포인트</span>
+                        <span className="value">
+                          <NumericFormat
+                            value={ amountInfo?.supplyAmount } 
+                            thousandSeparator
+                            displayType="text"
+                          ></NumericFormat>
+                        </span>
+                      </li>
+                      <li className="amount-item">
+                        <span className="label">·&nbsp;&nbsp;페이코쿠폰</span>
+                        <span className="value">
+                          <NumericFormat
+                            value={ amountInfo?.supplyAmount } 
+                            thousandSeparator
+                            displayType="text"
+                          ></NumericFormat>
+                        </span>
+                      </li>
+                    </>
+                  }
+                </>
               } 
             </ul>
           </div>
         }
         </SlideDown>
-        { (transactionCategory === TransactionCategory.AllTransaction) &&
+        { ((transactionCategory === TransactionCategory.AllTransaction) ||
+          (transactionCategory === TransactionCategory.Escrow)) &&
           <div className="txn-mid">
             <span className="value">{ amountInfo?.mid }</span>
           </div>
         }
+        { (transactionCategory === TransactionCategory.CashReceipt) &&
+          <div className="txn-mid">
+            <span className="value">{ amountInfo?.customerName }</span>
+          </div>
+        }
         <div className="txn-doc">
           {
             ((transactionCategory === TransactionCategory.CashReceipt) || 

src/pages/transaction/cash-receipt/detail-page.tsx

@@ -76,6 +76,9 @@ export const CashReceiptDetailPage = () => {
       tid: tid
     };
     cashReceiptDetail(cashReceitDetailParams).then((rs: DetailResponse) => {
+      if(rs.amountDetail){
+        rs.amountDetail.customerName =  rs.customerName;
+      }
       setAmountInfo(rs.amountDetail || {});
       setIssueInfo(rs.issueInfo || {});
       setDetailInfo(rs.detailInfo || {});

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

@@ -19,7 +19,8 @@ import {
   TransactionInfo,
   SettlementInfo,
   InfoSectionKeys,
-  MerchantInfo
+  MerchantInfo,
+  AmountInfo
 } from '@/entities/transaction/model/types';
 import {
   useSetOnBack, 
@@ -30,6 +31,7 @@ import {
 import { EscrowMailResendBottomSheet } from '@/entities/transaction/ui/escrow-mail-resend-bottom-sheet';
 import { useEscrowMailResendMutation } from '@/entities/transaction/api/use-escrow-mail-resend-mutation';
 import { MerchantInfoSection } from '@/entities/transaction/ui/section/merchant-info-section';
+import { AmountInfoSection } from '@/entities/transaction/ui/section/amount-info-section';
 
 export const EscrowDetailPage = () => {
   const { navigate } = useNavigate();
@@ -37,7 +39,7 @@ export const EscrowDetailPage = () => {
   const paramTid = location?.state.tid;
   const serviceCode = location?.state.serviceCode;
   
-  const [amountInfo, setAmountInfo] = useState<ImportantInfo>();
+  const [amountInfo, setAmountInfo] = useState<AmountInfo>();
   const [importantInfo, setImportantInfo] = useState<ImportantInfo>();
   const [escrowInfo, setEscrowInfo] = useState<EscrowInfo>();
   const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
@@ -73,6 +75,7 @@ export const EscrowDetailPage = () => {
       tid: tid || paramTid,
     };
     escrowDetail(escroDetailParams).then((rs: DetailResponse) => {
+      setAmountInfo(rs.amountInfo || {});
       setImportantInfo(rs.importantInfo || {});
       setEscrowInfo(rs.escrowInfo || {});
       setPaymentInfo(rs.paymentInfo || {});
@@ -133,6 +136,15 @@ export const EscrowDetailPage = () => {
           <div className="tab-pane sub active">
             <div className="option-list">
               <div className="txn-detail">
+                <AmountInfoSection
+                  transactionCategory={ TransactionCategory.Escrow }
+                  amountInfo={ amountInfo }
+                  isOpen={ showAmountInfo }
+                  tid={ tid }
+                  serviceCode={ serviceCode }
+                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                ></AmountInfoSection>
+                <div className="txn-divider minus"></div>
                 <ImportantInfoSection
                   transactionCategory={ TransactionCategory.Escrow }
                   importantInfo={ importantInfo }

src/shared/ui/assets/css/style-fix.css

@@ -394,4 +394,10 @@ main.home-main{
 }
 .cancel-input{
   width: calc(100% - 5px);
+}
+.txn-doc{
+  padding-top: 12px;
+}
+.mt12 { 
+  margin-top: 12px;
 }