- 계좌성명조회 페이지 수정

This commit is contained in:
HyeonJongKim
2025-10-23 20:28:19 +09:00
parent fdd565a0de
commit 583cb3a2df
7 changed files with 168 additions and 128 deletions

View File

@@ -9,12 +9,13 @@ import {
useSetFooterMode,
useSetOnBack
} from '@/widgets/sub-layout/use-sub-layout';
import { useExtensionAccountHolderSearchDetailMutation } from '@/entities/additional-service/api/account-holder-search/use-extension-account-holder-search-detail-mutation';
import { AdditionalServiceCategory, DetailInfo, DetailResponse, 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';
import { ExtensionAccountHolderSearchDetailParams } from '@/entities/additional-service/model/account-holder-search/types';
import { ExtensionAccountHolderSearchDetailParams, ExtensionAccountHolderSearchDetailResponse } from '@/entities/additional-service/model/account-holder-search/types';
import { useExtensionAccountHolderSearchDetailtMutation } from '@/entities/additional-service/api/account-holder-search/use-extension-account-holder-search-detail-mutation';
import { getAccountHolderStatusText } from '@/entities/additional-service/model/account-holder-search/constant';
export const AccountHolderSearchDetailPage = () => {
const { navigate } = useNavigate();
@@ -22,8 +23,7 @@ export const AccountHolderSearchDetailPage = () => {
const { mid, tid } = location.state || {};
const [titleInfo, setTitleInfo] = useState<TitleInfo>();
const [detailInfo, setDetailInfo] = useState<DetailInfo>();
const [detail, setDetail] = useState<ExtensionAccountHolderSearchDetailResponse>();
useSetHeaderTitle('계좌성명조회 상세');
useSetHeaderType(HeaderType.LeftArrow);
@@ -32,19 +32,22 @@ export const AccountHolderSearchDetailPage = () => {
navigate(PATHS.additionalService.accountHolderSearch.list);
});
const { mutateAsync: accountHolderSearchDetail } = useExtensionAccountHolderSearchDetailMutation();
const { mutateAsync: accountHolderSearchDetail } = useExtensionAccountHolderSearchDetailtMutation();
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);
accountHolderSearchDetail(accountHolderSearchDetailParams).then((rs: ExtensionAccountHolderSearchDetailResponse) => {
setDetail(rs);
});
};
const getDate = (date?: string) => {
return (date) ? moment(date, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : '';
};
useEffect(() => {
callDetail();
}, []);
@@ -54,17 +57,45 @@ export const AccountHolderSearchDetailPage = () => {
<div className="tab-content">
<div className="tab-pane sub active">
<div className="pay-top">
<TitleInfoWrap
additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
titleInfo={titleInfo}
></TitleInfoWrap>
<div className="num-amount">
<span className="amount">{detail?.accountNo}</span>
</div>
<span className="num-day">{detail?.bankName}</span>
<div className="num-day">{getDate(detail?.requestDate)}</div>
</div>
<div className="detail-divider"></div>
<div className="pay-detail">
<div className="detail-divider"></div>
<DetailInfoWrap
additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
detailInfo={detailInfo}
></DetailInfoWrap>
<div className="detail-title"> </div>
<ul className="kv-list">
<li className="kv-row">
<span className="k"></span>
<span className="v">{detail?.accountName}</span>
</li>
<li className="kv-row">
<span className="k"> </span>
<span className="v">{detail?.requestDate}</span>
</li>
<li className="kv-row">
<span className="k"></span>
<span className="v">{getAccountHolderStatusText(detail?.resultStatus)}</span>
</li>
<li className="kv-row">
<span className="k"></span>
<span className="v">{detail?.failReason}</span>
</li>
<li className="kv-row">
<span className="k"></span>
<span className="v">{detail?.bankName}</span>
</li>
<li className="kv-row">
<span className="k"></span>
<span className="v">{detail?.accountNo}</span>
</li>
<li className="kv-row">
<span className="k"> </span>
<span className="v">{detail?.requestWay}</span>
</li>
</ul>
</div>
</div>
</div>