부가서비스 : 링크결제 발송내역,발송대기 상세페이지 추가

2025-09-10 17:03:19 +09:00
parent a71690bad8
commit 409a711b9a
29 changed files with 1039 additions and 320 deletions
--- a/src/pages/additional-service/link-payment/link-payment-detail-page.tsx
+++ b/src/pages/additional-service/link-payment/link-payment-detail-page.tsx
@@ -0,0 +1,119 @@
+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 { DetailInfoSectionProps } from '@/entities/additional-service/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';
+
+export const LinkPaymentDetailPage = () => {
+  const { navigate } = useNavigate();
+  const location = useLocation();
+
+  const [transactionId, setTransactionId] = useState<string>(location?.state?.transactionId || '');
+
+  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);
+  useSetOnBack(() => {
+    navigate(PATHS.additionalService.linkPayment.dispatchList);
+  });
+  useSetFooterMode(false);
+
+    const onClickToNavigate = (path: string) => {
+    let timeout = setTimeout(() => {
+      clearTimeout(timeout);
+      navigate(PATHS.additionalService.linkPayment.dispatchList, {
+      });
+    }, 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.dispatchList) }
+          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">
+
+                <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>
+            <div className="apply-row">
+              <button 
+                className="btn-50 btn-blue flex-1"
+                onClick={ () => onClickToCancel() }
+              >재발송</button>
+            </div>
+          </div>
+        </div>
+      </main>
+    </>
+  )
+};