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

알림톡 리스트

Browse Source
This commit is contained in:
focp212@naver.com
2025-09-24 16:01:16 +09:00
parent 2ef446f0e7
commit 9c03a73cc7
21 changed files with 574 additions and 276 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/entities/additional-service/api/use-extansion-alimtalk-detail-mutation.ts → src/entities/additional-service/api/alimtalk/use-extansion-alimtalk-detail-mutation.ts
View File

@@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error';
import {
ExtensionAlimtalkDetailParams,
ExtensionAlimtalkDetailResponse
} from '../model/types';
} from '../../model/alimtalk/types';
import {
useMutation,
UseMutationOptions

2
src/entities/additional-service/api/use-extansion-alimtalk-download-excel-mutation.ts → src/entities/additional-service/api/alimtalk/use-extansion-alimtalk-download-excel-mutation.ts
View File

@@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error';
import {
ExtensionAlimtalkDownloadExcelParams,
ExtensionAlimtalkDownloadExcelResponse
} from '../model/types';
} from '../../model/alimtalk/types';
import {
useMutation,
UseMutationOptions

2
src/entities/additional-service/api/use-extansion-alimtalk-list-mutation.ts → src/entities/additional-service/api/alimtalk/use-extansion-alimtalk-list-mutation.ts
View File

@@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error';
import {
ExtensionAlimtalkListParams,
ExtensionAlimtalkListResponse
} from '../model/types';
} from '../../model/alimtalk/types';
import {
useMutation,
UseMutationOptions

2
src/entities/additional-service/api/use-extansion-alimtalk-setting-detail-mutation.ts → src/entities/additional-service/api/alimtalk/use-extansion-alimtalk-setting-detail-mutation.ts
View File

@@ -5,7 +5,7 @@ import { CBDCAxiosError } from '@/shared/@types/error';
import {
ExtensionAlimtalkSettingDetailParams,
ExtensionAlimtalkSettingDetailResponse
} from '../model/types';
} from '../../model/alimtalk/types';
import {
useMutation,
UseMutationOptions

3
src/entities/additional-service/api/use-extansion-alimtalk-setting-save-mutation.ts → src/entities/additional-service/api/alimtalk/use-extansion-alimtalk-setting-save-mutation.ts
View File

@@ -5,7 +5,8 @@ import { CBDCAxiosError } from '@/shared/@types/error';
import {
ExtensionAlimtalkSettingSaveParams,
ExtensionAlimtalkSettingSaveResponse
} from '../model/types';
} from '../../model/alimtalk/types';
import {
useMutation,
UseMutationOptions

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

118
src/entities/additional-service/model/alimtalk/types.ts Normal file
View File

@@ -0,0 +1,118 @@
import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types';
export enum AlimtalkSearchCl {
BUYER_NAME = 'BUYER_NAME',
TID = 'TID'
};
export enum AlimtalkAlimCl {
DEPOSIT_REQUEST = 'DEPOSIT_REQUEST',
DEPOSIT_COMPLETE = 'DEPOSIT_COMPLETE',
REFUND = 'REFUND',
APPROVAL = 'APPROVAL',
CANCEL = 'CANCEL'
};
export enum AlimtalkSendType {
ALL = 'ALL',
KAKAOTALK = 'KAKAOTALK',
FB_SMS = 'FB_SMS'
};
export enum AlimTalkSendCl {
ALL = 'ALL',
REQUEST = 'REQUEST',
SUCCESS = 'SUCCESS',
FAIL = 'FAIL'
};
export interface ExtensionAlimtalkSettingSaveParams {
mid: string;
sendMerchantInfo: SendMerchantInfo;
sendUserInfo: SendUserInfo;
};
export interface ExtensionAlimtalkSettingSaveResponse {};
export interface ExtensionAlimtalkSettingDetailParams {
mid: string;
};
export interface ExtensionAlimtalkSettingDetailResponse extends DefaulResponsePagination {
content: Array<AlimtalkSettingDetailContent>
};
export interface AlimtalkSettingDetailContent {
sendMerchantInfo: SendMerchantInfo,
sendUserInfo: SendUserInfo
};
export interface SendMerchantInfo {
cardApprovalFlag: boolean;
cardCancelFlag: boolean;
bankApprovalFlag: boolean;
bankCancelFlag: boolean;
virtureAccountDepositRequestFlag: boolean;
virtureAccountDepositCompleteFlag: boolean;
virtureAccountRefundFlag: boolean;
};
export interface SendUserInfo {
cardApprovalFlag: boolean;
cardCancelFlag: boolean;
bankApprovalFlag: boolean;
bankCancelFlag: boolean;
virtureAccountDepositRequestFlag: boolean;
virtureAccountDepositCompleteFlag: boolean;
virtureAccountRefundFlag: boolean;
};
export interface ExtensionAlimtalkListParams {
mid?: string;
searchCl?: AlimtalkSearchCl;
searchValue?: string;
paymentMethod?: string;
alimCl?: AlimtalkAlimCl;
fromDate?: string;
toDate?: string;
sendType?: AlimtalkSendType;
sendCl?: AlimTalkSendCl;
page?: DefaultRequestPagination;
};
export interface ExtensionAlimtalkListResponse extends DefaulResponsePagination {
content: Array<AlimtalkListContent>
};
export interface AlimtalkListContent {
tid?: string;
sendDate?: string;
alimCl?: AlimtalkAlimCl;
sendType?: AlimtalkSendType;
sendCl?: AlimTalkSendCl;
paymentMethod?: string;
receiverName?: string;
};
export interface ExtensionAlimtalkDownloadExcelParams {
mid?: string;
searchCl?: AlimtalkSearchCl;
searchValue?: string;
paymentMethod?: string;
alimCl?: AlimtalkAlimCl;
fromDate?: string;
toDate?: string;
sendType?: AlimtalkSendType;
sendCl?: AlimTalkSendCl;
};
export interface ExtensionAlimtalkDownloadExcelResponse {};
export interface ExtensionAlimtalkDetailParams {
mid: string;
tid: string;
};
export interface ExtensionAlimtalkDetailResponse {
receiverName: string;
merchantName: string;
sendDate: string;
mid: string;
tid: string;
serviceName: string;
sendType: AlimtalkSendType;
senderName: string;
paymentMethod: string;
alimCl: AlimtalkAlimCl;
sendCl: AlimTalkSendCl;
};

109
src/entities/additional-service/model/types.ts
View File

@@ -1,8 +1,8 @@
import { DefaulResponsePagination, DefaultRequestPagination } from '@/entities/common/model/types';
import { PayoutContent } from './payout/types';
import { P } from 'node_modules/framer-motion/dist/types.d-Cjd591yU';
import { FundAccountResultContentItem, FundAccountTransferContentItem } from './fund-account/types';
import { FundAccountTransferContentItem, FundAccountResultContentItem } from './fund-account/types';
import { ArsListContent } from './ars/types';
import { AlimtalkListContent } from './alimtalk/types';
// ========================================
// 공통 Enums 및 타입들
@@ -37,6 +37,7 @@ export enum AdditionalServiceCategory {
SMSPayment = 'SMSPayment',
Payout = 'Payout',
Ars = 'Ars',
Alimtalk = 'Alimtalk',
}
// ========================================
@@ -392,7 +393,8 @@ export interface ListItemProps extends
AccountHolderAuthListItem, LinkPaymentHistoryListItem,
LinkPaymentWaitListItem,
PayoutContent, FundAccountTransferContentItem,
ArsListContent {
FundAccountResultContentItem,
ArsListContent, AlimtalkListContent {
additionalServiceCategory?: AdditionalServiceCategory;
mid?: string
}
@@ -777,107 +779,6 @@ export interface ExtensionSmsDetailResponse {
}
// ========================================
// 알림톡 확장 서비스
// ========================================
export interface SendMerchantInfoItem {
cardApprovalFlag: boolean;
cardCancelFlag: boolean;
bankApprovalFlag: boolean;
bankCancelFlag: boolean;
virtureAccountDepositRequestFlag: boolean;
virtureAccountDepositCompleteFlag: boolean;
virtureAccountRefundFlag: boolean;
}
export interface SendUserInfoItem {
cardApprovalFlag: boolean;
cardCancelFlag: boolean;
bankApprovalFlag: boolean;
bankCancelFlag: boolean;
virtureAccountDepositRequestFlag: boolean;
virtureAccountDepositCompleteFlag: boolean;
virtureAccountRefundFlag: boolean;
}
export interface ExtensionAlimtalkSettingSaveParams extends ExtensionRequestParams {
sendMerchantInfo: SendMerchantInfoItem;
sendUserInfo: SendUserInfoItem;
}
export interface ExtensionAlimtalkSettingSaveResponse {
}
export interface ExtensionAlimtalkSettingDetailParams extends ExtensionRequestParams {
}
export interface ExtensionAlimtalkSettingDetailItem {
sendMerchantInfo: SendMerchantInfoItem;
sendUserInfo: SendUserInfoItem;
}
export interface ExtensionAlimtalkSettingDetailResponse extends DefaulResponsePagination {
content: Array<ExtensionAlimtalkSettingDetailItem>
}
export interface ExtensionAlimtalkListParams extends ExtensionRequestParams {
searchCl: string;
searchValue: string;
paymentMethod: string;
alimCl: string;
fromDate: string;
toDate: string;
sendType: string;
sendCl: string;
}
export interface ExtensionAlimtalkListItem {
tid: string;
sendDate: string;
alimCl: string;
sendType: string;
sendCl: string;
paymentMethod: string;
receiverName: string;
}
export interface ExtensionAlimtalkListResponse extends DefaulResponsePagination {
content: Array<ExtensionAlimtalkListItem>
}
export interface ExtensionAlimtalkDownloadExcelParams extends ExtensionRequestParams {
searchCl: string;
searchValue: string;
paymentMethod: string;
alimCl: string;
fromDate: string;
toDate: string;
sendType: string;
sendCl: string;
}
export interface ExtensionAlimtalkDownloadExcelResponse {
}
export interface ExtensionAlimtalkDetailParams extends ExtensionRequestParams {
tid: string;
}
export interface ExtensionAlimtalkDetailResponse {
receiverName: string;
merchantName: string;
sendDate: string;
mid: string;
tid: string;
serviceName: string;
sendType: string;
senderName: string;
paymentMethod: string;
alimCl: string;
sendCl: string;
}
// 확장 서비스 목록 관련
export interface ExtensionListParams extends ExtensionRequestParams {

169
src/entities/additional-service/ui/filter/alimtalk-filter.tsx Normal file
View File

@@ -0,0 +1,169 @@
import { useEffect, useState } from 'react';
import { motion } from 'framer-motion';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { FilterSelect } from '@/shared/ui/filter/select';
import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
import {
FilterMotionDuration,
FilterMotionStyle,
FilterMotionVariants
} from '@/entities/common/model/constant';
import moment from 'moment';
import { FilterInput } from '@/shared/ui/filter/input';
import { OrderStatus, PaymentStatus } from '../../model/ars/types';
import { ArsOrderStatusBtnGroup, ArsPaymentStatusBtnGroup } from '../../model/ars/constant';
export interface AlimtalkFilterProps {
filterOn: boolean;
setFilterOn: (filterOn: boolean) => void;
mid: string;
moid: string;
fromDate: string;
toDate: string;
paymentStatus: PaymentStatus;
orderStatus: OrderStatus;
minAmount?: number;
maxAmount?: number;
setMid: (mid: string) => void;
setMoid: (moid: string) => void;
setFromDate: (fromDate: string) => void;
setToDate: (toDate: string) => void;
setPaymentStatus: (paymentStatus: PaymentStatus) => void;
setOrderStatus: (orderStatus: OrderStatus) => void;
setMinAmount: (minAmount?: number) => void;
setMaxAmount: (maxAmount?: number) => void;
};
export const AlimtalkFilter = ({
filterOn,
setFilterOn,
mid,
moid,
fromDate,
toDate,
paymentStatus,
orderStatus,
minAmount,
maxAmount,
setMid,
setMoid,
setFromDate,
setToDate,
setPaymentStatus,
setOrderStatus,
setMinAmount,
setMaxAmount
}: AlimtalkFilterProps) => {
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterMoid, setFilterMoid] = useState<string>(moid);
const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYY.MM.DD'));
const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYY.MM.DD'));
const [filterPaymentStatus, setFilterPaymentStatus] = useState<PaymentStatus>(paymentStatus);
const [filterOrderStatus, setFilterOrderStatus] = useState<OrderStatus>(orderStatus);
const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
const onClickToClose = () => {
setFilterOn(false);
};
const onClickToSetFilter = () => {
setMid(filterMid);
setFilterMoid(filterMoid);
setFromDate(filterFromDate);
setToDate(filterToDate);
setPaymentStatus(filterPaymentStatus);
setOrderStatus(filterOrderStatus);
setMinAmount(filterMinAmount);
setMaxAmount(filterMaxAmount);
onClickToClose();
};
let MidOptions = [
{name: 'nictest001m', value: 'nictest001m'}
];
useEffect(() => {
setFilterPaymentStatus(paymentStatus);
}, [paymentStatus]);
return (
<>
<motion.div
id="fullMenuModal"
className="full-menu-modal"
initial="hidden"
animate={ (filterOn)? 'visible': 'hidden' }
variants={ FilterMotionVariants }
transition={ FilterMotionDuration }
style={ FilterMotionStyle }
>
<div className="full-menu-container">
<div className="full-menu-header">
<div className="full-menu-title center">필터</div>
<div className="full-menu-actions">
<button
id="closeFullMenu"
className="full-menu-close"
>
<img
src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기"
onClick={ () => onClickToClose() }
/>
</button>
</div>
</div>
<div className="option-list pt-16">
<FilterSelect
title='가맹점'
selectValue={ filterMid }
selectSetter={ setFilterMid }
selectOptions={ MidOptions }
></FilterSelect>
<FilterInput
title='주문번호'
inputValue={ filterMoid }
inputSetter={ setFilterMoid }
></FilterInput>
<FilterCalendar
title='조회기간'
startDate={ filterFromDate }
endDate={ filterToDate }
setStartDate={ setFilterFromDate }
setEndDate={ setFilterToDate }
></FilterCalendar>
<FilterButtonGroups
title='결제상태'
activeValue={ filterPaymentStatus }
btnGroups={ ArsPaymentStatusBtnGroup }
setter={ setFilterPaymentStatus }
></FilterButtonGroups>
<FilterButtonGroups
title='주문상태'
activeValue={ filterOrderStatus }
btnGroups={ ArsOrderStatusBtnGroup }
setter={ setFilterOrderStatus }
></FilterButtonGroups>
<FilterRangeAmount
title='거래금액'
minAmount={ filterMinAmount }
maxAmount={ filterMaxAmount }
setMinAmount={ setFilterMinAmount }
setMaxAmount={ setFilterMaxAmount }
></FilterRangeAmount>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToSetFilter() }
>적용</button>
</div>
</div>
</motion.div>
</>
);
};

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

@@ -57,6 +57,12 @@ export const ListDateGroup = ({
orderStatus={ items[i]?.orderStatus }
arsPaymentMethod={ items[i]?.arsPaymentMethod }
alimCl={ items[i]?.alimCl }
sendType={ items[i]?.sendType }
sendCl={ items[i]?.sendCl }
paymentMethod={ items[i]?.paymentMethod }
receiverName={ items[i]?.receiverName }
></ListItem>
)
}

40
src/entities/additional-service/ui/list-item.tsx
View File

@@ -22,7 +22,10 @@ export const ListItem = ({
receiveAccountNo, receiveAccountName,
status, processDate,
orderStatus, arsPaymentMethod
orderStatus, arsPaymentMethod,
alimCl, sendType, sendCl,
paymentMethod, receiverName
}: ListItemProps) => {
const { navigate } = useNavigate();
const getItemClass = () => {
@@ -183,6 +186,15 @@ export const ListItem = ({
}
});
}
else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
navigate(PATHS.additionalService.alimtalk.detail, {
state: {
additionalServiceCategory: additionalServiceCategory,
mid: mid,
tid: tid,
}
});
}
else {
alert('additionalServiceCategory가 존재하지 않습니다.');
}
@@ -212,6 +224,10 @@ export const ListItem = ({
let time = paymentDate?.substring(8, 12);
timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
}
else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
let time = paymentDate?.substring(8, 12);
timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
}
else {
return
}
@@ -250,6 +266,9 @@ export const ListItem = ({
else if(additionalServiceCategory === AdditionalServiceCategory.Ars){
str = '이름(' + tid + ')';
}
else if(additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
str = `${receiverName}(${tid})`;
}
return str;
};
@@ -353,6 +372,17 @@ export const ListItem = ({
</div>
);
}
else if(additionalServiceCategory === AdditionalServiceCategory.Alimtalk){
rs.push(
<div className="transaction-details">
<span>{ getTime() }</span>
<span className="separator">|</span>
<span>{ paymentMethod }</span>
<span className="separator">|</span>
<span>{ alimCl }</span>
</div>
);
}
return rs;
};
@@ -458,6 +488,14 @@ export const ListItem = ({
</div>
);
}
else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
rs.push(
<div
key="payout-item-amount"
className="transaction-amount"
>{ sendCl }</div>
);
}
return rs;
}

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

