부가서비스 - 링크결제 발송내역 상세: 페이지 로드 API, 재발송 API 연결

2025-09-22 11:16:13 +09:00
parent 85e85f1f89
commit 4d5d195af2
16 changed files with 417 additions and 161 deletions
--- a/src/pages/additional-service/account-holder-search/detail-page.tsx
+++ b/src/pages/additional-service/account-holder-search/detail-page.tsx
@@ -10,7 +10,7 @@ import {
    useSetOnBack
 } from '@/widgets/sub-layout/use-sub-layout';
 import { useExtensionAccountHolderSearchDetailMutation } from '@/entities/additional-service/api/use-extension-account-holder-search-detail-mutation';
-import { AdditionalServiceCategory, DetailInfo, DetailResponse, ExtensionAccountHolderSearchDetailParams, ExtensionAccountHolderSearchDetailResponse, ProcessResult, TitleInfo } from '@/entities/additional-service/model/types';
+import { AdditionalServiceCategory, DetailInfo, DetailResponse, ExtensionAccountHolderSearchDetailParams, TitleInfo } from '@/entities/additional-service/model/types';
 import { TitleInfoWrap } from '@/entities/additional-service/ui/info-wrap/title-info-wrap';
 import { useLocation } from 'react-router';
 import { DetailInfoWrap } from '@/entities/additional-service/ui/info-wrap/detail-info-wrap';
--- a/src/pages/additional-service/additional-service-pages.tsx
+++ b/src/pages/additional-service/additional-service-pages.tsx
@@ -10,7 +10,7 @@ import { SmsPaymentNotificationPage } from './sms-payment-notification/sms-payme
 import { AccountHolderSearchPage } from './account-holder-search/account-holder-search-page';
 import { AccountHolderAuthPage } from './account-holder-auth/account-holder-auth-page';
 import { LinkPaymentShippingHistoryPage } from './link-payment/link-payment-shipping-history-page';
-import { LinkPaymentPendingSendPage } from './link-payment/link-payment-pending-send-page';
+import { LinkPaymentWaitSendPage } from './link-payment/link-payment-wait-send-page';
 import { KakaoPaymentNotificationListPage } from './kakao-payment-notification/list-page';
 import { KakaoPaymentNotificationSettingPage } from './kakao-payment-notification/setting-page';
 import { FundTransferRequestListPage } from './fund-transfer/request-list-page';
@@ -28,7 +28,7 @@ import { LinkPaymentApplyPage } from './link-payment/apply/link-payment-apply-pa
 import { LinkPaymentApplyConfirmPage } from './link-payment/apply/link-payment-apply-confirm-page';
 import { LinkPaymentApplySuccessPage } from './link-payment/apply/link-payment-apply-success-page';
 import { LinkPaymentDetailPage } from './link-payment/link-payment-detail-page';
-import { LinkPaymentPendingDetailPage } from './link-payment/link-payment-pending-detail-page';
+import { LinkPaymentWaitDetailPage } from './link-payment/link-payment-wait-detail-page';
 import { KeyInPaymentRequestPage } from './key-in-payment/requeset-page';
 import { KeyInPaymentRequestSuccessPage } from './key-in-payment/request-success-page';
 import { AccountHolderSearchRequestPage } from './account-holder-search/request-page';
