첫 커밋

2025-09-05 15:36:48 +09:00
commit 05238b04c1
825 changed files with 176358 additions and 0 deletions
--- a/src/pages/transaction/billing/detail-page.tsx
+++ b/src/pages/transaction/billing/detail-page.tsx
@@ -0,0 +1,188 @@
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { PATHS } from '@/shared/constants/paths';
+import { Dialog } from '@/shared/ui/dialogs/dialog';
+import { overlay } from 'overlay-kit';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { useBillingDetailMutation } from '@/entities/transaction/api/use-billing-detail-mutation';
+import { DetailAmountInfo } from '@/entities/transaction/ui/detail-amount-info';
+import { DetailImportantInfo } from '@/entities/transaction/ui/detail-important-info';
+import { DetailPaymentInfo } from '@/entities/transaction/ui/detail-payment-info';
+import { DetailTransactionInfo } from '@/entities/transaction/ui/detail-transaction-info';
+import { DetailSettlementInfo } from '@/entities/transaction/ui/detail-settlement-info';
+import { DetailPartCancelInfo } from '@/entities/transaction/ui/detail-part-cancel-info';
+import { HeaderType } from '@/entities/common/model/types';
+import { 
+  PageType,
+  BillingDetailParams,
+  DetailResponse,
+  DetailAmountInfoProps,
+  DetailImportantInfoProps,
+  DetailPaymentInfoProps,
+  DetailTransactionInfoProps,
+  DetailSettlementInfoProps,
+  DetailPartCancelInfoProps,
+  DetailInfoKeys
+} from '@/entities/transaction/model/types';
+import {
+  useSetOnBack, 
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode
+} from '@/widgets/sub-layout/use-sub-layout';
+
+export const BillingDetailPage = () => {
+  const { navigate } = useNavigate();
+  const { tid } = useParams();
+  
+  const [amountInfo, setAmountInfo] = useState<DetailAmountInfoProps>();
+  const [importantInfo, setImportantInfo] = useState<DetailImportantInfoProps>();
+  const [paymentInfo, setPaymentInfo] = useState<DetailPaymentInfoProps>();
+  const [transactionInfo, setTransactionInfo] = useState<DetailTransactionInfoProps>();
+  const [settlementInfo, setSettlementInfo] = useState<DetailSettlementInfoProps>();
+  const [partCancelInfo, setPartCancelInfo] = useState<DetailPartCancelInfoProps>();
+  const [showAmount, setShowAmount] = useState<boolean>(false);
+  const [showPayment, setShowPayment] = useState<boolean>(false);
+  const [showTransaction, setShowTransaction] = useState<boolean>(false);
+  const [showSettlement, setShowSettlement] = useState<boolean>(false);
+  const [showPartCancel, setShowPartCancel] = useState<boolean>(false);
+
+  useSetHeaderTitle('빌링 상세');
+  useSetHeaderType(HeaderType.RightClose);
+  useSetOnBack(() => {
+    navigate(PATHS.transaction.billing.list);
+  });
+  useSetFooterMode(false);
+
+  const { mutateAsync: billingDetail } = useBillingDetailMutation();
+    
+  const callDetail = () => {
+    let billingDetailParams: BillingDetailParams = {
+      svcCd: 'st',
+      tid: tid
+    };
+    billingDetail(billingDetailParams).then((rs: DetailResponse) => {
+      setAmountInfo(rs.amountInfo);
+      setImportantInfo(rs.importantInfo);
+      setPaymentInfo(rs.paymentInfo);
+      setTransactionInfo(rs.transactionInfo);
+      setSettlementInfo(rs.settlementInfo);
+      setPartCancelInfo(rs.partCancelInfo);
+    });
+  };
+  useEffect(() => {
+    callDetail();
+  }, []);
+
+  const onClickToNavigate = (path: string) => {
+    let timeout = setTimeout(() => {
+      clearTimeout(timeout);
+      navigate(PATHS.transaction.allTransaction.cancel, {
+        state: {
+          tid: tid
+        }
+      });
+    }, 10)
+  };
+
+
+  const onClickToCancel = () => {
+    let msg = '거래를 취소하시겠습니까?';
+    
+    overlay.open(({ 
+      isOpen,
+      close,
+      unmount
+    }) => {
+      return (
+        <Dialog
+          afterLeave={ unmount }
+          open={ isOpen }
+          onClose={ close }
+          onConfirmClick={ () => onClickToNavigate(PATHS.transaction.allTransaction.cancel) }
+          message={ msg }
+          buttonLabel={['취소', '확인']}
+        />
+      );
+    });
+  };
+
+  const onClickToShowInfo = (info: DetailInfoKeys) => {
+    if(info === DetailInfoKeys.Amount){
+      setShowAmount(!showAmount);
+    }
+    else if(info === DetailInfoKeys.Payment){
+      setShowPayment(!showPayment);
+    }
+    else if(info === DetailInfoKeys.Transaction){
+      setShowTransaction(!showTransaction);
+    }
+    else if(info === DetailInfoKeys.Settlement){
+      setShowSettlement(!showSettlement);
+    }
+    else if(info === DetailInfoKeys.PartCancel){
+      setShowPartCancel(!showPartCancel);
+    }
+  };
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <div className="option-list">
+              <div className="txn-detail">
+                <DetailAmountInfo
+                  pageType={ PageType.Billing }
+                  amountInfo={ amountInfo }
+                  show={ showAmount }
+                  tid={ tid }
+                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
+                ></DetailAmountInfo>
+                <div className="txn-divider minus"></div>
+                <DetailImportantInfo
+                  pageType={ PageType.Billing }
+                  importantInfo={ importantInfo }
+                ></DetailImportantInfo>
+                <div className="txn-divider minus"></div>
+                <DetailPaymentInfo
+                  pageType={ PageType.Billing }
+                  paymentInfo={ paymentInfo }
+                  show={ showPayment }
+                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
+                ></DetailPaymentInfo>
+                <div className="txn-divider"></div>
+                <DetailTransactionInfo
+                  pageType={ PageType.Billing }
+                  transactionInfo={ transactionInfo }
+                  show={ showTransaction }
+                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
+                ></DetailTransactionInfo>
+                <div className="txn-divider"></div>
+                <DetailSettlementInfo
+                  pageType={ PageType.Billing }
+                  settlementInfo={ settlementInfo }
+                  show={ showSettlement }
+                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
+                ></DetailSettlementInfo>
+                <div className="txn-divider"></div>
+                <DetailPartCancelInfo
+                  pageType={ PageType.Billing }
+                  partCancelInfo={ partCancelInfo }
+                  show={ showPartCancel }
+                  onClickToShowInfo={ (info) => onClickToShowInfo(info) }
+                ></DetailPartCancelInfo>
+              </div>
+            </div>
+            <div className="apply-row">
+              <button 
+                className="btn-50 btn-blue flex-1"
+                onClick={ () => onClickToCancel() }
+              >거래 취소</button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  );
+};