@@ -12,8 +12,9 @@ import { AccountHolderSearchPage } from './account-holder-search/account-holder-
import { AccountHolderAuthPage } from './account-holder-auth/account-holder-auth-page';
import { LinkPaymentHistoryPage } from './link-payment/link-payment-history-page';
import { LinkPaymentWaitSendPage } from './link-payment/link-payment-wait-send-page';
import { KakaoPaymentNotificationListPage } from './kakao-payment-notification/list-page';
import { KakaoPaymentNotificationSettingPage } from './kakao-payment-notification/setting-page';
import { AlimtalkListPage } from './alimtalk/list-page';
import { AlimtalkDetailPage } from './alimtalk/detail-page';
import { AlimtalkSettingPage } from './alimtalk/setting-page';
import { FundAccountTransferListPage } from './fund-account/transfer-list-page';
import { FundAccountTransferDetailPage } from './fund-account/transfer-detail-page';
import { FundAccountTransferRequestPage } from './fund-account/transfer-request-page';
@@ -74,9 +75,10 @@ export const AdditionalServicePages = () => {
<Route path={ROUTE_NAMES.additionalService.linkPayment.detail} element={<LinkPaymentDetailPage />} />
<Route path={ROUTE_NAMES.additionalService.linkPayment.pendingDetail} element={<LinkPaymentWaitDetailPage />} />
</Route>
<Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.base}>
<Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.list} element={<KakaoPaymentNotificationListPage />} />
<Route path={ROUTE_NAMES.additionalService.kakaoPaymentNotification.setting} element={<KakaoPaymentNotificationSettingPage />} />
<Route path={ROUTE_NAMES.additionalService.alimtalk.base}>
<Route path={ROUTE_NAMES.additionalService.alimtalk.list} element={<AlimtalkListPage />} />
<Route path={ROUTE_NAMES.additionalService.alimtalk.detail} element={<AlimtalkDetailPage />} />
<Route path={ROUTE_NAMES.additionalService.alimtalk.setting} element={<AlimtalkSettingPage />} />
</Route>
<Route path={ROUTE_NAMES.additionalService.fundAccount.base}>
<Route path={ROUTE_NAMES.additionalService.fundAccount.transferList} element={<FundAccountTransferListPage />} />

