- 부가서비스: 계좌 성명조회 상세정보 목업 데이터 API 연동
This commit is contained in:
HyeonJongKim
@@ -0,0 +1,52 @@
|
||||
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 {
|
||||
DetailResponse,
|
||||
TitleInfo,
|
||||
ExtensionAccountHolderSearchDetailParams,
|
||||
ExtensionAccountHolderSearchDetailResponse,
|
||||
DetailInfo
|
||||
} from '../model/types';
|
||||
import {
|
||||
useMutation,
|
||||
UseMutationOptions
|
||||
} from '@tanstack/react-query';
|
||||
|
||||
export const extensionAccountHolderSearchDetail = async (params: ExtensionAccountHolderSearchDetailParams): Promise<DetailResponse> => {
|
||||
const response = await resultify(
|
||||
axios.post<ExtensionAccountHolderSearchDetailResponse>(API_URL_ADDITIONAL_SERVICE.extensionAccountHolderSearchDetail(), params),
|
||||
);
|
||||
|
||||
// ExtensionAccountHolderSearchDetailResponse를 DetailResponse로 변환
|
||||
const detailResponse: DetailResponse = {
|
||||
titleInfo: {
|
||||
accountNo: response.accountNo,
|
||||
bankName: response.bankName,
|
||||
requestDate: response.requestDate
|
||||
} as TitleInfo,
|
||||
detailInfo: {
|
||||
accountName: response.accountName,
|
||||
requestDate: response.requestDate,
|
||||
resultStatus: response.resultStatus,
|
||||
failureReason: response.failReason,
|
||||
bankName: response.bankName,
|
||||
accountNo: response.accountNo,
|
||||
requestWay: response.requestWay
|
||||
} as DetailInfo
|
||||
|
||||
};
|
||||
|
||||
return detailResponse;
|
||||
};
|
||||
|
||||
export const useExtensionAccountHolderSearchDetailMutation = (options?: UseMutationOptions<DetailResponse, CBDCAxiosError, ExtensionAccountHolderSearchDetailParams>) => {
|
||||
const mutation = useMutation<DetailResponse, CBDCAxiosError, ExtensionAccountHolderSearchDetailParams>({
|
||||
...options,
|
||||
mutationFn: (params: ExtensionAccountHolderSearchDetailParams) => extensionAccountHolderSearchDetail(params),
|
||||
});
|
||||
return {
|
||||
...mutation,
|
||||
};
|
||||
}
|
||||
@@ -30,6 +30,35 @@ export enum AdditionalServiceCategory {
|
||||
SettlementAgency = 'SettlementAgency',
|
||||
}
|
||||
|
||||
// ========================================
|
||||
// 상세정보 Interface
|
||||
// ========================================
|
||||
|
||||
export interface TitleInfo {
|
||||
accountNo?: string,
|
||||
bankName?: string,
|
||||
requestDate?: string
|
||||
}
|
||||
|
||||
export interface DetailInfo {
|
||||
accountName?: string; // 예금주
|
||||
requestDate?: string; // 조회 일시
|
||||
resultStatus?: string; // 결과
|
||||
bankName?: string; // 은행 명
|
||||
failureReason?: string; // 실패사유
|
||||
accountNo?: string; // 계좌번호
|
||||
requestWay?: string; //요청 구분
|
||||
}
|
||||
|
||||
// 상세정보 Info Enum
|
||||
export enum InfoWrapKeys {
|
||||
Title = 'Title',
|
||||
Transaction = 'Transaction',
|
||||
Payment = 'Payment',
|
||||
Detail = 'Detail'
|
||||
};
|
||||
|
||||
|
||||
// ========================================
|
||||
// 공통 Filter 타입들
|
||||
// ========================================
|
||||
@@ -95,7 +124,6 @@ export interface AccountHolderSearchListItem {
|
||||
}
|
||||
|
||||
export interface AccountHolderSearchListProps {
|
||||
additionalServiceCategory: AdditionalServiceCategory;
|
||||
listItems: Record<string, Array<ListItemProps>>;
|
||||
mid: string;
|
||||
}
|
||||
@@ -224,26 +252,20 @@ export interface LinkPaymentPendingSendFilterProps extends FilterProps {
|
||||
}
|
||||
|
||||
export enum DetailInfoSectionKeys {
|
||||
Title = 'Title',
|
||||
Detail = 'Detail',
|
||||
Payment = 'Payment',
|
||||
Deets = 'Deets'
|
||||
}
|
||||
|
||||
export interface DetailPaymentInfoProps {
|
||||
|
||||
}
|
||||
|
||||
export interface DetailDeetsInfoProps {
|
||||
|
||||
}
|
||||
|
||||
export interface DetailResponse {
|
||||
paymentInfo?: DetailPaymentInfoProps
|
||||
deetsInfo?: DetailDeetsInfoProps
|
||||
titleInfo?: TitleInfo //최상단 섹션
|
||||
detailInfo?: DetailInfo // '상세 정보' 섹션
|
||||
}
|
||||
|
||||
export interface DetailInfoSectionProps extends DetailResponse {
|
||||
additionalServiceCategory?: AdditionalServiceCategory
|
||||
show?: boolean;
|
||||
tid?: string;
|
||||
onClickToShowInfo?: (info: DetailInfoSectionKeys) => void;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
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'
|
||||
import { AccountHolderSearchListProps, AdditionalServiceCategory } from '../../model/types'
|
||||
|
||||
export const AccountHolderSearchList = ({
|
||||
additionalServiceCategory,
|
||||
listItems,
|
||||
mid
|
||||
}: AccountHolderSearchListProps) => {
|
||||
@@ -15,7 +14,7 @@ export const AccountHolderSearchList = ({
|
||||
for (const [key, value] of Object.entries(listItems)) {
|
||||
rs.push(
|
||||
<ListDateGroup
|
||||
additionalServiceCategory={additionalServiceCategory}
|
||||
additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
|
||||
key={key}
|
||||
date={key}
|
||||
items={value}
|
||||
|
||||
@@ -0,0 +1,47 @@
|
||||
import moment from 'moment';
|
||||
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
|
||||
import { DetailInfoSectionProps } from '../../model/types';
|
||||
import { SlideDown } from 'react-slidedown';
|
||||
import 'react-slidedown/lib/slidedown.css';
|
||||
|
||||
export const DetailInfoWrap = ({
|
||||
additionalServiceCategory,
|
||||
detailInfo
|
||||
}: DetailInfoSectionProps) => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="detail-title">상세 정보</div>
|
||||
<ul className="kv-list">
|
||||
<li className="kv-row">
|
||||
<span className="k">예금주</span>
|
||||
<span className="v">{detailInfo?.accountName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">조회 일시</span>
|
||||
<span className="v">{detailInfo?.requestDate}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">결과</span>
|
||||
<span className="v">{detailInfo?.resultStatus}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">실패사유</span>
|
||||
<span className="v">{detailInfo?.failureReason}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">은행</span>
|
||||
<span className="v">{detailInfo?.bankName}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">계좌번호</span>
|
||||
<span className="v">{detailInfo?.accountNo}</span>
|
||||
</li>
|
||||
<li className="kv-row">
|
||||
<span className="k">요청 구분</span>
|
||||
<span className="v">{detailInfo?.requestWay}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</>
|
||||
)
|
||||
};
|
||||
@@ -0,0 +1,46 @@
|
||||
import moment from 'moment';
|
||||
import { motion } from 'framer-motion';
|
||||
import { NumericFormat } from 'react-number-format';
|
||||
import { AdditionalServiceCategory, DetailInfoSectionKeys } from '../../model/types';
|
||||
import { DetailInfoSectionProps } from '../../model/types';
|
||||
|
||||
export const TitleInfoWrap = ({
|
||||
additionalServiceCategory,
|
||||
titleInfo,
|
||||
onClickToShowInfo
|
||||
}: DetailInfoSectionProps) => {
|
||||
|
||||
const variants = {
|
||||
hidden: { height: 0, padding: 0, margin: 0, display: 'none' },
|
||||
visible: { height: 'auto', padding: '16px', margin: '10px 0', display: 'block' },
|
||||
};
|
||||
|
||||
const onClickToSetShowInfo = () => {
|
||||
if (!!onClickToShowInfo) {
|
||||
onClickToShowInfo(DetailInfoSectionKeys.Title);
|
||||
}
|
||||
};
|
||||
|
||||
let newTitleInfo: Record<string, any> | undefined = titleInfo;
|
||||
console.log("NewTitleInfo Check: ", newTitleInfo)
|
||||
|
||||
const onClickToDownloadConfirmation = () => {
|
||||
|
||||
};
|
||||
|
||||
|
||||
|
||||
return (
|
||||
<>
|
||||
{additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch&& (
|
||||
<>
|
||||
<div className="num-amount">
|
||||
<span className="amount">{titleInfo?.accountNo}</span>
|
||||
</div>
|
||||
<div className="num-store">{titleInfo?.bankName}</div>
|
||||
<div className="num-day">{titleInfo?.requestDate}</div>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -24,6 +24,7 @@ export const ListDateGroup = ({
|
||||
<ListItem
|
||||
additionalServiceCategory={ additionalServiceCategory }
|
||||
key={ key }
|
||||
mid={ mid }
|
||||
tid={ items[i]?.tid }
|
||||
paymentDate= { items[i]?.paymentDate}
|
||||
paymentStatus={ items[i]?.paymentStatus}
|
||||
|
||||
@@ -68,6 +68,7 @@ export const ListItem = ({
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
|
||||
navigate(PATHS.additionalService.accountHolderSearch.detail, {
|
||||
state: {
|
||||
additionalServiceCategory: additionalServiceCategory,
|
||||
mid: mid,
|
||||
tid: tid
|
||||
}
|
||||
@@ -76,6 +77,7 @@ export const ListItem = ({
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentShipping) {
|
||||
navigate(PATHS.additionalService.linkPayment.detail, {
|
||||
state: {
|
||||
additionalServiceCategory: additionalServiceCategory,
|
||||
mid: mid,
|
||||
tid: tid
|
||||
}
|
||||
@@ -84,6 +86,7 @@ export const ListItem = ({
|
||||
else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentPending) {
|
||||
navigate(PATHS.additionalService.linkPayment.detail, {
|
||||
state: {
|
||||
additionalServiceCategory: additionalServiceCategory,
|
||||
mid: mid,
|
||||
tid: tid
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user