부가서비스

- SMS 결제 통보 리스트 API 연동
This commit is contained in:
HyeonJongKim
2025-09-24 16:54:35 +09:00
parent 9c03a73cc7
commit 69bafcd2c5
19 changed files with 432 additions and 224 deletions

View File

@@ -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),

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@@ -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,

View File

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