링크결제

2025-11-04 13:09:02 +09:00
parent e0f767b2b6
commit 646aa0d3c0
11 changed files with 461 additions and 54 deletions
--- a/src/entities/additional-service/model/link-pay/types.ts
+++ b/src/entities/additional-service/model/link-pay/types.ts
@@ -3,7 +3,7 @@
 // ========================================

 import { DefaulResponsePagination, DefaultRequestPagination } from "@/entities/common/model/types";
-import { AdditionalServiceCategory, DetailInfo, ExtensionRequestParams, FilterProps, IdentityType, Language, ListItemProps, PaymentInfo, ProcessResult, TitleInfo } from "../types";
+import { AdditionalServiceCategory, DetailData, DetailInfo, ExtensionRequestParams, FilterProps, IdentityType, Language, ListItemProps, PaymentInfo, ProcessResult, TitleInfo } from "../types";

 export enum LinkPaymentTabKeys {
  ShippingHistory = 'ShippingHistory',
@@ -104,12 +104,14 @@ export interface LinkPaymentHistoryListProps {
  additionalServiceCategory: AdditionalServiceCategory;
  listItems: Array<LinkPaymentHistoryListItem>;
  mid: string;
+  setDetailData: (detailData: DetailData) => void;
 }

 export interface LinkPaymentWaitListProps {
  additionalServiceCategory: AdditionalServiceCategory;
  listItems: Array<LinkPaymentWaitListItem>;
  mid: string;
+  setDetailData: (detailData: DetailData) => void;
 }

 export interface LinkPaymentHistoryFilterProps extends FilterProps {
@@ -235,7 +237,7 @@ export interface LinkPaymentFormData {
 export interface ExtensionLinkPayHistoryDetailParams {
  mid: string;
  requestId: string;
-  subReqId: string;
+  subReqId?: string;
 }

 export interface ExtensionLinkPayHistoryDetailResponse {
--- a/src/entities/additional-service/model/types.ts
+++ b/src/entities/additional-service/model/types.ts
@@ -151,6 +151,8 @@ export interface DetailData {
  mid?: string;
  tid?: string;
  seq?: string;
+  requestId?: string;
+  subReqId?: string;
  detailOn: boolean;
 }

--- a/src/entities/additional-service/ui/link-payment/detail/link-payment-history-detail.tsx
+++ b/src/entities/additional-service/ui/link-payment/detail/link-payment-history-detail.tsx
@@ -0,0 +1,216 @@
+import { useEffect, useState } from 'react';
+import { PATHS } from '@/shared/constants/paths';
+import { motion } from 'framer-motion';
+import { useLocation } from 'react-router';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { HeaderType } from '@/entities/common/model/types';
+import {
+  useSetOnBack,
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode
+} from '@/widgets/sub-layout/use-sub-layout';
+import { overlay } from 'overlay-kit';
+import { Dialog } from '@/shared/ui/dialogs/dialog';
+import { useExtensionLinkPayHistoryDetailMutation } from '@/entities/additional-service/api/link-payment/use-extension-link-pay-history-detail-mutation';
+import { AdditionalServiceCategory, DetailInfo, DetailResponse, PaymentInfo, TitleInfo } from '@/entities/additional-service/model/types';
+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';
+import { ExtensionLinkPayHistoryDetailParams, ExtensionLinkPayHistoryResendParams } from '@/entities/additional-service/model/link-pay/types';
+import { snackBar } from '@/shared/lib';
+import moment from 'moment';
+import { useTranslation } from 'react-i18next';
+import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+
+export interface LinkPaymentHistoryDetailProps {
+  detailOn: boolean;
+  setDetailOn: (detailOn: boolean) => void;
+  mid: string;
+  requestId: string;
+  subReqId?: string;
+};
+
+export const LinkPaymentHistoryDetail = ({
+  detailOn,
+  setDetailOn,
+  mid,
+  requestId,
+  subReqId
+}: LinkPaymentHistoryDetailProps) => {
+  const { t } = useTranslation();
+  const { navigate } = useNavigate();
+  const location = useLocation();
+  
+  const [titleInfo, setTitleInfo] = useState<TitleInfo>();
+  const [detailInfo, setDetailInfo] = useState<DetailInfo>();
+  const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
+  const [detailExposure, setDetailExposure] = useState<boolean>(false);
+  const [showPayment, setShowPayment] = useState<boolean>(false);
+
+  useSetHeaderTitle(t('additionalService.linkPayment.detailTitle'));
+  useSetHeaderType(HeaderType.RightClose);
+  useSetOnBack(() => {
+    navigate(-1); // Go back using browser history
+  });
+  useSetFooterMode(false);
+
+  const { mutateAsync: linkPayHistoryDetail } = useExtensionLinkPayHistoryDetailMutation();
+  const { mutateAsync: linkPayHistoryResend } = useExtensionLinkPayHistoryResendMutation();
+
+  // Query detail information
+  const callDetail = () => {
+    let detailParam: ExtensionLinkPayHistoryDetailParams = {
+      mid: mid,
+      requestId: requestId,
+      subReqId: subReqId
+    }
+    linkPayHistoryDetail(detailParam).then((rs: DetailResponse) => {
+      console.log("Detail Info: ", rs)
+      setTitleInfo(rs.titleInfo)
+      setDetailInfo(rs.detailInfo)
+      setPaymentInfo(rs.paymentInfo)
+      setDetailExposure(rs.detailExposure ?? false)
+    })
+  }
+
+  // Resend API
+  const resendPayment = () => {
+    let resendParam: ExtensionLinkPayHistoryResendParams = {
+      mid: mid,
+      requestId: requestId,
+      sendMethod: paymentInfo?.sendMethod
+    }
+    linkPayHistoryResend(resendParam)
+      .then((response) => {
+        if (response.status) {
+          snackBar(t('additionalService.linkPayment.resendSuccess'));
+          callDetail();
+        } else {
+          const errorMessage = response.error?.message || t('additionalService.linkPayment.resendFailed');
+          snackBar(`[${t('common.failed')}] ${errorMessage}`);
+        }
+      })
+      .catch((error) => {
+        const errorMessage = error?.response?.data?.error?.message ||
+                            error?.message ||
+                            t('additionalService.linkPayment.resendError');
+        snackBar(`[${t('common.failed')}] ${errorMessage}`);
+      });
+  }
+
+  const onClickToResend = () => {
+    let msg = t('additionalService.linkPayment.resendConfirm');
+
+    overlay.open(({
+      isOpen,
+      close,
+      unmount
+    }) => {
+      return (
+        <Dialog
+          afterLeave={unmount}
+          open={isOpen}
+          onClose={close}
+          onConfirmClick={() => resendPayment()}
+          message={msg}
+          buttonLabel={[t('common.cancel'), t('common.confirm')]}
+        />
+      );
+    });
+  };
+
+  const onClickToSeparateApproval = () => {
+    navigate(PATHS.additionalService.linkPayment.separateApproval, {
+      state: { mid, requestId }
+    });
+  };
+
+  const onClickToClose = () => {
+    setDetailOn(false);
+  };
+
+  // Check if resend button should be enabled
+  const isResendEnabled = () => {
+    // paymentStatus must be "ACTIVE"
+    if (paymentInfo?.paymentStatus !== 'ACTIVE') {
+      return false;
+    }
+
+    // paymentLimitDate must not have passed today's date
+    if (paymentInfo?.paymentLimitDate) {
+      const limitDate = moment(paymentInfo.paymentLimitDate, 'YYYYMMDD');
+      const today = moment().startOf('day');
+      return limitDate.isSameOrAfter(today);
+    }
+
+    return false;
+  };
+
+  useEffect(() => {
+    if(!!mid && !!requestId){
+      callDetail();
+    }
+  }, [mid, requestId, subReqId]);
+  return (
+    <>
+      <motion.div 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (detailOn)? 'visible': 'hidden' }
+        variants={ DetailMotionVariants }
+        transition={ DetailMotionDuration }
+        style={ DetailMotionStyle }
+      >
+        <div className="full-menu-container pdw-16">
+          <div className="full-menu-header">
+            <div className="full-menu-title center">{ t('additionalService.linkPayment.detailTitle') }</div>
+            <div className="full-menu-actions">
+              <FullMenuClose
+                addClass="full-menu-close"
+                onClickToCallback={ onClickToClose }
+              ></FullMenuClose>
+            </div>
+          </div>
+          <div className="tab-pane sub active">
+            <div className="pay-top">
+              <TitleInfoWrap
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
+                titleInfo={titleInfo}
+              ></TitleInfoWrap>
+            </div>
+            <div className="pay-detail">
+              <div className="detail-divider"></div>
+              <PaymentInfoWrap
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
+                paymentInfo={paymentInfo}
+              ></PaymentInfoWrap>
+              <div className="detail-divider"></div>
+              <DetailInfoWrap
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
+                detailInfo={detailInfo}
+              ></DetailInfoWrap>
+              <div className="detail-divider"></div>
+              <div className="link-payment-detail-button" style={{ paddingBottom: '85px' }}>
+                <button
+                  className="btn-50 btn-blue flex-1"
+                  onClick={() => onClickToSeparateApproval()}
+                  disabled={detailExposure}
+                >{t('additionalService.linkPayment.separateApprovalDetail')}</button>
+              </div>
+            </div>
+            <div className="apply-row">
+              <button
+                className="btn-50 btn-blue flex-1"
+                onClick={() => onClickToResend()}
+                disabled={!isResendEnabled()}
+              >{t('additionalService.linkPayment.resend')}</button>
+            </div>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  )
+};
--- a/src/entities/additional-service/ui/link-payment/detail/link-payment-wait-detail.tsx
+++ b/src/entities/additional-service/ui/link-payment/detail/link-payment-wait-detail.tsx
@@ -0,0 +1,141 @@
+import { useEffect, useState } from 'react';
+import { motion } from 'framer-motion';
+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, DetailResponse, 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';
+import { ExtensionLinkPayWaitDeleteParams, ExtensionLinkPayWaitDetailParams, LinkPaymentProcessStatus } from '@/entities/additional-service/model/link-pay/types';
+import { snackBar } from '@/shared/lib';
+import { useTranslation } from 'react-i18next';
+import { DetailMotionDuration, DetailMotionStyle, DetailMotionVariants } from '@/entities/common/model/constant';
+import { FullMenuClose } from '@/entities/common/ui/full-menu-close';
+
+export interface LinkPaymentWaitDetailProps {
+  detailOn: boolean;
+  setDetailOn: (detailOn: boolean) => void;
+  mid: string;
+  requestId: string;
+};
+
+export const LinkPaymentWaitDetail = ({
+  detailOn,
+  setDetailOn,
+  mid,
+  requestId
+}: LinkPaymentWaitDetailProps) => {
+  const { t } = useTranslation();
+  const [titleInfo, setTitleInfo] = useState<TitleInfo>();
+  const [paymentInfo, setPaymentInfo] = useState<PaymentInfo>();
+
+  const { mutateAsync: linkPayWaitDetail } = useExtensionLinkPayWaitDetailMutation();
+  const { mutateAsync: linkPayWaitDelete } = useExtensionLinkPayWaitDeleteMutation();
+
+  const callDetail = () => {
+    let detailParam: ExtensionLinkPayWaitDetailParams = {
+      mid: mid,
+      requestId: requestId
+    }
+
+    linkPayWaitDetail(detailParam).then((rs: DetailResponse) => {
+      setTitleInfo(rs.titleInfo)
+      setPaymentInfo(rs.paymentInfo)
+    })
+
+  }
+
+  const deletePayment = () => {
+    let deleteParam: ExtensionLinkPayWaitDeleteParams = {
+      mid: mid,
+      requestId: requestId
+    }
+    linkPayWaitDelete(deleteParam)
+      .then((rs) => {
+        callDetail();
+        snackBar(t('additionalService.linkPayment.deleteSuccess'))
+      })
+      .catch((error) => {
+        snackBar(`[${t('common.failed')}] ${error?.response?.data?.message}`)
+      });
+  }
+
+  const onClickToCancel = () => {
+    let msg = t('additionalService.linkPayment.deleteConfirm');
+
+    overlay.open(({
+      isOpen,
+      close,
+      unmount
+    }) => {
+      return (
+        <Dialog
+          afterLeave={unmount}
+          open={isOpen}
+          onClose={close}
+          onConfirmClick={() => deletePayment()}
+          message={msg}
+          buttonLabel={[t('common.cancel'), t('common.confirm')]}
+        />
+      );
+    });
+  };
+
+  const onClickToClose = () => {
+    setDetailOn(false);
+  };
+
+  useEffect(() => {
+    if(!!mid && !!requestId){
+      callDetail();
+    }
+  }, [mid, requestId]);
+
+  return (
+    <>
+      <motion.div 
+        className="full-menu-modal" 
+        initial="hidden"
+        animate={ (detailOn)? 'visible': 'hidden' }
+        variants={ DetailMotionVariants }
+        transition={ DetailMotionDuration }
+        style={ DetailMotionStyle }
+      >
+        <div className="full-menu-container pdw-16">
+          <div className="full-menu-header">
+            <div className="full-menu-title center">{ t('additionalService.linkPayment.waitDetailTitle') }</div>
+            <div className="full-menu-actions">
+              <FullMenuClose
+                addClass="full-menu-close"
+                onClickToCallback={ onClickToClose }
+              ></FullMenuClose>
+            </div>
+          </div>
+          <div className="tab-pane sub active">
+            <div className="pay-top">
+              <TitleInfoWrap
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentWait}
+                titleInfo={titleInfo}
+              ></TitleInfoWrap>
+            </div>
+            <div className="pay-detail">
+              <div className="detail-divider"></div>
+              <PaymentInfoWrap
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentWait}
+                paymentInfo={paymentInfo}
+              ></PaymentInfoWrap>
+            </div>
+          </div>
+          <div className="apply-row">
+            <button
+              className="btn-50 btn-blue flex-1"
+              onClick={() => onClickToCancel()}
+              disabled={paymentInfo?.processStatus !== LinkPaymentProcessStatus.SEND_REQUEST}
+            >{t('additionalService.linkPayment.delete')}</button>
+          </div>
+        </div>
+      </motion.div>
+    </>
+  )
+};
--- a/src/entities/additional-service/ui/link-payment/link-payment-history-list.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-history-list.tsx
@@ -1,11 +1,11 @@
-import { JSX } from 'react';
-import { LinkPaymentHistoryListItem, LinkPaymentHistoryListProps } from '../../model/link-pay/types';
+import { LinkPaymentHistoryListProps } from '../../model/link-pay/types';
 import { ListDateGroup } from '../list-date-group';

 export const LinkPaymentHistoryList = ({
  additionalServiceCategory,
  listItems,
-  mid
+  mid,
+  setDetailData
 }: LinkPaymentHistoryListProps) => {

  const getListDateGroup = () => {
@@ -25,11 +25,12 @@ export const LinkPaymentHistoryList = ({
            if (list.length > 0) {
              rs.push(
                <ListDateGroup
-                  additionalServiceCategory={additionalServiceCategory}
-                  mid={mid}
-                  key={date + '-' + i}
-                  date={date}
-                  items={list}
+                  additionalServiceCategory={ additionalServiceCategory }
+                  mid={ mid }
+                  key={ date + '-' + i }
+                  date={ date }
+                  items={ list }
+                  setDetailData={ setDetailData }
                ></ListDateGroup>
              );
            }
@@ -43,11 +44,12 @@ export const LinkPaymentHistoryList = ({
    if (list.length > 0) {
      rs.push(
        <ListDateGroup
-          additionalServiceCategory={additionalServiceCategory}
-          mid={mid}
-          key={date + '-last'}
-          date={date}
-          items={list}
+          additionalServiceCategory={ additionalServiceCategory }
+          mid={ mid }
+          key={ date + '-last' }
+          date={ date }
+          items={ list }
+          setDetailData={ setDetailData }
        ></ListDateGroup>
      );
    }
--- a/src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx
@@ -7,7 +7,7 @@ import { PATHS } from "@/shared/constants/paths";
 import { LinkPaymentHistoryList } from "./link-payment-history-list";
 import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
 import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
-import { AdditionalServiceCategory, ProcessResult } from "../../model/types";
+import { AdditionalServiceCategory, DetailData, ProcessResult } from "../../model/types";
 import { useExtensionLinkPayHistoryListMutation } from '../../api/link-payment/use-extension-link-pay-history-list-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
 import { useExtensionLinkPayHistoryDownloadExcelMutation } from '../../api/link-payment/use-extension-link-pay-history-download-excel-mutation';
@@ -16,6 +16,7 @@ import { ExtensionLinkPayHistoryListParams, LinkPaymentHistoryListItem, LinkPaym
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { useTranslation } from 'react-i18next';
+import { LinkPaymentHistoryDetail } from './detail/link-payment-history-detail';

 const getPaymentResultBtnGroup = (t: any) => [
 	{ name: t('additionalService.linkPayment.all'), value: LinkPaymentPaymentStatus.ALL },
@@ -47,6 +48,10 @@ export const LinkPaymentHistoryWrap = () => {
 	const [sendStatus, setSendStatus] = useState<LinkPaymentSendStatus>(LinkPaymentSendStatus.ALL);
 	const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL);
 	const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+	const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailMid, setDetailMid] = useState<string>('');
+  const [detailRequestId, setDetailRequestId] = useState<string>('');
+	const [detailSubReqId, setDetailSubReqId] = useState<string>('');

 	const { mutateAsync: linkPayHistoryList } = useExtensionLinkPayHistoryListMutation();
 	const { mutateAsync: downloadExcel } = useExtensionLinkPayHistoryDownloadExcelMutation();
@@ -163,6 +168,19 @@ export const LinkPaymentHistoryWrap = () => {
 		setFilterOn(!filterOn);
 	};

+	const setDetailData = (detailData: DetailData) => {
+		setDetailOn(detailData.detailOn);
+		if(detailData.mid){
+			setDetailMid(detailData.mid);
+		}
+		if(detailData.requestId){
+			setDetailRequestId(detailData.requestId);
+		}
+		if(detailData.subReqId){
+			setDetailSubReqId(detailData.subReqId);
+		}
+	};
+
 	useEffect(() => {
 		callList();
 	}, [
@@ -232,9 +250,10 @@ export const LinkPaymentHistoryWrap = () => {
 			</div>

 			<LinkPaymentHistoryList
-				listItems={listItems}
-				additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
-				mid={mid}
+				listItems={ listItems }
+				additionalServiceCategory={ AdditionalServiceCategory.LinkPaymentHistory }
+				mid={ mid }
+				setDetailData={ setDetailData }
 			></LinkPaymentHistoryList>
 			<div ref={ setTarget }></div>
 			<div className="apply-row">
@@ -263,6 +282,13 @@ export const LinkPaymentHistoryWrap = () => {
 				setSendStatus={setSendStatus}
 				setSendMethod={setSendMethod}
 			></LinkPaymentHistoryFilter>
+			<LinkPaymentHistoryDetail
+				detailOn={ detailOn }
+				setDetailOn={ setDetailOn }
+				mid={ detailMid }
+				requestId={ detailRequestId }
+				subReqId={ detailSubReqId }
+			></LinkPaymentHistoryDetail>
 			<EmailBottomSheet
 				bottomSheetOn={emailBottomSheetOn}
 				setBottomSheetOn={setEmailBottomSheetOn}
--- a/src/entities/additional-service/ui/link-payment/link-payment-wait-list.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-wait-list.tsx
@@ -1,11 +1,11 @@
-import { JSX } from 'react';
-import { LinkPaymentWaitListItem, LinkPaymentWaitListProps } from '../../model/link-pay/types';
+import { LinkPaymentWaitListProps } from '../../model/link-pay/types';
 import { ListDateGroup } from '../list-date-group';

 export const LinkPaymentWaitList = ({
  additionalServiceCategory,
  listItems,
-  mid
+  mid,
+  setDetailData
 }: LinkPaymentWaitListProps) => {

  const getListDateGroup = () => {
@@ -25,11 +25,12 @@ export const LinkPaymentWaitList = ({
            if (list.length > 0) {
              rs.push(
                <ListDateGroup
-                  additionalServiceCategory={additionalServiceCategory}
-                  key={date + '-' + i}
-                  mid={mid}
-                  date={date}
-                  items={list}
+                  additionalServiceCategory={ additionalServiceCategory }
+                  key={ date + '-' + i }
+                  mid={ mid }
+                  date={ date }
+                  items={ list }
+                  setDetailData={ setDetailData }
                ></ListDateGroup>
              );
            }
@@ -43,11 +44,12 @@ export const LinkPaymentWaitList = ({
    if (list.length > 0) {
      rs.push(
        <ListDateGroup
-          additionalServiceCategory={additionalServiceCategory}
-          mid={mid}
-          key={date + '-last'}
-          date={date}
-          items={list}
+          additionalServiceCategory={ additionalServiceCategory }
+          mid={ mid }
+          key={ date + '-last' }
+          date={ date }
+          items={ list }
+          setDetailData={ setDetailData }
        ></ListDateGroup>
      );
    }
--- a/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx
@@ -5,7 +5,7 @@ import { LinkPaymentWaitSendFilter } from "./filter/link-payment-pending-send-fi
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { PATHS } from "@/shared/constants/paths";
 import { LinkPaymentWaitList } from "./link-payment-wait-list";
-import { AdditionalServiceCategory } from "../../model/types";
+import { AdditionalServiceCategory, DetailData } from "../../model/types";
 import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
 import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
 import { useExtensionLinkPayWaitListMutation } from '../../api/link-payment/use-extension-link-pay-wait-list-mutation';
@@ -14,11 +14,10 @@ import { useExtensionLinkPayWaitDownloadExcelMutation } from '../../api/link-pay
 import { useStore } from '@/shared/model/store';
 import { LinkPaymentProcessStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus, LinkPaymentWaitListItem } from '../../model/link-pay/types';
 import { getProcessStatusBtnGroup } from '../../model/link-pay/constant';
-import { useExtensionLinkPayWaitDeleteMutation } from '../../api/link-payment/use-extension-link-pay-wait-delete-mutation';
 import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { useTranslation } from 'react-i18next';
-
+import { LinkPaymentWaitDetail } from './detail/link-payment-wait-detail';


 export const LinkPaymentWaitSendWrap = () => {
@@ -39,6 +38,9 @@ export const LinkPaymentWaitSendWrap = () => {
  const [listItems, setListItems] = useState<Array<LinkPaymentWaitListItem>>([]);
  const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
  const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
+  const [detailOn, setDetailOn] = useState<boolean>(false);
+  const [detailMid, setDetailMid] = useState<string>('');
+  const [detailRequestId, setDetailRequestId] = useState<string>('');

  const { mutateAsync: pendingSendList } = useExtensionLinkPayWaitListMutation();
  const { mutateAsync: downloadExcel } = useExtensionLinkPayWaitDownloadExcelMutation();
@@ -143,6 +145,16 @@ export const LinkPaymentWaitSendWrap = () => {
    setSortType(sort);
  };

+  const setDetailData = (detailData: DetailData) => {
+    setDetailOn(detailData.detailOn);
+    if(detailData.mid){
+      setDetailMid(detailData.mid);
+    }
+    if(detailData.requestId){
+      setDetailRequestId(detailData.requestId);
+    }
+  };
+
  const onClickSendingStatus = (val: LinkPaymentProcessStatus) => {
    setProcessStatus(val);
  };
@@ -214,9 +226,10 @@ export const LinkPaymentWaitSendWrap = () => {
      </div>

      <LinkPaymentWaitList
-        listItems={listItems}
-        additionalServiceCategory={AdditionalServiceCategory.LinkPaymentWait}
-        mid={mid}
+        listItems={ listItems }
+        additionalServiceCategory={ AdditionalServiceCategory.LinkPaymentWait }
+        mid={ mid }
+        setDetailData={ setDetailData }
      ></LinkPaymentWaitList>
      <div ref={ setTarget }></div>
      <div className="apply-row">
@@ -243,6 +256,12 @@ export const LinkPaymentWaitSendWrap = () => {
        setSendMethod={setSendMethod}
        setProcessStatus={setProcessStatus}
      ></LinkPaymentWaitSendFilter>
+      <LinkPaymentWaitDetail
+        detailOn={ detailOn }
+        setDetailOn={ setDetailOn }
+        mid={ detailMid }
+        requestId={ detailRequestId }
+      ></LinkPaymentWaitDetail>
      <EmailBottomSheet
        bottomSheetOn={emailBottomSheetOn}
        setBottomSheetOn={setEmailBottomSheetOn}
--- a/src/entities/additional-service/ui/list-item.tsx
+++ b/src/entities/additional-service/ui/list-item.tsx
@@ -179,25 +179,23 @@ export const ListItem = ({
      }
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) {
-      navigate(PATHS.additionalService.linkPayment.detail, {
-        state: {
-          additionalServiceCategory: additionalServiceCategory,
+      if(setDetailData && !!requestId){
+        setDetailData({
          mid: mid,
-          tid: tid,
          requestId: requestId,
-          subReqId: subReqId
-        }
-      });
+          subReqId: subReqId,
+          detailOn: true
+        });
+      }
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait) {
-      navigate(PATHS.additionalService.linkPayment.pendingDetail, {
-        state: {
-          additionalServiceCategory: additionalServiceCategory,
+     if(setDetailData && !!requestId){
+        setDetailData({
          mid: mid,
-          tid: tid,
-          requestId: requestId
-        }
-      });
+          requestId: requestId,
+          detailOn: true
+        });
+      }
    }
    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
      if(setDetailData && !!seq){
--- a/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx
+++ b/src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx
@@ -145,7 +145,7 @@ export const AccountHolderAuthPage = () => {
    if(detailData.tid){
      setDetailTid(detailData.tid);
    }
-  }
+  };


  const onClickToOpenEmailBottomSheet = () => {
--- a/src/pages/additional-service/link-payment/link-payment-history-page.tsx
+++ b/src/pages/additional-service/link-payment/link-payment-history-page.tsx
@@ -1,7 +1,6 @@
 import { PATHS } from '@/shared/constants/paths';
 import { useState } from 'react';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
-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 { LinkPaymentHistoryWrap } from '../../../entities/additional-service/ui/link-payment/link-payment-history-wrap';