거래내역 관련

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

@@ -0,0 +1,121 @@
+import { motion } from 'framer-motion';
+import { NumericFormat } from 'react-number-format';
+import { DetailArrow } from '../detail-arrow';
+import { useDownloadConfirmationMutation } from '../../api/use-download-confirmation-mutation';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+
+export const AmountInfoWrap = ({
+  transactionCategory, 
+  amountInfo,
+  show,
+  tid,
+  onClickToShowInfo
+}: DetailInfoProps) => {
+  const { mutateAsync: downloadConfirmation } = useDownloadConfirmationMutation();
+  const variants = {
+    hidden: { height: 0, padding: 0, margin: 0, display: 'none' },
+    visible: { height: 'auto', padding: '16px', margin: '10px 0', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(InfoWrapKeys.Amount);
+    }
+  };
+
+  const onClickToDownloadConfirmation = () => {
+    if(!!tid){
+      downloadConfirmation({
+        tid: tid
+      }).then((rs) => {
+        alert('거래확인서 다운 성공');
+      });
+    }
+  };
+
+  return (
+    <>
+      <div className="txn-num-group">
+        <div className="txn-amount">
+          <div className="value">
+            <NumericFormat
+              value={ amountInfo?.amount } 
+              thousandSeparator
+              displayType="text"
+            ></NumericFormat>
+            <span className="unit">원</span>
+          </div>
+          <button 
+            className="chip-btn" 
+            type="button"
+            onClick={ () => onClickToSetShowInfo() }
+          >
+            금액상세 <DetailArrow show={ show }></DetailArrow>
+          </button>
+        </div>
+      
+        <motion.div 
+          className="amount-expand"
+          initial="hidden"
+          animate={ (show)? 'visible': 'hidden' }
+          variants={ variants }
+          transition={{ duration: 0.3 }}
+        >
+          <ul className="amount-list">
+            <li className="amount-item">
+              <span className="label">·&nbsp;&nbsp;신용카드</span>
+              <span className="value">
+                <NumericFormat
+                  value={ amountInfo?.cardAmount } 
+                  thousandSeparator
+                  displayType="text"
+                ></NumericFormat>
+              </span>
+            </li>
+            <li className="amount-item">
+              <span className="label">·&nbsp;&nbsp;포인트</span>
+              <span className="value">
+                <NumericFormat
+                  value={ amountInfo?.pointAmount } 
+                  thousandSeparator
+                  displayType="text"
+                ></NumericFormat>
+              </span>
+            </li>
+            <li className="amount-item">
+              <span className="label">·&nbsp;&nbsp;쿠폰</span>
+              <span className="value minus">
+                <NumericFormat
+                  value={ amountInfo?.couponAmount } 
+                  thousandSeparator
+                  displayType="text"
+                ></NumericFormat>
+              </span>
+            </li>
+            <li className="amount-item">
+              <span className="label">·&nbsp;&nbsp;에스크로</span>
+              <span className="value">
+                <NumericFormat
+                  value={ amountInfo?.escrowFee } 
+                  thousandSeparator
+                  displayType="text"
+                ></NumericFormat>
+              </span>
+            </li>
+          </ul>
+        </motion.div>
+        
+        <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>
+      </div>
+    </>
+  );
+};

src/entities/transaction/ui/info-wrap/detail-info-wrap.tsx

@@ -0,0 +1,44 @@
+import moment from 'moment';
+import { motion } from 'framer-motion';
+import { DetailArrow } from '../detail-arrow';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+
+export const DetailInfoWrap = ({
+  transactionCategory,
+  detailInfo,
+  show,
+  onClickToShowInfo
+}: DetailInfoProps) => {
+  const variants = {
+    hidden: { height: 0, padding: 0, display: 'none' },
+    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(InfoWrapKeys.Issue);
+    }
+  };
+  
+  return (
+    <>
+      <div className="txn-section">
+        <div 
+          className="section-title with-toggle"
+          onClick={ () => onClickToSetShowInfo() }
+        >
+          정산 정보 <DetailArrow show={ show }></DetailArrow>
+        </div>
+        <motion.ul 
+          className="kv-list"
+          initial="hidden"
+          animate={ (show)? 'visible': 'hidden' }
+          variants={ variants }
+          transition={{ duration: 0.3 }}
+        >
+        
+        </motion.ul>
+      </div>
+    </>
+  )
+};

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

