부가서비스 - 링크결제 발송내역 상세: 페이지 로드 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/link-payment/link-payment-wait-detail-page.tsx
+++ b/src/pages/additional-service/link-payment/link-payment-wait-detail-page.tsx
@@ -0,0 +1,115 @@
+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';
+
+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 [showPayment, setShowPayment] = useState<boolean>(false);
+
+  useSetHeaderTitle('링크결제 상세_발송대기');
+  useSetHeaderType(HeaderType.RightClose);
+  useSetOnBack(() => {
+    navigate(PATHS.additionalService.linkPayment.pendingSend);
+  });
+  useSetFooterMode(false);
+
+  const onClickToNavigate = (path: string) => {
+    let timeout = setTimeout(() => {
+      clearTimeout(timeout);
+      navigate(PATHS.additionalService.linkPayment.pendingSend, {
+      });
+    }, 10)
+  };
+
+  const onClickToShowInfo = () => {
+    setShowPayment(!showPayment);
+  };
+
+  const onClickToCancel = () => {
+    let msg = '삭제 하시겠습니까?';
+
+    overlay.open(({
+      isOpen,
+      close,
+      unmount
+    }) => {
+      return (
+        <Dialog
+          afterLeave={unmount}
+          open={isOpen}
+          onClose={close}
+          onConfirmClick={() => onClickToNavigate(PATHS.additionalService.linkPayment.pendingSend)}
+          message={msg}
+          buttonLabel={['취소', '확인']}
+        />
+      );
+    });
+  };
+
+  return (
+    <>
+      <main className="full-height">
+        <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="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>
+
+                <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>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  )
+};