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

- 부가서비스: 계좌 성명조회 상세정보 목업 데이터 API 연동

Browse Source
This commit is contained in:
HyeonJongKim
2025-09-18 16:01:58 +09:00
parent 9ba7bdd3e4
commit 3c542851dd
10 changed files with 225 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/entities/additional-service/api/use-extension-account-holder-search-detail-mutation.ts Normal file
View File

@@ -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,
};
}

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

@@ -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;
}

5
src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx
View File

@@ -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}

47
src/entities/additional-service/ui/info-wrap/detail-info-wrap.tsx Normal file
View File

@@ -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>
</>
)
};

46
src/entities/additional-service/ui/info-wrap/title-info-wrap.tsx Normal file
View File

@@ -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>
</>
)}
</>
);
};

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

@@ -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}

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

@@ -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
}

1
src/pages/additional-service/account-holder-search/account-holder-search-page.tsx
View File

@@ -179,7 +179,6 @@ export const AccountHolderSearchPage = () => {
</div>
</div>
<AccountHolderSearchList
additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
listItems={listItems}
mid={mid}
></AccountHolderSearchList>

79
src/pages/additional-service/account-holder-search/detail-page.tsx
View File

@@ -1,7 +1,7 @@
import { useState } from 'react';
import moment from 'moment';
import { useEffect, useState } from 'react';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
@@ -9,9 +9,20 @@ import {
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { useExtensionAccountHolderSearchDetailMutation } from '@/entities/additional-service/api/use-extension-account-holder-search-detail-mutation';
import { AdditionalServiceCategory, DetailInfo, DetailResponse, ExtensionAccountHolderSearchDetailParams, ExtensionAccountHolderSearchDetailResponse, ProcessResult, TitleInfo } from '@/entities/additional-service/model/types';
import { TitleInfoWrap } from '@/entities/additional-service/ui/info-wrap/title-info-wrap';
import { useLocation } from 'react-router';
import { DetailInfoWrap } from '@/entities/additional-service/ui/info-wrap/detail-info-wrap';
export const AccountHolderSearchDetailPage = () => {
const { navigate } = useNavigate();
const location = useLocation();
const { mid, tid } = location.state || {};
const [titleInfo, setTitleInfo] = useState<TitleInfo>();
const [detailInfo, setDetailInfo] = useState<DetailInfo>();
useSetHeaderTitle('계좌성명조회 상세');
useSetHeaderType(HeaderType.LeftArrow);
@@ -20,51 +31,39 @@ export const AccountHolderSearchDetailPage = () => {
navigate(PATHS.additionalService.accountHolderSearch.list);
});
const { mutateAsync: accountHolderSearchDetail } = useExtensionAccountHolderSearchDetailMutation();
const callDetail = () => {
let accountHolderSearchDetailParams: ExtensionAccountHolderSearchDetailParams = {
mid: mid,
tid: tid
}
accountHolderSearchDetail(accountHolderSearchDetailParams).then((rs: DetailResponse) => {
console.log("Detail Info: ", rs)
setTitleInfo(rs.titleInfo);
setDetailInfo(rs.detailInfo);
});
};
useEffect(() => {
callDetail();
}, []);
return (
<>
<main className="full-height">
<main>
<div className="tab-content">
<div className="tab-pane sub active">
<div className="pay-top">
<div className="num-amount">
<span className="amount">10002464******</span>
<TitleInfoWrap
additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
titleInfo={titleInfo}
></TitleInfoWrap>
</div>
<div className="num-store">기업은행</div>
<div className="num-day">2025.09.12 16:12:37</div>
</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">&nbsp;</span>
</li>
<li className="kv-row">
<span className="k">조회 일시</span>
<span className="v">2025.09.12 16:12:37</span>
</li>
<li className="kv-row">
<span className="k">결과</span>
<span className="v">실패</span>
</li>
<li className="kv-row">
<span className="k">실패사유</span>
<span className="v">기관미개시</span>
</li>
<li className="kv-row">
<span className="k">은행</span>
<span className="v">기업은행</span>
</li>
<li className="kv-row">
<span className="k">계좌번호</span>
<span className="v">1002464642587</span>
</li>
<li className="kv-row">
<span className="k">요청구분</span>
<span className="v">API</span>
</li>
</ul>
<div className="detail-divider"></div>
<DetailInfoWrap
additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
detailInfo={detailInfo}
></DetailInfoWrap>
</div>
</div>
</div>

1
src/pages/additional-service/link-payment/link-payment-detail-page.tsx
View File

@@ -4,7 +4,6 @@ import { useLocation } from 'react-router';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { DetailPaymentInfoSection } from '@/entities/additional-service/ui/link-payment/detail/detail-payment-info-section';
import { HeaderType } from '@/entities/common/model/types';
import { DetailInfoSectionProps } from '@/entities/additional-service/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import {
useSetOnBack,