부가서비스 - 링크결제 발송내역 상세: 페이지 로드 API, 재발송 API 연결

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

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);
@@ -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 && (
+        <>
+        </>
+      )}
     </>
   );
 };

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 { 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"