부가서비스: 계좌명 인증 상태 표시 및 날짜 선택기 개선
- AccountHolderAuth에서 transferStatus 기반 성공/실패 표시 추가 - SingleDatePicker 컴포넌트 생성 및 링크결제 Step1에 적용 - 각 리스트 아이템에 key prop 추가로 React 경고 해결 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
HyeonJongKim
@@ -1,18 +1,167 @@
|
||||
import moment from 'moment';
|
||||
import { PATHS } from '@/shared/constants/paths';
|
||||
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
|
||||
import { HeaderType } from '@/entities/common/model/types';
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode
|
||||
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||
import { SortByKeys, AuthAndTransferStatus, AccountHolderAuthListItem } from '@/entities/additional-service/model/types';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
|
||||
import { SortOptionsBox } from '@/entities/additional-service/ui/sort-options-box';
|
||||
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
useSetFooterMode,
|
||||
useSetOnBack
|
||||
} from '@/widgets/sub-layout/use-sub-layout';
|
||||
import { useExtensionAccountHolderAuthListMutation } from '@/entities/additional-service/api/account-holder-auth/use-extension-account-holder-auth-list-mutation';
|
||||
import { authStatusBtnGroup } from '@/entities/additional-service/model/account-holder-auth/constant';
|
||||
import { AccountHolderAuthList } from '@/entities/additional-service/ui/account-holder-auth/account-holder-auth-list';
|
||||
|
||||
export const AccountHolderAuthPage = () => {
|
||||
const { navigate } = useNavigate();
|
||||
|
||||
const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
|
||||
const [listItems, setListItems] = useState({});
|
||||
const [filterOn, setFilterOn] = useState<boolean>(false);
|
||||
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
|
||||
const [mid, setMid] = useState<string>('nictest001m');
|
||||
const [fromDate, setFromDate] = useState(moment().format('YYYY-MM-DD'));
|
||||
const [toDate, setToDate] = useState(moment().format('YYYY-MM-DD'));
|
||||
const [authStatus, setAuthStatus] = useState<AuthAndTransferStatus>(AuthAndTransferStatus.ALL)
|
||||
|
||||
useSetHeaderTitle('계좌점유인증');
|
||||
useSetHeaderType(HeaderType.LeftArrow);
|
||||
useSetFooterMode(true);
|
||||
useSetOnBack(() => {
|
||||
navigate(PATHS.home);
|
||||
});
|
||||
|
||||
const { mutateAsync: accountHolderAuthList } = useExtensionAccountHolderAuthListMutation();
|
||||
|
||||
const callList = (option?: {
|
||||
sortBy?: string,
|
||||
val?: string
|
||||
}) => {
|
||||
pageParam.sortBy = (option?.sortBy) ? option.sortBy : sortBy;
|
||||
setPageParam(pageParam);
|
||||
let listParams = {
|
||||
mid: mid,
|
||||
fromDate: fromDate,
|
||||
toDate: toDate,
|
||||
authStatus: authStatus,
|
||||
page: pageParam
|
||||
}
|
||||
|
||||
accountHolderAuthList(listParams).then((rs) => {
|
||||
setListItems(assembleData(rs.content));
|
||||
});
|
||||
}
|
||||
|
||||
const assembleData = (content: Array<AccountHolderAuthListItem>) => {
|
||||
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 onClickToDownloadExcel = () => {
|
||||
|
||||
}
|
||||
|
||||
const onClickToOpenFilter = () => {
|
||||
setFilterOn(!filterOn);
|
||||
};
|
||||
|
||||
const onClickToSort = (sort: SortByKeys) => {
|
||||
setSortBy(sort);
|
||||
callList({ sortBy: sort })
|
||||
};
|
||||
|
||||
|
||||
const onClickToAuthStatus = (val: AuthAndTransferStatus) => {
|
||||
setAuthStatus(val);
|
||||
callList({ val: val });
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
callList();
|
||||
}, []);
|
||||
return (
|
||||
<>
|
||||
<main>
|
||||
<div className="tab-content">
|
||||
<div className="tab-pane sub active">
|
||||
<section className="summary-section">
|
||||
<div className="credit-controls">
|
||||
<div>
|
||||
<input
|
||||
className="credit-period"
|
||||
type="text"
|
||||
value={moment(fromDate).format('YYYY.MM.DD') + '-' + moment(toDate).format('YYYY.MM.DD')}
|
||||
readOnly={true}
|
||||
/>
|
||||
<button
|
||||
className="filter-btn"
|
||||
aria-label="필터"
|
||||
>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_setting.svg'}
|
||||
alt="검색옵션"
|
||||
onClick={() => onClickToOpenFilter()}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<button
|
||||
className="download-btn"
|
||||
>
|
||||
<img
|
||||
src={IMAGE_ROOT + '/ico_download.svg'}
|
||||
alt="다운로드"
|
||||
onClick={() => onClickToDownloadExcel()}
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div className="filter-section">
|
||||
<SortOptionsBox
|
||||
sortBy={sortBy}
|
||||
onClickToSort={onClickToSort}
|
||||
></SortOptionsBox>
|
||||
<div className="excrow">
|
||||
<div className="full-menu-keywords no-padding">
|
||||
{
|
||||
authStatusBtnGroup.map((value, index) => (
|
||||
<span
|
||||
key={`key-service-code=${index}`}
|
||||
className={`keyword-tag ${( authStatus === value.value) ? 'active' : ''}`}
|
||||
onClick={() => onClickToAuthStatus(value.value)}
|
||||
>{value.name}</span>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<AccountHolderAuthList
|
||||
listItems={listItems}
|
||||
mid={mid}
|
||||
></AccountHolderAuthList>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -4,9 +4,8 @@ import { useEffect, useState } from 'react';
|
||||
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/filter/account-holder-search-filter';
|
||||
import { ProcessResult, AccountHolderSearchType, SortByKeys, AccountHolderSearchListItem, AdditionalServiceCategory } from '@/entities/additional-service/model/types';
|
||||
import { ProcessResult, AccountHolderSearchType, SortByKeys, AccountHolderSearchListItem } from '@/entities/additional-service/model/types';
|
||||
import {
|
||||
useSetHeaderTitle,
|
||||
useSetHeaderType,
|
||||
@@ -63,7 +62,8 @@ export const AccountHolderSearchPage = () => {
|
||||
fromDate: startDate,
|
||||
toDate: endDate,
|
||||
bankCode: bank,
|
||||
resultStatus: processResult
|
||||
resultStatus: processResult,
|
||||
page: pageParam
|
||||
}
|
||||
|
||||
accountHolderSearchList(listParams).then((rs) => {
|
||||
|
||||
@@ -56,7 +56,10 @@ export const AdditionalServicePages = () => {
|
||||
<Route path={ROUTE_NAMES.additionalService.accountHolderSearch.detail} element={<AccountHolderSearchDetailPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.accountHolderSearch.request} element={<AccountHolderSearchRequestPage />} />
|
||||
</Route>
|
||||
<Route path={ROUTE_NAMES.additionalService.accountHolderAuth} element={<AccountHolderAuthPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.accountHolderAuth.base}>
|
||||
<Route path={ROUTE_NAMES.additionalService.accountHolderAuth.list} element={<AccountHolderAuthPage/>} />
|
||||
<Route path={ROUTE_NAMES.additionalService.accountHolderAuth.detail} element={<AccountHolderSearchDetailPage />} />
|
||||
</Route>
|
||||
<Route path={ROUTE_NAMES.additionalService.linkPayment.base}>
|
||||
<Route path={ROUTE_NAMES.additionalService.linkPayment.shippingHistory} element={<LinkPaymentHistoryPage />} />
|
||||
<Route path={ROUTE_NAMES.additionalService.linkPayment.pendingSend} element={<LinkPaymentWaitSendPage />} />
|
||||
|
||||
@@ -57,7 +57,7 @@ export const IntroPage = () => {
|
||||
},
|
||||
{
|
||||
className: 'list-wrap02', serviceName: '계좌점유인증', serviceDesc: '1원 송금으로 실제 계좌 점유 확인 여부',
|
||||
icon: IMAGE_ROOT + '/icon_ing09.svg', path: PATHS.additionalService.accountHolderAuth
|
||||
icon: IMAGE_ROOT + '/icon_ing09.svg', path: PATHS.additionalService.accountHolderAuth.list
|
||||
},
|
||||
{
|
||||
className: 'list-wrap02', serviceName: '알림톡 결제통보', serviceDesc: '결제 상태를 알림톡으로 쉽고 빠른 안내',
|
||||
|
||||
Reference in New Issue
Block a user