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

# Conflicts: # src/entities/additional-service/model/types.ts
2025-09-22 13:51:41 +09:00
parent cc22ae8348 4d5d195af2
commit 13474c4fca
16 changed files with 417 additions and 161 deletions
--- a/src/entities/additional-service/api/link-payment/use-extension-link-pay-history-detail-mutation.ts
+++ b/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,
+        };
+}
--- a/src/entities/additional-service/api/link-payment/use-extension-link-pay-history-download-excel-mutation.ts
+++ b/src/entities/additional-service/api/link-payment/use-extension-link-pay-history-download-excel-mutation.ts
--- a/src/entities/additional-service/api/link-payment/use-extension-link-pay-history-resend-mutation.ts
+++ b/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,
+    };
+};
--- a/src/entities/additional-service/api/link-payment/use-extension-link-pay-wait-download-excel-mutation
+++ b/src/entities/additional-service/api/link-payment/use-extension-link-pay-wait-download-excel-mutation
--- a/src/entities/additional-service/model/types.ts
+++ b/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
--- a/src/entities/additional-service/ui/info-wrap/detail-info-wrap.tsx
+++ b/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>
-            <ul className="kv-list">
-                <li className="kv-row">
-                    <span className="k">예금주</span>
-                    <span className="v">{detailInfo?.accountName}</span>
-                </li>
-                <li className="kv-row">
-                    <span className="k">조회 일시</span>
-                    <span className="v">{detailInfo?.requestDate}</span>
-                </li>
-                <li className="kv-row">
-                    <span className="k">결과</span>
-                    <span className="v">{detailInfo?.resultStatus}</span>
-                </li>
-                <li className="kv-row">
-                    <span className="k">실패사유</span>
-                    <span className="v">{detailInfo?.failureReason}</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 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">{detailInfo?.email}</span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">휴대폰 번호</span>
+                                <span className="v">{detailInfo?.phoneNumber}</span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">상품명</span>
+                                <span className="v">상품명 respone 추가 필요</span>
+                            </li>
+                            <li className="kv-row">
+                                <span className="k">주문번호</span>
+                                <span className="v">{detailInfo?.moid}</span>
+                            </li>
+                        </>
+                    }
+                </ul >
+            </div >
        </>
    )
 };
--- a/src/entities/additional-service/ui/info-wrap/payment-info-wrap.tsx
+++ b/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>
+        </>
+    )
+
+}
+
--- a/src/entities/additional-service/ui/info-wrap/title-info-wrap.tsx
+++ b/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);
@@ -32,15 +27,35 @@ export const TitleInfoWrap = ({

  return (
    <>
-      {additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch&& (
-          <>
-            <div className="num-amount">
-              <span className="amount">{titleInfo?.accountNo}</span>
-            </div>
-            <div className="num-store">{titleInfo?.bankName}</div>
-            <div className="num-day">{titleInfo?.requestDate}</div>
-          </>
-        )}
+      {additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch && (
+        <>
+          <div className="num-amount">
+            <span className="amount">{titleInfo?.accountNo}</span>
+          </div>
+          <div className="num-store">{titleInfo?.bankName}</div>
+          <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 && (
+        <>
+        </>
+      )}
    </>
  );
 };
--- a/src/entities/additional-service/ui/link-payment/link-payment-pending-list.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-pending-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 = [];
--- a/src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx
+++ b/src/entities/additional-service/ui/link-payment/link-payment-pending-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 { AdditionalServiceCategory, LinkPaymentPendingListItem, LinkPaymentSearchType, LinkPaymentSendingStatus, LinkPaymentSendMethod, SortByKeys } from "../../model/types";
+import { LinkPaymentWaitList } from "./link-payment-wait-list";
+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"
--- a/src/pages/additional-service/account-holder-search/detail-page.tsx
+++ b/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';
--- a/src/pages/additional-service/additional-service-pages.tsx
+++ b/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 />} />
--- a/src/pages/additional-service/link-payment/link-payment-detail-page.tsx
+++ b/src/pages/additional-service/link-payment/link-payment-detail-page.tsx
@@ -6,7 +6,7 @@ import { DetailPaymentInfoSection } from '@/entities/additional-service/ui/link-
 import { HeaderType } from '@/entities/common/model/types';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import {
-  useSetOnBack, 
+  useSetOnBack,
  useSetHeaderTitle,
  useSetHeaderType,
  useSetFooterMode
@@ -14,16 +14,29 @@ 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);
  const [showDeets, setShowDeets] = useState<boolean>(false);

@@ -34,85 +47,100 @@ export const LinkPaymentDetailPage = () => {
  });
  useSetFooterMode(false);

