거래내역 관련

src/entities/transaction/ui/all-transaction-list.tsx

@@ -2,7 +2,7 @@ import { AllTransactionListProps } from '../model/types';
 import { ListDateGroup } from './list-date-group';
 
 export const AllTransactionList = ({ 
-  pageType,
+  transactionCategory,
   listItems 
 }: AllTransactionListProps) => {
   
@@ -11,7 +11,7 @@ export const AllTransactionList = ({
     for (const [key, value] of Object.entries(listItems)) {
       rs.push(
         <ListDateGroup
-          pageType={ pageType }
+          transactionCategory={ transactionCategory }
           key={ key }
           date={ key }
           items={ value }

src/entities/transaction/ui/billing-list.tsx

@@ -4,7 +4,7 @@ import { BillingListProps } from '../model/types';
 import { ListDateGroup } from './list-date-group';
 
 export const BillingList = ({ 
-  pageType,
+  transactionCategory,
   listItems 
 }: BillingListProps) => {
   const { navigate } = useNavigate();
@@ -14,7 +14,7 @@ export const BillingList = ({
     for (const [key, value] of Object.entries(listItems)) {
       rs.push(
         <ListDateGroup
-          pageType={ pageType }
+          transactionCategory={ transactionCategory }
           key={ key }
           date={ key }
           items={ value }

src/entities/transaction/ui/cash-receipt-hand-written-issuance-step1.tsx

@@ -2,11 +2,11 @@ import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
 
-export const CashReceitHandWrittenIssuanceStep1 = () => {
+export const CashReceiptHandWrittenIssuanceStep1 = () => {
   const { navigate } = useNavigate();
 
   useSetOnBack(() => {
-    navigate(PATHS.transaction.cashReceit.list);
+    navigate(PATHS.transaction.cashReceipt.list);
   });
   return (
     <>

src/entities/transaction/ui/cash-receipt-hand-written-issuance-step2.tsx

@@ -1,12 +1,12 @@
 import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
 import { ProcessStep } from '../model/types';
 
-export interface CashReceitHandWrittenIssuanceStep2Props {
+export interface CashReceiptHandWrittenIssuanceStep2Props {
   setProcessStep: ((processStep: ProcessStep) => void);
 };
-export const CashReceitHandWrittenIssuanceStep2 = ({
+export const CashReceiptHandWrittenIssuanceStep2 = ({
   setProcessStep
-}: CashReceitHandWrittenIssuanceStep2Props) => {
+}: CashReceiptHandWrittenIssuanceStep2Props) => {
   useSetOnBack(() => {
     setProcessStep(ProcessStep.One);
   });

src/entities/transaction/ui/cash-receipt-list.tsx

@@ -1,12 +1,12 @@
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { CashReceitListProps } from '../model/types';
+import { CashReceiptListProps } from '../model/types';
 import { ListDateGroup } from './list-date-group';
 
-export const CashReceitList = ({ 
-  pageType,
+export const CashReceiptList = ({ 
+  transactionCategory,
   listItems 
-}: CashReceitListProps) => {
+}: CashReceiptListProps) => {
   const { navigate } = useNavigate();
   
   const getListDateGroup = () => {
@@ -14,7 +14,7 @@ export const CashReceitList = ({
     for (const [key, value] of Object.entries(listItems)) {
       rs.push(
         <ListDateGroup
-          pageType={ pageType }
+          transactionCategory={ transactionCategory }
           key={ key }
           date={ key }
           items={ value }
@@ -25,7 +25,7 @@ export const CashReceitList = ({
   };
 
   const onClickToNavigate = () => {
-    navigate(PATHS.transaction.cashReceit.handWrittenIssuance);
+    navigate(PATHS.transaction.cashReceipt.handWrittenIssuance);
   };
 
   return (

src/entities/transaction/ui/escrow-list.tsx

@@ -1,17 +1,17 @@
-import { EscroListProps } from '../model/types';
+import { EscrowListProps } from '../model/types';
 import { ListDateGroup } from './list-date-group';
 
-export const EscroList = ({ 
-  pageType,
+export const EscrowList = ({ 
+  transactionCategory,
   listItems 
-}: EscroListProps) => {
+}: EscrowListProps) => {
   
   const getListDateGroup = () => {
     let rs = [];
     for (const [key, value] of Object.entries(listItems)) {
       rs.push(
         <ListDateGroup
-          pageType={ pageType }
+          transactionCategory={ transactionCategory }
           key={ key }
           date={ key }
           items={ value }

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

@@ -1,12 +1,11 @@
-import { useEffect, useState } from 'react';
 import { motion } from 'framer-motion';
 import { NumericFormat } from 'react-number-format';
-import { DetailInfoKeys, DetailInfoProps } from '../model/types';
-import { DetailArrow } from './detail-arrow';
-import { useDownloadConfirmationMutation } from '../api/use-download-confirmation-mutation';
+import { DetailArrow } from '../detail-arrow';
+import { useDownloadConfirmationMutation } from '../../api/use-download-confirmation-mutation';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
 
-export const DetailAmountInfo = ({
-  pageType, 
+export const AmountInfoWrap = ({
+  transactionCategory, 
   amountInfo,
   show,
   tid,
@@ -20,7 +19,7 @@ export const DetailAmountInfo = ({
 
   const onClickToSetShowInfo = () => {
     if(!!onClickToShowInfo){
-      onClickToShowInfo(DetailInfoKeys.Amount);
+      onClickToShowInfo(InfoWrapKeys.Amount);
     }
   };
 

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

@@ -1,13 +1,19 @@
-import { NumericFormat } from 'react-number-format';
 import moment from 'moment';
-import { DetailInfoProps } from '../model/types';
-import { IMAGE_ROOT } from '@/shared/constants/common';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
 
-export const DetailImportantInfo = ({
-  pageType,
-  importantInfo
+export const ImportantInfoWrap = ({
+  transactionCategory,
+  importantInfo,
+  show,
+  onClickToShowInfo
 }: DetailInfoProps) => {
 
+   const onClickToSetShowInfo = () => {
+    if(!!onClickToShowInfo){
+      onClickToShowInfo(InfoWrapKeys.Important);
+    }
+  };
+
   return (
     <>
       <div className="txn-section">

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

@@ -1,11 +1,10 @@
-import { useState } from 'react';
 import { motion } from 'framer-motion';
 import { NumericFormat } from 'react-number-format';
-import { DetailInfoKeys, DetailInfoProps } from '../model/types';
-import { DetailArrow } from './detail-arrow';
+import { DetailArrow } from '../detail-arrow';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
 
-export const DetailPartCancelInfo = ({
-  pageType,
+export const PartCancelInfoWrap = ({
+  transactionCategory,
   partCancelInfo,
   show,
   onClickToShowInfo
@@ -18,7 +17,7 @@ export const DetailPartCancelInfo = ({
 
   const onClickToSetShowInfo = () => {
     if(!!onClickToShowInfo){
-      onClickToShowInfo(DetailInfoKeys.PartCancel);
+      onClickToShowInfo(InfoWrapKeys.PartCancel);
     }
   };
   

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

@@ -1,9 +1,9 @@
 import { motion } from 'framer-motion';
-import { DetailInfoKeys, DetailInfoProps } from '../model/types';
-import { DetailArrow } from './detail-arrow';
+import { DetailArrow } from '../detail-arrow';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
 
-export const DetailPaymentInfo = ({
-  pageType,
+export const PaymentInfoWrap = ({
+  transactionCategory,
   paymentInfo,
   show,
   onClickToShowInfo
@@ -15,7 +15,7 @@ export const DetailPaymentInfo = ({
 
   const onClickToSetShowInfo = () => {
     if(!!onClickToShowInfo){
-      onClickToShowInfo(DetailInfoKeys.Payment);
+      onClickToShowInfo(InfoWrapKeys.Payment);
     }
   };
   

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

@@ -1,10 +1,10 @@
 import moment from 'moment';
 import { motion } from 'framer-motion';
-import { DetailInfoKeys, DetailInfoProps } from '../model/types';
-import { DetailArrow } from './detail-arrow';
+import { DetailArrow } from '../detail-arrow';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
 
-export const DetailSettlementInfo = ({
-  pageType,
+export const SettlementInfoWrap = ({
+  transactionCategory,
   settlementInfo,
   show,
   onClickToShowInfo
@@ -16,7 +16,7 @@ export const DetailSettlementInfo = ({
 
   const onClickToSetShowInfo = () => {
     if(!!onClickToShowInfo){
-      onClickToShowInfo(DetailInfoKeys.Settlement);
+      onClickToShowInfo(InfoWrapKeys.Settlement);
     }
   };
   

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

@@ -1,9 +1,9 @@
 import { motion } from 'framer-motion';
-import { DetailInfoKeys, DetailInfoProps } from '../model/types';
-import { DetailArrow } from './detail-arrow';
+import { DetailArrow } from '../detail-arrow';
+import { InfoWrapKeys, DetailInfoProps } from '../../model/types';
 
-export const DetailTransactionInfo = ({
-  pageType,
+export const TransactionInfoWrap = ({
+  transactionCategory,
   transactionInfo,
   show,
   onClickToShowInfo
@@ -15,7 +15,7 @@ export const DetailTransactionInfo = ({
 
   const onClickToSetShowInfo = () => {
     if(!!onClickToShowInfo){
-      onClickToShowInfo(DetailInfoKeys.Transaction);
+      onClickToShowInfo(InfoWrapKeys.Transaction);
     }
   };
 

src/entities/transaction/ui/list-date-group.tsx

@@ -4,7 +4,7 @@ import { ListDateGroupProps } from '../model/types';
 import { ListItem } from './list-item';
 
 export const ListDateGroup = ({
-  pageType,
+  transactionCategory,
   date,
   items
 }: ListDateGroupProps) => {
@@ -21,9 +21,11 @@ export const ListDateGroup = ({
         let key = 'ListItem-'+i;
         rs.push(
           <ListItem
-            pageType={ pageType }
+            transactionCategory={ transactionCategory }
             key={ key }
             tid={ items[i]?.tid }
+            issueNumber={ items[i]?.issueNumber }
+            billKey={ items[i]?.billKey }
             mid={ items[i]?.mid }
             stateDate={ items[i]?.stateDate }
             stateCode={ items[i]?.stateCode }

src/entities/transaction/ui/list-item.tsx

@@ -1,11 +1,13 @@
 import { NumericFormat } from 'react-number-format';
 import { PATHS } from '@/shared/constants/paths';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { ListItemProps, PageType } from '../model/types';
+import { ListItemProps, TransactionCategory } from '../model/types';
 
 export const ListItem = ({
-  pageType,
+  transactionCategory,
   tid,
+  issueNumber,
+  billKey,
   mid,
   stateDate,
   stateCode,
@@ -46,31 +48,31 @@ export const ListItem = ({
   };
 
   const onClickToNavigate = () => {
-    if(pageType === PageType.AllTransaction){
-      navigate(PATHS.transaction.allTransaction.detail + tid, {
+    if(transactionCategory === TransactionCategory.AllTransaction){
+      navigate(PATHS.transaction.allTransaction.detail, {
         state: {
           tid: tid
         }
       });
     }
-    else if(pageType === PageType.CashReceit){
-      navigate(PATHS.transaction.cashReceit.detail + tid, {
+    else if(transactionCategory === TransactionCategory.CashReceipt){
+      navigate(PATHS.transaction.cashReceipt.detail, {
         state: {
-          tid: tid
+          issueNumber: issueNumber
         }
       });
     }
-    else if(pageType === PageType.Escro){
-      navigate(PATHS.transaction.escro.detail + tid, {
+    else if(transactionCategory === TransactionCategory.Escrow){
+      navigate(PATHS.transaction.escrow.detail, {
         state: {
-          tid: tid
+          issueNumber: issueNumber
         }
       });
     }
-    else if(pageType === PageType.Billing){
-      navigate(PATHS.transaction.billing.detail + tid, {
+    else if(transactionCategory === TransactionCategory.Billing){
+      navigate(PATHS.transaction.billing.detail, {
         state: {
-          tid: tid
+          billKey: billKey
         }
       });
     }