Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web

# Conflicts:
#	src/entities/additional-service/model/types.ts

src/entities/additional-service/api/link-payment/use-extension-link-pay-history-detail-mutation.ts

@@ -0,0 +1,56 @@
+import axios from 'axios';
+import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-service';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import {
+    DetailResponse,
+    TitleInfo,
+    ExtensionLinkPayHistoryDetailParams, ExtensionLinkPayHistoryDetailResponse,
+    DetailInfo,
+    PaymentInfo
+} from '../../model/types';
+import {
+    useMutation,
+    UseMutationOptions
+} from '@tanstack/react-query';
+
+export const extensionLinkPayHistoryDetail = async (params: ExtensionLinkPayHistoryDetailParams): Promise<DetailResponse> => {
+    const response = await resultify(
+        axios.post<ExtensionLinkPayHistoryDetailResponse>(API_URL_ADDITIONAL_SERVICE.extensionLinkPaymentHistoryDetail(), params),
+    );
+
+    const detailResponse: DetailResponse = {
+        titleInfo: {
+            amount: response.amount,
+            corpName: response.corpName,
+            requestDate: response.paymentDate
+        } as TitleInfo,
+        paymentInfo: {
+            buyerName: response.buyerName,
+            sendMethod: response.sendMethod,
+            sendDate: response.sendDate,
+            paymentStatus: response.paymentMethod,
+            failCount: response.failCount,
+            paymentMethod: response.paymentMethod,
+            paymentDate: response.paymentDate,
+            paymentLimitDate: response.paymentLimitDate
+        } as PaymentInfo,
+        detailInfo: {
+            email: response.email,
+            phoneNumber: response.phoneNumber,
+            moid: response.moid
+        } as DetailInfo
+    }
+
+    return detailResponse
+}
+
+export const useExtensionLinkPayHistoryDetailMutation = (options?: UseMutationOptions<DetailResponse, CBDCAxiosError, ExtensionLinkPayHistoryDetailParams>) => {
+        const mutation = useMutation<DetailResponse, CBDCAxiosError, ExtensionLinkPayHistoryDetailParams>({
+            ...options,
+            mutationFn: (params: ExtensionLinkPayHistoryDetailParams) => extensionLinkPayHistoryDetail(params),
+        });
+        return {
+            ...mutation,
+        };
+}

src/entities/additional-service/api/link-payment/use-extension-link-pay-history-resend-mutation.ts

@@ -0,0 +1,26 @@
+import axios from 'axios';
+import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-service';
+import { resultify } from '@/shared/lib/resultify';
+import { CBDCAxiosError } from '@/shared/@types/error';
+import { ExtensionLinkPayHistoryResendParams, ExtensionLinkPayHistoryResendResponse } from '../../model/types';
+import {
+    useMutation,
+    UseMutationOptions
+} from '@tanstack/react-query';
+
+export const extensionLinkPayHistoryResend = (params: ExtensionLinkPayHistoryResendParams) => {
+    return resultify(
+        axios.post<ExtensionLinkPayHistoryResendResponse>(API_URL_ADDITIONAL_SERVICE.extensionLinkPaymentHistoryResend(), params)
+    );
+};
+
+export const useExtensionLinkPayHistoryResendMutation = (options?: UseMutationOptions<ExtensionLinkPayHistoryResendResponse, CBDCAxiosError, ExtensionLinkPayHistoryResendParams>) => {
+    const mutation = useMutation<ExtensionLinkPayHistoryResendResponse, CBDCAxiosError, ExtensionLinkPayHistoryResendParams>({
+        ...options,
+        mutationFn: (params: ExtensionLinkPayHistoryResendParams) => extensionLinkPayHistoryResend(params),
+    });
+
+    return {
+        ...mutation,
+    };
+};

src/entities/additional-service/model/types.ts

