자금이체 결과

This commit is contained in:
focp212@naver.com
2025-09-23 16:12:43 +09:00
parent 9c84991e93
commit e2516951fc
7 changed files with 609 additions and 108 deletions

View File

@@ -0,0 +1,179 @@
import { useEffect, useState } from 'react';
import { FundAccountReceiveAccountNameNo, FundAccountResultType, FundAccountStatus } 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 { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterSelectInput } from '@/shared/ui/filter/select-input';
export interface FundAccountResultFilterProps {
filterOn: boolean;
setFilterOn: (filterOn: boolean) => void;
mid: string;
receiveAccountName: string;
receiveAccountNo: string;
resultType: FundAccountResultType;
fromDate: string;
toDate: string;
receiveBankCode: string;
status: FundAccountStatus;
setMid: (mid: string) => void;
setReceiveAccountName: (receiveAccountName: string) => void;
setReceiveAccountNo: (receiveAccountNo: string) => void;
setResultType: (resultType: FundAccountResultType) => void;
setFromDate: (fromDate: string) => void;
setToDate: (toDate: string) => void;
setReceiveBankCode: (receiveBankCode: string) => void;
setStatus: (status: FundAccountStatus) => void;
};
export const FundAccountResultFilter = ({
filterOn,
setFilterOn,
mid,
receiveAccountName,
receiveAccountNo,
resultType,
fromDate,
toDate,
receiveBankCode,
status,
setMid,
setReceiveAccountName,
setReceiveAccountNo,
setResultType,
setFromDate,
setToDate,
setReceiveBankCode,
setStatus
}: FundAccountResultFilterProps) => {
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterReceiveAccountName, setFilterReceiveAccountName] = useState<string>(receiveAccountName);
const [filterReceiveAccountNo, setFilterReceiveAccountNo] = useState<string>(receiveAccountNo);
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 [
filterReceiveAccountNameNoSelectValue,
setFilterReceiveAccountNameNoSelectValue
] = useState<FundAccountReceiveAccountNameNo>(FundAccountReceiveAccountNameNo.ReceiveAccountName);
const [
filterReceiveAccountNameNoInputValue,
setFilterReceiveAccountNameNoInputValue
] = useState<string>('');
const onClickToClose = () => {
setFilterOn(false);
};
const onClickToSetFilter = () => {
setMid(filterMid);
if(filterReceiveAccountNameNoSelectValue === FundAccountReceiveAccountNameNo.ReceiveAccountName){
setReceiveAccountName(filterReceiveAccountNameNoInputValue);
setReceiveAccountNo('');
}
else if(filterReceiveAccountNameNoSelectValue === FundAccountReceiveAccountNameNo.ReceiveAccountNo){
setReceiveAccountName('');
setReceiveAccountNo(filterReceiveAccountNameNoInputValue);
}
setResultType(filterResultType);
setFromDate(filterFromDate);
setToDate(filterToDate);
setReceiveBankCode(filterReceiveBankCode);
setStatus(filterStatus);
onClickToClose();
};
let MidOptions = [
{name: 'nictest001m', value: 'nictest001m'}
];
useEffect(() => {
setFilterStatus(status);
}, [status]);
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>
<FilterSelectInput
title='수취인/계좌번호'
selectValue={ filterReceiveAccountNameNoSelectValue }
selectSetter={ setFilterReceiveAccountNameNoSelectValue }
selectOptions={ FundAccountReceiveAccountNameNoOptionsGroup }
inputValue={ filterReceiveAccountNameNoInputValue }
inputSetter={ setFilterReceiveAccountNameNoInputValue }
></FilterSelectInput>
<FilterButtonGroups
title='조회 기준'
activeValue={ filterResultType }
btnGroups={ FundAccountResultTypeBtnGroup }
setter={ setFilterResultType }
></FilterButtonGroups>
<FilterCalendar
title='조회기간'
startDate={ filterFromDate }
endDate={ filterToDate }
setStartDate={ setFilterFromDate }
setEndDate={ setFilterToDate }
></FilterCalendar>
<FilterSelect
title='은행'
selectValue={ filterReceiveBankCode }
selectSetter={ setFilterReceiveBankCode }
selectOptions={ FundAccountReceiveBankCodeOptionsGroup }
></FilterSelect>
<FilterButtonGroups
title='처리 결과'
activeValue={ filterStatus }
btnGroups={ FundAccountStatusBtnGroup }
setter={ setFilterStatus }
></FilterButtonGroups>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToSetFilter() }
></button>
</div>
</div>
</motion.div>
</>
);
};