-    const onClickToNavigate = (path: string) => {
-    let timeout = setTimeout(() => {
-      clearTimeout(timeout);
-      navigate(PATHS.additionalService.linkPayment.shippingHistory, {
+  const { mutateAsync: linkPayHistoryDetail } = useExtensionLinkPayHistoryDetailMutation();
+  const { mutateAsync: linkPayHistoryResend } = useExtensionLinkPayHistoryResendMutation();
+  const callDetail = () => {
+    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 = () => {
    setShowPayment(!showPayment);
  };

-    const onClickToCancel = () => {
+  const onClickToCancel = () => {
    let msg = '재발송 하시겠습니까?';
-    
-    overlay.open(({ 
+
+    overlay.open(({
      isOpen,
      close,
      unmount
    }) => {
      return (
        <Dialog
-          afterLeave={ unmount }
-          open={ isOpen }
-          onClose={ close }
-          onConfirmClick={ () => onClickToNavigate(PATHS.additionalService.linkPayment.shippingHistory) }
-          message={ msg }
+          afterLeave={unmount}
+          open={isOpen}
+          onClose={close}
+          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="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 className="pay-top">
+              <TitleInfoWrap
+              additionalServiceCategory={AdditionalServiceCategory.LinkPaymentShipping}
+              titleInfo={titleInfo}
+              ></TitleInfoWrap>
            </div>
-            <div className="apply-row">
-              <button 
-                className="btn-50 btn-blue flex-1"
-                onClick={ () => onClickToCancel() }
-              >재발송</button>
+            <div className="pay-detail">
+              <div className="detail-divider"></div>
+              <PaymentInfoWrap
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentShipping}
+                paymentInfo={paymentInfo}
+              ></PaymentInfoWrap>
+              <div className="detail-divider"></div>
+              <DetailInfoWrap
+                additionalServiceCategory={AdditionalServiceCategory.LinkPaymentShipping}
+                detailInfo={detailInfo}
+              ></DetailInfoWrap>
            </div>
          </div>
+          <div className="apply-row">
+            <button
+              className="btn-50 btn-blue flex-1"
+              onClick={() => onClickToCancel()}
+            >재발송</button>
+          </div>
        </div>
-      </main>
+      </main >
    </>
  )
 };
--- a/src/pages/additional-service/link-payment/link-payment-pending-detail-page.tsx
+++ b/src/pages/additional-service/link-payment/link-payment-pending-detail-page.tsx
@@ -6,7 +6,7 @@ import { DetailPaymentInfoSection } from '@/entities/additional-service/ui/link-
 import { HeaderType } from '@/entities/common/model/types';
 import { IMAGE_ROOT } from '@/shared/constants/common';
 import {
-  useSetOnBack, 
+  useSetOnBack,
  useSetHeaderTitle,
  useSetHeaderType,
  useSetFooterMode
@@ -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);
@@ -41,26 +42,26 @@ export const LinkPaymentPendingDetailPage = () => {
      });
    }, 10)
  };
-  
+
  const onClickToShowInfo = () => {
    setShowPayment(!showPayment);
  };

  const onClickToCancel = () => {
    let msg = '삭제 하시겠습니까?';
-    
-    overlay.open(({ 
+
+    overlay.open(({
      isOpen,
      close,
      unmount
    }) => {
      return (
        <Dialog
-          afterLeave={ unmount }
-          open={ isOpen }
-          onClose={ close }
-          onConfirmClick={ () => onClickToNavigate(PATHS.additionalService.linkPayment.pendingSend) }
-          message={ msg }
+          afterLeave={unmount}
+          open={isOpen}
+          onClose={close}
+          onConfirmClick={() => onClickToNavigate(PATHS.additionalService.linkPayment.pendingSend)}
+          message={msg}
          buttonLabel={['취소', '확인']}
        />
      );
@@ -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,13 +98,13 @@ export const LinkPaymentPendingDetailPage = () => {
                  paymentInfo={paymentInfo}
                  show={showPayment}
                  onClickToShowInfo={onClickToShowInfo}
-                />
+                ></DetailPaymentInfoSection>
              </div>
            </div>
            <div className="apply-row">
-              <button 
+              <button
                className="btn-50 btn-blue flex-1"
-                onClick={ () => onClickToCancel() }
+                onClick={() => onClickToCancel()}
              >삭제</button>
            </div>
          </div>
--- a/src/pages/additional-service/link-payment/link-payment-pending-send-page.tsx
+++ b/src/pages/additional-service/link-payment/link-payment-pending-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>
--- a/src/shared/api/api-url-additional-service.ts
+++ b/src/shared/api/api-url-additional-service.ts
@@ -21,84 +21,91 @@ 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`;
  },
-  extensionSmsResend: () => {  
+  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`;
  },
-  extensionSmsList: () => {  
+  extensionSmsList: () => {
    // POST: SMS 결제 통보 목록 조회
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/sms/list`;
  },
-  extensionSmsDownloadExcel: () => {  
+  extensionSmsDownloadExcel: () => {
    // POST: SMS 결제 통보 엑셀 다운
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/sms/download/excel`;
  },
-  extensionSmsDetail: () => {  
+  extensionSmsDetail: () => {
    // POST: SMS 결제 통보 상세 조회
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/sms/detail`;
  },
-  extensionList: () => {  
+  extensionList: () => {
    // POST: 부가서비스 조회
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/list`;
  },
-  extensionKeyinList: () => {  
+  extensionKeyinList: () => {
    // POST: KEY-IN 결제 목록 조회
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/keyin/list`;
  },
-  extensionKeyinDownloadExcel: () => {  
+  extensionKeyinDownloadExcel: () => {
    // POST: KEY-IN 결제 엑셀 다운
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/keyin/download/excel`;
  },
-  extensionKeyinApply: () => {  
+  extensionKeyinApply: () => {
    // POST: KEY-IN 결제 > 결제 신청
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/keyin/apply`;
  },
-  extensionArsResend: () => {  
+  extensionArsResend: () => {
    // POST: SMS 신용카드 ARS 결제 > SMS 재전송
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/ars/resend`;
  },
-  extensionArsList: () => {  
+  extensionArsList: () => {
    // POST: 신용카드 ARS 결제 > 목록 조회
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/ars/list`;
  },
-  extensionArsDownloadExcel: () => {  
+  extensionArsDownloadExcel: () => {
    // POST: 신용카드 ARS 결제 > 엑셀 다운
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/ars/download/excel`;
  },
-  extensionArsDetail: () => {  
+  extensionArsDetail: () => {
    // POST: 신용카드 ARS 결제 > 상세 내용 조회
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/ars/detail`;
  },
-  extensionArsApply: () => {  
+  extensionArsApply: () => {
    // POST: 신용카드 ARS 결제 > 결제 신청
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/ars/apply`;
  },
-  extensionAlimtalkSettingSave: () => {  
+  extensionAlimtalkSettingSave: () => {
    // POST: 알림톡 결제 통보 > 서비스 설정 저장
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/alimtalk/setting/save`;
  },
-  extensionAlimtalkSettingDetail: () => {  
+  extensionAlimtalkSettingDetail: () => {
    // POST: 알림톡 결제 통보 > 서비스 설정 목록 조회
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/alimtalk/setting/detail`;
  },
-  extensionAlimtalkList: () => {  
+  extensionAlimtalkList: () => {
    // POST: 알림톡 결제 통보 목록 조회
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/alimtalk/list`;
  },
-  extensionAlimtalkDownloadExcel: () => {  
+  extensionAlimtalkDownloadExcel: () => {
    // POST: 알림톡 결제 통보 엑셀 다운
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/alimtalk/download/excel`;
  },
-  extensionAlimtalkDetail: () => {  
+  extensionAlimtalkDetail: () => {
    // POST: 알림톡 결제 통보 상세 조회
    return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/alimtalk/detail`;
  },
-
-
  // Payou tManagement 부가서비스 > 지급대행 API
  extensionPayoutRequest: () => {
    // POST: 지급대행 신청