@@ -37,9 +37,12 @@ export enum AdditionalServiceCategory {
 // ========================================
 
 export interface TitleInfo {
+  amount?: number,
+  corpName?: string,
   accountNo?: string,
   bankName?: string,
-  requestDate?: string
+  requestDate?: string,
+  sendDate?: string
 }
 
 export interface DetailInfo {
@@ -50,12 +53,19 @@ export interface DetailInfo {
   failureReason?: string; // 실패사유
   accountNo?: string; // 계좌번호
   requestWay?: string; //요청 구분
+
+  email: string;
+  phoneNumber: string;
+  //상품명 필요
+  moid: string;
+
 }
 
 export interface PaymentInfo {
   buyerName?: string;
   sendMethod?: string;
   sendDate?: string;
+  failCount?: number;
   paymentStatus?: string;
   paymentMethod?: string;
   paymentDate?: string;
@@ -209,7 +219,7 @@ export interface LinkPaymentShippingListItem {
   amount?: number;
 }
 
-export interface LinkPaymentPendingListItem {
+export interface LinkPaymentWaitListItem {
   tid?: string;
   scheduledSendDate?: string;
   sendMethod?: string;
@@ -223,7 +233,7 @@ export interface LinkPaymentShippingListProps {
   listItems: Record<string, Array<ListItemProps>>;
 }
 
-export interface LinkPaymentPendingListProps {
+export interface LinkPaymentWaitListProps {
   additionalServiceCategory: AdditionalServiceCategory;
   listItems: Record<string, Array<ListItemProps>>;
 }
@@ -321,7 +331,7 @@ export interface SettlementAgencyBottomAgreeProps {
 
 export interface ListItemProps extends 
 KeyInPaymentListItem, AccountHolderSearchListItem, 
-LinkPaymentShippingListItem, LinkPaymentPendingListItem,
+LinkPaymentShippingListItem, LinkPaymentWaitListItem,
 PayoutContent
 {
   additionalServiceCategory?: AdditionalServiceCategory;
@@ -365,6 +375,36 @@ export interface ExtensionLinkPayHistoryListResponse extends DefaulResponsePagin
   content: Array<ListItemProps>
 }
 
+export interface ExtensionLinkPayHistoryDetailParams extends ExtensionRequestParams {
+  tid: string;
+}
+
+export interface ExtensionLinkPayHistoryDetailResponse {
+  tid: string;
+  amount: number;
+  corpName: string;
+  sendDate: string;
+  buyerName: string;
+  sendMethod: string;
+  paymentStatus: string;
+  failCount: number;
+  paymentMethod: string;
+  paymentDate: string;
+  paymentLimitDate: string;
+  email: string;
+  phoneNumber: string;
+  goodsName: string;
+  moid: string;
+}
+
+export interface ExtensionLinkPayHistoryResendParams extends ExtensionRequestParams {
+  tid: string;
+}
+
+export interface ExtensionLinkPayHistoryResendResponse {
+  status: boolean
+}
+
 export interface ExtensionLinkPayWaitListParams extends ExtensionRequestParams {
   searchCl: string;
   searchValue: string;
@@ -380,6 +420,26 @@ export interface ExtensionLinkPayWaitListResponse extends DefaulResponsePaginati
   content: Array<ListItemProps>
 }
 
+export interface ExtensionLinkPayWaitDetailParams extends ExtensionRequestParams {
+  tid: string;
+}
+
+export interface ExtensionLinkPayWaitDetailResponse {
+  tid: string;
+  amount: number;
+  corpName: string;
+  scheduledSendDate: string;
+  processStatus: string;
+  requestDate: string;
+  paymentLimitDate: string;
+  sendMethod: string;
+  buyerName: string
+  email: string;
+  phoneNumber: string;
+  goodsName: string;
+  moid: string;
+}
+
 // 계좌 성명 조회 확장 서비스
 // ========================================
 export interface ExtensionAccountHolderSearchListParams extends ExtensionRequestParams { // Request

src/entities/additional-service/ui/info-wrap/detail-info-wrap.tsx

@@ -1,6 +1,6 @@
 import moment from 'moment';
 import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
-import { DetailInfoSectionProps } from '../../model/types';
+import { AdditionalServiceCategory, DetailInfoSectionProps } from '../../model/types';
 import { SlideDown } from 'react-slidedown';
 import 'react-slidedown/lib/slidedown.css';
 
@@ -9,39 +9,35 @@ export const DetailInfoWrap = ({
     detailInfo
 }: DetailInfoSectionProps) => {
 
+    console.log("DetailInfo Check: ", detailInfo)
+
     return (
         <>
-            <div className="detail-title">상세 정보</div>
+            <div className="txn-section">
+                <div className="section-title">상세 정보</div>
                 <ul className="kv-list">
+                    {(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) &&
+                        <>
                             < li className="kv-row">
-                    <span className="k">예금주</span>
+                                <span className="k">이메일</span>
-                    <span className="v">{detailInfo?.accountName}</span>
+                                <span className="v">{detailInfo?.email}</span>
                             </li>
                             <li className="kv-row">
-                    <span className="k">조회 일시</span>
+                                <span className="k">휴대폰 번호</span>
-                    <span className="v">{detailInfo?.requestDate}</span>
+                                <span className="v">{detailInfo?.phoneNumber}</span>
                             </li>
                             <li className="kv-row">
-                    <span className="k">결과</span>
+                                <span className="k">상품명</span>
-                    <span className="v">{detailInfo?.resultStatus}</span>
+                                <span className="v">상품명 respone 추가 필요</span>
                             </li>
                             <li className="kv-row">
-                    <span className="k">실패사유</span>
+                                <span className="k">주문번호</span>
-                    <span className="v">{detailInfo?.failureReason}</span>
+                                <span className="v">{detailInfo?.moid}</span>
-                </li>
-                <li className="kv-row">
-                    <span className="k">은행</span>
-                    <span className="v">{detailInfo?.bankName}</span>
-                </li>
-                <li className="kv-row">
-                    <span className="k">계좌번호</span>
-                    <span className="v">{detailInfo?.accountNo}</span>
-                </li>
-                <li className="kv-row">
-                    <span className="k">요청 구분</span>
-                    <span className="v">{detailInfo?.requestWay}</span>
                             </li>
+                        </>
+                    }
                 </ul >
+            </div >
         </>
     )
 };

src/entities/additional-service/ui/info-wrap/payment-info-wrap.tsx

@@ -1,8 +1,71 @@
 
-import { DetailInfoSectionProps } from '../../model/types';
+import moment from 'moment';
+import { AdditionalServiceCategory, DetailInfoSectionProps } from '../../model/types';
+import { getPaymentStatusText, getSendMethodText } from '../../lib/payment-status-utils';
 
 export const PaymentInfoWrap = ({
     additionalServiceCategory,
+    paymentInfo
 }: DetailInfoSectionProps) => {
 
+    const checkValue = (val: any) => {
+        return (!!val || val === 0);
+    };
+    console.log("PaymentInfo Check: ", paymentInfo)
+
+    return (
+        <>
+            <div className="txn-section">
+                <div className="section-title">결제 정보</div>
+                <ul className="kv-list">
+                    {(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) &&
+                        <>
+                            <li className="kv-row">
+                                <span className="k">구매자명</span>
+                                <span className="v">{paymentInfo?.buyerName}</span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">발송수단</span>
+                                <span className="v">{getSendMethodText(paymentInfo?.sendMethod)}</span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">발송일자</span>
+                                <span className="v">
+                                    {paymentInfo?.sendDate && moment(paymentInfo.sendDate).format('YYYY.MM.DD')}
+                                </span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">결제상태(실패횟수)</span>
+                                <span className="v">  {`${getPaymentStatusText(paymentInfo?.paymentStatus)}(${paymentInfo?.failCount})`}</span>
+                            </li>
+                            {checkValue(paymentInfo?.failCount) && (
+                                <li className="kv-row">
+                                    <span className="k">실패횟수</span>
+                                    <span className="v">{paymentInfo?.failCount}회</span>
+                                </li>
+                            )}
+                            <li className="kv-row">
+                                <span className="k">결제수단</span>
+                                <span className="v">{paymentInfo?.paymentMethod}</span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">결제일자</span>
+                                <span className="v">
+                                    {paymentInfo?.paymentDate && paymentInfo.paymentDate}
+                                </span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">결제유효일자</span>
+                                <span className="v">
+                                    {paymentInfo?.paymentLimitDate && moment(paymentInfo.paymentLimitDate).format('YYYY.MM.DD')}
+                                </span>
+                            </li>
+                        </>
                     }
+                </ul>
+            </div>
+        </>
+    )
+
+}
+

src/entities/additional-service/ui/info-wrap/title-info-wrap.tsx

@@ -10,11 +10,6 @@ export const TitleInfoWrap = ({
   onClickToShowInfo
 }: DetailInfoSectionProps) => {
 
-  const variants = {
-    hidden: { height: 0, padding: 0, margin: 0, display: 'none' },
-    visible: { height: 'auto', padding: '16px', margin: '10px 0', display: 'block' },
-  };
-
   const onClickToSetShowInfo = () => {
     if (!!onClickToShowInfo) {
       onClickToShowInfo(DetailInfoSectionKeys.Title);
@@ -41,6 +36,26 @@ export const TitleInfoWrap = ({
           <div className="num-day">{titleInfo?.requestDate}</div>
         </>
       )}
+      {additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping && (
+        <>
+          <div className="num-amount">
+            <span className="amount-text">
+              <NumericFormat
+                value={titleInfo?.amount}
+                thousandSeparator
+                displayType="text"
+                suffix={ '원' }
+              ></NumericFormat>
+            </span>
+          </div>
+          <div className="num-store">{titleInfo?.corpName}</div>
+          <div className="num-day">{titleInfo?.requestDate}</div>
+        </>
+      )}
+      {additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending && (
+        <>
+        </>
+      )}
     </>
   );
 };

src/entities/additional-service/ui/link-payment/link-payment-wait-list.tsx

@@ -1,10 +1,10 @@
-import { LinkPaymentPendingListProps } from '../../model/types';
+import { LinkPaymentWaitListProps } from '../../model/types';
 import { ListDateGroup } from '../list-date-group';
 
-export const LinkPaymentPendingList = ({
+export const LinkPaymentWaitList = ({
   additionalServiceCategory,
   listItems
-}: LinkPaymentPendingListProps) => {
+}: LinkPaymentWaitListProps) => {
 
   const getListDateGroup = () => {
     let rs = [];

src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx

@@ -4,8 +4,8 @@ import { useState, useEffect } from "react";
 import { LinkPaymentPendingSendFilter } from "./filter/link-payment-pending-send-filter";
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { PATHS } from "@/shared/constants/paths";
-import { LinkPaymentPendingList } from "./link-payment-pending-list";
+import { LinkPaymentWaitList } from "./link-payment-wait-list";
-import { AdditionalServiceCategory, LinkPaymentPendingListItem, LinkPaymentSearchType, LinkPaymentSendingStatus, LinkPaymentSendMethod, SortByKeys } from "../../model/types";
+import { AdditionalServiceCategory, LinkPaymentWaitListItem, LinkPaymentSearchType, LinkPaymentSendingStatus, LinkPaymentSendMethod, SortByKeys } from "../../model/types";
 import { SortOptionsBox } from '../sort-options-box';
 import { useExtensionLinkPayWaitListMutation } from '../../api/link-payment/use-extension-link-pay-wait-list-mutation';
 import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
@@ -15,7 +15,7 @@ const sendingStatusBtnGrouup = [
     { name: '발송취소', value: LinkPaymentSendingStatus.SEND_CANCEL }
 ]
 
-export const LinkPaymentPendingSendWrap = () => {
+export const LinkPaymentWaitSendWrap = () => {
     const { navigate } = useNavigate();
 
     const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
@@ -63,7 +63,7 @@ export const LinkPaymentPendingSendWrap = () => {
         })
     };
 
-    const assembleData = (content: Array<LinkPaymentPendingListItem>) => {
+    const assembleData = (content: Array<LinkPaymentWaitListItem>) => {
         let data: any = {};
         if (content && content.length > 0) {
             for (let i = 0; i < content?.length; i++) {
@@ -149,10 +149,10 @@ export const LinkPaymentPendingSendWrap = () => {
                 </div>
             </div>
 
-            <LinkPaymentPendingList
+            <LinkPaymentWaitList
                 listItems={listItems}
                 additionalServiceCategory={AdditionalServiceCategory.LinkPaymentPending}
-            ></LinkPaymentPendingList>
+            ></LinkPaymentWaitList>
             <div className="apply-row">
                 <button
                     className="btn-50 btn-blue flex-1"

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';

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 />} />

src/pages/additional-service/link-payment/link-payment-detail-page.tsx

@@ -14,14 +14,27 @@ 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);
@@ -34,12 +47,39 @@ export const LinkPaymentDetailPage = () => {
   });
   useSetFooterMode(false);
 
-    const onClickToNavigate = (path: string) => {
+  const { mutateAsync: linkPayHistoryDetail } = useExtensionLinkPayHistoryDetailMutation();
-    let timeout = setTimeout(() => {
+  const { mutateAsync: linkPayHistoryResend } = useExtensionLinkPayHistoryResendMutation();
-      clearTimeout(timeout);
+  const callDetail = () => {
-      navigate(PATHS.additionalService.linkPayment.shippingHistory, {
+    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 = () => {
@@ -59,49 +99,38 @@ export const LinkPaymentDetailPage = () => {
           afterLeave={unmount}
           open={isOpen}
           onClose={close}
-          onConfirmClick={ () => onClickToNavigate(PATHS.additionalService.linkPayment.shippingHistory) }
+          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="pay-top">
-              <div className="txn-detail">
+              <TitleInfoWrap
-
+              additionalServiceCategory={AdditionalServiceCategory.LinkPaymentShipping}
-                <div className="txn-num-group">
+              titleInfo={titleInfo}
-                  <div className="txn-amount">
+              ></TitleInfoWrap>
-                    <div className="value">5,254,000<span className="unit">원</span></div>
             </div>
-                  <div className="txn-mid">
+            <div className="pay-detail">
-                    <span className="value">나이스테스트가맹점</span>
+              <div className="detail-divider"></div>
-                  </div>
+              <PaymentInfoWrap
-                  <div className="txn-mid">
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentShipping}
-                    <span className="value">2025.06.08</span>
-                  </div>
-                </div>
-
-                <div className="txn-divider minus"></div>
-
-                <DetailPaymentInfoSection
                 paymentInfo={paymentInfo}
-                  show={showPayment}
+              ></PaymentInfoWrap>
-                  onClickToShowInfo={onClickToShowInfo}
+              <div className="detail-divider"></div>
-                />
+              <DetailInfoWrap
-
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentShipping}
-                <div className="txn-divider minus"></div>
+                detailInfo={detailInfo}
-
+              ></DetailInfoWrap>
-                <DetailDeetsInfoSection
-                deetsInfo={deetsInfo}
-                show={showDeets}
-                onClickToShowInfo={onClickToShowInfo}
-                />
             </div>
           </div>
           <div className="apply-row">
@@ -111,7 +140,6 @@ export const LinkPaymentDetailPage = () => {
             >재발송</button>
           </div>
         </div>
-        </div>
       </main >
     </>
   )

src/pages/additional-service/link-payment/link-payment-wait-detail-page.tsx

@@ -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);
@@ -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,7 +98,7 @@ export const LinkPaymentPendingDetailPage = () => {
                   paymentInfo={paymentInfo}
                   show={showPayment}
                   onClickToShowInfo={onClickToShowInfo}
-                />
+                ></DetailPaymentInfoSection>
               </div>
             </div>
             <div className="apply-row">

src/pages/additional-service/link-payment/link-payment-wait-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>

src/shared/api/api-url-additional-service.ts

@@ -21,10 +21,19 @@ export const API_URL_ADDITIONAL_SERVICE = {
     // POST: 링크결제 - 발송내역 리스트 조회
     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/linkpay/history/list`;
   },
+  extensionLinkPaymentHistoryDetail: () => {
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/linkpay/history/detail`;
+  },
+  extensionLinkPaymentHistoryResend: () => {
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/linkpay/resend`;
+  },
   extensionLinkPaymentWaitList: () => {
     // POST: 링크결제 - 발송대기 리스트 조회
     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/linkpay/wait/list`;
   },
+  extensionLinkPaymentWaitDetail: () => {
+    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/linkpay/wait/detail`;
+  },
   extensionSmsResend: () => {
     // POST: SMS 결제 통보 > SMS 재발송
     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/sms/resend`;
@@ -97,8 +106,6 @@ export const API_URL_ADDITIONAL_SERVICE = {
     // POST: 알림톡 결제 통보 상세 조회
     return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/alimtalk/detail`;
   },
-
-
   // Payou tManagement 부가서비스 > 지급대행 API
   extensionPayoutRequest: () => {
     // POST: 지급대행 신청