- 부가서비스 : 계좌성명조회 목업 API 연결
- 부가서비스 Types 정리
This commit is contained in:
HyeonJongKim
@@ -5,21 +5,35 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
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 { ProcessResult, AccountHolderSearchType } from '@/entities/additional-service/model/types';
|
||||
import { AccountHolderSearchFilter } from '@/entities/additional-service/ui/account-holder-search/filter/account-holder-search-filter';
|
||||
import { ProcessResult, AccountHolderSearchType, SortByKeys, AccountHolderSearchListItem, AdditionalServiceCategory } from '@/entities/additional-service/model/types';
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode
|
||||
useSetFooterMode,
|
||||
useSetOnBack
|
||||
} 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 = () => {
|
||||
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 [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 [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
|
||||
const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
|
||||
@@ -28,79 +42,86 @@ export const AccountHolderSearchPage = () => {
|
||||
|
||||
useSetHeaderTitle('계좌성명조회');
|
||||
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 = [
|
||||
{
|
||||
id: '1',
|
||||
accountNumber: '10002464******',
|
||||
time: '20:00',
|
||||
bank: '우리은행',
|
||||
status: 'success',
|
||||
statusColor: 'blue',
|
||||
className: 'approved'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
accountNumber: '10002464******',
|
||||
time: '20:00',
|
||||
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'
|
||||
const callList = (option?: {
|
||||
sortBy?: string,
|
||||
val?: string
|
||||
}) => {
|
||||
pageParam.sortBy = (option?.sortBy) ? option.sortBy : sortBy;
|
||||
setPageParam(pageParam);
|
||||
let listParams = {
|
||||
mid: mid,
|
||||
searchCl: searchType,
|
||||
searchValue: searchKeyword,
|
||||
fromDate: startDate,
|
||||
toDate: endDate,
|
||||
bankCode: bank,
|
||||
resultStatus: processResult
|
||||
}
|
||||
];
|
||||
|
||||
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 = () => {
|
||||
setFilterOn(!filterOn);
|
||||
};
|
||||
|
||||
const onClickToDownloadExcel = () => {
|
||||
// tid??? 확인 필요
|
||||
downloadExcel({
|
||||
// tid: tid
|
||||
mid: mid,
|
||||
searchCl: searchType,
|
||||
searchValue: searchKeyword,
|
||||
fromDate: startDate,
|
||||
toDate: endDate,
|
||||
bankCode: bank,
|
||||
resultStatus: processResult
|
||||
}).then((rs) => {
|
||||
|
||||
});
|
||||
};
|
||||
|
||||
const onClickToNavigation = () => {
|
||||
navigate(PATHS.additionalService.accountHolderSearch.request);
|
||||
const onClickToSort = (sort: SortByKeys) => {
|
||||
setSortBy(sort);
|
||||
callList({ sortBy: sort })
|
||||
};
|
||||
|
||||
const onClickToGoDetail = (tid?: string) => {
|
||||
navigate(PATHS.additionalService.accountHolderSearch.detail);
|
||||
const onClickToTransactionStatus = (val: ProcessResult) => {
|
||||
setProcessResult(val);
|
||||
callList({ val: val });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
callList();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
@@ -112,7 +133,7 @@ export const AccountHolderSearchPage = () => {
|
||||
<input
|
||||
className="credit-period"
|
||||
type="text"
|
||||
value="2025.06.01 ~ 2025.06.30"
|
||||
value={moment(startDate).format('YYYY.MM.DD') + '-' + moment(endDate).format('YYYY.MM.DD')}
|
||||
readOnly={true}
|
||||
/>
|
||||
<button
|
||||
@@ -128,64 +149,40 @@ export const AccountHolderSearchPage = () => {
|
||||
</div>
|
||||
<button
|
||||
className="download-btn"
|
||||
aria-label="다운로드"
|
||||
>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_download.svg'}
|
||||
alt="다운로드"
|
||||
onClick={() => onClickToDownloadExcel()}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="filter-section">
|
||||
<div className="sort-options">
|
||||
<button className="sort-btn active">최신순</button>
|
||||
<span className="sort-divider">|</span>
|
||||
<button className="sort-btn">고액순</button>
|
||||
</div>
|
||||
<div className="filter-section">
|
||||
<SortOptionsBox
|
||||
sortBy={sortBy}
|
||||
onClickToSort={onClickToSort}
|
||||
></SortOptionsBox>
|
||||
<div className="excrow">
|
||||
<div className="full-menu-keywords no-padding">
|
||||
<span className="keyword-tag active">전체</span>
|
||||
<span className="keyword-tag">성공</span>
|
||||
<span className="keyword-tag">실패</span>
|
||||
{
|
||||
resultStatusBtnGroup.map((value, index) => (
|
||||
<span
|
||||
key={`key-service-code=${index}`}
|
||||
className={`keyword-tag ${(processResult === value.value) ? 'active' : ''}`}
|
||||
onClick={() => onClickToTransactionStatus(value.value)}
|
||||
>{value.name}</span>
|
||||
))
|
||||
}
|
||||
</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>
|
||||
<AccountHolderSearchList
|
||||
additionalServiceCategory={AdditionalServiceCategory.AccountHolderSearch}
|
||||
listItems={listItems}
|
||||
mid={mid}
|
||||
></AccountHolderSearchList>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user