- 부가서비스 : 계좌성명조회 목업 API 연결
- 부가서비스 Types 정리
This commit is contained in:
@@ -0,0 +1,26 @@
|
|||||||
|
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 { ExtensionAccountHolderSearchDownloadExcelParams, ExtensionAccountHolderSearchDownloadExcelResponse } from '../model/types';
|
||||||
|
import {
|
||||||
|
useMutation,
|
||||||
|
UseMutationOptions
|
||||||
|
} from '@tanstack/react-query';
|
||||||
|
|
||||||
|
export const extensionAccountHolderSearchDownloadExcel = (params: ExtensionAccountHolderSearchDownloadExcelParams) => {
|
||||||
|
return resultify(
|
||||||
|
axios.post<ExtensionAccountHolderSearchDownloadExcelResponse>(API_URL_ADDITIONAL_SERVICE.extensionKeyinDownloadExcel(), params),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useExtensionAccountHolderSearchDownloadExcelMutation = (options?: UseMutationOptions<ExtensionAccountHolderSearchDownloadExcelResponse, CBDCAxiosError, ExtensionAccountHolderSearchDownloadExcelParams>) => {
|
||||||
|
const mutation = useMutation<ExtensionAccountHolderSearchDownloadExcelResponse, CBDCAxiosError, ExtensionAccountHolderSearchDownloadExcelParams>({
|
||||||
|
...options,
|
||||||
|
mutationFn: (params: ExtensionAccountHolderSearchDownloadExcelParams) => extensionAccountHolderSearchDownloadExcel(params),
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
...mutation,
|
||||||
|
};
|
||||||
|
};
|
||||||
@@ -0,0 +1,28 @@
|
|||||||
|
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 {
|
||||||
|
ExtensionAccountHolderSearchListParams,
|
||||||
|
ExtensionAccountHolderSearchListResponse,
|
||||||
|
} from '../model/types';
|
||||||
|
import {
|
||||||
|
useMutation,
|
||||||
|
UseMutationOptions
|
||||||
|
} from '@tanstack/react-query';
|
||||||
|
|
||||||
|
export const extensionAccountHolderSearchList = (params: ExtensionAccountHolderSearchListParams) => {
|
||||||
|
return resultify(
|
||||||
|
axios.post<ExtensionAccountHolderSearchListResponse>(API_URL_ADDITIONAL_SERVICE.extensionAccountHolderSearchList(), params),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const useExtensionAccountHolderSearchListMutation = (options?: UseMutationOptions<ExtensionAccountHolderSearchListResponse, CBDCAxiosError, ExtensionAccountHolderSearchListParams>) => {
|
||||||
|
const mutation = useMutation<ExtensionAccountHolderSearchListResponse, CBDCAxiosError, ExtensionAccountHolderSearchListParams>({
|
||||||
|
...options,
|
||||||
|
mutationFn: (params: ExtensionAccountHolderSearchListParams) => extensionAccountHolderSearchList(params),
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
...mutation,
|
||||||
|
};
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,46 @@
|
|||||||
|
import { PATHS } from '@/shared/constants/paths';
|
||||||
|
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||||
|
import { ListDateGroup } from '../list-date-group';
|
||||||
|
import { AccountHolderSearchListProps } from '../../model/types'
|
||||||
|
|
||||||
|
export const AccountHolderSearchList = ({
|
||||||
|
additionalServiceCategory,
|
||||||
|
listItems,
|
||||||
|
mid
|
||||||
|
}: AccountHolderSearchListProps) => {
|
||||||
|
const { navigate } = useNavigate();
|
||||||
|
|
||||||
|
const getListDateGroup = () => {
|
||||||
|
let rs = [];
|
||||||
|
for (const [key, value] of Object.entries(listItems)) {
|
||||||
|
rs.push(
|
||||||
|
<ListDateGroup
|
||||||
|
additionalServiceCategory={additionalServiceCategory}
|
||||||
|
key={key}
|
||||||
|
date={key}
|
||||||
|
items={value}
|
||||||
|
mid={mid}
|
||||||
|
></ListDateGroup>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return rs;
|
||||||
|
};
|
||||||
|
|
||||||
|
const onClickToNavigate = () => {
|
||||||
|
navigate(PATHS.additionalService.accountHolderSearch.request)
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className="transaction-list">
|
||||||
|
{getListDateGroup()}
|
||||||
|
<div className="apply-row">
|
||||||
|
<button
|
||||||
|
className="btn-50 btn-blue flex-1"
|
||||||
|
onClick={() => onClickToNavigate()}
|
||||||
|
>조회 신청</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -7,7 +7,7 @@ import {
|
|||||||
AccountHolderSearchType,
|
AccountHolderSearchType,
|
||||||
AccountHolderSearchFilterProps,
|
AccountHolderSearchFilterProps,
|
||||||
ProcessResult
|
ProcessResult
|
||||||
} from '../../model/types';
|
} from '../../../model/types';
|
||||||
import { FilterSelect } from '@/shared/ui/filter/select';
|
import { FilterSelect } from '@/shared/ui/filter/select';
|
||||||
import { FilterSelectInput } from '@/shared/ui/filter/select-input';
|
import { FilterSelectInput } from '@/shared/ui/filter/select-input';
|
||||||
import { FilterDateOptions } from '@/entities/common/model/types';
|
import { FilterDateOptions } from '@/entities/common/model/types';
|
||||||
@@ -66,6 +66,7 @@ export const AccountHolderSearchFilter = ({
|
|||||||
setEndDate(filterEndDate);
|
setEndDate(filterEndDate);
|
||||||
setBank(filterBank);
|
setBank(filterBank);
|
||||||
setProcessResult(filterProcessResult);
|
setProcessResult(filterProcessResult);
|
||||||
|
onClickToClose();
|
||||||
};
|
};
|
||||||
|
|
||||||
let MidOptions = [
|
let MidOptions = [
|
||||||
@@ -74,19 +75,19 @@ export const AccountHolderSearchFilter = ({
|
|||||||
];
|
];
|
||||||
|
|
||||||
let bankOptions = [
|
let bankOptions = [
|
||||||
{ name: '우리은행', value: '우리은행'},
|
{ name: '우리은행', value: '우리은행' },
|
||||||
{ name: '토스뱅킹', value: '토스뱅킹'}
|
{ name: '토스뱅킹', value: '토스뱅킹' }
|
||||||
]
|
]
|
||||||
|
|
||||||
let searchTypeOption = [
|
let searchTypeOption = [
|
||||||
{ name: '예금주', value: AccountHolderSearchType.ACCOUNT_HOLDER },
|
{ name: '예금주', value: AccountHolderSearchType.ACCOUNT_NAME },
|
||||||
{ name: '계좌번호', value: AccountHolderSearchType.ACCOUNT_NUMBER },
|
{ name: '계좌번호', value: AccountHolderSearchType.ACCOUNT_NO },
|
||||||
]
|
]
|
||||||
|
|
||||||
let processResultBtnGroup = [
|
let processResultBtnGroup = [
|
||||||
{ name: '전체', value: ProcessResult.ALL },
|
{ name: '전체', value: ProcessResult.ALL },
|
||||||
{ name: '성공', value: ProcessResult.SUCCESS },
|
{ name: '성공', value: ProcessResult.SUCCESS },
|
||||||
{ name: '실패', value: ProcessResult.FAILURE },
|
{ name: '실패', value: ProcessResult.FAIL },
|
||||||
];
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
@@ -6,7 +6,7 @@ import { ListDateGroup } from '../list-date-group';
|
|||||||
export const KeyInPaymentList = ({
|
export const KeyInPaymentList = ({
|
||||||
additionalServiceCategory,
|
additionalServiceCategory,
|
||||||
listItems
|
listItems
|
||||||
}: KeyInPaymentListProps ) => {
|
}: KeyInPaymentListProps) => {
|
||||||
const { navigate } = useNavigate();
|
const { navigate } = useNavigate();
|
||||||
|
|
||||||
const getListDateGroup = () => {
|
const getListDateGroup = () => {
|
||||||
@@ -14,10 +14,10 @@ export const KeyInPaymentList = ({
|
|||||||
for (const [key, value] of Object.entries(listItems)) {
|
for (const [key, value] of Object.entries(listItems)) {
|
||||||
rs.push(
|
rs.push(
|
||||||
<ListDateGroup
|
<ListDateGroup
|
||||||
additionalServiceCategory ={ additionalServiceCategory }
|
additionalServiceCategory={additionalServiceCategory}
|
||||||
key={ key }
|
key={key}
|
||||||
date={ key }
|
date={key}
|
||||||
items={ value }
|
items={value}
|
||||||
></ListDateGroup>
|
></ListDateGroup>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -31,11 +31,11 @@ export const KeyInPaymentList = ({
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="transaction-list">
|
<div className="transaction-list">
|
||||||
{ getListDateGroup() }
|
{getListDateGroup()}
|
||||||
<div className="apply-row">
|
<div className="apply-row">
|
||||||
<button
|
<button
|
||||||
className="btn-50 btn-blue flex-1"
|
className="btn-50 btn-blue flex-1"
|
||||||
onClick={ () => onClickToNavigate() }
|
onClick={() => onClickToNavigate()}
|
||||||
>결제 신청</button>
|
>결제 신청</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -98,7 +98,7 @@ export const LinkPaymentShippingHistoryFilter = ({
|
|||||||
let processResultOption = [
|
let processResultOption = [
|
||||||
{ name: '전체', value: ProcessResult.ALL },
|
{ name: '전체', value: ProcessResult.ALL },
|
||||||
{ name: '성공', value: ProcessResult.SUCCESS },
|
{ name: '성공', value: ProcessResult.SUCCESS },
|
||||||
{ name: '실패', value: ProcessResult.FAILURE },
|
{ name: '실패', value: ProcessResult.FAIL },
|
||||||
]
|
]
|
||||||
|
|
||||||
let sendMethodOption = [
|
let sendMethodOption = [
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ import { LinkPaymentSearchType, } from "../../model/types";
|
|||||||
const processResultBtnGroup = [
|
const processResultBtnGroup = [
|
||||||
{ name: '전체', value: ProcessResult.ALL },
|
{ name: '전체', value: ProcessResult.ALL },
|
||||||
{ name: '성공', value: ProcessResult.SUCCESS },
|
{ name: '성공', value: ProcessResult.SUCCESS },
|
||||||
{ name: '실패', value: ProcessResult.FAILURE }
|
{ name: '실패', value: ProcessResult.FAIL }
|
||||||
]
|
]
|
||||||
|
|
||||||
export const LinkPaymentShippingHistoryWrap = () => {
|
export const LinkPaymentShippingHistoryWrap = () => {
|
||||||
|
|||||||
@@ -6,7 +6,8 @@ import { ListItem } from '../ui/list-item';
|
|||||||
export const ListDateGroup = ({
|
export const ListDateGroup = ({
|
||||||
additionalServiceCategory,
|
additionalServiceCategory,
|
||||||
date,
|
date,
|
||||||
items
|
items,
|
||||||
|
mid
|
||||||
}: ListDateGroupProps) => {
|
}: ListDateGroupProps) => {
|
||||||
moment.locale('ko');
|
moment.locale('ko');
|
||||||
const getStateDate = () => {
|
const getStateDate = () => {
|
||||||
@@ -27,12 +28,10 @@ export const ListDateGroup = ({
|
|||||||
paymentDate= { items[i]?.paymentDate}
|
paymentDate= { items[i]?.paymentDate}
|
||||||
paymentStatus={ items[i]?.paymentStatus}
|
paymentStatus={ items[i]?.paymentStatus}
|
||||||
|
|
||||||
requestId={ items[i]?.requestId }
|
|
||||||
requestDate={ items[i]?.requestDate }
|
requestDate={ items[i]?.requestDate }
|
||||||
bank={ items[i]?.bank }
|
bankName={ items[i]?.bankName}
|
||||||
accountNumber={ items[i]?.accountNumber }
|
accountNo={ items[i]?.accountNo }
|
||||||
accountHolder={ items[i]?.accountHolder }
|
resultStatus={ items[i]?.resultStatus }
|
||||||
processResult={ items[i]?.processResult }
|
|
||||||
|
|
||||||
transactionId={ items[i]?.transactionId }
|
transactionId={ items[i]?.transactionId }
|
||||||
customerName={ items[i]?.customerName }
|
customerName={ items[i]?.customerName }
|
||||||
|
|||||||
@@ -6,10 +6,9 @@ import moment from 'moment';
|
|||||||
|
|
||||||
export const ListItem = ({
|
export const ListItem = ({
|
||||||
additionalServiceCategory,
|
additionalServiceCategory,
|
||||||
tid, paymentDate, paymentStatus,
|
mid, tid, paymentDate, paymentStatus,
|
||||||
|
|
||||||
requestId, requestDate, bank, accountNumber,
|
requestDate, bankName, accountNo, resultStatus,
|
||||||
accountHolder, processResult,
|
|
||||||
|
|
||||||
transactionId, customerName, status, channel,
|
transactionId, customerName, status, channel,
|
||||||
amount, sendDate, transactionDate
|
amount, sendDate, transactionDate
|
||||||
@@ -34,6 +33,7 @@ export const ListItem = ({
|
|||||||
|
|
||||||
const getDotClass = (str?: string) => {
|
const getDotClass = (str?: string) => {
|
||||||
let rs = '';
|
let rs = '';
|
||||||
|
if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
|
||||||
if (paymentStatus === '') {
|
if (paymentStatus === '') {
|
||||||
rs = '';
|
rs = '';
|
||||||
}
|
}
|
||||||
@@ -46,7 +46,18 @@ export const ListItem = ({
|
|||||||
else if (paymentStatus === 'AFTER_CANCEL') {
|
else if (paymentStatus === 'AFTER_CANCEL') {
|
||||||
rs = 'gray';
|
rs = 'gray';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
|
||||||
|
if (resultStatus === "SUCCESS") {
|
||||||
|
rs = 'blue';
|
||||||
|
}
|
||||||
|
else if (resultStatus === "FAIL") {
|
||||||
|
rs = 'gray';
|
||||||
|
}
|
||||||
|
}
|
||||||
return rs;
|
return rs;
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClickToNavigate = () => {
|
const onClickToNavigate = () => {
|
||||||
@@ -57,23 +68,32 @@ export const ListItem = ({
|
|||||||
else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
|
else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
|
||||||
navigate(PATHS.additionalService.accountHolderSearch.detail, {
|
navigate(PATHS.additionalService.accountHolderSearch.detail, {
|
||||||
state: {
|
state: {
|
||||||
requestId: requestId
|
mid: mid,
|
||||||
|
tid: tid
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
|
else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
|
||||||
navigate(PATHS.additionalService.linkPayment.detail, {
|
navigate(PATHS.additionalService.linkPayment.detail, {
|
||||||
state: {
|
state: {
|
||||||
transactionId: transactionId
|
mid: mid,
|
||||||
|
tid: tid
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
|
else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
|
||||||
navigate(PATHS.additionalService.linkPayment.detail, {
|
navigate(PATHS.additionalService.linkPayment.detail, {
|
||||||
state: {
|
state: {
|
||||||
transactionId: transactionId
|
mid: mid,
|
||||||
|
tid: tid
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
}
|
||||||
|
else if (additionalServiceCategory === AdditionalServiceCategory.FundTransfer) {
|
||||||
|
|
||||||
|
}
|
||||||
|
else if (additionalServiceCategory === AdditionalServiceCategory.SettlementAgency) {
|
||||||
|
|
||||||
}
|
}
|
||||||
else {
|
else {
|
||||||
alert('additionalServiceCategory가 존재하지 않습니다.');
|
alert('additionalServiceCategory가 존재하지 않습니다.');
|
||||||
@@ -87,7 +107,8 @@ export const ListItem = ({
|
|||||||
timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
|
timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4);
|
||||||
}
|
}
|
||||||
else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
|
else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
|
||||||
timeStr = moment(requestDate).format('HH:mm');
|
let time = requestDate?.substring(8, 14);
|
||||||
|
timeStr = time?.substring(0, 2) + ':' + time?.substring(2, 4) + ':' + time?.substring(4, 6);
|
||||||
}
|
}
|
||||||
else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
|
else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
|
||||||
timeStr = moment(transactionDate).format('HH:mm');
|
timeStr = moment(transactionDate).format('HH:mm');
|
||||||
@@ -104,7 +125,7 @@ export const ListItem = ({
|
|||||||
str = `${tid}(${amount})`;
|
str = `${tid}(${amount})`;
|
||||||
}
|
}
|
||||||
else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
|
else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
|
||||||
str = `${accountHolder}(${accountNumber})`
|
str = `${accountNo}`
|
||||||
}
|
}
|
||||||
else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
|
else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
|
||||||
str = `${customerName}(${transactionId})`
|
str = `${customerName}(${transactionId})`
|
||||||
@@ -131,9 +152,7 @@ export const ListItem = ({
|
|||||||
<div className="transaction-details">
|
<div className="transaction-details">
|
||||||
<span>{getTime()}</span>
|
<span>{getTime()}</span>
|
||||||
<span className="separator">|</span>
|
<span className="separator">|</span>
|
||||||
<span>{bank}</span>
|
<span>{bankName}</span>
|
||||||
<span className="separator">|</span>
|
|
||||||
<span>{processResult}</span>
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@@ -162,6 +181,30 @@ export const ListItem = ({
|
|||||||
return rs;
|
return rs;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getAmount = () => {
|
||||||
|
let rs: any[] = [];
|
||||||
|
if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
|
||||||
|
rs.push(
|
||||||
|
<div className={`status-label ${resultStatus === 'SUCCESS' ? 'success' : 'fail'}`}>
|
||||||
|
{resultStatus === 'SUCCESS' ? '성공' : '실패'}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
else if (additionalServiceCategory === AdditionalServiceCategory.KeyInPayment) {
|
||||||
|
rs.push(
|
||||||
|
<div className="transaction-amount">
|
||||||
|
<NumericFormat
|
||||||
|
value={amount}
|
||||||
|
thousandSeparator
|
||||||
|
displayType="text"
|
||||||
|
suffix={'원'}
|
||||||
|
></NumericFormat>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return rs;
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div
|
<div
|
||||||
@@ -175,14 +218,7 @@ export const ListItem = ({
|
|||||||
<div className="transaction-title">{getTitle()}</div>
|
<div className="transaction-title">{getTitle()}</div>
|
||||||
{getDetail()}
|
{getDetail()}
|
||||||
</div>
|
</div>
|
||||||
<div className="transaction-amount">
|
{getAmount()}
|
||||||
<NumericFormat
|
|
||||||
value={amount}
|
|
||||||
thousandSeparator
|
|
||||||
displayType="text"
|
|
||||||
suffix={'원'}
|
|
||||||
></NumericFormat>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -5,21 +5,35 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
|||||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||||
import { HeaderType } from '@/entities/common/model/types';
|
import { HeaderType } from '@/entities/common/model/types';
|
||||||
import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
|
import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
|
||||||
import { AccountHolderSearchFilter } from '@/entities/additional-service/ui/account-holder-search/account-holder-search-filter';
|
import { AccountHolderSearchFilter } from '@/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter';
|
||||||
import { ProcessResult, AccountHolderSearchType } from '@/entities/additional-service/model/types';
|
import { ProcessResult, AccountHolderSearchType, SortByKeys, AccountHolderSearchListItem, AdditionalServiceCategory } from '@/entities/additional-service/model/types';
|
||||||
import {
|
import {
|
||||||
useSetHeaderTitle,
|
useSetHeaderTitle,
|
||||||
useSetHeaderType,
|
useSetHeaderType,
|
||||||
useSetFooterMode
|
useSetFooterMode,
|
||||||
|
useSetOnBack
|
||||||
} from '@/widgets/sub-layout/use-sub-layout';
|
} from '@/widgets/sub-layout/use-sub-layout';
|
||||||
|
import { useExtensionAccountHolderSearchListMutation } from '@/entities/additional-service/api/use-extension-account-holder-search-list-mutation';
|
||||||
|
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
|
||||||
|
import { useExtensionAccountHolderSearchDownloadExcelMutation } from '@/entities/additional-service/api/use-extension-account-holder-search-download-excel-mutation';
|
||||||
|
import { SortOptionsBox } from '@/entities/additional-service/ui/sort-options-box';
|
||||||
|
import { AccountHolderSearchList } from '@/entities/additional-service/ui/account-holder-search/account-holder-search-list';
|
||||||
|
|
||||||
|
const resultStatusBtnGroup = [
|
||||||
|
{ name: '전체', value: ProcessResult.ALL },
|
||||||
|
{ name: '성공', value: ProcessResult.SUCCESS },
|
||||||
|
{ name: '실패', value: ProcessResult.FAIL },
|
||||||
|
]
|
||||||
|
|
||||||
export const AccountHolderSearchPage = () => {
|
export const AccountHolderSearchPage = () => {
|
||||||
const { navigate } = useNavigate();
|
const { navigate } = useNavigate();
|
||||||
|
|
||||||
|
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 [filterOn, setFilterOn] = useState<boolean>(false);
|
||||||
const [mid, setMid] = useState<string>('nictest001m');
|
const [mid, setMid] = useState<string>('nictest001m');
|
||||||
const [searchType, setSearchType] = useState<AccountHolderSearchType>(AccountHolderSearchType.ALL)
|
const [searchType, setSearchType] = useState<AccountHolderSearchType>(AccountHolderSearchType.ACCOUNT_NO)
|
||||||
const [searchKeyword, setSearchKeyword] = useState<string>('');
|
const [searchKeyword, setSearchKeyword] = useState<string>('');
|
||||||
const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
|
const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
|
||||||
const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
|
const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
|
||||||
@@ -28,79 +42,86 @@ export const AccountHolderSearchPage = () => {
|
|||||||
|
|
||||||
useSetHeaderTitle('계좌성명조회');
|
useSetHeaderTitle('계좌성명조회');
|
||||||
useSetHeaderType(HeaderType.LeftArrow);
|
useSetHeaderType(HeaderType.LeftArrow);
|
||||||
useSetFooterMode(true);
|
useSetFooterMode(false);
|
||||||
|
useSetOnBack(() => {
|
||||||
|
navigate(PATHS.home);
|
||||||
|
});
|
||||||
|
|
||||||
const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
|
const { mutateAsync: accountHolderSearchList } = useExtensionAccountHolderSearchListMutation();
|
||||||
|
const { mutateAsync: downloadExcel } = useExtensionAccountHolderSearchDownloadExcelMutation();
|
||||||
|
|
||||||
const transactionData = [
|
const callList = (option?: {
|
||||||
{
|
sortBy?: string,
|
||||||
id: '1',
|
val?: string
|
||||||
accountNumber: '10002464******',
|
}) => {
|
||||||
time: '20:00',
|
pageParam.sortBy = (option?.sortBy) ? option.sortBy : sortBy;
|
||||||
bank: '우리은행',
|
setPageParam(pageParam);
|
||||||
status: 'success',
|
let listParams = {
|
||||||
statusColor: 'blue',
|
mid: mid,
|
||||||
className: 'approved'
|
searchCl: searchType,
|
||||||
},
|
searchValue: searchKeyword,
|
||||||
{
|
fromDate: startDate,
|
||||||
id: '2',
|
toDate: endDate,
|
||||||
accountNumber: '10002464******',
|
bankCode: bank,
|
||||||
time: '20:00',
|
resultStatus: processResult
|
||||||
details: '결제완료ㅣ결제성공ㅣ호전환',
|
|
||||||
status: 'success',
|
|
||||||
statusColor: 'gray',
|
|
||||||
className: 'refund'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '3',
|
|
||||||
accountNumber: '10002464******',
|
|
||||||
time: '20:00',
|
|
||||||
details: '결제완료ㅣ결제성공ㅣ호전환',
|
|
||||||
status: 'success',
|
|
||||||
statusColor: 'blue',
|
|
||||||
className: 'approved'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '4',
|
|
||||||
accountNumber: '10002464******',
|
|
||||||
time: '20:00',
|
|
||||||
details: '미결제ㅣ취소완료ㅣSMS',
|
|
||||||
status: 'success',
|
|
||||||
statusColor: 'gray',
|
|
||||||
className: 'refund'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: '5',
|
|
||||||
accountNumber: '10002464******',
|
|
||||||
time: '20:00',
|
|
||||||
details: '미결제ㅣ기간만료ㅣSMS',
|
|
||||||
status: 'fail',
|
|
||||||
statusColor: 'blue',
|
|
||||||
className: 'approved'
|
|
||||||
}
|
}
|
||||||
];
|
|
||||||
|
accountHolderSearchList(listParams).then((rs) => {
|
||||||
|
setListItems(assembleData(rs.content));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
const assembleData = (content: Array<AccountHolderSearchListItem>) => {
|
||||||
|
console.log('rs.content:', content)
|
||||||
|
let data: any = {};
|
||||||
|
if (content && content.length > 0) {
|
||||||
|
for (let i = 0; i < content?.length; i++) {
|
||||||
|
let requestDate = content[i]?.requestDate?.substring(0, 8);
|
||||||
|
let groupDate = moment(requestDate).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 onClickToOpenFilter = () => {
|
const onClickToOpenFilter = () => {
|
||||||
setFilterOn(!filterOn);
|
setFilterOn(!filterOn);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClickToDownloadExcel = () => {
|
const onClickToDownloadExcel = () => {
|
||||||
// tid??? 확인 필요
|
|
||||||
downloadExcel({
|
downloadExcel({
|
||||||
// tid: tid
|
mid: mid,
|
||||||
|
searchCl: searchType,
|
||||||
|
searchValue: searchKeyword,
|
||||||
|
fromDate: startDate,
|
||||||
|
toDate: endDate,
|
||||||
|
bankCode: bank,
|
||||||
|
resultStatus: processResult
|
||||||
}).then((rs) => {
|
}).then((rs) => {
|
||||||
|
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClickToNavigation = () => {
|
const onClickToSort = (sort: SortByKeys) => {
|
||||||
navigate(PATHS.additionalService.accountHolderSearch.request);
|
setSortBy(sort);
|
||||||
|
callList({ sortBy: sort })
|
||||||
};
|
};
|
||||||
|
|
||||||
const onClickToGoDetail = (tid?: string) => {
|
const onClickToTransactionStatus = (val: ProcessResult) => {
|
||||||
navigate(PATHS.additionalService.accountHolderSearch.detail);
|
setProcessResult(val);
|
||||||
|
callList({ val: val });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
callList();
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<main>
|
<main>
|
||||||
@@ -112,7 +133,7 @@ export const AccountHolderSearchPage = () => {
|
|||||||
<input
|
<input
|
||||||
className="credit-period"
|
className="credit-period"
|
||||||
type="text"
|
type="text"
|
||||||
value="2025.06.01 ~ 2025.06.30"
|
value={moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD')}
|
||||||
readOnly={true}
|
readOnly={true}
|
||||||
/>
|
/>
|
||||||
<button
|
<button
|
||||||
@@ -128,64 +149,40 @@ export const AccountHolderSearchPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
className="download-btn"
|
className="download-btn"
|
||||||
aria-label="다운로드"
|
|
||||||
>
|
>
|
||||||
<img
|
<img
|
||||||
src={IMAGE_ROOT + '/ico_download.svg'}
|
src={IMAGE_ROOT + '/ico_download.svg'}
|
||||||
alt="다운로드"
|
alt="다운로드"
|
||||||
|
onClick={() => onClickToDownloadExcel()}
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
<section className="filter-section">
|
<div className="filter-section">
|
||||||
<div className="sort-options">
|
<SortOptionsBox
|
||||||
<button className="sort-btn active">최신순</button>
|
sortBy={sortBy}
|
||||||
<span className="sort-divider">|</span>
|
onClickToSort={onClickToSort}
|
||||||
<button className="sort-btn">고액순</button>
|
></SortOptionsBox>
|
||||||
</div>
|
|
||||||
<div className="excrow">
|
<div className="excrow">
|
||||||
<div className="full-menu-keywords no-padding">
|
<div className="full-menu-keywords no-padding">
|
||||||
<span className="keyword-tag active">전체</span>
|
{
|
||||||
<span className="keyword-tag">성공</span>
|
resultStatusBtnGroup.map((value, index) => (
|
||||||
<span className="keyword-tag">실패</span>
|
<span
|
||||||
|
key={`key-service-code=${index}`}
|
||||||
|
className={`keyword-tag ${(processResult === value.value) ? 'active' : ''}`}
|
||||||
|
onClick={() => onClickToTransactionStatus(value.value)}
|
||||||
|
>{value.name}</span>
|
||||||
|
))
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
|
||||||
|
|
||||||
<section className="transaction-list">
|
|
||||||
<div className="date-group">
|
|
||||||
<div className="date-header">25.06.08(일)</div>
|
|
||||||
{transactionData.map((item) => (
|
|
||||||
<div
|
|
||||||
key={item.id}
|
|
||||||
className={`transaction-item ${item.className}`}
|
|
||||||
onClick={() => onClickToGoDetail(item.id)}
|
|
||||||
>
|
|
||||||
<div className="transaction-status">
|
|
||||||
<div className={`status-dot ${item.statusColor}`}></div>
|
|
||||||
</div>
|
|
||||||
<div className="transaction-content">
|
|
||||||
<div className="transaction-title">{item.accountNumber}</div>
|
|
||||||
<div className="transaction-details">
|
|
||||||
<span>
|
|
||||||
{item.time}ㅣ{item.bank || item.details}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={`status-label ${item.status}`}>
|
|
||||||
{item.status === 'success' ? '성공' : '실패'}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</section>
|
|
||||||
<div className="apply-row">
|
|
||||||
<button
|
|
||||||
className="btn-50 btn-blue flex-1"
|
|
||||||
onClick={() => onClickToNavigation()}
|
|
||||||
>조회 신청</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
<AccountHolderSearchList
|
||||||
|
additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
|
||||||
|
listItems={listItems}
|
||||||
|
mid={mid}
|
||||||
|
></AccountHolderSearchList>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|||||||
@@ -5,6 +5,18 @@ import {
|
|||||||
|
|
||||||
/* Extension Management - 부가서비스 API */
|
/* Extension Management - 부가서비스 API */
|
||||||
export const API_URL_ADDITIONAL_SERVICE = {
|
export const API_URL_ADDITIONAL_SERVICE = {
|
||||||
|
extensionAccountHolderSearchList: () => {
|
||||||
|
// POST: 계좌성명조회 목록 조회
|
||||||
|
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/search-account-name/list`;
|
||||||
|
},
|
||||||
|
extensionAccountHolderSearchDetail: () => {
|
||||||
|
// POST: 계좌성명조회 상세 조회
|
||||||
|
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/search-account-name/detail`;
|
||||||
|
},
|
||||||
|
extensionAccountHolderSearchDownloadExcel: () => {
|
||||||
|
// POST: 계좌성명조회 엑셀 다운
|
||||||
|
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/search-account-name/excel`;
|
||||||
|
},
|
||||||
extensionSmsResend: () => {
|
extensionSmsResend: () => {
|
||||||
// POST: SMS 결제 통보 > SMS 재발송
|
// POST: SMS 결제 통보 > SMS 재발송
|
||||||
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/sms/resend`;
|
return `${API_BASE_URL}/api/v1/${API_URL_KEY}/extension/sms/resend`;
|
||||||
|
|||||||
Reference in New Issue
Block a user