@@ -0,0 +1,44 @@
+import moment from 'moment';
+import { motion } from 'framer-motion';
+import { DetailArrow } from '../detail-arrow';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+
+export const EscrowInfoWrap = ({
+  transactionCategory,
+  escrowInfo,
+  show,
+  onClickToShowInfo
+}: DetailInfoProps) => {
+  const variants = {
+    hidden: { height: 0, padding: 0, display: 'none' },
+    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(InfoWrapKeys.Escrow);
+    }
+  };
+  
+  return (
+    <>
+      <div className="txn-section">
+        <div 
+          className="section-title with-toggle"
+          onClick={ () => onClickToSetShowInfo() }
+        >
+          정산 정보 <DetailArrow show={ show }></DetailArrow>
+        </div>
+        <motion.ul 
+          className="kv-list"
+          initial="hidden"
+          animate={ (show)? 'visible': 'hidden' }
+          variants={ variants }
+          transition={{ duration: 0.3 }}
+        >
+        
+        </motion.ul>
+      </div>
+    </>
+  )
+};

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

@@ -0,0 +1,58 @@
+import moment from 'moment';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+
+export const ImportantInfoWrap = ({
+  transactionCategory,
+  importantInfo,
+  show,
+  onClickToShowInfo
+}: DetailInfoProps) => {
+
+   const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(InfoWrapKeys.Important);
+    }
+  };
+
+  return (
+    <>
+      <div className="txn-section">
+        <div className="section-title">중요 정보</div>
+        <ul className="kv-list">
+          <li className="kv-row">
+            <span className="k">주문번호</span>
+            <span className="v">{ importantInfo?.ordNo }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">TID</span>
+            <span className="v">{ importantInfo?.tid }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">결제상태</span>
+            <span className="v">{ importantInfo?.tradeStatus }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">결제수단</span>
+            <span className="v">{ importantInfo?.tradeMethod }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">승인일</span>
+            <span className="v">{ moment(importantInfo?.approvalDate).format('YYYY.MM.DD') }</span>
+          </li>
+          {
+            /*
+          <li className="kv-row">
+            <span className="k">취소일</span>
+            <span className="v">2025.06.08</span>
+          </li>
+            */
+          }
+          <li className="kv-row">
+            <span className="k">상품명</span>
+            <span className="v">{ importantInfo?.productName }</span>
+          </li>
+        </ul>
+      </div>
+    </>
+  )
+};

src/entities/transaction/ui/info-wrap/issue-info-wrap.tsx

@@ -0,0 +1,44 @@
+import moment from 'moment';
+import { motion } from 'framer-motion';
+import { DetailArrow } from '../detail-arrow';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+
+export const IssueInfoWrap = ({
+  transactionCategory,
+  issueInfo,
+  show,
+  onClickToShowInfo
+}: DetailInfoProps) => {
+  const variants = {
+    hidden: { height: 0, padding: 0, display: 'none' },
+    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(InfoWrapKeys.Issue);
+    }
+  };
+  
+  return (
+    <>
+      <div className="txn-section">
+        <div 
+          className="section-title with-toggle"
+          onClick={ () => onClickToSetShowInfo() }
+        >
+          정산 정보 <DetailArrow show={ show }></DetailArrow>
+        </div>
+        <motion.ul 
+          className="kv-list"
+          initial="hidden"
+          animate={ (show)? 'visible': 'hidden' }
+          variants={ variants }
+          transition={{ duration: 0.3 }}
+        >
+        
+        </motion.ul>
+      </div>
+    </>
+  )
+};

src/entities/transaction/ui/info-wrap/part-cancel-info-wrap.tsx

@@ -0,0 +1,78 @@
+import { motion } from 'framer-motion';
+import { NumericFormat } from 'react-number-format';
+import { DetailArrow } from '../detail-arrow';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+
+export const PartCancelInfoWrap = ({
+  transactionCategory,
+  partCancelInfo,
+  show,
+  onClickToShowInfo
+}: DetailInfoProps) => {
+  
+  const variants = {
+    hidden: { height: 0, padding: 0, display: 'none' },
+    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(InfoWrapKeys.PartCancel);
+    }
+  };
+  
+  return (
+    <>
+      <div className="txn-section">
+        <div 
+          className="section-title with-toggle"
+          onClick={ () => onClickToSetShowInfo() }
+        >
+          부분취소 정보 <DetailArrow show={ show }></DetailArrow>
+        </div>
+        <motion.ul 
+          className="kv-list"
+          initial="hidden"
+          animate={ (show)? 'visible': 'hidden' }
+          variants={ variants }
+          transition={{ duration: 0.3 }}
+        >
+          <li className="kv-row">
+            <span className="k">원거래 TID</span>
+            <span className="v">{ partCancelInfo?.originalTid }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">원거래 금액</span>
+            <span className="v">
+              <NumericFormat
+                value={ partCancelInfo?.originalAmount } 
+                thousandSeparator
+                displayType="text"
+                suffix={ '원' }
+              ></NumericFormat>
+            </span>
+          </li>
+          <li className="kv-row">
+            <span className="k">부분취소 TID</span>
+            <span className="v">nictest00m01012506171629294150</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">부분취소 금액</span>
+            <span className="v">50,000원</span>
+          </li>
+          <li className="kv-row nopadding">
+            <span className="k">부분취소 후 잔액</span>
+            <span className="v">
+              <NumericFormat
+                value={ partCancelInfo?.remainingAmount } 
+                thousandSeparator
+                displayType="text"
+                suffix={ '원' }
+              ></NumericFormat>
+            </span>
+          </li>
+        </motion.ul>
+      </div>
+    </>
+  )
+};

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

