거래내역 상세 페이지 관련

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 
-            className="doc-btn" 
-            type="button"
-            onClick={ () => onClickToDownloadConfirmation() }
-          >거래 확인서</button>
-        </div>
+        {
+          ((transactionCategory === TransactionCategory.CashReceipt) || 
+          (transactionCategory === TransactionCategory.Escrow) || 
+          (transactionCategory === TransactionCategory.Billing)) &&
+          <div className="txn-doc">
+            <button 
+              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="v">{ importantInfo?.paymentMethod }</span>
+                <span className="k">거래수단</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="v">
-                    <NumericFormat
-                      value={ paymentInfo?.paymentAmount } 
-                      thousandSeparator
-                      displayType="text"
-                      suffix='원'
-                    ></NumericFormat>
-                  </span>
+                  <span className="k">·&nbsp;&nbsp;승인매입</span>
+                  <span className="v">{  }</span>
                 </li>
                 <li className="kv-row">
-                  <span className="k">승인 번호</span>
-                  <span className="v">{ paymentInfo?.approvalNumber }</span>
+                  <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;매입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'}>
-        { !!isOpen &&
-          <ul className="kv-list">
-          { subLi() }
-          </ul>
+        { (transactionCategory === TransactionCategory.AllTransaction) &&
+          <SlideDown className={'my-dropdown-slidedown'}>
+          { !!isOpen &&
+            <ul className="kv-list">
+            { 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="v">NICE PAY</span>
+                <span className="k">·&nbsp;&nbsp;구매자명</span>
+                <span className="v">{ }</span>
               </li>
               <li className="kv-row">
-                <span className="k">사업자번호</span>
-                <span className="v">123-45-67890</span>
+                <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>
             </>
           }