nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

부가서비스

Browse Source 
- 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
Download Patch File Download Diff File Expand all files Collapse all files

4
src/entities/additional-service/api/sms-payment-notification/use-extension-sms-detail-mutation.ts
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),

29
src/entities/additional-service/api/sms-payment-notification/use-extension-sms-list-mutation.ts
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,
};
};

2
src/entities/additional-service/api/sms-payment-notification/use-extension-sms-resend-mutation.ts
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

29
src/entities/additional-service/api/sms-payment/use-extension-sms-detail-mutation.ts Normal file
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,
};
};

2
src/entities/additional-service/api/sms-payment-notification/use-extension-sms-download-excel-mutation.ts → src/entities/additional-service/api/sms-payment/use-extension-sms-download-excel-mutation.ts
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

29
src/entities/additional-service/api/sms-payment/use-extension-sms-list-mutation.ts Normal file
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,
};
};

29
src/entities/additional-service/api/sms-payment/use-extension-sms-resend-mutation.ts Normal file
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,
};
};

0
src/entities/additional-service/model/sms-payment/constant.ts Normal file
View File

71
src/entities/additional-service/model/sms-payment/types.ts Normal file
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;
}

3
src/entities/additional-service/model/types.ts
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 {

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

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

2
src/entities/additional-service/ui/list-date-group.tsx
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>
)
}

104
src/entities/additional-service/ui/list-item.tsx
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>
</>
);

2
src/entities/additional-service/ui/sms-payment-detail-resend.tsx → src/entities/additional-service/ui/sms-payment/sms-payment-detail-resend.tsx
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,

0
src/entities/additional-service/ui/sms-payment-filter.tsx → src/entities/additional-service/ui/sms-payment/sms-payment-filter.tsx
View File

33
src/entities/additional-service/ui/sms-payment/sms-payment-list.tsx Normal file
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>
</>
)
}

4
src/pages/additional-service/additional-service-pages.tsx
View File

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

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

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

163
src/pages/additional-service/sms-payment/sms-payment-page.tsx Normal file
View File

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