부가서비스

- 링크결제 발송내역/발송대기 엑셀다운로드 API 연결
- 링크결제 발송대기 상세 페이지 목업 API 연결
- 링크결제 발송대기 삭제 API 연결

src/pages/additional-service/link-payment/link-payment-wait-detail-page.tsx

@@ -2,31 +2,27 @@ import { useEffect, useState } from 'react';
 import { PATHS } from '@/shared/constants/paths';
 import { useLocation } from 'react-router';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-import { DetailPaymentInfoSection } from '@/entities/additional-service/ui/link-payment/detail/detail-payment-info-section';
 import { HeaderType } from '@/entities/common/model/types';
-import { IMAGE_ROOT } from '@/shared/constants/common';
 import {
   useSetOnBack,
   useSetHeaderTitle,
   useSetHeaderType,
   useSetFooterMode
 } from '@/widgets/sub-layout/use-sub-layout';
-import { DetailDeetsInfoSection } from '@/entities/additional-service/ui/link-payment/detail/detail-deets-Info-section';
 import { overlay } from 'overlay-kit';
 import { Dialog } from '@/shared/ui/dialogs/dialog';
 import { TitleInfoWrap } from '@/entities/additional-service/ui/info-wrap/title-info-wrap';
-import { AdditionalServiceCategory, TitleInfo } from '@/entities/additional-service/model/types';
+import { AdditionalServiceCategory, DetailResponse, ExtensionLinkPayWaitDeleteParams, ExtensionLinkPayWaitDetailParams, PaymentInfo, TitleInfo } from '@/entities/additional-service/model/types';
+import { useExtensionLinkPayWaitDetailMutation, } from '@/entities/additional-service/api/link-payment/use-extension-link-pay-wait-detail-mutation';
+import { PaymentInfoWrap } from '@/entities/additional-service/ui/info-wrap/payment-info-wrap';
+import { useExtensionLinkPayWaitDeleteMutation } from '@/entities/additional-service/api/link-payment/use-extension-link-pay-wait-delete-mutation';
 
 export const LinkPaymentWaitDetailPage = () => {
   const { navigate } = useNavigate();
   const location = useLocation();
-
-  const [transactionId, setTransactionId] = useState<string>(location?.state?.transactionId || '');
-
+  const { mid, tid } = location.state || {};
   const [titleInfo, setTitleInfo] = useState<TitleInfo>();
-  const [paymentInfo, setPaymentInfo] = useState<any>();
-
-  const [showPayment, setShowPayment] = useState<boolean>(false);
+  const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
 
   useSetHeaderTitle('링크결제 상세_발송대기');
   useSetHeaderType(HeaderType.RightClose);
@@ -35,6 +31,38 @@ export const LinkPaymentWaitDetailPage = () => {
   });
   useSetFooterMode(false);
 
+  const { mutateAsync: linkPayWaitDetail } = useExtensionLinkPayWaitDetailMutation();
+  const { mutateAsync: linkPayWaitDelete } = useExtensionLinkPayWaitDeleteMutation();
+  const callDetail = () => {
+    let detailParam: ExtensionLinkPayWaitDetailParams = {
+      mid: mid,
+      tid: tid
+    }
+
+    linkPayWaitDetail(detailParam).then((rs: DetailResponse) => {
+      console.log("Detail Info: ", rs)
+      setTitleInfo(rs.titleInfo)
+      setPaymentInfo(rs.paymentInfo)
+    })
+
+  }
+
+  const deletePayment = () => {
+    let deleteParam: ExtensionLinkPayWaitDeleteParams = {
+      mid: mid,
+      tid: tid
+    }
+    linkPayWaitDelete(deleteParam)
+      .then((response) => {
+        console.log("Delete 성공 응답: ", response)
+        onClickToNavigate(PATHS.additionalService.linkPayment.pendingSend)
+      })
+      .catch((error) => {
+        console.error("Resend 실패: ", error);
+
+      });
+  }
+
   const onClickToNavigate = (path: string) => {
     let timeout = setTimeout(() => {
       clearTimeout(timeout);
@@ -43,10 +71,6 @@ export const LinkPaymentWaitDetailPage = () => {
     }, 10)
   };
 
-  const onClickToShowInfo = () => {
-    setShowPayment(!showPayment);
-  };
-
   const onClickToCancel = () => {
     let msg = '삭제 하시겠습니까?';
 
@@ -60,7 +84,7 @@ export const LinkPaymentWaitDetailPage = () => {
           afterLeave={unmount}
           open={isOpen}
           onClose={close}
-          onConfirmClick={() => onClickToNavigate(PATHS.additionalService.linkPayment.pendingSend)}
+          onConfirmClick={() => deletePayment()}
           message={msg}
           buttonLabel={['취소', '확인']}
         />
@@ -68,46 +92,35 @@ export const LinkPaymentWaitDetailPage = () => {
     });
   };
 
+  useEffect(() => {
+    callDetail();
+  }, []);
+
   return (
     <>
-      <main className="full-height">
+      <main>
         <div className="tab-content">
           <div className="tab-pane sub active">
-            <div className="option-list">
-              <div className="txn-detail">
-                <TitleInfoWrap
-                  additionalServiceCategory={AdditionalServiceCategory.LinkPaymentPending}
-                  titleInfo={titleInfo}
-                ></TitleInfoWrap>
+            <div className="pay-top">
+              <TitleInfoWrap
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentPending}
+                titleInfo={titleInfo}
+              ></TitleInfoWrap>
 
-                <div className="txn-num-group">
-                  <div className="txn-amount">
-                    <div className="value">3,500,000<span className="unit">원</span></div>
-                  </div>
-                  <div className="txn-mid">
-                    <span className="value">나이스테스트가맹점</span>
-                  </div>
-                  <div className="txn-mid">
-                    <span className="value">2025.06.09</span>
-                  </div>
-                </div>
+              <div className="txn-divider minus"></div>
 
-                <div className="txn-divider minus"></div>
-
-                <DetailPaymentInfoSection
-                  paymentInfo={paymentInfo}
-                  show={showPayment}
-                  onClickToShowInfo={onClickToShowInfo}
-                ></DetailPaymentInfoSection>
-              </div>
-            </div>
-            <div className="apply-row">
-              <button
-                className="btn-50 btn-blue flex-1"
-                onClick={() => onClickToCancel()}
-              >삭제</button>
+              <PaymentInfoWrap
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentPending}
+                paymentInfo={paymentInfo}
+              ></PaymentInfoWrap>
             </div>
           </div>
+          <div className="apply-row">
+            <button
+              className="btn-50 btn-blue flex-1"
+              onClick={() => onClickToCancel()}
+            >삭제</button>
+          </div>
         </div>
       </main>
     </>