8
src/pages/additional-service/alimtalk/detail-page.tsx Normal file
View File

@@ -0,0 +1,8 @@
export const AlimtalkDetailPage = () => {
return (
<>
</>
);
};

197
src/pages/additional-service/alimtalk/list-page.tsx Normal file
View File

@@ -0,0 +1,197 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType, SortByKeys } from '@/entities/common/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { useEffect, useState } from 'react';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import {
AlimtalkAlimCl,
AlimtalkListContent,
AlimtalkSearchCl,
AlimTalkSendCl,
AlimtalkSendType,
ExtensionAlimtalkDownloadExcelParams,
ExtensionAlimtalkDownloadExcelResponse,
ExtensionAlimtalkListParams,
ExtensionAlimtalkListResponse
} from '@/entities/additional-service/model/alimtalk/types';
import moment from 'moment';
import { useExtensionAlimtalkListMutation } from '@/entities/additional-service/api/alimtalk/use-extansion-alimtalk-list-mutation';
import { useExtensionAlimtalkDownloadExcelMutation } from '@/entities/additional-service/api/alimtalk/use-extansion-alimtalk-download-excel-mutation';
import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group';
import { AdditionalServiceCategory } from '@/entities/additional-service/model/types';
export const AlimtalkListPage = () => {
const { navigate } = useNavigate();
const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
const [listItems, setListItems] = useState<Record<string, Array<AlimtalkListContent>>>({});
const [filterOn, setFilterOn] = useState<boolean>(false);
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
const [mid, setMid] = useState<string>('nictest001m');
const [searchCl, setSearchCl] = useState<AlimtalkSearchCl>(AlimtalkSearchCl.BUYER_NAME);
const [searchValue, setSearchValue] = useState<string>();
const [paymentMethod, setPaymentMethod] = useState<string>();
const [alimCl, setAlimCl] = useState<AlimtalkAlimCl>(AlimtalkAlimCl.DEPOSIT_REQUEST);
const [fromDate, setFromDate] = useState<string>(moment().format('YYYYMMDD'));
const [toDate, setToDate] = useState<string>(moment().format('YYYYMMDD'));
const [sendType, setSendType] = useState<AlimtalkSendType>(AlimtalkSendType.ALL);
const [sendCl, setSendCl] = useState<AlimTalkSendCl>(AlimTalkSendCl.ALL);
const { mutateAsync: extensionAlimtalkList } = useExtensionAlimtalkListMutation();
const { mutateAsync: extensionAlimtalkDownloadExcel } = useExtensionAlimtalkDownloadExcelMutation();
useSetHeaderTitle('알림톡 결제통보');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.home);
});
const callList = (option?: {
sortBy?: string,
val?: string
}) => {
pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
setPageParam(pageParam);
let params: ExtensionAlimtalkListParams = {
mid: mid,
searchCl: searchCl,
searchValue: searchValue,
paymentMethod: paymentMethod,
fromDate: fromDate,
toDate: toDate,
sendType: sendType,
sendCl: sendCl,
page: pageParam
};
extensionAlimtalkList(params).then((rs: ExtensionAlimtalkListResponse) => {
setListItems(assembleData(rs.content));
});
};
const callDownloadExcel = () => {
let params: ExtensionAlimtalkDownloadExcelParams = {
mid: mid,
searchCl: searchCl,
searchValue: searchValue,
paymentMethod: paymentMethod,
alimCl: alimCl,
fromDate: fromDate,
toDate: toDate,
sendType: sendType,
sendCl: sendCl
};
extensionAlimtalkDownloadExcel(params).then((rs: ExtensionAlimtalkDownloadExcelResponse) => {
});
};
const assembleData = (content: Array<AlimtalkListContent>) => {
let data: any = {};
if(content && content.length > 0){
for(let i=0;i<content?.length;i++){
let date = content[i]?.sendDate?.substring(0, 8);
let groupDate = moment(date).format('YYYYMMDD');
if(!!groupDate && !data.hasOwnProperty(groupDate)){
data[groupDate] = [];
}
if(!!groupDate && data.hasOwnProperty(groupDate)){
data[groupDate].push(content[i]);
}
}
}
return data;
};
const onClickToNavigate = () => {
navigate(PATHS.additionalService.alimtalk.setting);
};
const onClickToDownloadExcel = () => {
callDownloadExcel();
};
const onClickToOpenFilter = () => {
setFilterOn(!filterOn);
};
const getAlimtalkList = () => {
let rs = [];
if(Object.keys(listItems).length > 0){
for (const [key, value] of Object.entries(listItems)) {
rs.push(
<ListDateGroup
additionalServiceCategory={ AdditionalServiceCategory.Alimtalk }
mid={ mid }
key={ key }
date={ key }
items={ value }
></ListDateGroup>
);
}
}
return rs;
}
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="필터"
onClick={ () => onClickToOpenFilter() }
>
<img
src={ IMAGE_ROOT + '/ico_setting.svg' }
alt="검색옵션"
/>
</button>
</div>
<button
className="download-btn"
aria-label="다운로드"
onClick={ () => onClickToDownloadExcel() }
>
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
alt="다운로드"
/>
</button>
</div>
</section>
<section className="transaction-list">
{ getAlimtalkList() }
</section>
</div>
</div>
</main>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToNavigate() }
>서비스 설정</button>
</div>
</>
);
};

