부가서비스

- 링크결제 발송내역/발송대기 엑셀다운로드 API 연결 - 링크결제 발송대기 상세 페이지 목업 API 연결 - 링크결제 발송대기 삭제 API 연결
2025-09-22 14:51:04 +09:00
parent 13474c4fca
commit 5d76f56ded
22 changed files with 406 additions and 129 deletions
--- a/src/pages/additional-service/additional-service-pages.tsx
+++ b/src/pages/additional-service/additional-service-pages.tsx
@@ -9,7 +9,7 @@ import { KeyInPaymentPage } from './key-in-payment/key-in-payment-page';
 import { SmsPaymentNotificationPage } from './sms-payment-notification/sms-payment-notification-page';
 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 { LinkPaymentHistoryPage } from './link-payment/link-payment-history-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';
@@ -58,7 +58,7 @@ export const AdditionalServicePages = () => {
        </Route>
        <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.shippingHistory} element={<LinkPaymentHistoryPage />} />
          <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 />} />
--- a/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx
+++ b/src/pages/additional-service/key-in-payment/key-in-payment-page.tsx
@@ -119,8 +119,8 @@ export const KeyInPaymentPage = () => {
      fromDate: startDate,
      toDate: endDate,
      paymentStatus: transactionStatus,
-      minAmount: minAmount,
-      maxAmount: maxAmount
+      minAmount: newMinAmount,
+      maxAmount: newMaxAmount
    }).then((rs) => {

    });
--- a/src/pages/additional-service/link-payment/link-payment-detail-page.tsx
+++ b/src/pages/additional-service/link-payment/link-payment-detail-page.tsx
@@ -2,21 +2,17 @@ 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 { extensionLinkPayHistoryDetail, useExtensionLinkPayHistoryDetailMutation } from '@/entities/additional-service/api/link-payment/use-extension-link-pay-history-detail-mutation';
+import { 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';
@@ -28,17 +24,11 @@ export const LinkPaymentDetailPage = () => {

  const { mid, tid } = location.state || {};

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

  useSetHeaderTitle('링크결제 상세');
  useSetHeaderType(HeaderType.RightClose);
@@ -116,19 +106,19 @@ export const LinkPaymentDetailPage = () => {
          <div className="tab-pane sub active">
            <div className="pay-top">
              <TitleInfoWrap
-              additionalServiceCategory={AdditionalServiceCategory.LinkPaymentShipping}
+              additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
              titleInfo={titleInfo}
              ></TitleInfoWrap>
            </div>
            <div className="pay-detail">
              <div className="detail-divider"></div>
              <PaymentInfoWrap
-                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentShipping}
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
                paymentInfo={paymentInfo}
              ></PaymentInfoWrap>
              <div className="detail-divider"></div>
              <DetailInfoWrap
-                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentShipping}
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
                detailInfo={detailInfo}
              ></DetailInfoWrap>
            </div>
--- a/src/pages/additional-service/link-payment/link-payment-shipping-history-page.tsx
+++ b/src/pages/additional-service/link-payment/link-payment-shipping-history-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 { LinkPaymentShippingHistoryWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-shipping-history-wrap';
+import { LinkPaymentHistoryWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-history-wrap';
 import {
    useSetHeaderTitle,
    useSetHeaderType,
@@ -17,7 +17,7 @@ import {
 * 발송내역 탭 화면
 */

-export const LinkPaymentShippingHistoryPage = () => {
+export const LinkPaymentHistoryPage = () => {
    const { navigate } = useNavigate();

    const [activeTab, setActiveTab] = useState<LinkPaymentTabKeys>(LinkPaymentTabKeys.ShippingHistory)
@@ -35,7 +35,7 @@ export const LinkPaymentShippingHistoryPage = () => {
                <div className="tab-content">
                    <div className="tab-pane pt-46 active">
                        <LinkPaymentTab activeTab={activeTab}></LinkPaymentTab>
-                        <LinkPaymentShippingHistoryWrap></LinkPaymentShippingHistoryWrap>
+                        <LinkPaymentHistoryWrap></LinkPaymentHistoryWrap>
                    </div>
                </div>
            </main>
--- a/src/pages/additional-service/link-payment/link-payment-wait-detail-page.tsx
+++ b/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>
    </>