@@ -0,0 +1,50 @@
+import { motion } from 'framer-motion';
+import { DetailArrow } from '../detail-arrow';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+
+export const PaymentInfoWrap = ({
+  transactionCategory,
+  paymentInfo,
+  show,
+  onClickToShowInfo
+}: DetailInfoProps) => {
+  const variants = {
+    hidden: { height: 0, padding: 0, display: 'none' },
+    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(InfoWrapKeys.Payment);
+    }
+  };
+  
+  return (
+    <>
+      <div className="txn-section">
+        <div 
+          className="section-title with-toggle"
+          onClick={ () => onClickToSetShowInfo() }
+        >
+          결제 정보 <DetailArrow show={ show }></DetailArrow>
+        </div>
+        <motion.ul 
+          className="kv-list"
+          initial="hidden"
+          animate={ (show)? 'visible': 'hidden' }
+          variants={ variants }
+          transition={{ duration: 0.3 }}
+        >
+          <li className="kv-row">
+            <span className="k">승인 금액</span>
+            <span className="v">10,000,000원</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">부가세</span>
+            <span className="v">0원</span>
+          </li>
+        </motion.ul>
+      </div>
+    </>
+  )
+};

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

@@ -0,0 +1,51 @@
+import moment from 'moment';
+import { motion } from 'framer-motion';
+import { DetailArrow } from '../detail-arrow';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+
+export const SettlementInfoWrap = ({
+  transactionCategory,
+  settlementInfo,
+  show,
+  onClickToShowInfo
+}: DetailInfoProps) => {
+  const variants = {
+    hidden: { height: 0, padding: 0, display: 'none' },
+    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(InfoWrapKeys.Settlement);
+    }
+  };
+  
+  return (
+    <>
+      <div className="txn-section">
+        <div 
+          className="section-title with-toggle"
+          onClick={ () => onClickToSetShowInfo() }
+        >
+          정산 정보 <DetailArrow show={ show }></DetailArrow>
+        </div>
+        <motion.ul 
+          className="kv-list"
+          initial="hidden"
+          animate={ (show)? 'visible': 'hidden' }
+          variants={ variants }
+          transition={{ duration: 0.3 }}
+        >
+          <li className="kv-row">
+            <span className="k">정산 예정일</span>
+            <span className="v">{ moment(settlementInfo?.approvalSettleDate).format('YYYY.MM.DD') }</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">정산 상태</span>
+            <span className="v">예정</span>
+          </li>
+        </motion.ul>
+      </div>
+    </>
+  )
+};

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

@@ -0,0 +1,50 @@
+import { motion } from 'framer-motion';
+import { DetailArrow } from '../detail-arrow';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
+
+export const TransactionInfoWrap = ({
+  transactionCategory,
+  transactionInfo,
+  show,
+  onClickToShowInfo
+}: DetailInfoProps) => {
+  const variants = {
+    hidden: { height: 0, padding: 0, display: 'none' },
+    visible: { height: 'auto', paddingTop: '12px', display: 'block' },
+  };
+
+  const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(InfoWrapKeys.Transaction);
+    }
+  };
+
+  return (
+    <>
+      <div className="txn-section" onClick={ () => onClickToSetShowInfo() }>
+        <div 
+          className="section-title with-toggle"
+          
+        >
+          거래 정보 <DetailArrow show={ show }></DetailArrow>
+        </div>
+        <motion.ul 
+          className="kv-list"
+          initial="hidden"
+          animate={ (show)? 'visible': 'hidden' }
+          variants={ variants }
+          transition={{ duration: 0.3 }}
+        >
+          <li className="kv-row">
+            <span className="k">가맹점명</span>
+            <span className="v">NICE PAY</span>
+          </li>
+          <li className="kv-row">
+            <span className="k">사업자번호</span>
+            <span className="v">123-45-67890</span>
+          </li>
+        </motion.ul>
+      </div>
+    </>
+  )
+};