@@ -59,12 +59,12 @@ export const AdditionalServicePages = () => {
        <Route path={ROUTE_NAMES.additionalService.accountHolderAuth} element={<AccountHolderAuthPage />} />
        <Route path={ROUTE_NAMES.additionalService.linkPayment.base}>
          <Route path={ROUTE_NAMES.additionalService.linkPayment.shippingHistory} element={<LinkPaymentShippingHistoryPage />} />
-          <Route path={ROUTE_NAMES.additionalService.linkPayment.pendingSend} element={<LinkPaymentPendingSendPage />} />
+          <Route path={ROUTE_NAMES.additionalService.linkPayment.pendingSend} element={<LinkPaymentWaitSendPage />} />
          <Route path={ROUTE_NAMES.additionalService.linkPayment.request} element={<LinkPaymentApplyPage />} />
          <Route path={ROUTE_NAMES.additionalService.linkPayment.requestConfirm} element={<LinkPaymentApplyConfirmPage />} />
          <Route path={ROUTE_NAMES.additionalService.linkPayment.confirmSuccess} element={<LinkPaymentApplySuccessPage />} />
          <Route path={ROUTE_NAMES.additionalService.linkPayment.detail} element={<LinkPaymentDetailPage />} />
-          <Route path={ROUTE_NAMES.additionalService.linkPayment.pendingDetail} element={<LinkPaymentPendingDetailPage />} />
+          <Route path={ROUTE_NAMES.additionalService.linkPayment.pendingDetail} element={<LinkPaymentWaitDetailPage />} />
        </Route>
        <Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.base}>
          <Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.list} element={<KakaoPaymentNotificationListPage />} />
