- 자금이체_처리결과: 리스트,필터,상세정보 수정

This commit is contained in:
HyeonJongKim
2025-10-17 17:08:44 +09:00
parent 3886e93b49
commit ec16b6ec11
11 changed files with 360 additions and 327 deletions

View File

@@ -7,6 +7,12 @@ export enum AccountHolderSearchType {
ACCOUNT_NO = 'ACCOUNT_NO'
}
export enum AccountHolderResultStatus {
ALL = "ALL",
SUCCESS = "SUCCESS",
FAIl = "FAIL"
}
export interface AccountHolderSearchListItem {
tid?: string;
accountNo?: string;

View File

@@ -1,33 +1,49 @@
import {
FundAccountReceiveAccountNameNo,
FundAccountResultType,
FundAccountResultStatus,
FundAccountSearchDateType,
FundAccountStatus
} from './types';
export const FundAccountStatusBtnGroup = [
{name: '전체', value: FundAccountStatus.ALL},
{name: '등록완료', value: FundAccountStatus.REGIST_COMPLETE},
{name: '이체요청', value: FundAccountStatus.TRANSFER_REQUEST},
{name: '요청성공', value: FundAccountStatus.REQUEST_SUCCESS},
{name: '요청실패', value: FundAccountStatus.REQUEST_FAIL}
{ name: '전체', value: FundAccountStatus.ALL },
{ name: '등록완료', value: FundAccountStatus.REGIST_COMPLETE },
{ name: '이체요청', value: FundAccountStatus.TRANSFER_REQUEST },
{ name: '요청성공', value: FundAccountStatus.REQUEST_SUCCESS },
{ name: '요청실패', value: FundAccountStatus.REQUEST_FAIL }
];
export const FundAccountResultStatusBtnGroup = [
{ name: '전체', value: FundAccountResultStatus.ALL },
{ name: '요청', value: FundAccountResultStatus.REQUEST },
{ name: '성공', value: FundAccountResultStatus.SUCCESS },
{ name: '실패', value: FundAccountResultStatus.FAIL },
]
export const getFundAccountStatusName = (status?: string): string => {
if (!status) return '';
const found = FundAccountStatusBtnGroup.find(item => item.value === status);
return found ? found.name : status;
};
export const FundAccountResultTypeBtnGroup = [
{name: '요청일자', value: FundAccountResultType.RequestDate},
{name: '이체일자', value: FundAccountResultType.ProcessDate}
export const getFundAccountResultStatusName = (status?: string): string => {
if (!status) return '';
const found = FundAccountResultStatusBtnGroup.find(item => item.value === status);
return found ? found.name : status;
}
export const FundAccountResultSearchDateTypeBtnGroup = [
{ name: '요청일자', value: FundAccountSearchDateType.REQUEST_DATE },
{ name: '이체일자', value: FundAccountSearchDateType.APPLICATION_DATE }
];
export const FundAccountReceiveAccountNameNoOptionsGroup = [
{name: '수취인', value: FundAccountReceiveAccountNameNo.ReceiveAccountName },
{name: '계좌번호', value: FundAccountReceiveAccountNameNo.ReceiveAccountNo },
{ name: '수취인', value: FundAccountReceiveAccountNameNo.ReceiveAccountName },
{ name: '계좌번호', value: FundAccountReceiveAccountNameNo.ReceiveAccountNo },
];
export const FundAccountReceiveBankCodeOptionsGroup = [
{name: 'KB', value: 'KB'}
{ name: 'KB', value: 'KB' }
];

View File

@@ -4,10 +4,15 @@ export enum FundAccountTabKeys {
TransferList = 'TransferList',
ResultList = 'ResultList'
};
export enum FundAccountResultType {
RequestDate = 'RequestDate',
ProcessDate = 'ProcessDate',
export enum FundAccountSearchDateType {
REQUEST_DATE = 'REQUEST_DATE',
APPLICATION_DATE = 'APPLICATION_DATE'
};
export interface FundAccountTabProps {
activeTab: FundAccountTabKeys;
};
@@ -43,6 +48,13 @@ export enum FundAccountStatus {
REQUEST_SUCCESS = 'REQUEST_SUCCESS',
REQUEST_FAIL = 'REQUEST_FAIL'
};
export enum FundAccountResultStatus {
ALL = '',
REQUEST = 'REQUEST',
SUCCESS = 'SUCCESS',
FAIL = 'FAIL'
}
export interface ExtensionFundAccountTransferListParams {
mid: string;
searchCl: string;
@@ -76,11 +88,13 @@ export interface FundAccountTransferContentItem {
};
export interface ExtensionFundAccountTransferExcelParams {
mid: string;
email: string;
fromDate: string;
toDate: string;
status: FundAccountStatus;
};
export interface ExtensionFundAccountTransferExcelResponse {};
export interface ExtensionFundAccountTransferExcelResponse {
status: boolean;
};
export interface ExtensionFundAccountTransferDetailParams {
mid: string;
tid: string;
@@ -100,25 +114,27 @@ export interface ExtensionFundAccountTransferDetailResponse {
};
export interface ExtensionFundAccountResultSummaryParams {
mid: string;
fromDate: string;
toDate: string;
};
}
export interface ExtensionFundAccountResultSummaryResponse {
totalCount: number;
totalAmount: number;
successCount: number;
successAmount: number;
failCount: number;
failAmount: number;
pendingCount: number;
pendingAmount: number;
totalRequestCount: number;
totalRequestAmount: number;
totalSuccessCount: number;
totalSuccessAmount: number;
totalFailCount: number;
totalFailAmount: number;
};
// 자금이체_결과조회 Request
export interface ExtensionFundAccountResultListParams {
mid?: string;
searchCl?: string;
searchValue?: string;
searchDateType?: FundAccountSearchDateType;
fromDate?: string;
toDate?: string;
status?: FundAccountStatus;
pagination?: DefaultRequestPagination;
bankCode?: string;
resultStatus?: FundAccountResultStatus;
page?: DefaultRequestPagination;
};
export interface ExtensionFundAccountResultListResponse extends DefaulResponsePagination {
content: Array<FundAccountResultContent>;
@@ -129,40 +145,41 @@ export interface FundAccountResultContent {
};
export interface FundAccountResultContentItem {
tid?: string;
mid?: string;
requestDate?: string;
transferAmount?: number;
receiveBankName?: string;
receiveAccountNo?: string;
receiveAccountName?: string;
status?: string;
processDate?: string;
failReason?: string;
applicationDate?: string;
accountName?: string;
accountNo?: string;
amount?: number;
resultStatus?: string;
resultMessage?: string;
};
export interface ExtensionFundAccountResultExcelParams {
mid: string;
email: string;
searchDateType: FundAccountSearchDateType
fromDate: string;
toDate: string;
status: FundAccountStatus;
};
export interface ExtensionFundAccountResultExcelResponse {};
export interface ExtensionFundAccountResultExcelResponse {
status: boolean;
};
export interface ExtensionFundAccountResultDetailParams {
mid: string;
tid: string;
};
export interface ExtensionFundAccountResultDetailResponse {
tid: string;
requestDate: string;
transferAmount: number;
receiveBankName: string;
receiveAccountNo: string;
receiveAccountName: string;
status: FundAccountStatus;
processDate: string;
mid: string;
moid: string;
amount: number;
accountName: string;
accountNo: string;
applicationDate: string;
requsetDate: string;
resultMessage: string;
failReason: string;
fee: number;
afterBalance: number;
transferMemo: string;
bankTid: string;
bankCode: string;
};
export interface ExtensionFundAccountBalanceParams {
mid: string;

View File

@@ -1,12 +1,12 @@
import { useEffect, useState } from 'react';
import { FundAccountReceiveAccountNameNo, FundAccountResultType, FundAccountStatus } from '../../model/fund-account/types';
import { FundAccountReceiveAccountNameNo, FundAccountResultStatus, FundAccountSearchCl, FundAccountSearchDateType } from '../../model/fund-account/types';
import moment from 'moment';
import { motion } from 'framer-motion';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { FilterSelect } from '@/shared/ui/filter/select';
import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FundAccountReceiveAccountNameNoOptionsGroup, FundAccountReceiveBankCodeOptionsGroup, FundAccountResultTypeBtnGroup, FundAccountStatusBtnGroup } from '../../model/fund-account/constant';
import { FundAccountReceiveAccountNameNoOptionsGroup, FundAccountReceiveBankCodeOptionsGroup, FundAccountResultSearchDateTypeBtnGroup, FundAccountStatusBtnGroup } from '../../model/fund-account/constant';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterSelectInput } from '@/shared/ui/filter/select-input';
import { useStore } from '@/shared/model/store';
@@ -15,60 +15,61 @@ export interface FundAccountResultFilterProps {
filterOn: boolean;
setFilterOn: (filterOn: boolean) => void;
mid: string;
receiveAccountName: string;
receiveAccountNo: string;
resultType: FundAccountResultType;
searchCl: FundAccountSearchCl;
searchValue: string;
searchDateType: FundAccountSearchDateType;
fromDate: string;
toDate: string;
receiveBankCode: string;
status: FundAccountStatus;
bankCode: string;
resultStatus: FundAccountResultStatus;
setMid: (mid: string) => void;
setReceiveAccountName: (receiveAccountName: string) => void;
setReceiveAccountNo: (receiveAccountNo: string) => void;
setResultType: (resultType: FundAccountResultType) => void;
setSearchCl: (searchCl: FundAccountSearchCl) => void;
setSearchValue: (searchValue: string) => void;
setSearchDateType: (searchDateType: FundAccountSearchDateType) => void;
setFromDate: (fromDate: string) => void;
setToDate: (toDate: string) => void;
setReceiveBankCode: (receiveBankCode: string) => void;
setStatus: (status: FundAccountStatus) => void;
setBankCode: (bankCode: string) => void;
setResultStatus: (resultStatus: FundAccountResultStatus) => void;
};
export const FundAccountResultFilter = ({
filterOn,
setFilterOn,
mid,
receiveAccountName,
receiveAccountNo,
resultType,
searchCl,
searchValue,
searchDateType,
fromDate,
toDate,
receiveBankCode,
status,
bankCode,
resultStatus,
setMid,
setReceiveAccountName,
setReceiveAccountNo,
setResultType,
setSearchCl,
setSearchValue,
setSearchDateType,
setFromDate,
setToDate,
setReceiveBankCode,
setStatus
setBankCode,
setResultStatus
}: FundAccountResultFilterProps) => {
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterReceiveAccountName, setFilterReceiveAccountName] = useState<string>(receiveAccountName);
const [filterReceiveAccountNo, setFilterReceiveAccountNo] = useState<string>(receiveAccountNo);
const [filterSearchCl, setFilterSearchCl] = useState<FundAccountSearchCl>(searchCl);
const [filterSearchValue, setFilterSearchValue] = useState<string>(searchValue);
const [filterSearchDateType, setFilterSearchDateType] = useState<FundAccountSearchDateType>(searchDateType);
const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYY.MM.DD'));
const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYY.MM.DD'));
const [filterReceiveBankCode, setFilterReceiveBankCode] = useState<string>(receiveBankCode);
const [filterStatus, setFilterStatus] = useState<FundAccountStatus>(status);
const [filterResultType, setFilterResultType] = useState<FundAccountResultType>(resultType);
const [filterBankCode, setFilterBankCode] = useState<string>(bankCode);
const [filterResultStatus, setFilterResultStatus] = useState<FundAccountResultStatus>(resultStatus);
const [
filterReceiveAccountNameNoSelectValue,
setFilterReceiveAccountNameNoSelectValue
] = useState<FundAccountReceiveAccountNameNo>(FundAccountReceiveAccountNameNo.ReceiveAccountName);
const [
filterReceiveAccountNameNoInputValue,
filterReceiveAccountNameNoInputValue,
setFilterReceiveAccountNameNoInputValue
] = useState<string>('');
const midOptions = useStore.getState().UserStore.selectOptionsMids;
const onClickToClose = () => {
@@ -77,48 +78,48 @@ export const FundAccountResultFilter = ({
const onClickToSetFilter = () => {
setMid(filterMid);
if(filterReceiveAccountNameNoSelectValue === FundAccountReceiveAccountNameNo.ReceiveAccountName){
setReceiveAccountName(filterReceiveAccountNameNoInputValue);
setReceiveAccountNo('');
if(filterSearchCl === FundAccountSearchCl.ACCOUNT_NAME){
setSearchCl(filterSearchCl);
setSearchValue(filterSearchValue);
}
else if(filterReceiveAccountNameNoSelectValue === FundAccountReceiveAccountNameNo.ReceiveAccountNo){
setReceiveAccountName('');
setReceiveAccountNo(filterReceiveAccountNameNoInputValue);
else if(filterSearchCl === FundAccountSearchCl.ACCOUNT_NO){
setSearchCl(filterSearchCl);
setSearchValue(filterSearchValue);
}
setResultType(filterResultType);
setSearchDateType(filterSearchDateType);
setFromDate(filterFromDate);
setToDate(filterToDate);
setReceiveBankCode(filterReceiveBankCode);
setStatus(filterStatus);
setBankCode(filterBankCode);
setResultStatus(filterResultStatus);
onClickToClose();
};
useEffect(() => {
setFilterStatus(status);
}, [status]);
setResultStatus(resultStatus);
}, [resultStatus]);
return (
<>
<motion.div
className="full-menu-modal"
<motion.div
className="full-menu-modal"
initial="hidden"
animate={ (filterOn)? 'visible': 'hidden' }
variants={ FilterMotionVariants }
transition={ FilterMotionDuration }
style={ FilterMotionStyle }
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
<button
id="closeFullMenu"
className="full-menu-close"
>
<img
src={ IMAGE_ROOT + '/ico_close.svg' }
<img
src={IMAGE_ROOT + '/ico_close.svg'}
alt="닫기"
onClick={ () => onClickToClose() }
onClick={() => onClickToClose()}
/>
</button>
</div>
@@ -126,48 +127,48 @@ export const FundAccountResultFilter = ({
<div className="option-list pt-16">
<FilterSelect
title='가맹점'
selectValue={ filterMid }
selectSetter={ setFilterMid }
selectOptions={ midOptions }
selectValue={filterMid}
selectSetter={setFilterMid}
selectOptions={midOptions}
></FilterSelect>
<FilterSelectInput
title='수취인/계좌번호'
selectValue={ filterReceiveAccountNameNoSelectValue }
selectSetter={ setFilterReceiveAccountNameNoSelectValue }
selectOptions={ FundAccountReceiveAccountNameNoOptionsGroup }
inputValue={ filterReceiveAccountNameNoInputValue }
inputSetter={ setFilterReceiveAccountNameNoInputValue }
selectValue={filterReceiveAccountNameNoSelectValue}
selectSetter={setFilterReceiveAccountNameNoSelectValue}
selectOptions={FundAccountReceiveAccountNameNoOptionsGroup}
inputValue={filterReceiveAccountNameNoInputValue}
inputSetter={setFilterReceiveAccountNameNoInputValue}
></FilterSelectInput>
<FilterButtonGroups
title='조회 기준'
activeValue={ filterResultType }
btnGroups={ FundAccountResultTypeBtnGroup }
setter={ setFilterResultType }
activeValue={filterSearchDateType}
btnGroups={FundAccountResultSearchDateTypeBtnGroup}
setter={setFilterSearchDateType}
></FilterButtonGroups>
<FilterCalendar
title='조회기간'
startDate={ filterFromDate }
endDate={ filterToDate }
setStartDate={ setFilterFromDate }
setEndDate={ setFilterToDate }
startDate={filterFromDate}
endDate={filterToDate}
setStartDate={setFilterFromDate}
setEndDate={setFilterToDate}
></FilterCalendar>
<FilterSelect
title='은행'
selectValue={ filterReceiveBankCode }
selectSetter={ setFilterReceiveBankCode }
selectOptions={ FundAccountReceiveBankCodeOptionsGroup }
selectValue={filterBankCode}
selectSetter={setFilterBankCode}
selectOptions={FundAccountReceiveBankCodeOptionsGroup}
></FilterSelect>
<FilterButtonGroups
title='처리 결과'
activeValue={ filterStatus }
btnGroups={ FundAccountStatusBtnGroup }
setter={ setFilterStatus }
activeValue={filterResultStatus}
btnGroups={FundAccountStatusBtnGroup}
setter={setFilterResultStatus}
></FilterButtonGroups>
</div>
<div className="apply-row">
<button
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToSetFilter() }
onClick={() => onClickToSetFilter()}
></button>
</div>
</div>

View File

@@ -49,14 +49,8 @@ export const FundAccountTransactionFilter = ({
}: FundAccountTransactionFilterProps) => {
const [filterMid, setFilterMid] = useState<string>(mid);
const [
filterSearchCl,
setFilterSearchCl
] = useState<FundAccountSearchCl>(searchCl);
const [
filterSearchValue,
setFilterSearchValue
] = useState<string>(searchValue);
const [filterSearchCl,setFilterSearchCl] = useState<FundAccountSearchCl>(searchCl);
const [filterSearchValue, setFilterSearchValue] = useState<string>(searchValue);
const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYY.MM.DD'));
const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYY.MM.DD'));
const [filterBankCode, setFilterBankCode] = useState<string>(bankCode);

View File

@@ -2,18 +2,18 @@ import moment from 'moment';
import { SortTypeKeys } from '@/entities/common/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useEffect, useState } from 'react';
import { JSX, useEffect, useState } from 'react';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { ListDateGroup } from '../list-date-group';
import { AdditionalServiceCategory } from '../../model/types';
import { ExtensionFundAccountResultExcelParams, ExtensionFundAccountResultExcelResponse, ExtensionFundAccountResultListParams, ExtensionFundAccountResultListResponse, ExtensionFundAccountResultSummaryParams, ExtensionFundAccountResultSummaryResponse, FundAccountResultContent, FundAccountResultContentItem, FundAccountResultType, FundAccountStatus } from '../../model/fund-account/types';
import { ExtensionFundAccountResultExcelParams, ExtensionFundAccountResultExcelResponse, ExtensionFundAccountResultListParams, ExtensionFundAccountResultListResponse, ExtensionFundAccountResultSummaryParams, ExtensionFundAccountResultSummaryResponse, FundAccountResultContent, FundAccountResultContentItem, FundAccountResultStatus, FundAccountSearchCl, FundAccountSearchDateType, FundAccountStatus } from '../../model/fund-account/types';
import { useExtensionFundAccountResultSummaryMutation } from '../../api/fund-account/use-extension-fund-account-result-summary-mutation';
import { useExtensionFundAccountResultExcelMutation } from '../../api/fund-account/use-extension-fund-account-result-excel-mutation';
import { useExtensionFundAccountResultListMutation } from '../../api/fund-account/use-extension-fund-account-result-list-mutation';
import { PATHS } from '@/shared/constants/paths';
import { NumericFormat } from 'react-number-format';
import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
import { FundAccountStatusBtnGroup } from '../../model/fund-account/constant';
import { FundAccountResultStatusBtnGroup, FundAccountStatusBtnGroup } from '../../model/fund-account/constant';
import { FundAccountResultFilter } from '../filter/fund-account-result-filter';
import { useStore } from '@/shared/model/store';
@@ -22,59 +22,67 @@ export const FundAccountResultListWrap = () => {
const userMid = useStore.getState().UserStore.mid;
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Record<string, Array<FundAccountResultContentItem>>>({});
const [listItems, setListItems] = useState<Array<FundAccountResultContentItem>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
const [mid, setMid] = useState<string>(userMid);
const [receiveAccountName, setReceiveAccountName] = useState<string>('');
const [receiveAccountNo, setReceiveAccountNo] = useState<string>('');
const [resultType, setResultType] = useState<FundAccountResultType>(FundAccountResultType.RequestDate);
const [searchCl, setSearchCl] = useState<FundAccountSearchCl>(FundAccountSearchCl.ACCOUNT_NAME);
const [searchValue, setSearchValue] = useState<string>('');
const [searchDateType, setSearchDateType] = useState<FundAccountSearchDateType>(FundAccountSearchDateType.REQUEST_DATE)
const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
const [status, setStatus] = useState<FundAccountStatus>(FundAccountStatus.REQUEST_FAIL);
const [receiveBankCode, setReceiveBankCode] = useState<string>('');
const [bankCode, setBankCode] = useState<string>('');
const [resultStatus, setResultStatus] = useState<FundAccountResultStatus>(FundAccountResultStatus.ALL);
const [email, setEmail] = useState<string>('');
const [totalRequestCount, setTotalRequestCount] = useState<number>(0);
const [totalRequestAmount, setTotalRequestAmount] = useState<number>(0);
const [totalSuccessCount, setTotalSuccessCount] = useState<number>(0);
const [totalSuccessAmount, setTotalSuccessAmount] = useState<number>(0);
const [totalFailCount, setTotalFailCount] = useState<number>(0);
const [totalFailAmount, setTotalFailAmount] = useState<number>(0);
const [totalCount, setTotalCount] = useState<number>(0);
const [totalAmount, setTotalAmount] = useState<number>(0);
const [successCount, setSuccessCount] = useState<number>(0);
const [successAmount, setSuccessAmount] = useState<number>(0);
const [failCount, setFailCount] = useState<number>(0);
const [failAmount, setFailAmount] = useState<number>(0);
const [pendingCount, setPendingCount] = useState<number>(0);
const [pendingAmount, setPendingAmount] = useState<number>(0);
const { mutateAsync: extensionFundAccountResultList } = useExtensionFundAccountResultListMutation();
const { mutateAsync: extensionFundAccountResultExcel } = useExtensionFundAccountResultExcelMutation();
const { mutateAsync: extensionFundAccountResultSummary } = useExtensionFundAccountResultSummaryMutation();
const callList = (option?: {
sortType?: SortTypeKeys,
val?: string
}) => {
pageParam.sortType = (option?.sortType)? option.sortType: sortType;
sortType?: SortTypeKeys,
resultStatus?: FundAccountResultStatus
}) => {
pageParam.sortType = (option?.sortType) ? option.sortType : sortType;
setPageParam(pageParam);
let params: ExtensionFundAccountResultListParams = {
let listSummaryParams: ExtensionFundAccountResultListParams = {
mid: mid,
fromDate: fromDate,
toDate: toDate,
status: status,
pagination: pageParam
searchCl: searchCl,
searchValue: searchValue,
searchDateType: searchDateType,
fromDate: '20240901',
toDate: '20250930',
bankCode: bankCode,
resultStatus: option?.resultStatus ?? resultStatus,
page: pageParam
};
extensionFundAccountResultList(params).then((rs: ExtensionFundAccountResultListResponse) => {
extensionFundAccountResultList(listSummaryParams).then((rs: any) => {
console.log(rs);
setListItems(assembleData(rs.content));
setListItems(rs.content);
});
};
const callDownloadExcel = () => {
let params: ExtensionFundAccountResultExcelParams = {
mid: mid,
email: email,
searchDateType: searchDateType,
fromDate: fromDate,
toDate: toDate,
status: status,
};
extensionFundAccountResultExcel(params).then((rs: ExtensionFundAccountResultExcelResponse) => {
@@ -82,38 +90,17 @@ export const FundAccountResultListWrap = () => {
};
const callSummary = () => {
let params: ExtensionFundAccountResultSummaryParams = {
mid: mid,
fromDate: fromDate,
toDate: toDate
mid: mid
};
extensionFundAccountResultSummary(params).then((rs: ExtensionFundAccountResultSummaryResponse) => {
console.log(rs);
setTotalCount(rs.totalCount);
setTotalAmount(rs.totalAmount);
setSuccessCount(rs.successCount);
setSuccessAmount(rs.successAmount);
setFailCount(rs.failCount);
setFailAmount(rs.failAmount);
setPendingCount(rs.pendingCount);
setPendingAmount(rs.pendingAmount);
});
};
const assembleData = (content: Array<FundAccountResultContent>) => {
let data: any = {};
if(content && !!content[0] && content.length > 0){
let items: Array<FundAccountResultContentItem> = content[0].items;
for(let i=0;i<items.length;i++){
let groupDate = moment(items[i]?.requestDate).format('YYYYMMDD');
if(!!groupDate && !data.hasOwnProperty(groupDate)){
data[groupDate] = [];
}
if(!!groupDate && data.hasOwnProperty(groupDate)){
data[groupDate].push(items[i]);
}
}
}
return data;
extensionFundAccountResultSummary(params).then((rs: ExtensionFundAccountResultSummaryResponse) => {
setTotalRequestCount(rs.totalRequestCount);
setTotalRequestAmount(rs.totalRequestAmount);
setTotalSuccessCount(rs.totalSuccessCount);
setTotalSuccessAmount(rs.totalSuccessAmount);
setTotalFailCount(rs.totalFailCount);
setTotalFailAmount(rs.totalFailAmount);
});
};
const onClickToDownloadExcel = () => {
@@ -130,27 +117,51 @@ export const FundAccountResultListWrap = () => {
sortType: sort
});
};
const onClickToStatus = (val: FundAccountStatus) => {
setStatus(val);
const onClickToStatus = (val: FundAccountResultStatus) => {
setResultStatus(val);
callList({
val: val
resultStatus: val
});
};
const getListDateGroup = () => {
let rs = [];
if(Object.keys(listItems).length > 0){
for(const [key, value] of Object.entries(listItems)){
rs.push(
<ListDateGroup
additionalServiceCategory={ AdditionalServiceCategory.FundAccountResult }
mid={ mid }
key={ key }
date={ key }
items={ value }
></ListDateGroup>
);
let rs: JSX.Element[] = [];
let date = '';
let list: FundAccountResultContentItem[] = [];
for (let i = 0; i < listItems.length; i++) {
// registDate format: "20211018140420" (YYYYMMDDHHmmss)
let requestDate = listItems[i]?.requestDate || '';
let itemDate = requestDate.substring(0, 8);
if (i === 0) {
date = itemDate;
}
if (date !== itemDate) {
date = itemDate;
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.FundAccountResult}
mid={mid}
key={date + '-' + i}
date={date}
items={list as any}
></ListDateGroup>
);
}
list = [];
}
list.push(listItems[i] as any);
}
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.FundAccountTransfer}
mid={mid}
key={date + '-last'}
date={date}
items={list as any}
></ListDateGroup>
);
}
return rs;
};
@@ -170,30 +181,30 @@ export const FundAccountResultListWrap = () => {
<section className="summary-section pt-30">
<div className="credit-controls">
<div>
<input
<input
className="credit-period"
type="text"
value={ moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD') }
readOnly={ true }
value={moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD')}
readOnly={true}
/>
<button
className="filter-btn"
<button
className="filter-btn"
aria-label="필터"
onClick={ () => onClickToOpenFilter() }
onClick={() => onClickToOpenFilter()}
>
<img
src={ IMAGE_ROOT + '/ico_setting.svg' }
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt="검색옵션"
/>
</button>
</div>
<button
className="download-btn"
<button
className="download-btn"
aria-label="다운로드"
onClick={ () => onClickToDownloadExcel() }
onClick={() => onClickToDownloadExcel()}
>
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
<img
src={IMAGE_ROOT + '/ico_download.svg'}
alt="다운로드"
/>
</button>
@@ -205,7 +216,7 @@ export const FundAccountResultListWrap = () => {
<span className="value">
<span>
<NumericFormat
value={ pendingAmount }
value={totalRequestAmount}
thousandSeparator
displayType="text"
></NumericFormat>
@@ -213,7 +224,7 @@ export const FundAccountResultListWrap = () => {
<span className="unit"> (</span>
<span>
<NumericFormat
value={ pendingCount }
value={totalRequestCount}
thousandSeparator
displayType="text"
></NumericFormat>
@@ -226,7 +237,7 @@ export const FundAccountResultListWrap = () => {
<span className="value">
<span>
<NumericFormat
value={ successAmount }
value={totalSuccessAmount}
thousandSeparator
displayType="text"
></NumericFormat>
@@ -234,7 +245,7 @@ export const FundAccountResultListWrap = () => {
<span className="unit"> (</span>
<span>
<NumericFormat
value={ successCount }
value={totalSuccessCount}
thousandSeparator
displayType="text"
></NumericFormat>
@@ -247,7 +258,7 @@ export const FundAccountResultListWrap = () => {
<span className="value">
<span>
<NumericFormat
value={ failAmount }
value={totalFailAmount}
thousandSeparator
displayType="text"
></NumericFormat>
@@ -255,7 +266,7 @@ export const FundAccountResultListWrap = () => {
<span className="unit"> (</span>
<span>
<NumericFormat
value={ failCount }
value={totalFailCount}
thousandSeparator
displayType="text"
></NumericFormat>
@@ -269,52 +280,52 @@ export const FundAccountResultListWrap = () => {
<section className="filter-section">
<SortTypeBox
sortType={ sortType }
onClickToSort={ onClickToSort }
sortType={sortType}
onClickToSort={onClickToSort}
></SortTypeBox>
<div className="excrow mr-0">
<div className="full-menu-keywords no-padding">
{
FundAccountStatusBtnGroup.map((value, index) => (
<span
key={ `key-service-code=${ index }` }
className={ `keyword-tag ${(status === value.value)? 'active': ''}` }
onClick={ () => onClickToStatus(value.value) }
>{ value.name }</span>
FundAccountResultStatusBtnGroup.map((value, index) => (
<span
key={`key-service-code=${index}`}
className={`keyword-tag ${(resultStatus === value.value) ? 'active' : ''}`}
onClick={() => onClickToStatus(value.value)}
>{value.name}</span>
))
}
</div>
</div>
</div>
</section>
<section className="transaction-list">
{ getListDateGroup() }
{getListDateGroup()}
</section>
<div className="apply-row">
<button
<button
className="btn-50 btn-blue flex-1"
onClick={ onClickToNavigate }
onClick={onClickToNavigate}
> </button>
</div>
<FundAccountResultFilter
filterOn={ filterOn }
setFilterOn={ setFilterOn }
mid={ mid }
receiveAccountName={ receiveAccountName }
receiveAccountNo={ receiveAccountNo }
resultType={ resultType }
fromDate={ fromDate }
toDate={ toDate }
receiveBankCode= { receiveBankCode }
status={ status }
setMid={ setMid }
setReceiveAccountName={ setReceiveAccountName }
setReceiveAccountNo={ setReceiveAccountNo }
setResultType={ setResultType }
setFromDate={ setFromDate }
setToDate={ setToDate }
setReceiveBankCode={ setReceiveBankCode }
setStatus={ setStatus }
filterOn={filterOn}
setFilterOn={setFilterOn}
mid={mid}
searchCl={searchCl}
searchValue={searchValue}
searchDateType={searchDateType}
fromDate={fromDate}
toDate={toDate}
bankCode={bankCode}
resultStatus={resultStatus}
setMid={setMid}
setSearchCl={setSearchCl}
setSearchValue={setSearchValue}
setSearchDateType={setSearchDateType}
setFromDate={setFromDate}
setToDate={setToDate}
setBankCode={setBankCode}
setResultStatus={setResultStatus}
></FundAccountResultFilter>
</>
);

View File

@@ -43,6 +43,7 @@ export const FundAccountTransferListWrap = () => {
const [status, setStatus] = useState<FundAccountStatus>(FundAccountStatus.ALL);
const [bankCode, setBankCode] = useState<string>('');
const [email, setEmail] = useState<string>('');
const [balance, setBalance] = useState<number>(0);
const { mutateAsync: extensionFundAccountTransferList } = useExtensionFundAccountTransferListMutation();
@@ -78,12 +79,12 @@ export const FundAccountTransferListWrap = () => {
const callDownloadExcel = () => {
let params: ExtensionFundAccountTransferExcelParams = {
mid: mid,
email: email,
fromDate: fromDate,
toDate: toDate,
status: status,
};
extensionFundAccountTransferExcel(params).then((rs: ExtensionFundAccountTransferExcelResponse) => {
});
};

View File

@@ -5,9 +5,9 @@ import { ListItem } from '../ui/list-item';
export const ListDateGroup = ({
additionalServiceCategory,
mid,
date,
items,
mid,
onResendClick
}: ListDateGroupProps) => {
moment.locale('ko');
@@ -37,6 +37,7 @@ export const ListDateGroup = ({
transferStatus={ items[i]?.transferStatus}
resultStatus={ items[i]?.resultStatus }
resultMessage={ items[i]?.resultMessage }
applicationDate={ items[i]?.applicationDate }
amount={ items[i]?.amount }
sendDate={ items[i]?.sendDate }
@@ -51,13 +52,6 @@ export const ListDateGroup = ({
disbursementStatus={ items[i]?.disbursementStatus }
disbursementAmount={ items[i]?.disbursementAmount }
transferAmount={ items[i]?.transferAmount }
receiveBankName={ items[i]?.receiveBankName }
receiveAccountNo={ items[i]?.receiveAccountNo }
receiveAccountName={ items[i]?.receiveAccountName }
status={ items[i]?.status }
processDate={ items[i]?.processDate }
orderStatus={ items[i]?.orderStatus }
arsPaymentMethod={ items[i]?.arsPaymentMethod }

View File

@@ -3,27 +3,22 @@ import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { ListItemProps, AdditionalServiceCategory } from '../model/types';
import { getPaymentStatusText, getProcessStatusText, getSendMethodText } from '../lib/payment-status-utils';
import { getFundAccountStatusName } from '../model/fund-account/constant';
import { getFundAccountResultStatusName, getFundAccountStatusName } from '../model/fund-account/constant';
import moment from 'moment';
import { FundAccountResultStatus } from '../model/fund-account/types';
export const ListItem = ({
additionalServiceCategory,
mid, tid, paymentDate, paymentStatus,
requestDate, bankName, accountNo, resultStatus,resultMessage,
amount, sendDate, sendStatus, sendMethod,
scheduledSendDate, processStatus,
registDate,
applicationDate, requestDate, bankName, accountNo, resultStatus, resultMessage,
amount, sendMethod, processStatus,registDate,
accountName, transferStatus,
submallId, settlementDate, companyName,
disbursementStatus, disbursementAmount,
transferAmount, receiveBankName,
receiveAccountNo, receiveAccountName,
status, processDate,
orderStatus, arsPaymentMethod,
alimCl, sendType, sendCl,
@@ -127,9 +122,9 @@ export const ListItem = ({
rs = 'gray';
}
} else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
if (status === "REQUEST_SUCCESS" || status === "REGIST_COMPLETE") {
if (resultStatus === "REQUEST" || resultStatus === "SUCCESS") {
rs = 'blue';
} else if (status === "REQUEST_FAIL") {
} else if (resultStatus === "FAIL") {
rs = 'gray';
}
}
@@ -261,7 +256,9 @@ export const ListItem = ({
}
}
else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
timeStr = moment(requestDate).format('mm:ss');
if (applicationDate && applicationDate.length >= 12) {
timeStr = applicationDate.substring(8, 10) + ':' + applicationDate.substring(10, 12);
}
}
else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
let time = paymentDate?.substring(8, 12);
@@ -283,7 +280,7 @@ export const ListItem = ({
statusText = getFundAccountStatusName(resultStatus);
}
else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
statusText = getFundAccountStatusName(status);
statusText = getFundAccountResultStatusName(resultStatus);
}
else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
statusText = resultStatus || '';
@@ -326,12 +323,11 @@ export const ListItem = ({
else if (additionalServiceCategory === AdditionalServiceCategory.Payout) {
str = companyName;
}
else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer ||
additionalServiceCategory === AdditionalServiceCategory.FundAccountResult
) {
str = `${accountName}(${accountNo})`;
}
else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
str = `${receiveAccountName}(${receiveAccountNo})`;
}
else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
str = `${paymentDate}(${paymentStatus})[추후 수정 필요]`
}
@@ -444,7 +440,9 @@ export const ListItem = ({
<div className="transaction-details">
<span>{getTime()}</span>
<span className="separator">|</span>
<span>{status}</span>
<span>{getStatus()}</span>
<span className="separator">|</span>
<span>{mid}</span>
</div>
);
}
@@ -548,7 +546,9 @@ export const ListItem = ({
</div>
);
}
else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer) {
else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer ||
additionalServiceCategory === AdditionalServiceCategory.FundAccountResult
) {
rs.push(
<div
key="fund-account-transfer-amount"
@@ -563,21 +563,6 @@ export const ListItem = ({
</div>
);
}
else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
rs.push(
<div
key="payout-item-amount"
className="transaction-amount"
>
<NumericFormat
value={transferAmount}
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
</div>
);
}
else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
rs.push(
<div
@@ -604,9 +589,9 @@ export const ListItem = ({
else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment && onResendClick && tid) {
rs.push(
<div
key="sms-payment-amount"
className={`status-label success`}
onClick={() => mid && tid && onResendClick(mid, tid)}
key="sms-payment-amount"
className={`status-label success`}
onClick={() => mid && tid && onResendClick(mid, tid)}
>{'재발송'}</div>
)
}

View File

@@ -1,18 +1,18 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
import {
useSetHeaderTitle,
useSetHeaderType,
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { useLocation } from 'react-router';
import { useEffect, useState } from 'react';
import { NumericFormat } from 'react-number-format';
import {
ExtensionFundAccountResultDetailParams,
ExtensionFundAccountResultDetailResponse,
import {
ExtensionFundAccountResultDetailParams,
ExtensionFundAccountResultDetailResponse,
} from '@/entities/additional-service/model/fund-account/types';
import moment from 'moment';
import { useExtensionFundAccountResultDetailMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-result-detail-mutation';
@@ -27,11 +27,11 @@ export const FundAccountResultDetailPage = () => {
const [detail, setDetail] = useState<ExtensionFundAccountResultDetailResponse>();
const { mutateAsync: extensionFundAccountResultDetail } = useExtensionFundAccountResultDetailMutation();
const callDetail = () => {
let params: ExtensionFundAccountResultDetailParams = {
tid: tid,
mid: mid,
tid: tid,
};
extensionFundAccountResultDetail(params).then((rs: ExtensionFundAccountResultDetailResponse) => {
@@ -59,59 +59,68 @@ export const FundAccountResultDetailPage = () => {
<div className="num-amount">
<span className="amount">
<NumericFormat
value={ detail?.transferAmount }
value={detail?.amount}
thousandSeparator
displayType="text"
suffix='원'
></NumericFormat>
</span>
</div>
<div className="num-store">{ detail?.receiveAccountName }({ detail?.receiveAccountNo })</div>
<div className="num-day">{ moment(detail?.processDate).format('YYYY.MM.DD') }</div>
<div className="num-store">{detail?.accountName}({detail?.accountNo})</div>
<div className="num-day"> {moment(detail?.applicationDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss')}</div>
</div>
{/* ✅ resultMessage가 "정상"일 때만 표시 */}
{detail?.resultMessage === '정상' && (
<div className="receipt-row">
<button type="button" className="receipt-btn">
<span className="icon-24 download"></span>
<span></span>
</button>
</div>
)}
<div className="detail-divider"></div>
<div className="pay-detail">
<div className="detail-title"> </div>
<ul className="kv-list">
<li className="kv-row">
<span className="k"></span>
<span className="v">{ moment(detail?.processDate).format('YYYY.MM.DD') }</span>
<span className="v">{moment(detail?.requsetDate).format('YYYY.MM.DD HH:mm:ss')}</span>
</li>
<li className="kv-row">
<span className="k"></span>
<span className="v">{ moment(detail?.requestDate).format('YYYY.MM.DD') }</span>
<span className="v">{moment(detail?.applicationDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss')}</span>
</li>
<li className="kv-row">
<span className="k"></span>
<span className="v">{ detail?.status }</span>
<span className="v">{detail?.resultMessage}</span>
</li>
<li className="kv-row">
<span className="k"></span>
<span className="v">{ detail?.failReason }</span>
<span className="v">{detail?.failReason}</span>
</li>
<li className="kv-row">
<span className="k"></span>
<span className="v">{ detail?.receiveAccountName }</span>
<span className="v">{detail?.accountName}</span>
</li>
<li className="kv-row">
<span className="k"></span>
<span className="v">{ detail?.receiveBankName }</span>
<span className="v">{detail?.bankCode}</span>
</li>
<li className="kv-row">
<span className="k"></span>
<span className="v">{ detail?.receiveAccountNo }</span>
<span className="v">{detail?.accountNo}</span>
</li>
<li className="kv-row">
<span className="k">MID</span>
<span className="v">{ mid }</span>
<span className="v">{mid}</span>
</li>
<li className="kv-row">
<span className="k"></span>
<span className="v">{ '주문번호' }</span>
<span className="v">{detail?.moid}</span>
</li>
<li className="kv-row">
<span className="k">TID</span>
<span className="v">{ detail?.bankTid }</span>
<span className="v">{detail?.tid}</span>
</li>
</ul>
</div>

View File

@@ -35,7 +35,6 @@ export const FundAccountTransferDetailPage = () => {
};
extensionFundAccountTransferDetail(params).then((rs: ExtensionFundAccountTransferDetailResponse) => {
console.log("FundAccountTransferDetail : " + rs.registDate)
setDetail(rs);
});
};