거래내역 상세 페이지 관련

src/entities/transaction/model/types.ts

@@ -4,7 +4,6 @@ import {
   SortTypeKeys, 
   SuccessResult 
 } from '@/entities/common/model/types';
-import { MerchantInfo } from '@/entities/payment/model/types';
 
 export enum CancelTabKeys {
   All = 'All',
@@ -26,6 +25,7 @@ export enum InfoSectionKeys {
   Issue = 'Issue',
   Detail = 'Detail',
   Escrow = 'Escrow',
+  Merchant = 'Merchant'
 };
 export enum ProcessStep {
   One = 'One',
@@ -397,12 +397,14 @@ export interface TransactionInfo {
   transactionAmount?: number;
 };
 export interface SettlementInfo {
-  approvalSettleDate?: string;
+  approvalSettlementDate?: string;
-  approvalSettleAmount?: number;
+  approvalSettlementAmount?: number;
-  cancelSettleDate?: string;
+  cancelSettlementDate?: string;
-  cancelSettleAmount?: number;
+  cancelSettlementAmount?: number;
+  /*
   scheduledSettlementDate?: string;
   completedSettlementDate?: string;
+  */
 };
 export interface PartCancelInfo {
   originalTid?: string;
@@ -444,16 +446,16 @@ export interface DetailInfo {
   canDownloadReceipt?: boolean;
 };
 export interface EscrowInfo {
-  deliveryStatus: string;
+  deliveryStatus?: string;
-  deliveryRegistrationDate: string;
+  deliveryRegistrationDate?: string;
-  deliveryCompleteDate: string;
+  deliveryCompleteDate?: string;
-  purchaseConfirmDate: string;
+  purchaseConfirmDate?: string;
-  purchaseRejectReason: string;
+  purchaseRejectReason?: string;
-  rejectReason: string;
+  rejectReason?: string;
-  escrowCertNumber: string;
+  escrowCertNumber?: string;
-  deliveryCompany: string;
+  deliveryCompany?: string;
-  trackingNumber: number;
+  trackingNumber?: number;
-  deliveryAddress: string;
+  deliveryAddress?: string;
 };
 
 export interface BillingInfo {
@@ -467,6 +469,12 @@ export interface BillingInfo {
   installmentMonth: string;
   productName: string;
   buyerName: string;
+};
+
+export interface MerchantInfo {
+  shopName?: string;
+  gid?: string;
+  aid?: string;
 }
 
 export interface DetailResponse {
@@ -480,6 +488,7 @@ export interface DetailResponse {
   detailInfo?: DetailInfo;
   escrowInfo?: EscrowInfo;
   billingInfo?: BillingInfo;
+  merchantInfo?: MerchantInfo;
 };
 export interface BillingDetailResponse extends BillingInfo {
 

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

@@ -2,7 +2,7 @@ import moment from 'moment';
 import { NumericFormat } from 'react-number-format';
 import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
 import { useDownloadConfirmationMutation } from '../../api/use-download-confirmation-mutation';
-import { InfoSectionKeys, InfoSectionProps } from '../../model/types';
+import { InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types';
 import { SlideDown } from 'react-slidedown';
 import 'react-slidedown/lib/slidedown.css';
 
@@ -218,7 +218,15 @@ export const AmountInfoSection = ({
         { !!isOpen &&
           <div className="amount-expand">
             <ul className="amount-list">
-              { subLi() }
+              { (transactionCategory === TransactionCategory.AllTransaction) && 
+                subLi() 
+              }
+              { (transactionCategory === TransactionCategory.CashReceipt) && 
+                <></>
+              }
+              { (transactionCategory === TransactionCategory.Escrow) && 
+                <></>
+              } 
             </ul>
           </div>
         }
@@ -226,13 +234,18 @@ export const AmountInfoSection = ({
         <div className="txn-mid">
           <span className="value">{ amountInfo?.mid }</span>
         </div>
-        <div className="txn-doc">
+        {
-          <button 
+          ((transactionCategory === TransactionCategory.CashReceipt) || 
-            className="doc-btn" 
+          (transactionCategory === TransactionCategory.Escrow) || 
-            type="button"
+          (transactionCategory === TransactionCategory.Billing)) &&
-            onClick={ () => onClickToDownloadConfirmation() }
+          <div className="txn-doc">
-          >거래 확인서</button>
+            <button 
-        </div>
+              className="doc-btn" 
+              type="button"
+              onClick={ () => onClickToDownloadConfirmation() }
+            >거래 확인서</button>
+          </div>
+        }
       </div>
     </>
   );

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

@@ -5,7 +5,6 @@ import { SlideDown } from 'react-slidedown';
 import 'react-slidedown/lib/slidedown.css';
 
 export const EscrowInfoSection = ({
-  transactionCategory,
   escrowInfo,
   isOpen,
   onClickToOpenInfo
@@ -30,43 +29,43 @@ export const EscrowInfoSection = ({
         { !!isOpen &&
           <ul className="kv-list">
             <li className="kv-row">
-              <span className="k">배송상태</span>
+              <span className="k">·&nbsp;&nbsp;배송상태</span>
               <span className="v">{ escrowInfo?.deliveryStatus }</span>
             </li>
             <li className="kv-row">
-              <span className="k">배송등록</span>
+              <span className="k">·&nbsp;&nbsp;배송등록</span>
               <span className="v">{ moment(escrowInfo?.deliveryRegistrationDate).format('YYYY.MM.DD') }</span>
             </li>
             <li className="kv-row">
-              <span className="k">배송완료</span>
+              <span className="k">·&nbsp;&nbsp;배송완료</span>
               <span className="v">{ moment(escrowInfo?.deliveryCompleteDate).format('YYYY.MM.DD') }</span>
             </li>
             <li className="kv-row">
-              <span className="k">구매확인</span>
+              <span className="k">·&nbsp;&nbsp;구매확인</span>
               <span className="v">{ moment(escrowInfo?.purchaseConfirmDate).format('YYYY.MM.DD') }</span>
             </li>
             <li className="kv-row">
-              <span className="k">구매거절</span>
+              <span className="k">·&nbsp;&nbsp;구매거절</span>
               <span className="v">{ escrowInfo?.purchaseRejectReason }</span>
             </li>
             <li className="kv-row">
-              <span className="k">거절사유</span>
+              <span className="k">·&nbsp;&nbsp;거절사유</span>
               <span className="v">{ escrowInfo?.rejectReason }</span>
             </li>
             <li className="kv-row">
-              <span className="k">에스크로인증번호</span>
+              <span className="k">·&nbsp;&nbsp;에스크로인증번호</span>
               <span className="v">{ escrowInfo?.escrowCertNumber }</span>
             </li>
             <li className="kv-row">
-              <span className="k">택배사</span>
+              <span className="k">·&nbsp;&nbsp;택배사</span>
               <span className="v">{ escrowInfo?.deliveryCompany }</span>
             </li>
             <li className="kv-row">
-              <span className="k">운송장번호</span>
+              <span className="k">·&nbsp;&nbsp;운송장번호</span>
               <span className="v">{ escrowInfo?.trackingNumber }</span>
             </li>
             <li className="kv-row">
-              <span className="k">배송주소</span>
+              <span className="k">·&nbsp;&nbsp;배송주소</span>
               <span className="v">{ escrowInfo?.deliveryAddress }</span>
             </li>
           </ul>

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

@@ -152,41 +152,46 @@ export const ImportantInfoSection = ({
             subLi()
           }
           { 
-          /*
           (transactionCategory === TransactionCategory.Escrow) && 
             <>
               <li className="kv-row">
                 <span className="k">주문번호</span>
-                <span className="v">{ importantInfo?.orderNumber }</span>
+                <span className="v">{  }</span>
               </li>
               <li className="kv-row">
                 <span className="k">TID</span>
-                <span className="v">{ importantInfo?.tid }</span>
+                <span className="v">{  }</span>
               </li>
               <li className="kv-row">
                 <span className="k">거래상태</span>
-                <span className="v">{ importantInfo?.transactionStatus }</span>
+                <span className="v">{  }</span>
               </li>
               <li className="kv-row">
-                <span className="k">결제수단</span>
+                <span className="k">거래수단</span>
-                <span className="v">{ importantInfo?.paymentMethod }</span>
+                <span className="v">{  }</span>
               </li>
               <li className="kv-row">
                 <span className="k">승인일</span>
-                <span className="v">{ moment(importantInfo?.approvalDate).format('YYYY.MM.DD') }</span>
+                <span className="v">{  }</span>
+              </li>
+              <li className="kv-row">
+                <span className="k">거래일</span>
+                <span className="v">{  }</span>
+              </li>
+              <li className="kv-row">
+                <span className="k">요청일</span>
+                <span className="v">{  }</span>
               </li>
               <li className="kv-row">
                 <span className="k">취소일</span>
-                <span className="v">{ moment(importantInfo?.cancelDate).format('YYYY.MM.DD') }</span>
+                <span className="v">{  }</span>
               </li>
               <li className="kv-row">
                 <span className="k">상품명</span>
-                <span className="v">{ importantInfo?.goodsName }</span>
+                <span className="v">{  }</span>
               </li>
             </>
-            */
           }
-          
         </ul>
       </div>
     </>

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

@@ -0,0 +1,48 @@
+import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
+import { InfoSectionKeys, InfoSectionProps } from '../../model/types';
+import { SlideDown } from 'react-slidedown';
+import 'react-slidedown/lib/slidedown.css';
+
+export const MerchantInfoSection = ({
+  merchantInfo,
+  isOpen,
+  onClickToOpenInfo
+}: InfoSectionProps) => {
+
+  const onClickToSetOpenInfo = () => {
+    if(!!onClickToOpenInfo){
+      onClickToOpenInfo(InfoSectionKeys.Merchant);
+    }
+  };
+
+  return (
+    <>
+      <div className="txn-section">
+        <div 
+          className="section-title with-toggle"
+          onClick={ () => onClickToSetOpenInfo() }
+        >
+          상점 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
+        </div>
+        <SlideDown className={'my-dropdown-slidedown'}>
+        { !!isOpen &&
+          <ul className="kv-list">
+            <li className="kv-row">
+              <span className="k">·&nbsp;&nbsp;상호</span>
+              <span className="v">{ merchantInfo?.shopName }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">·&nbsp;&nbsp;GID</span>
+              <span className="v">{ merchantInfo?.gid }</span>
+            </li>
+            <li className="kv-row">
+              <span className="k">·&nbsp;&nbsp;AID</span>
+              <span className="v">{ merchantInfo?.aid }</span>
+            </li>
+          </ul>
+        }
+        </SlideDown>
+      </div>
+    </>
+  );
+};

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

@@ -153,19 +153,100 @@ export const PaymentInfoSection = ({
             { (transactionCategory === TransactionCategory.Escrow) && 
               <>
                 <li className="kv-row">
-                  <span className="k">승인 금액</span>
+                  <span className="k">·&nbsp;&nbsp;승인매입</span>
-                  <span className="v">
+                  <span className="v">{  }</span>
-                    <NumericFormat
-                      value={ paymentInfo?.paymentAmount } 
-                      thousandSeparator
-                      displayType="text"
-                      suffix='원'
-                    ></NumericFormat>
-                  </span>
                 </li>
                 <li className="kv-row">
-                  <span className="k">승인 번호</span>
+                  <span className="k">·&nbsp;&nbsp;승인반송(횟수)</span>
-                  <span className="v">{ paymentInfo?.approvalNumber }</span>
+                  <span className="v">{  }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">·&nbsp;&nbsp;승인재매입(횟수)</span>
+                  <span className="v">{  }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">·&nbsp;&nbsp;승인VAN</span>
+                  <span className="v">{  }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">·&nbsp;&nbsp;취소매입</span>
+                  <span className="v">{  }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">·&nbsp;&nbsp;취소반송</span>
+                  <span className="v">{  }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">·&nbsp;&nbsp;취소재매입</span>
+                  <span className="v">{  }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">·&nbsp;&nbsp;매입VAN</span>
+                  <span className="v">{  }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">·&nbsp;&nbsp;매입사(발급사)</span>
+                  <span className="v">{  }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">·&nbsp;&nbsp;카드번호</span>
+                  <span className="v">{  }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">·&nbsp;&nbsp;승인번호</span>
+                  <span className="v">{  }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">·&nbsp;&nbsp;할부기간</span>
+                  <span className="v">{  }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">·&nbsp;&nbsp;인증</span>
+                  <span className="v">{  }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">·&nbsp;&nbsp;유형</span>
+                  <span className="v">{  }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">·&nbsp;&nbsp;은행명</span>
+                  <span className="v">{  }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">·&nbsp;&nbsp;계좌번호</span>
+                  <span className="v">{  }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">·&nbsp;&nbsp;입금금융기관명</span>
+                  <span className="v">{  }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">·&nbsp;&nbsp;입금자명</span>
+                  <span className="v">{  }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">·&nbsp;&nbsp;입금기한</span>
+                  <span className="v">{  }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">·&nbsp;&nbsp;입금일</span>
+                  <span className="v">{  }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">·&nbsp;&nbsp;환불예정일</span>
+                  <span className="v">{  }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">·&nbsp;&nbsp;환불은행명</span>
+                  <span className="v">{  }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">·&nbsp;&nbsp;환불계좌번호</span>
+                  <span className="v">{  }</span>
+                </li>
+                <li className="kv-row">
+                  <span className="k">·&nbsp;&nbsp;예금주</span>
+                  <span className="v">{  }</span>
                 </li>
               </>
             }

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

@@ -1,7 +1,7 @@
 import moment from 'moment';
 import { NumericFormat } from 'react-number-format';
 import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
-import { InfoSectionKeys, InfoSectionProps } from '../../model/types';
+import { InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types';
 import { SlideDown } from 'react-slidedown';
 import 'react-slidedown/lib/slidedown.css';
 
@@ -106,13 +106,53 @@ export const SettlementInfoSection = ({
         >
           정산 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
         </div>
-        <SlideDown className={'my-dropdown-slidedown'}>
+        { (transactionCategory === TransactionCategory.AllTransaction) &&
-        { !!isOpen &&
+          <SlideDown className={'my-dropdown-slidedown'}>
-          <ul className="kv-list">
+          { !!isOpen &&
-          { subLi() }
+            <ul className="kv-list">
-          </ul>
+            { subLi() }
+            </ul>
+          }
+          </SlideDown>
+        }
+        { (transactionCategory === TransactionCategory.Escrow) && 
+          <SlideDown className={'my-dropdown-slidedown'}>
+          { !!isOpen &&
+            <ul className="kv-list">
+              <li className="kv-row">
+                <span className="k">·&nbsp;&nbsp;승인정산일</span>
+                <span className="v">{ moment(settlementInfo?.approvalSettlementDate).format('YYYY.MM.DD') }</span>
+              </li>
+              <li className="kv-row">
+                <span className="k">·&nbsp;&nbsp;승인정산금액</span>
+                <span className="v">
+                  <NumericFormat
+                    value={ settlementInfo?.approvalSettlementAmount } 
+                    thousandSeparator
+                    displayType="text"
+                    suffix='원'
+                  ></NumericFormat>
+                </span>
+              </li>
+              <li className="kv-row">
+                <span className="k">·&nbsp;&nbsp;취소정산일</span>
+                <span className="v">{ moment(settlementInfo?.cancelSettlementDate).format('YYYY.MM.DD') }</span>
+              </li>
+              <li className="kv-row">
+                <span className="k">·&nbsp;&nbsp;취소정산금액</span>
+                <span className="v">
+                  <NumericFormat
+                    value={ settlementInfo?.cancelSettlementAmount } 
+                    thousandSeparator
+                    displayType="text"
+                    suffix='원'
+                  ></NumericFormat>
+                </span>
+              </li>
+            </ul>
+          }
+          </SlideDown>
         }
-        </SlideDown>
       </div>
     </>
   )

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

@@ -121,12 +121,33 @@ export const TransactionInfoSection = ({
           { (transactionCategory === TransactionCategory.Escrow) && 
             <>
               <li className="kv-row">
-                <span className="k">가맹점명</span>
+                <span className="k">·&nbsp;&nbsp;구매자명</span>
-                <span className="v">NICE PAY</span>
+                <span className="v">{ }</span>
               </li>
               <li className="kv-row">
-                <span className="k">사업자번호</span>
+                <span className="k">·&nbsp;&nbsp;이메일</span>
-                <span className="v">123-45-67890</span>
+                <span className="v">{ }</span>
+              </li>
+              <li className="kv-row">
+                <span className="k">·&nbsp;&nbsp;전화번호</span>
+                <span className="v">{ }</span>
+              </li>
+              <li className="kv-row">
+                <span className="k">·&nbsp;&nbsp;취소사유</span>
+                <span className="v">{ }</span>
+              </li>
+              <li className="kv-row">
+                <span className="k">·&nbsp;&nbsp;취소요청자</span>
+                <span className="v">{ }</span>
+              </li>
+              <li className="kv-row">
+                <span className="k">·&nbsp;&nbsp;부분취소</span>
+                <span className="v">{ }</span>
+              </li>
+              { /* 계좌이체 혹은 가상계좌 */ }
+              <li className="kv-row">
+                <span className="k">·&nbsp;&nbsp;현금영수증발행</span>
+                <span className="v">{ }</span>
               </li>
             </>
           }

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

@@ -18,7 +18,8 @@ import {
   PaymentInfo,
   TransactionInfo,
   SettlementInfo,
-  InfoSectionKeys
+  InfoSectionKeys,
+  MerchantInfo
 } from '@/entities/transaction/model/types';
 import {
   useSetOnBack, 
@@ -28,6 +29,7 @@ import {
 } 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';
+import { MerchantInfoSection } from '@/entities/transaction/ui/section/merchant-info-section';
 
 export const EscrowDetailPage = () => {
   const { navigate } = useNavigate();
@@ -39,12 +41,16 @@ export const EscrowDetailPage = () => {
   const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
   const [transactionInfo, setTransactionInfo] = useState<TransactionInfo>();
   const [settlementInfo, setSettlementInfo] = useState<SettlementInfo>();
+  const [merchantInfo, setMerchantInfo] = useState<MerchantInfo>();
+
   const [showAmountInfo, setShowAmountInfo] = useState<boolean>(false);
   const [showImportantInfo, setShowImportantInfo] = useState<boolean>(false);
   const [showEscroInfo, setShowEscroInfo] = useState<boolean>(false);
   const [showPaymentInfo, setShowPaymentInfo] = useState<boolean>(false);
   const [showTransactionInfo, setShowTransactionInfo] = useState<boolean>(false);
   const [showSettlementInfo, setShowSettlementInfo] = useState<boolean>(false);
+  const [showMerchantInfo, setShowMerchantInfo] = useState<boolean>(false);
+
   const [bottomSheetOn, setBottomSheetOn] = useState<boolean>(false);
 
   const [orderNumber, setOrderNumber] = useState<string>();
@@ -65,11 +71,12 @@ export const EscrowDetailPage = () => {
       issueNumber: location?.state.issueNumber,
     };
     escrowDetail(escroDetailParams).then((rs: DetailResponse) => {
-      setImportantInfo(rs.importantInfo);
+      setImportantInfo(rs.importantInfo || {});
-      setEscrowInfo(rs.escrowInfo);
+      setEscrowInfo(rs.escrowInfo || {});
-      setPaymentInfo(rs.paymentInfo);
+      setPaymentInfo(rs.paymentInfo || {});
-      setTransactionInfo(rs.transactionInfo);
+      setTransactionInfo(rs.transactionInfo || {});
-      setSettlementInfo(rs.settlementInfo);
+      setSettlementInfo(rs.settlementInfo || {});
+      setMerchantInfo(rs.merchantInfo || {});
 
       setOrderNumber(rs.importantInfo?.orderNumber);
       setTid(rs.importantInfo?.tid);
@@ -112,6 +119,9 @@ export const EscrowDetailPage = () => {
     else if(infoSectionKey === InfoSectionKeys.Settlement){
       setShowSettlementInfo(!showSettlementInfo);
     }
+    else if(infoSectionKey === InfoSectionKeys.Merchant){
+      setShowMerchantInfo(!showMerchantInfo);
+    }
   };
 
   return (
@@ -127,8 +137,7 @@ export const EscrowDetailPage = () => {
                 ></ImportantInfoSection>
                 <div className="txn-divider minus"></div>
                 <EscrowInfoSection
-                  transactionCategory={ TransactionCategory.Escrow }
+                  escrowInfo={ escrowInfo }
-                  importantInfo={ importantInfo }
                   isOpen={ showEscroInfo }
                   onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
                 ></EscrowInfoSection>
@@ -153,6 +162,11 @@ export const EscrowDetailPage = () => {
                   isOpen={ showSettlementInfo }
                   onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
                 ></SettlementInfoSection>
+                <MerchantInfoSection
+                  merchantInfo={ merchantInfo }
+                  isOpen={ showMerchantInfo }
+                  onClickToOpenInfo={ (infoSectionKey) => onClickToOpenInfo(infoSectionKey) }
+                ></MerchantInfoSection>
                 <div className="txn-divider"></div>
               </div>
             </div>