--- a/src/pages/additional-service/link-payment/link-payment-detail-page.tsx
+++ b/src/pages/additional-service/link-payment/link-payment-detail-page.tsx
@@ -6,7 +6,7 @@ import { DetailPaymentInfoSection } from '@/entities/additional-service/ui/link-
 import { HeaderType } from '@/entities/common/model/types';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import {
-  useSetOnBack, 
+  useSetOnBack,
  useSetHeaderTitle,
  useSetHeaderType,
  useSetFooterMode
@@ -14,16 +14,29 @@ import {
 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 { extensionLinkPayHistoryDetail, useExtensionLinkPayHistoryDetailMutation } from '@/entities/additional-service/api/link-payment/use-extension-link-pay-history-detail-mutation';
+import { AdditionalServiceCategory, DetailInfo, DetailResponse, ExtensionLinkPayHistoryDetailParams, ExtensionLinkPayHistoryResendParams, PaymentInfo, TitleInfo } from '@/entities/additional-service/model/types';
+import { resourceLimits } from 'worker_threads';
+import { TitleInfoWrap } from '@/entities/additional-service/ui/info-wrap/title-info-wrap';
+import { PaymentInfoWrap } from '@/entities/additional-service/ui/info-wrap/payment-info-wrap';
+import { DetailInfoWrap } from '@/entities/additional-service/ui/info-wrap/detail-info-wrap';
+import { useExtensionLinkPayHistoryResendMutation } from '@/entities/additional-service/api/link-payment/use-extension-link-pay-history-resend-mutation';

 export const LinkPaymentDetailPage = () => {
  const { navigate } = useNavigate();
  const location = useLocation();

+  const { mid, tid } = location.state || {};
+
  const [transactionId, setTransactionId] = useState<string>(location?.state?.transactionId || '');

-  const [paymentInfo, setPaymentInfo] = useState<any>();
+  const [titleInfo, setTitleInfo] = useState<TitleInfo>();
+  const [detailInfo, setDetailInfo] = useState<DetailInfo>();
+  const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
+
+
  const [deetsInfo, setDeetsInfo] = useState<any>();
-  
+
  const [showPayment, setShowPayment] = useState<boolean>(false);
  const [showDeets, setShowDeets] = useState<boolean>(false);

@@ -34,85 +47,100 @@ export const LinkPaymentDetailPage = () => {
  });
  useSetFooterMode(false);

-    const onClickToNavigate = (path: string) => {
-    let timeout = setTimeout(() => {
-      clearTimeout(timeout);
-      navigate(PATHS.additionalService.linkPayment.shippingHistory, {
+  const { mutateAsync: linkPayHistoryDetail } = useExtensionLinkPayHistoryDetailMutation();
+  const { mutateAsync: linkPayHistoryResend } = useExtensionLinkPayHistoryResendMutation();
+  const callDetail = () => {
+    let detailParam: ExtensionLinkPayHistoryDetailParams = {
+      mid: mid,
+      tid: tid
+    }
+    linkPayHistoryDetail(detailParam).then((rs: DetailResponse) => {
+      console.log("Detail Info: ", rs)
+      setTitleInfo(rs.titleInfo)
+      setDetailInfo(rs.detailInfo)
+      setPaymentInfo(rs.paymentInfo)
+    })
+  }
+
+  const resendPayment = () => {
+    let resendParam: ExtensionLinkPayHistoryResendParams = {
+      mid: mid,
+      tid: tid
+    }
+    linkPayHistoryResend(resendParam)
+      .then((response) => {
+        console.log("Resend 성공 응답: ", response);
+        onClickToNavigate(PATHS.additionalService.linkPayment.shippingHistory)
+      })
+      .catch((error) => {
+        console.error("Resend 실패: ", error);
+        
      });
-    }, 10)
+  }
+
+  const onClickToNavigate = (path: string) => {
+    navigate(path)
  };
-  
+
  const onClickToShowInfo = () => {
    setShowPayment(!showPayment);
  };

-    const onClickToCancel = () => {
+  const onClickToCancel = () => {
    let msg = '재발송 하시겠습니까?';
-    
-    overlay.open(({ 
+
+    overlay.open(({
      isOpen,
      close,
      unmount
    }) => {
      return (
        <Dialog
-          afterLeave={ unmount }
-          open={ isOpen }
-          onClose={ close }
-          onConfirmClick={ () => onClickToNavigate(PATHS.additionalService.linkPayment.shippingHistory) }
-          message={ msg }
+          afterLeave={unmount}
+          open={isOpen}
+          onClose={close}
+          onConfirmClick={() => resendPayment()}
+          message={msg}
          buttonLabel={['취소', '확인']}
        />
      );
    });
  };
-
+  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">
-
-                <div className="txn-num-group">
-                  <div className="txn-amount">
-                    <div className="value">5,254,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.08</span>
-                  </div>
-                </div>
-
-                <div className="txn-divider minus"></div>
-
-                <DetailPaymentInfoSection
-                  paymentInfo={paymentInfo}
-                  show={showPayment}
-                  onClickToShowInfo={onClickToShowInfo}
-                />
-
-                <div className="txn-divider minus"></div>
-
-                <DetailDeetsInfoSection
-                deetsInfo={deetsInfo}
-                show={showDeets}
-                onClickToShowInfo={onClickToShowInfo}
-                />
-              </div>
+            <div className="pay-top">
+              <TitleInfoWrap
+              additionalServiceCategory={AdditionalServiceCategory.LinkPaymentShipping}
+              titleInfo={titleInfo}
+              ></TitleInfoWrap>
            </div>
-            <div className="apply-row">
-              <button 
-                className="btn-50 btn-blue flex-1"
-                onClick={ () => onClickToCancel() }
-              >재발송</button>
+            <div className="pay-detail">
+              <div className="detail-divider"></div>
+              <PaymentInfoWrap
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentShipping}
+                paymentInfo={paymentInfo}
+              ></PaymentInfoWrap>
+              <div className="detail-divider"></div>
+              <DetailInfoWrap
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentShipping}
+                detailInfo={detailInfo}
+              ></DetailInfoWrap>
            </div>
          </div>
+          <div className="apply-row">
+            <button
+              className="btn-50 btn-blue flex-1"
+              onClick={() => onClickToCancel()}
+            >재발송</button>
+          </div>
        </div>
-      </main>
+      </main >
    </>
  )
 };
--- a/src/pages/additional-service/link-payment/link-payment-pending-detail-page.tsx
+++ b/src/pages/additional-service/link-payment/link-payment-pending-detail-page.tsx
@@ -6,7 +6,7 @@ import { DetailPaymentInfoSection } from '@/entities/additional-service/ui/link-
 import { HeaderType } from '@/entities/common/model/types';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import {
-  useSetOnBack, 
+  useSetOnBack,
  useSetHeaderTitle,
  useSetHeaderType,
  useSetFooterMode
@@ -14,18 +14,19 @@ import {
 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';

-export const LinkPaymentPendingDetailPage = () => {
+export const LinkPaymentWaitDetailPage = () => {
  const { navigate } = useNavigate();
  const location = useLocation();

  const [transactionId, setTransactionId] = useState<string>(location?.state?.transactionId || '');

+  const [titleInfo, setTitleInfo] = useState<TitleInfo>();
  const [paymentInfo, setPaymentInfo] = useState<any>();
-  const [deetsInfo, setDeetsInfo] = useState<any>();
-  
+
  const [showPayment, setShowPayment] = useState<boolean>(false);
-  const [showDeets, setShowDeets] = useState<boolean>(false);

  useSetHeaderTitle('링크결제 상세_발송대기');
  useSetHeaderType(HeaderType.RightClose);
@@ -41,26 +42,26 @@ export const LinkPaymentPendingDetailPage = () => {
      });
    }, 10)
  };
-  
+
  const onClickToShowInfo = () => {
    setShowPayment(!showPayment);
  };

  const onClickToCancel = () => {
    let msg = '삭제 하시겠습니까?';
-    
-    overlay.open(({ 
+
+    overlay.open(({
      isOpen,
      close,
      unmount
    }) => {
      return (
        <Dialog
-          afterLeave={ unmount }
-          open={ isOpen }
-          onClose={ close }
-          onConfirmClick={ () => onClickToNavigate(PATHS.additionalService.linkPayment.pendingSend) }
-          message={ msg }
+          afterLeave={unmount}
+          open={isOpen}
+          onClose={close}
+          onConfirmClick={() => onClickToNavigate(PATHS.additionalService.linkPayment.pendingSend)}
+          message={msg}
          buttonLabel={['취소', '확인']}
        />
      );
@@ -74,6 +75,10 @@ export const LinkPaymentPendingDetailPage = () => {
          <div className="tab-pane sub active">
            <div className="option-list">
              <div className="txn-detail">
+                <TitleInfoWrap
+                  additionalServiceCategory={AdditionalServiceCategory.LinkPaymentPending}
+                  titleInfo={titleInfo}
+                ></TitleInfoWrap>

                <div className="txn-num-group">
                  <div className="txn-amount">
@@ -93,13 +98,13 @@ export const LinkPaymentPendingDetailPage = () => {
                  paymentInfo={paymentInfo}
                  show={showPayment}
                  onClickToShowInfo={onClickToShowInfo}
-                />
+                ></DetailPaymentInfoSection>
              </div>
            </div>
            <div className="apply-row">
-              <button 
+              <button
                className="btn-50 btn-blue flex-1"
-                onClick={ () => onClickToCancel() }
+                onClick={() => onClickToCancel()}
              >삭제</button>
            </div>
          </div>
--- a/src/pages/additional-service/link-payment/link-payment-pending-send-page.tsx
+++ b/src/pages/additional-service/link-payment/link-payment-pending-send-page.tsx
@@ -5,7 +5,7 @@ import { IMAGE_ROOT } from '@/shared/constants/common';
 import { HeaderType } from '@/entities/common/model/types';
 import { LinkPaymentTab } from '@/entities/additional-service/ui/link-payment/link-payment-tab';
 import { LinkPaymentTabKeys } from '@/entities/additional-service/model/types';
-import { LinkPaymentPendingSendWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-pending-send-wrap';
+import { LinkPaymentWaitSendWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-wait-send-wrap';
 import {
    useSetHeaderTitle,
    useSetHeaderType,
@@ -16,7 +16,7 @@ import {
 /**
 * 발송대기 탭 화면
 */
-export const LinkPaymentPendingSendPage = () => {
+export const LinkPaymentWaitSendPage = () => {
    const { navigate } = useNavigate();

    const [activeTab, setActiveTab] = useState<LinkPaymentTabKeys>(LinkPaymentTabKeys.PendingSend)
@@ -34,7 +34,7 @@ export const LinkPaymentPendingSendPage = () => {
                <div className="tab-content">
                    <div className="tab-pane pt-46 active">
                        <LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
-                        <LinkPaymentPendingSendWrap></LinkPaymentPendingSendWrap>
+                        <LinkPaymentWaitSendWrap></LinkPaymentWaitSendWrap>
                    </div>
                </div>
            </main>