부가서비스

- SMS 결제 통보 리스트 API 연동
2025-09-24 16:54:35 +09:00
parent 9c03a73cc7
commit 69bafcd2c5
19 changed files with 432 additions and 224 deletions
--- a/src/entities/additional-service/api/sms-payment-notification/use-extension-sms-detail-mutation.ts
+++ b/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),
--- a/src/entities/additional-service/api/sms-payment-notification/use-extension-sms-list-mutation.ts
+++ b/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,
-  };
-};
--- a/src/entities/additional-service/api/sms-payment-notification/use-extension-sms-resend-mutation.ts
+++ b/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
--- a/src/entities/additional-service/api/sms-payment/use-extension-sms-detail-mutation.ts
+++ b/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,
+  };
+};
--- a/src/entities/additional-service/api/sms-payment-notification/use-extension-sms-download-excel-mutation.ts
+++ b/src/entities/additional-service/api/sms-payment-notification/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
--- a/src/entities/additional-service/api/sms-payment/use-extension-sms-list-mutation.ts
+++ b/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,
+  };
+};
--- a/src/entities/additional-service/api/sms-payment/use-extension-sms-resend-mutation.ts
+++ b/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,
+  };
+};
--- a/src/entities/additional-service/model/sms-payment/constant.ts
+++ b/src/entities/additional-service/model/sms-payment/constant.ts
--- a/src/entities/additional-service/model/sms-payment/types.ts
+++ b/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;
+}
--- a/src/entities/additional-service/model/types.ts
+++ b/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 {
--- a/src/entities/additional-service/ui/account-holder-auth/account-holder-auth-list.tsx
+++ b/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';

--- a/src/entities/additional-service/ui/list-date-group.tsx
+++ b/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>
        )
      }  
--- a/src/entities/additional-service/ui/list-item.tsx
+++ b/src/entities/additional-service/ui/list-item.tsx
@@ -13,19 +13,21 @@ export const ListItem = ({
  amount, sendDate, sendStatus, sendMethod,
  scheduledSendDate, processStatus,

-  accountName,transferStatus,
+  accountName, transferStatus,

  submallId, settlementDate, companyName,
  disbursementStatus, disbursementAmount,

-  transferAmount, receiveBankName, 
+  transferAmount, receiveBankName,
  receiveAccountNo, receiveAccountName,
  status, processDate,

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

@@ -394,7 +416,7 @@ export const ListItem = ({
          {resultStatus === 'SUCCESS' ? '성공' : '실패'}
        </div>
      );
-    } 
+    }
    else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
      rs.push(
        <div className={`status-label ${(transferStatus === 'REQUEST' || transferStatus === 'SUCCESS') ? 'success' : 'fail'}`}>
@@ -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>
-          { getDetail() }
+          <div className="transaction-title">{getTitle()}</div>
+          {getDetail()}
        </div>
-        { getAmount() }
+        {getAmount()}
      </div>
    </>
  );
--- a/src/entities/additional-service/ui/sms-payment/sms-payment-detail-resend.tsx
+++ b/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,
--- a/src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx
+++ b/src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx
--- a/src/entities/additional-service/ui/sms-payment/sms-payment-list.tsx
+++ b/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>
+        </>
+    )
+}