4
src/pages/additional-service/kakao-payment-notification/setting-page.tsx → src/pages/additional-service/alimtalk/setting-page.tsx
View File

@@ -9,14 +9,14 @@ import {
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
export const KakaoPaymentNotificationSettingPage = () => {
export const AlimtalkSettingPage = () => {
const { navigate } = useNavigate();
useSetHeaderTitle('알림톡 결제통보');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.additionalService.kakaoPaymentNotification.list);
navigate(PATHS.additionalService.alimtalk.list);
});
const onClickToSave = () => {

4
src/pages/additional-service/ars/list-page.tsx
View File

@@ -102,7 +102,7 @@ export const ArsListPage = () => {
return data;
};
const onClickToNavigation = () => {
const onClickToNavigate = () => {
navigate(PATHS.additionalService.ars.request);
};
@@ -206,7 +206,7 @@ export const ArsListPage = () => {
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToNavigation() }
onClick={ () => onClickToNavigate() }
>결제 신청</button>
</div>
</section>

2
src/pages/additional-service/intro/intro-page.tsx
View File

@@ -61,7 +61,7 @@ export const IntroPage = () => {
},
{
className: 'list-wrap02', serviceName: '알림톡 결제통보', serviceDesc: '결제 상태를 알림톡으로 쉽고 빠른 안내',
icon: IMAGE_ROOT + '/icon_ing10.svg', path: PATHS.additionalService.kakaoPaymentNotification.list
icon: IMAGE_ROOT + '/icon_ing10.svg', path: PATHS.additionalService.alimtalk.list
},
];

147
src/pages/additional-service/kakao-payment-notification/list-page.tsx
View File

@@ -1,147 +0,0 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
export const KakaoPaymentNotificationListPage = () => {
const { navigate } = useNavigate();
useSetHeaderTitle('알림톡 결제통보');
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
useSetOnBack(() => {
navigate(PATHS.home);
});
const onClickToNavigate = () => {
navigate(PATHS.additionalService.kakaoPaymentNotification.setting);
};
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">
<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="status-label success">성공</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="status-label fail">실패</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="status-label success">성공</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="status-label fail">실패</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="status-label success">성공</div>
</div>
</div>
</section>
</div>
</div>
</main>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToNavigate() }
>서비스 설정</button>
</div>
</>
);
};

