부가서비스

- SMS 결제 통보 리스트 API 연동

src/entities/additional-service/api/sms-payment-notification/use-extension-sms-detail-mutation.ts

@@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error';
 import { 
   ExtensionSmsDetailParams,
   ExtensionSmsDetailResponse
-} from '../../model/types';
+} from '../../model/sms-payment/types';
 import { 
   useMutation,
   UseMutationOptions
@@ -17,7 +17,7 @@ export const extensionSmsDetail = (params: ExtensionSmsDetailParams) => {
   );
 };
 
-export const useExtensionSmsListMutation = (options?: UseMutationOptions<ExtensionSmsDetailResponse, CBDCAxiosError, ExtensionSmsDetailParams>) => {
+export const useExtensionSmsDetailMutation = (options?: UseMutationOptions<ExtensionSmsDetailResponse, CBDCAxiosError, ExtensionSmsDetailParams>) => {
   const mutation = useMutation<ExtensionSmsDetailResponse, CBDCAxiosError, ExtensionSmsDetailParams>({
     ...options,
     mutationFn: (params: ExtensionSmsDetailParams) => extensionSmsDetail(params),

src/entities/additional-service/api/sms-payment-notification/use-extension-sms-list-mutation.ts

@@ -1,29 +0,0 @@
-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 { 
-  ExtensionSmsListParams,
-  ExtensionSmsListResponse
-} from '../../model/types';
-import { 
-  useMutation,
-  UseMutationOptions
-} from '@tanstack/react-query';
-
-export const extensionSmsList = (params: ExtensionSmsListParams) => {
-  return resultify(
-    axios.post<ExtensionSmsListResponse>(API_URL_ADDITIONAL_SERVICE.extensionSmsList(), params),
-  );
-};
-
-export const useExtensionSmsListMutation = (options?: UseMutationOptions<ExtensionSmsListResponse, CBDCAxiosError, ExtensionSmsListParams>) => {
-  const mutation = useMutation<ExtensionSmsListResponse, CBDCAxiosError, ExtensionSmsListParams>({
-    ...options,
-    mutationFn: (params: ExtensionSmsListParams) => extensionSmsList(params),
-  });
-
-  return {
-    ...mutation,
-  };
-};

src/entities/additional-service/api/sms-payment-notification/use-extension-sms-resend-mutation.ts

@@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error';
 import { 
   ExtensionSmsResendParams,
   ExtensionSmsResendResponse
-} from '../../model/types';
+} from '../../model/sms-payment/types';
 import { 
   useMutation,
   UseMutationOptions

src/entities/additional-service/api/sms-payment/use-extension-sms-detail-mutation.ts

@@ -0,0 +1,29 @@
+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 { 
+  ExtensionSmsDetailParams,
+  ExtensionSmsDetailResponse
+} from '../../model/sms-payment/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const extensionSmsDetail = (params: ExtensionSmsDetailParams) => {
+  return resultify(
+    axios.post<ExtensionSmsDetailResponse>(API_URL_ADDITIONAL_SERVICE.extensionSmsDetail(), params),
+  );
+};
+
+export const useExtensionSmsDetailMutation = (options?: UseMutationOptions<ExtensionSmsDetailResponse, CBDCAxiosError, ExtensionSmsDetailParams>) => {
+  const mutation = useMutation<ExtensionSmsDetailResponse, CBDCAxiosError, ExtensionSmsDetailParams>({
+    ...options,
+    mutationFn: (params: ExtensionSmsDetailParams) => extensionSmsDetail(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/additional-service/api/sms-payment/use-extension-sms-download-excel-mutation.ts

@@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error';
 import { 
   ExtensionSmsDownloadExcelParams,
   ExtensionSmsDownloadExcelResponse
-} from '../../model/types';
+} from '../../model/sms-payment/types';
 import { 
   useMutation,
   UseMutationOptions

src/entities/additional-service/api/sms-payment/use-extension-sms-list-mutation.ts

@@ -0,0 +1,29 @@
+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 { 
+  ExtensionSmsPaymentListParams,
+  ExtensionSmsPaymentListResponse
+} from '../../model/sms-payment/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const extensionSmsList = (params: ExtensionSmsPaymentListParams) => {
+  return resultify(
+    axios.post<ExtensionSmsPaymentListResponse>(API_URL_ADDITIONAL_SERVICE.extensionSmsList(), params),
+  );
+};
+
+export const useExtensionSmsListMutation = (options?: UseMutationOptions<ExtensionSmsPaymentListResponse, CBDCAxiosError, ExtensionSmsPaymentListParams>) => {
+  const mutation = useMutation<ExtensionSmsPaymentListResponse, CBDCAxiosError, ExtensionSmsPaymentListParams>({
+    ...options,
+    mutationFn: (params: ExtensionSmsPaymentListParams) => extensionSmsList(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

src/entities/additional-service/api/sms-payment/use-extension-sms-resend-mutation.ts

@@ -0,0 +1,29 @@
+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 { 
+  ExtensionSmsResendParams,
+  ExtensionSmsResendResponse
+} from '../../model/sms-payment/types';
+import { 
+  useMutation,
+  UseMutationOptions
+} from '@tanstack/react-query';
+
+export const extensionSmsResend = (params: ExtensionSmsResendParams) => {
+  return resultify(
+    axios.post<ExtensionSmsResendResponse>(API_URL_ADDITIONAL_SERVICE.extensionSmsResend(), params),
+  );
+};
+
+export const useExtensionSmsResendMutation = (options?: UseMutationOptions<ExtensionSmsResendResponse, CBDCAxiosError, ExtensionSmsResendParams>) => {
+  const mutation = useMutation<ExtensionSmsResendResponse, CBDCAxiosError, ExtensionSmsResendParams>({
+    ...options,
+    mutationFn: (params: ExtensionSmsResendParams) => extensionSmsResend(params),
+  });
+
+  return {
+    ...mutation,
+  };
+};

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

@@ -0,0 +1,71 @@
+import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types';
+import { ExtensionRequestParams, ListItemProps } from '../types';
+
+export enum SmsType {
+    ALL = "ALL",
+    VACCOUNT_REQ = "VACCOUNT_REQ",
+    VACCOUNT_REQ_DEPOSIT = "VACCOUNT_REQ_DEPOSIT"
+}
+
+export enum SmsPaymentSearchType {
+    BUYER_NAME = "BUYER_NAME",
+    RECEIVE_PHONE_NUMBER = "RECEIVE_PHONE_NUMBER"
+}
+
+export interface SmsPaymentListItem {
+    mid?: string;
+    tid?: string;
+    paymentDate?: string;
+    paymentStatus?: string;
+    smsCl?: string;
+}
+
+export interface SmsPaymentListProps {
+    listItems: Record<string, Array<ListItemProps>>;
+    mid: string;
+}
+
+export interface ExtensionSmsPaymentListParams extends ExtensionRequestParams {
+    searchCl: SmsPaymentSearchType;
+    searchValue: string;
+    fromDate: string;
+    toDate: string;
+    smsCl: string;
+    page?: DefaultRequestPagination;
+}
+
+export interface ExtensionSmsPaymentListResponse extends DefaulResponsePagination {
+    content: Array<ListItemProps>
+}
+
+export interface ExtensionSmsDownloadExcelParams extends ExtensionRequestParams {
+    searchCl?: SmsPaymentSearchType;
+    searchValue: string;
+    fromDate: string;
+    toDate: string;
+    smsCl?: string;
+}
+
+export interface ExtensionSmsDownloadExcelResponse {
+    status: boolean;
+}
+
+export interface ExtensionSmsDetailParams extends ExtensionRequestParams {
+    tid: string;
+}
+
+export interface ExtensionSmsDetailResponse {
+    senderNumber: string;
+    senderName: string;
+    receiverNumber: string;
+    receiverName: string;
+    sendMessage: string;
+}
+
+export interface ExtensionSmsResendParams extends ExtensionRequestParams {
+    tid: string;
+}
+
+export interface ExtensionSmsResendResponse {
+    status: boolean;
+}

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

@@ -3,6 +3,7 @@ import { PayoutContent } from './payout/types';
 import { FundAccountTransferContentItem, FundAccountResultContentItem } from './fund-account/types';
 import { ArsListContent } from './ars/types';
 import { AlimtalkListContent } from './alimtalk/types';
+import { SmsPaymentListItem } from './sms-payment/types';
 
 // ========================================
 // 공통 Enums 및 타입들
@@ -391,7 +392,7 @@ export interface SettlementAgencyBottomAgreeProps {
 export interface ListItemProps extends
   KeyInPaymentListItem, AccountHolderSearchListItem,
   AccountHolderAuthListItem, LinkPaymentHistoryListItem,
-  LinkPaymentWaitListItem,
+  LinkPaymentWaitListItem, SmsPaymentListItem,
   PayoutContent, FundAccountTransferContentItem,
   FundAccountResultContentItem,
   ArsListContent, AlimtalkListContent {

src/entities/additional-service/ui/account-holder-auth/account-holder-auth-list.tsx

@@ -1,4 +1,3 @@
-import { PATHS } from '@/shared/constants/paths';
 import { ListDateGroup } from '../list-date-group';
 import { AccountHolderAuthListProps, AdditionalServiceCategory } from '../../model/types';
 

src/entities/additional-service/ui/list-date-group.tsx

@@ -63,6 +63,8 @@ export const ListDateGroup = ({
             sendCl={ items[i]?.sendCl }
             paymentMethod={ items[i]?.paymentMethod }
             receiverName={ items[i]?.receiverName }
+
+            smsCl= { items[i]?.smsCl }
           ></ListItem>
         )
       }  

src/entities/additional-service/ui/list-item.tsx

@@ -13,7 +13,7 @@ export const ListItem = ({
   amount, sendDate, sendStatus, sendMethod,
   scheduledSendDate, processStatus,
 
-  accountName,transferStatus,
+  accountName, transferStatus,
 
   submallId, settlementDate, companyName,
   disbursementStatus, disbursementAmount,
@@ -25,7 +25,9 @@ export const ListItem = ({
   orderStatus, arsPaymentMethod,
 
   alimCl, sendType, sendCl,
-  paymentMethod, receiverName
+  paymentMethod, receiverName,
+
+  smsCl
 }: ListItemProps) => {
   const { navigate } = useNavigate();
   const getItemClass = () => {
@@ -100,13 +102,21 @@ export const ListItem = ({
       } else {
         rs = 'gray'
       }
+    } else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
+      if (smsCl === "VACCOUNT_REQ_DEPOSIT") {
+        rs = 'blue'
+      } else {
+        rs = 'gray'
+      }
     }
     return rs;
 
   };
 
   const onClickToNavigate = () => {
-    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
+    if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment ||
+      additionalServiceCategory === AdditionalServiceCategory.SMSPayment
+    ) {
 
       return;
     }
@@ -176,7 +186,7 @@ export const ListItem = ({
         }
       });
     }
-    else if (additionalServiceCategory === AdditionalServiceCategory.Ars){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
       navigate(PATHS.additionalService.ars.detail, {
         state: {
           additionalServiceCategory: additionalServiceCategory,
@@ -186,7 +196,7 @@ export const ListItem = ({
         }
       });
     }
-    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
       navigate(PATHS.additionalService.alimtalk.detail, {
         state: {
           additionalServiceCategory: additionalServiceCategory,
@@ -220,11 +230,11 @@ export const ListItem = ({
     else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
       timeStr = moment(requestDate).format('mm:ss');
     }
-    else if (additionalServiceCategory === AdditionalServiceCategory.Ars){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
       let time = paymentDate?.substring(8, 12);
       timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
     }
-    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
       let time = paymentDate?.substring(8, 12);
       timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
     }
@@ -257,16 +267,19 @@ export const ListItem = ({
     else if (additionalServiceCategory === AdditionalServiceCategory.Payout) {
       str = companyName;
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer){
+    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
       str = `${receiveAccountName}(${receiveAccountNo})`;
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.FundAccountResult){
+    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
       str = `${receiveAccountName}(${receiveAccountNo})`;
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.Ars){
+    else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
+      str = `${paymentDate}(${paymentStatus})[추후 수정 필요]`
+    }
+    else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
       str = '이름(' + tid + ')';
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
       str = `${receiverName}(${tid})`;
     }
 
@@ -277,7 +290,7 @@ export const ListItem = ({
     let rs = [];
     if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
       rs.push(
-        <div className="transaction-details">
+        <div key='key-in-list' className="transaction-details">
           <span>{getTime()}</span>
           <span className="separator">|</span>
           <span>{paymentStatus}</span>
@@ -295,7 +308,7 @@ export const ListItem = ({
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
       rs.push(
-        <div className="transaction-details">
+        <div key="account-search" className="transaction-details">
           <span>{getTime()}</span>
           <span className="separator">|</span>
           <span>{bankName}</span>
@@ -305,7 +318,7 @@ export const ListItem = ({
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) {
       if (paymentStatus === "PAYMENT_FAIL" || paymentStatus === "INACTIVE") {
         rs.push(
-          <div className="transaction-details">
+          <div key="link-payment-history" className="transaction-details">
             <span>{getPaymentStatusText(paymentStatus)}</span>
             <span className="separator">|</span>
             <span>{getSendMethodText(sendMethod)}</span>
@@ -313,7 +326,7 @@ export const ListItem = ({
         )
       } else {
         rs.push(
-          <div className="transaction-details">
+          <div key="link-payment-history" className="transaction-details">
             <span>{getPaymentStatusText(paymentStatus)}</span>
             <span className="separator">|</span>
             <span>{getSendMethodText(sendMethod)}</span>
@@ -325,7 +338,7 @@ export const ListItem = ({
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait) {
       rs.push(
-        <div className="transaction-details">
+        <div key="link-payment-wait" className="transaction-details">
           <span>{getProcessStatusText(processStatus)}</span>
           <span className="separator">|</span>
           <span>{getSendMethodText(sendMethod)}</span>
@@ -341,48 +354,57 @@ export const ListItem = ({
         </div>
       );
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer){
+    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
       rs.push(
         <div className="transaction-details">
-          <span>{ getTime() }</span>
+          <span>{getTime()}</span>
           <span className="separator">|</span>
-          <span>{ status }</span>
+          <span>{status}</span>
         </div>
       );
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.FundAccountResult){
+    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
       rs.push(
         <div className="transaction-details">
-          <span>{ getTime() }</span>
+          <span>{getTime()}</span>
           <span className="separator">|</span>
-          <span>{ status }</span>
+          <span>{status}</span>
         </div>
       );
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.Ars){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
       rs.push(
         <div className="transaction-details">
-          <span>{ getTime() }</span>
+          <span>{getTime()}</span>
           <span className="separator">|</span>
-          <span>{ paymentStatus }</span>
+          <span>{paymentStatus}</span>
           <span className="separator">|</span>
-          <span>{ orderStatus }</span>
+          <span>{orderStatus}</span>
           <span className="separator">|</span>
-          <span>{ arsPaymentMethod }</span>
+          <span>{arsPaymentMethod}</span>
         </div>
       );
     }
-    else if(additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
+    else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
       rs.push(
         <div className="transaction-details">
-          <span>{ getTime() }</span>
+          <span>{getTime()}</span>
           <span className="separator">|</span>
-          <span>{ paymentMethod }</span>
+          <span>{paymentMethod}</span>
           <span className="separator">|</span>
-          <span>{ alimCl }</span>
+          <span>{alimCl}</span>
         </div>
       );
     }
+    else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
+      rs.push(
+        <div key="sms-payment" className="transaction-details">
+          <span>{mid}</span>
+          <span className="separator">|</span>
+          <span>{smsCl}</span>
+        </div>
+      )
+    }
     return rs;
   };
 
@@ -493,9 +515,17 @@ export const ListItem = ({
         <div
           key="payout-item-amount"
           className="transaction-amount"
-        >{ sendCl }</div>
+        >{sendCl}</div>
       );
     }
+    else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
+      rs.push(
+        <div
+        key="sms-payment-amount"
+        className="transaction-amount"
+        >{'재발송'}</div>
+      )
+    }
     return rs;
   }
 
@@ -509,10 +539,10 @@ export const ListItem = ({
           <div className={`status-dot ${getDotClass()}`}></div>
         </div>
         <div className="transaction-content">
-          <div className="transaction-title">{ getTitle() }</div>
+          <div className="transaction-title">{getTitle()}</div>
-          { getDetail() }
+          {getDetail()}
         </div>
-        { getAmount() }
+        {getAmount()}
       </div>
     </>
   );

src/entities/additional-service/ui/sms-payment/sms-payment-detail-resend.tsx

@@ -1,6 +1,6 @@
 import { motion } from 'framer-motion';
 import { IMAGE_ROOT } from '@/shared/constants/common';
-import { SmsPaymentDetailResendProps } from '../model/types';
+import { SmsPaymentDetailResendProps } from '../../model/types';
 
 export const SmsPaymentDetailResend = ({
   bottomSmsPaymentDetailResendOn,

src/entities/additional-service/ui/sms-payment/sms-payment-list.tsx

@@ -0,0 +1,33 @@
+import { SmsPaymentListProps } from '../../model/sms-payment/types';
+import { AdditionalServiceCategory } from '../../model/types';
+import { ListDateGroup } from '../list-date-group';
+
+export const SmsPaymentList = ({
+    listItems,
+    mid
+}: SmsPaymentListProps) => {
+
+    const getListDateGroup = () => {
+        let rs = [];
+        for (const [key, value] of Object.entries(listItems)) {
+            rs.push(
+                <ListDateGroup
+                    additionalServiceCategory={AdditionalServiceCategory.SMSPayment}
+                    key={key}
+                    date={key}
+                    items={value}
+                    mid={mid}
+                ></ListDateGroup>
+            )
+        }
+        return rs;
+    };
+
+    return (
+        <>
+            <div className="transaction-list">
+                {getListDateGroup()}
+            </div>
+        </>
+    )
+}

src/pages/additional-service/additional-service-pages.tsx

@@ -7,7 +7,7 @@ import { ArsDetailPage } from './ars/detail-page';
 import { ArsRequestPage } from './ars/request-page';
 import { ArsRequestSuccessPage } from './ars/request-success-page';
 import { KeyInPaymentPage } from './key-in-payment/key-in-payment-page';
-import { SmsPaymentNotificationPage } from './sms-payment-notification/sms-payment-notification-page';
+import { SmsPaymentPage } from './sms-payment/sms-payment-page';
 import { AccountHolderSearchPage } from './account-holder-search/account-holder-search-page';
 import { AccountHolderAuthPage } from './account-holder-auth/account-holder-auth-page';
 import { LinkPaymentHistoryPage } from './link-payment/link-payment-history-page';
@@ -56,7 +56,7 @@ export const AdditionalServicePages = () => {
           <Route path={ROUTE_NAMES.additionalService.keyInPayment.request} element={<KeyInPaymentRequestPage />} />
           <Route path={ROUTE_NAMES.additionalService.keyInPayment.requestSuccess} element={<KeyInPaymentRequestSuccessPage />} />
         </Route>
-        <Route path={ROUTE_NAMES.additionalService.smsPaymentNotification} element={<SmsPaymentNotificationPage />} />
+        <Route path={ROUTE_NAMES.additionalService.smsPaymentNotification} element={<SmsPaymentPage />} />
         <Route path={ROUTE_NAMES.additionalService.accountHolderSearch.base}>
           <Route path={ROUTE_NAMES.additionalService.accountHolderSearch.list} element={<AccountHolderSearchPage />} />
           <Route path={ROUTE_NAMES.additionalService.accountHolderSearch.detail} element={<AccountHolderSearchDetailPage />} />

src/pages/additional-service/sms-payment-notification/sms-payment-notification-page.tsx

@@ -1,149 +0,0 @@
-import { useState } from 'react';
-import { IMAGE_ROOT } from '@/shared/constants/common';
-import { SmsPaymentDetailResend } from '@/entities/additional-service/ui/sms-payment-detail-resend';
-import { HeaderType } from '@/entities/common/model/types';
-import { 
-	useSetHeaderTitle,
-	useSetHeaderType,
-	useSetFooterMode
-} from '@/widgets/sub-layout/use-sub-layout';
-
-export const SmsPaymentNotificationPage = () => {
-  const [bottomSmsPaymentDetailResendOn, setBottomSmsPaymentDetailResendOn] = useState<boolean>(false)
-
-  useSetHeaderTitle('SMS 결제 통보');
-  useSetHeaderType(HeaderType.LeftArrow);
-  useSetFooterMode(true);
-
-  const onClickToShowDetail = () => {
-    setBottomSmsPaymentDetailResendOn(true);
-  };
-  
-  return (
-    <>
-      <main>
-        <div className="tab-content">
-          <div className="tab-pane sub active">
-            <section className="summary-section no-border">
-              <div className="credit-controls">
-                <div>
-                  <input 
-                    className="credit-period"
-                    type="text"
-                    value="2025.06.01 ~ 2025.06.31"
-                    readOnly={ true }
-                  />
-                  <button 
-                    className="filter-btn"
-                    aria-label="필터"
-                  >
-                    <img 
-                      src={ IMAGE_ROOT + '/ico_setting.svg' }
-                      alt="검색옵션"
-                    />
-                  </button>
-                </div>
-                <button 
-                  className="download-btn"
-                  aria-label="다운로드"
-                >
-                  <img 
-                    src={ IMAGE_ROOT + '/ico_download.svg' }
-                    alt="다운로드"
-                  />
-                </button>
-              </div>
-            </section>
-            <section className="transaction-list">
-              <div className="date-group">
-                <div className="date-header">25.06.08(일)</div>
-                <div 
-                  className="transaction-item approved"
-                  onClick={ () => onClickToShowDetail() }
-                >
-                  <div className="transaction-status">
-                    <div className="status-dot blue"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">김*환(7000)</div>
-                    <div className="transaction-details">
-                      <span>nictest01m</span>
-                      <span className="separator">ㅣ</span>
-                      <span>가상계좌 요청</span>
-                    </div>
-                  </div>
-                  <div className="resend-label">재발송</div>
-                </div>
-
-                <div className="transaction-item refund">
-                  <div className="transaction-status">
-                    <div className="status-dot gray"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">최*길(010333*****)</div>
-                    <div className="transaction-details">
-                      <span>nictest01m</span>
-                      <span className="separator">ㅣ</span>
-                      <span>가상계좌 요청+입금</span>
-                    </div>
-                  </div>
-                  <div className="resend-label">재발송</div>
-                </div>
-
-                <div className="transaction-item approved">
-                  <div className="transaction-status">
-                    <div className="status-dot blue"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">박*준(010333*****)</div>
-                    <div className="transaction-details">
-                      <span>nictest01m</span>
-                      <span className="separator">ㅣ</span>
-                      <span>가상계좌 요청+입금</span>
-                    </div>
-                  </div>
-                  <div className="resend-label">재발송</div>
-                </div>
-
-                <div className="transaction-item refund">
-                  <div className="transaction-status">
-                    <div className="status-dot gray"></div>
-                  </div>
-                  <div className="transaction-content">
-                    <div className="transaction-title">이*신(010333*****)</div>
-                    <div className="transaction-details">
-                      <span>nictest01m</span>
-                      <span className="separator">ㅣ</span>
-                      <span>가상계좌 요청</span>
-                    </div>
-                  </div>
-                  <div className="resend-label">재발송</div>
-                </div>
-
-                <div className="transaction-item approved">
-                    <div className="transaction-status">
-                      <div className="status-dot blue"></div>
-                    </div>
-                    <div className="transaction-content">
-                      <div className="transaction-title">김*환(010333*****)</div>
-                      <div className="transaction-details">
-                        <span>nictest01m</span>
-                        <span className="separator">|</span>
-                        <span>가상계좌 요청</span>
-                      </div>
-                    </div>
-                    <div className="resend-label">재발송</div>
-                </div>
-              </div>
-            </section>
-          </div>
-        </div>
-      </main>
-
-      <SmsPaymentDetailResend
-        bottomSmsPaymentDetailResendOn={ bottomSmsPaymentDetailResendOn }
-        setBottomSmsPaymentDetailResendOn={ setBottomSmsPaymentDetailResendOn }
-      ></SmsPaymentDetailResend>
-    </>
-  );
-};

src/pages/additional-service/sms-payment/sms-payment-page.tsx

@@ -0,0 +1,163 @@
+import moment from 'moment';
+import { useEffect, useState } from 'react';
+import { useNavigate } from '@/shared/lib/hooks/use-navigate';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { SmsPaymentDetailResend } from '@/entities/additional-service/ui/sms-payment/sms-payment-detail-resend';
+import { HeaderType, SortByKeys } from '@/entities/common/model/types';
+import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
+import {
+  useSetHeaderTitle,
+  useSetHeaderType,
+  useSetFooterMode
+} from '@/widgets/sub-layout/use-sub-layout';
+import { SmsPaymentListItem, SmsPaymentSearchType, SmsType } from '@/entities/additional-service/model/sms-payment/types';
+import { useExtensionSmsListMutation } from '@/entities/additional-service/api/sms-payment/use-extension-sms-list-mutation';
+import { useExtensionSmsDownloadExcelMutation } from '@/entities/additional-service/api/sms-payment/use-extension-sms-download-excel-mutation';
+import { SmsPaymentList } from '@/entities/additional-service/ui/sms-payment/sms-payment-list';
+
+
+export const SmsPaymentPage = () => {
+  const { navigate } = useNavigate();
+  const [bottomSmsPaymentDetailResendOn, setBottomSmsPaymentDetailResendOn] = useState<boolean>(false)
+
+  const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
+  const [listItems, setListItems] = useState({});
+  const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
+  const [filterOn, setFilterOn] = useState<boolean>(false);
+  const [mid, setMid] = useState<string>('nictest001m');
+  const [searchCl, setSearchCl] = useState<SmsPaymentSearchType>(SmsPaymentSearchType.BUYER_NAME)
+  const [searchValue, setSearchValue] = useState<string>('')
+  const [fromDate, setFromDate] = useState(moment().format('YYYY-MM-DD'));
+  const [toDate, setToDate] = useState(moment().format('YYYY-MM-DD'));
+  const [smsCl, setSmsCl] = useState<SmsType>(SmsType.ALL);
+
+  const { mutateAsync: smsPaymentList } = useExtensionSmsListMutation();
+  const { mutateAsync: downloadExcel } = useExtensionSmsDownloadExcelMutation();
+
+  useSetHeaderTitle('SMS 결제 통보');
+  useSetHeaderType(HeaderType.LeftArrow);
+  useSetFooterMode(true);
+
+  const callList = (option?: {
+    sortBy?: string,
+    val?: string
+  }) => {
+    pageParam.sortBy = (option?.sortBy) ? option.sortBy : sortBy;
+    setPageParam(pageParam);
+
+    let listParams = {
+      mid: mid,
+      searchCl: searchCl,
+      searchValue: searchValue,
+      fromDate: fromDate,
+      toDate: toDate,
+      smsCl: smsCl === SmsType.ALL ? '' : smsCl,
+      page: pageParam
+    }
+
+    smsPaymentList(listParams).then((rs) => {
+      setListItems(assembleData(rs.content));
+    })
+  }
+
+  const assembleData = (content: Array<SmsPaymentListItem>) => {
+    let data: any = {};
+    if (content && content.length > 0) {
+      for (let i = 0; i < content?.length; i++) {
+        let paymentDate = content[i]?.paymentDate?.substring(0, 8);
+        let groupDate = moment(paymentDate).format('YYYYMMDD');
+        if (!!groupDate && !data.hasOwnProperty(groupDate)) {
+          data[groupDate] = [];
+        }
+        if (!!groupDate && data.hasOwnProperty(groupDate)) {
+          data[groupDate].push(content[i]);
+        }
+      }
+    }
+    console.log('Data : ', data)
+    return data;
+  };
+
+  const onClickToDownloadExcel = () => {
+    downloadExcel({
+      mid: mid,
+      searchCl: searchCl,
+      searchValue: searchValue,
+      fromDate: fromDate,
+      toDate: toDate,
+      smsCl: smsCl === SmsType.ALL ? '' : smsCl,
+    })
+  }
+
+
+  const onClickToOpenFilter = () => {
+    setFilterOn(!filterOn);
+  };
+
+  const onClickToSort = (sort: SortByKeys) => {
+    setSortBy(sort);
+    callList({ sortBy: sort })
+  };
+
+
+  const onClickToShowDetail = () => {
+    setBottomSmsPaymentDetailResendOn(true);
+  };
+
+  useEffect(() => {
+    callList();
+  }, []);
+
+  return (
+    <>
+      <main>
+        <div className="tab-content">
+          <div className="tab-pane sub active">
+            <section className="summary-section no-border">
+              <div className="credit-controls">
+                <div>
+                  <input
+                    className="credit-period"
+                    type="text"
+                    value={moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD')}
+                    readOnly={true}
+                  />
+                  <button
+                    className="filter-btn"
+                    aria-label="필터"
+                  >
+                    <img
+                      src={IMAGE_ROOT + '/ico_setting.svg'}
+                      alt="검색옵션"
+                      onClick={() => onClickToOpenFilter()}
+                    />
+                  </button>
+                </div>
+                <button
+                  className="download-btn"
+                  aria-label="다운로드"
+                >
+                  <img
+                    src={IMAGE_ROOT + '/ico_download.svg'}
+                    alt="다운로드"
+                    onClick={() => onClickToDownloadExcel()}
+                  />
+                </button>
+              </div>
+            </section>
+            <div className="detail-divider"></div>
+            <SmsPaymentList
+            listItems={listItems}
+            mid={mid}
+            ></SmsPaymentList>
+          </div>
+        </div>
+      </main>
+
+      <SmsPaymentDetailResend
+        bottomSmsPaymentDetailResendOn={bottomSmsPaymentDetailResendOn}
+        setBottomSmsPaymentDetailResendOn={setBottomSmsPaymentDetailResendOn}
+      ></SmsPaymentDetailResend>
+    </>
+  );
+};