View File

@@ -1,6 +1,163 @@
import { IMAGE_ROOT } from "@/shared/constants/common";
import moment from 'moment';
import { SortByKeys } 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 { 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 { 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 { SortOptionsBox } from '@/entities/common/ui/sort-options-box';
import { FundAccountStatusBtnGroup } from '../../model/fund-account/constant';
import { FundAccountResultFilter } from '../filter/fund-account-result-filter';
export const FundAccountResultListWrap = () => {
const { navigate } = useNavigate();
const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
const [listItems, setListItems] = useState<Record<string, Array<FundAccountResultContentItem>>>({});
const [filterOn, setFilterOn] = useState<boolean>(false);
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
const [mid, setMid] = useState<string>('nictest001m');
const [receiveAccountName, setReceiveAccountName] = useState<string>('');
const [receiveAccountNo, setReceiveAccountNo] = useState<string>('');
const [resultType, setResultType] = useState<FundAccountResultType>(FundAccountResultType.RequestDate);
const [fromDate, setFromDate] = useState(moment().format('YYYYMMDD'));
const [toDate, setToDate] = useState(moment().format('YYYYMMDD'));
const [status, setStatus] = useState<FundAccountStatus>(FundAccountStatus.ALL);
const [receiveBankCode, setReceiveBankCode] = useState<string>('');
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?: {
sortBy?: string,
val?: string
}) => {
pageParam.sortBy = (option?.sortBy)? option.sortBy: sortBy;
setPageParam(pageParam);
let params: ExtensionFundAccountResultListParams = {
mid: mid,
fromDate: fromDate,
toDate: toDate,
status: status,
pagination: pageParam
};
extensionFundAccountResultList(params).then((rs: ExtensionFundAccountResultListResponse) => {
console.log(rs);
setListItems(assembleData(rs.content));
});
};
const callDownloadExcel = () => {
let params: ExtensionFundAccountResultExcelParams = {
mid: mid,
fromDate: fromDate,
toDate: toDate,
status: status,
};
extensionFundAccountResultExcel(params).then((rs: ExtensionFundAccountResultExcelResponse) => {
});
};
const callSummary = () => {
let params: ExtensionFundAccountResultSummaryParams = {
mid: mid,
fromDate: fromDate,
toDate: toDate
};
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;
};
const onClickToDownloadExcel = () => {
callDownloadExcel();
};
const onClickToOpenFilter = () => {
setFilterOn(!filterOn);
};
const onClickToSort = (sort: SortByKeys) => {
setSortBy(sort);
callList({sortBy: sort});
};
const onClickToStatus = (val: FundAccountStatus) => {
setStatus(val);
callList({val: val});
};
const getListDateGroup = () => {
let rs = [];
if(Object.keys(listItems).length > 0){
for (const [key, value] of Object.entries(listItems)) {
rs.push(
<ListDateGroup
additionalServiceCategory={ AdditionalServiceCategory.FundAccount }
mid={ mid }
key={ key }
date={ key }
items={ value }
></ListDateGroup>
);
}
}
return rs;
};
useEffect(() => {
callList();
callSummary();
}, []);
const onClickToNavigate = () => {
navigate(PATHS.additionalService.fundAccount.transferRequest);
};
return (
<>
@@ -8,14 +165,15 @@ export const FundAccountResultListWrap = () => {
<div className="credit-controls">
<div>
<input
type="text"
className="credit-period"
value="2025.06.01 ~ 2025.06.30"
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' }
@@ -26,6 +184,7 @@ export const FundAccountResultListWrap = () => {
<button
className="download-btn"
aria-label="다운로드"
onClick={ () => onClickToDownloadExcel() }
>
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
@@ -33,112 +192,124 @@ export const FundAccountResultListWrap = () => {
/>
</button>
</div>
<div className="account-frame">
<div className="credit-summary">
<div className="row">
<span className="label"></span>
<span className="amount22">2,000,000,000<span className="unit"></span></span>
</div>
</div>
</div>
<div className="summary-extend">
<ul className="summary-amount-list">
<li className="summary-amount-item">
<span className="label">· </span>
<span className="value">0<span className="unit"> (0)</span></span>
<span className="label"></span>
<span className="value">
<span>
<NumericFormat
value={ pendingAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
<span className="unit"> (</span>
<span>
<NumericFormat
value={ pendingCount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
<span>)</span>
</span>
</li>
<li className="summary-amount-item">
<span className="label">· </span>
<span className="value">50,000,000<span className="unit"> (2,587)</span></span>
<span className="label"></span>
<span className="value">
<span>
<NumericFormat
value={ successAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
<span className="unit"> (</span>
<span>
<NumericFormat
value={ successCount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
<span>)</span>
</span>
</li>
<li className="summary-amount-item">
<span className="label">· </span>
<span className="value">534,407<span className="unit"> (21)</span></span>
<span className="label"></span>
<span className="value">
<span>
<NumericFormat
value={ failAmount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
<span className="unit"> (</span>
<span>
<NumericFormat
value={ failCount }
thousandSeparator
displayType="text"
></NumericFormat>
</span>
<span>)</span>
</span>
</li>
</ul>
</div>
</section>
</section>
<section className="filter-section">
<div className="sort-options">
<button className="sort-btn active"></button>
<span className="sort-divider">|</span>
<button className="sort-btn"></button>
</div>
<div className="excrow mr-0">
<div className="full-menu-keywords no-padding">
<span className="keyword-tag active"></span>
<span className="keyword-tag"></span>
<span className="keyword-tag"></span>
<section className="filter-section">
<SortOptionsBox
sortBy={ sortBy }
onClickToSort={ onClickToSort }
></SortOptionsBox>
<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>
))
}
</div>
</div>
</div>
</section>
<section className="transaction-list">
<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>20:00</span>
<span className="separator"></span>
<span></span>
</div>
</div>
<div className="transaction-amount">5,254,000</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">*(7000)</div>
<div className="transaction-details">
<span>20:00</span>
<span className="separator"></span>
<span></span>
</div>
</div>
<div className="transaction-amount">5,254,000</div>
</div>
</section>
<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>20:00</span>
<span className="separator"></span>
<span></span>
</div>
</div>
<div className="transaction-amount">5,254,000</div>
<section className="transaction-list">
{ getListDateGroup() }
</section>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={ onClickToNavigate }
> </button>
</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>20:00</span>
<span className="separator"></span>
<span></span>
</div>
</div>
<div className="transaction-amount">5,254,000</div>
</div>
</section>
<div className="apply-row">
<button className="btn-50 btn-blue flex-1"> </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 }
></FundAccountResultFilter>
</>
);
};

View File

@@ -1,6 +1,6 @@
import { SortByKeys } from '@/entities/common/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useNavigate } from '@/shared/lib/hooks';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useEffect, useState } from 'react';
import {
ExtensionFundAccountBalanceParams,
@@ -210,7 +210,7 @@ export const FundAccountTransferListWrap = () => {
sortBy={ sortBy }
onClickToSort={ onClickToSort }
></SortOptionsBox>
<div className="excrow">
<div className="excrow mr-0">
<div className="full-menu-keywords no-padding">
{
FundAccountStatusBtnGroup.map((value, index) => (