16
src/shared/constants/paths.ts
View File

@@ -234,15 +234,19 @@ export const PATHS: RouteNamesType = {
ROUTE_NAMES.additionalService.linkPayment.pendingDetail,
)
},
kakaoPaymentNotification: {
base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.kakaoPaymentNotification.base}`),
alimtalk: {
base: generatePath(`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.alimtalk.base}`),
list: generatePath(
`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.kakaoPaymentNotification.base}`,
ROUTE_NAMES.additionalService.kakaoPaymentNotification.list,
`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.alimtalk.base}`,
ROUTE_NAMES.additionalService.alimtalk.list,
),
detail: generatePath(
`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.alimtalk.base}`,
ROUTE_NAMES.additionalService.alimtalk.detail,
),
setting: generatePath(
`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.kakaoPaymentNotification.base}`,
ROUTE_NAMES.additionalService.kakaoPaymentNotification.setting,
`${ROUTE_NAMES.additionalService.base}${ROUTE_NAMES.additionalService.alimtalk.base}`,
ROUTE_NAMES.additionalService.alimtalk.setting,
),
},
fundAccount: {

5
src/shared/constants/route-names.ts
View File

@@ -105,9 +105,10 @@ export const ROUTE_NAMES = {
detail: 'detail',
pendingDetail: 'pending-detail'
},
kakaoPaymentNotification: {
base: '/kakao-payment-notification/*',
alimtalk: {
base: '/alimtalk/*',
list: 'list',
detail: 'detail',
setting: 'setting',
},
fundAccount: {

2
src/shared/ui/menu/index.tsx
View File

@@ -88,7 +88,7 @@ export const Menu = ({
{title: '계좌성명조회', path: PATHS.additionalService.accountHolderSearch.list},
{title: '계좌점유인증', path: PATHS.additionalService.accountHolderAuth.list},
{title: '링크결제', path: PATHS.additionalService.linkPayment.shippingHistory},
{title: '알림톡 결제통보', path: PATHS.additionalService.kakaoPaymentNotification.list},
{title: '알림톡 결제통보', path: PATHS.additionalService.alimtalk.list},
{title: '자금이체', path: PATHS.additionalService.fundAccount.transferList},
{title: '정산대행', path: PATHS.additionalService.settlementAgency.manage},
{title: '지급대행', path: PATHS.additionalService.payout.list},