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

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -13,39 +13,19 @@ import {
} from '@tanstack/react-query';
import { ExtensionAccountHolderSearchDetailParams, ExtensionAccountHolderSearchDetailResponse } from '../../model/account-holder-search/types';
export const extensionAccountHolderSearchDetail = async (params: ExtensionAccountHolderSearchDetailParams): Promise<DetailResponse> => {
const response = await resultify(
axios.post<ExtensionAccountHolderSearchDetailResponse>(API_URL_ADDITIONAL_SERVICE.extensionAccountHolderSearchDetail(), params),
export const extensionAccountHolderSearchDetail = (params: ExtensionAccountHolderSearchDetailParams) => {
return resultify(
axios.post<ExtensionAccountHolderSearchDetailResponse>(API_URL_ADDITIONAL_SERVICE.extensionAccountHolderSearchList(), 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>({
export const useExtensionAccountHolderSearchDetailtMutation = (options?: UseMutationOptions<ExtensionAccountHolderSearchDetailResponse, CBDCAxiosError, ExtensionAccountHolderSearchDetailParams>) => {
const mutation = useMutation<ExtensionAccountHolderSearchDetailResponse, CBDCAxiosError, ExtensionAccountHolderSearchDetailParams>({
...options,
mutationFn: (params: ExtensionAccountHolderSearchDetailParams) => extensionAccountHolderSearchDetail(params),
});
return {
...mutation,
};
}
};

20
src/entities/additional-service/model/account-holder-search/constant.ts
View File

@@ -1,9 +1,25 @@
import { ProcessResult } from "../types";
import { AccountHolderResultStatus } from "./types";
import { AccountHolderResultStatus, AccountHolderSearchCl } from "./types";
export const resultStatusBtnGroup = [
{ name: '전체', value: AccountHolderResultStatus.ALL },
{ name: '성공', value: AccountHolderResultStatus.SUCCESS },
{ name: '실패', value: AccountHolderResultStatus.FAIL },
]
]
export const SearchTypeOption = [
{ name: '예금주', value: AccountHolderSearchCl.ACCOUNT_NAME },
{ name: '계좌번호', value: AccountHolderSearchCl.ACCOUNT_NO },
];
export const getAccountHolderStatusText = (status?: string): string => {
if (!status) return '';
const resultStatusMap: Record<string, string> = {
'SUCCESS': '성공',
'FAIL': '실패'
};
return resultStatusMap[status] || status;
}

3
src/entities/additional-service/ui/account-holder-auth/account-holder-auth-list.tsx
View File

@@ -23,7 +23,7 @@ export const AccountHolderAuthList = ({
date = requestDate;
}
if (date !== requestDate) {
date = requestDate;
if (list.length > 0) {
rs.push(
<ListDateGroup
@@ -34,6 +34,7 @@ export const AccountHolderAuthList = ({
></ListDateGroup>
);
}
date = requestDate;
list = [];
}
list.push(items);

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

@@ -12,33 +12,35 @@ export const AccountHolderSearchList = ({
const { navigate } = useNavigate();
const getListDateGroup = () => {
let rs: JSX.Element[] = [];
let rs = [];
let date = '';
let list: AccountHolderSearchListItem[] = [];
let list = [];
for (let i = 0; i < listItems.length; i++) {
// requestDate format: "20211018140420" (YYYYMMDDHHmmss)
let requestDate = listItems[i]?.requestDate || '';
let itemDate = requestDate.substring(0, 8);
if (i === 0) {
date = itemDate;
}
if (date !== itemDate) {
// 날짜가 바뀌면 이전 리스트를 푸시 (날짜 업데이트 전에!)
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
mid={mid}
key={date + '-' + i}
date={date}
items={list as any}
></ListDateGroup>
);
let items = listItems[i];
if (!!items) {
let requestDate = items?.requestDate;
requestDate = requestDate?.substring(0, 8);
if (!!requestDate) {
if (i === 0) {
date = requestDate;
}
if (date !== requestDate) {
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
key={date + '-' + i}
date={date}
items={list}
></ListDateGroup>
);
}
date = requestDate;
list = [];
}
list.push(items);
}
date = itemDate; // 그 다음에 날짜 업데이트
list = [];
}
list.push(listItems[i] as any);
}
if (list.length > 0) {
rs.push(
@@ -47,13 +49,14 @@ export const AccountHolderSearchList = ({
mid={mid}
key={date + '-last'}
date={date}
items={list as any}
items={list}
></ListDateGroup>
);
}
return rs;
};
const onClickToNavigate = () => {
navigate(PATHS.additionalService.accountHolderSearch.request)
};

49
src/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter.tsx
View File

@@ -13,6 +13,7 @@ import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
import { useStore } from '@/shared/model/store';
import { AccountHolderSearchFilterProps, AccountHolderSearchCl, AccountHolderResultStatus } from '@/entities/additional-service/model/account-holder-search/types';
import { resultStatusBtnGroup, SearchTypeOption } from '@/entities/additional-service/model/account-holder-search/constant';
export const AccountHolderSearchFilter = ({
filterOn,
@@ -42,6 +43,10 @@ export const AccountHolderSearchFilter = ({
const [filterResultStatus, setFilterResultStatus] = useState<AccountHolderResultStatus>(resultStatus);
const midOptions = useStore.getState().UserStore.selectOptionsMids;
const bankList = useStore.getState().CommonStore.bankList;
const bankOptions = bankList
.filter((bank) => bank.code1 !== '****')
.map((bank) => ({ name: bank.desc1, value: bank.code1 }));
const onClickToClose = () => {
setFilterOn(false);
@@ -61,22 +66,8 @@ export const AccountHolderSearchFilter = ({
setResultStatus(filterResultStatus);
onClickToClose();
};
let bankOptions = [
{ name: '우리은행', value: '우리은행' },
{ name: '토스뱅킹', value: '토스뱅킹' }
];
let searchTypeOption = [
{ name: '예금주', value: AccountHolderSearchCl.ACCOUNT_NAME },
{ name: '계좌번호', value: AccountHolderSearchCl.ACCOUNT_NO },
];
let processResultBtnGroup = [
{ name: '전체', value: ProcessResult.ALL },
{ name: '성공', value: ProcessResult.SUCCESS },
{ name: '실패', value: ProcessResult.FAIL },
];
return (
<>
@@ -84,17 +75,17 @@ export const AccountHolderSearchFilter = ({
className="full-menu-modal"
initial="hidden"
animate={(filterOn) ? 'visible' : 'hidden'}
variants={ FilterMotionVariants }
transition={ FilterMotionDuration }
style={ FilterMotionStyle }
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"
id="closeFullMenu"
className="full-menu-close"
>
<img
src={IMAGE_ROOT + '/ico_close.svg'}
@@ -108,18 +99,18 @@ export const AccountHolderSearchFilter = ({
<div className="option-list pt-16">
<FilterSelect
title='가맹점'
selectValue={mid}
selectSetter={setMid}
selectValue={filterMid}
selectSetter={setFilterMid}
selectOptions={midOptions}
></FilterSelect>
<FilterSelectInput
title='예금주/계좌번호'
selectValue={searchType}
selectSetter={setSearchType}
selectOptions={searchTypeOption}
inputValue={searchKeyword}
inputSetter={setSearchKeyword}
selectValue={filterSearchType}
selectSetter={setFilterSearchType}
selectOptions={SearchTypeOption}
inputValue={filterSearchKeyword}
inputSetter={setFilterSearchKeyword}
></FilterSelectInput>
<FilterCalendar
startDate={filterStartDate}
@@ -130,15 +121,15 @@ export const AccountHolderSearchFilter = ({
<FilterSelect
title='은행'
selectValue={bank}
selectSetter={setBank}
selectValue={filterBank}
selectSetter={setFilterBank}
selectOptions={bankOptions}
></FilterSelect>
<FilterButtonGroups
title='조회결과'
activeValue={filterResultStatus}
btnGroups={processResultBtnGroup}
btnGroups={resultStatusBtnGroup}
setter={setFilterResultStatus}
></FilterButtonGroups>
</div>

67
src/pages/additional-service/account-holder-search/detail-page.tsx
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>

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

@@ -15,7 +15,8 @@ import { useStore } from '@/shared/model/store';
export const AccountHolderSearchRequestPage = () => {
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid
const midOptions = useStore.getState().UserStore.selectOptionsMids
const bankList = useStore.getState().CommonStore.bankList
useSetHeaderTitle('계좌성명조회_신청');
useSetHeaderType(HeaderType.LeftArrow);
@@ -27,7 +28,7 @@ export const AccountHolderSearchRequestPage = () => {
const { mutateAsync: accountHolderSearchRequest } = useExtensionAccountHolderSearchRequestMutation();
const [formData, setFormData] = useState({
mid: userMid,
mid: '',
bankCode: '',
accountNo: ''
})
@@ -39,22 +40,30 @@ export const AccountHolderSearchRequestPage = () => {
const onClickToRequest = () => {
const reuqestParams: ExtensionAccountHolderSearchRequestParams = {
mid: formData.mid,
bankCode: formData.bankCode, // 추후 진짜 은행코드 삽입 필요
bankCode: formData.bankCode,
accountNo: formData.accountNo
}
console.log("계좌성명 조회 조회신청 요청 파라미터 : ", reuqestParams);
accountHolderSearchRequest(reuqestParams)
.then((response) => {
console.log("계좌성명 조회 조회 신청 성공 응답: ", response.status)
navigate(PATHS.additionalService.accountHolderSearch.list);
})
.catch((error) => {
console.error("계좌성명 조회 조회 신청 실패: ", error)
})
.then((response) => {
console.log("계좌성명 조회 조회 신청 성공 응답: ", response.status)
navigate(PATHS.additionalService.accountHolderSearch.list);
})
.catch((error) => {
console.error("계좌성명 조회 조회 신청 실패: ", error)
})
};
const isFormValid = () => {
return (
formData.mid.trim() !== '' &&
formData.bankCode.trim() !== '' &&
formData.accountNo.trim() !== ''
)
}
return (
<>
<main>
@@ -65,12 +74,15 @@ export const AccountHolderSearchRequestPage = () => {
<div className="billing-row">
<div className="billing-label">가맹점</div>
<div className="billing-field">
<select
className="wid-100"
value={formData.mid}
onChange={(e) => handleInputChange('mid', e.target.value)}
>
<option>nictest00m</option>
<select value={formData.mid} onChange={(e) => handleInputChange('mid', e.target.value)}>
{
midOptions.map((value) => (
<option
key={value.value}
value={value.value}
>{value.name}</option>
))
}
</select>
</div>
</div>
@@ -78,13 +90,18 @@ export const AccountHolderSearchRequestPage = () => {
<div className="billing-row">
<div className="billing-label">은행</div>
<div className="billing-field">
<select
className="wid-100"
value={formData.bankCode}
onChange={(e) => handleInputChange('bankCode', e.target.value)}
>
<option>우리은행</option>
<option>카카오뱅크</option>
<select value={formData.bankCode} onChange={(e) => handleInputChange('bankCode', e.target.value)}>
<option value="">선택하세요</option>
{
bankList
.filter((bank) => bank.code1 !== '****')
.map((bank) => (
<option
key={bank.code1}
value={bank.code1}
>{bank.desc1}</option>
))
}
</select>
</div>
</div>
@@ -93,10 +110,10 @@ export const AccountHolderSearchRequestPage = () => {
<div className="billing-label">계좌번호</div>
<div className="billing-field">
<input
type="number"
placeholder=''
value={formData.accountNo}
onChange={(e) => handleInputChange('accountNo', e.target.value)}
type="number"
placeholder=''
value={formData.accountNo}
onChange={(e) => handleInputChange('accountNo', e.target.value)}
></input>
</div>
</div>
@@ -105,6 +122,7 @@ export const AccountHolderSearchRequestPage = () => {
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
disabled={!isFormValid()}
onClick={() => onClickToRequest()}
>신청</button>
</div>