This commit is contained in:
focp212@naver.com
2025-10-26 01:28:47 +09:00
parent 7e5f1e71a7
commit 00aec7656e
34 changed files with 930 additions and 319 deletions

View File

@@ -17,12 +17,14 @@ import { FundAccountResultStatusBtnGroup, FundAccountStatusBtnGroup } from '../.
import { FundAccountResultFilter } from '../filter/fund-account-result-filter';
import { useStore } from '@/shared/model/store';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const FundAccountResultListWrap = () => {
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid;
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<FundAccountResultContentItem>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -49,12 +51,28 @@ export const FundAccountResultListWrap = () => {
const { mutateAsync: extensionFundAccountResultList } = useExtensionFundAccountResultListMutation();
const { mutateAsync: extensionFundAccountResultExcel } = useExtensionFundAccountResultExcelMutation();
const { mutateAsync: extensionFundAccountResultSummary } = useExtensionFundAccountResultSummaryMutation();
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if(entry.isIntersecting){
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if(onActionIntersect && !!pageParam.cursor){
callList('page');
}
}
else{
console.log('Element is no longer intersecting with the root.');
}
});
};
const callList = (option?: {
sortType?: SortTypeKeys,
resultStatus?: FundAccountResultStatus
}) => {
let listSummaryParams: ExtensionFundAccountResultListParams = {
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const callList = (type?: string) => {
setOnActionIntersect(false);
let listParams: ExtensionFundAccountResultListParams = {
mid: mid,
searchCl: searchCl,
searchValue: searchValue,
@@ -62,18 +80,39 @@ export const FundAccountResultListWrap = () => {
fromDate: fromDate,
toDate: toDate,
bankCode: bankCode,
resultStatus: option?.resultStatus ?? resultStatus,
page: pageParam
resultStatus: resultStatus,
page: {
...pageParam,
...{ sortType: sortType }
}
};
if (listSummaryParams.page) {
listSummaryParams.page.sortType = option?.sortType || sortType;
setPageParam(listSummaryParams.page);
if(type !== 'page' && listParams.page){
listParams.page.cursor = null;
}
extensionFundAccountResultList(listSummaryParams).then((rs: any) => {
console.log(rs);
setListItems(rs.content);
extensionFundAccountResultList(listParams).then((rs: any) => {
if(type === 'page'){
setListItems([
...listItems,
...rs.content
]);
}
else{
setListItems(rs.content);
}
if(rs.hasNext){
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
setOnActionIntersect(true);
}
else{
setPageParam({
...pageParam,
...{ cursor: null }
});
}
});
};
@@ -119,9 +158,6 @@ export const FundAccountResultListWrap = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({
sortType: sort
});
};
const onClickToStatus = (val: FundAccountResultStatus) => {
setResultStatus(val);
@@ -187,7 +223,8 @@ export const FundAccountResultListWrap = () => {
fromDate,
toDate,
bankCode,
resultStatus
resultStatus,
sortType
]);
const onClickToNavigate = () => {
@@ -318,12 +355,13 @@ export const FundAccountResultListWrap = () => {
</section>
<section className="transaction-list">
{getListDateGroup()}
{ getListDateGroup() }
<div ref={ setTarget }></div>
</section>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={onClickToNavigate}
onClick={ onClickToNavigate }
> </button>
</div>
<FundAccountResultFilter

View File

@@ -26,12 +26,14 @@ import { FundAccountTransactionFilter } from '../filter/fund-account-trnasaction
import { PATHS } from '@/shared/constants/paths';
import { useStore } from '@/shared/model/store';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const FundAccountTransferListWrap = () => {
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid;
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<FundAccountTransferContentItem>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -50,29 +52,67 @@ export const FundAccountTransferListWrap = () => {
const { mutateAsync: extensionFundAccountTransferList } = useExtensionFundAccountTransferListMutation();
const { mutateAsync: extensionFundAccountTransferExcel } = useExtensionFundAccountTransferExcelMutation();
const { mutateAsync: extensionFundAccountBalance } = useExtensionFundAccountBalanceMutation();
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if(entry.isIntersecting){
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if(onActionIntersect && !!pageParam.cursor){
callList('page');
}
}
else{
console.log('Element is no longer intersecting with the root.');
}
});
};
const callList = (option?: {
sortType?: SortTypeKeys,
status?: FundAccountStatus
}) => {
let listSummaryParams: ExtensionFundAccountTransferListParams = {
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const callList = (type?: string) => {
setOnActionIntersect(false);
let listParams: ExtensionFundAccountTransferListParams = {
mid: mid,
searchCl: searchCl,
searchValue: searchValue,
bankCode: bankCode,
fromDate: fromDate,
toDate: toDate,
resultStatus: option?.status ?? status,
page: pageParam
resultStatus: status,
page: {
...pageParam,
...{ sortType: sortType }
}
};
if (listSummaryParams.page) {
listSummaryParams.page.sortType = option?.sortType || sortType;
setPageParam(listSummaryParams.page);
if(type !== 'page' && listParams.page){
listParams.page.cursor = null;
}
extensionFundAccountTransferList(listSummaryParams).then((rs: any) => {
setListItems(rs.content);
extensionFundAccountTransferList(listParams).then((rs: any) => {
if(type === 'page'){
setListItems([
...listItems,
...rs.content
]);
}
else{
setListItems(rs.content);
}
if(rs.hasNext){
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
setOnActionIntersect(true);
}
else{
setPageParam({
...pageParam,
...{ cursor: null }
});
}
});
callBalance();
};
@@ -111,9 +151,6 @@ export const FundAccountTransferListWrap = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({
sortType: sort
});
};
const onClickToStatus = (val: FundAccountStatus) => {
@@ -174,7 +211,8 @@ export const FundAccountTransferListWrap = () => {
fromDate,
toDate,
bankCode,
status
status,
sortType
]);
const onClickToNavigate = () => {
@@ -254,7 +292,8 @@ export const FundAccountTransferListWrap = () => {
</section>
<section className="transaction-list pb-86">
{getListDateGroup()}
{ getListDateGroup() }
<div ref={ setTarget }></div>
</section>
<div className="apply-row">
<button

View File

@@ -14,6 +14,7 @@ import { useExtensionLinkPayHistoryDownloadExcelMutation } from '../../api/link-
import { useStore } from '@/shared/model/store';
import { ExtensionLinkPayHistoryListParams, LinkPaymentHistoryListItem, LinkPaymentPaymentMethod, LinkPaymentPaymentStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus } from '../../model/link-pay/types';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import useIntersectionObserver from '@/widgets/intersection-observer';
const paymentResultBtnGroup = [
{ name: '전체', value: LinkPaymentPaymentStatus.ALL },
@@ -28,6 +29,7 @@ export const LinkPaymentHistoryWrap = () => {
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid;
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<LinkPaymentHistoryListItem>>([]);
@@ -46,34 +48,72 @@ export const LinkPaymentHistoryWrap = () => {
const { mutateAsync: linkPayHistoryList } = useExtensionLinkPayHistoryListMutation();
const { mutateAsync: downloadExcel } = useExtensionLinkPayHistoryDownloadExcelMutation();
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if(entry.isIntersecting){
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if(onActionIntersect && !!pageParam.cursor){
callList('page');
}
}
else{
console.log('Element is no longer intersecting with the root.');
}
});
};
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const onClickToNavigate = () => {
navigate(PATHS.additionalService.linkPayment.request)
};
const callList = (option?: {
sortType?: SortTypeKeys,
status?: LinkPaymentPaymentStatus
}) => {
const callList = (type?: string) => {
setOnActionIntersect(false);
let listParams: ExtensionLinkPayHistoryListParams = {
mid: mid,
searchCl: searchCl,
searchValue: searchValue,
fromDate: fromDate,
toDate: toDate,
paymentStatus: option?.status ?? paymentStatus,
paymentStatus: paymentStatus,
sendStatus: sendStatus,
sendMethod: sendMethod,
page: pageParam
page: {
...pageParam,
...{ sortType: sortType }
}
};
if (listParams.page) {
listParams.page.sortType = option?.sortType || sortType;
setPageParam(listParams.page);
}
if(type !== 'page' && listParams.page){
listParams.page.cursor = null;
}
linkPayHistoryList(listParams).then((rs) => {
setListItems(rs.content);
if(type === 'page'){
setListItems([
...listItems,
...rs.content
]);
}
else{
setListItems(rs.content);
}
if(rs.hasNext){
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
setOnActionIntersect(true);
}
else{
setPageParam({
...pageParam,
...{ cursor: null }
});
}
});
};
@@ -107,9 +147,6 @@ export const LinkPaymentHistoryWrap = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({
sortType: sort
});
};
const onClickToOpenFilter = () => {
@@ -127,7 +164,8 @@ export const LinkPaymentHistoryWrap = () => {
toDate,
paymentStatus,
sendStatus,
sendMethod
sendMethod,
sortType
]);
return (
@@ -189,6 +227,7 @@ export const LinkPaymentHistoryWrap = () => {
additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
mid={mid}
></LinkPaymentHistoryList>
<div ref={ setTarget }></div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"

View File

@@ -16,6 +16,7 @@ import { LinkPaymentProcessStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, L
import { ProcessStatusBtnGrouup } from '../../model/link-pay/constant';
import { useExtensionLinkPayWaitDeleteMutation } from '../../api/link-payment/use-extension-link-pay-wait-delete-mutation';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import useIntersectionObserver from '@/widgets/intersection-observer';
@@ -23,6 +24,7 @@ export const LinkPaymentWaitSendWrap = () => {
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid;
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [mid, setMid] = useState<string>(userMid);
@@ -38,6 +40,24 @@ export const LinkPaymentWaitSendWrap = () => {
const { mutateAsync: pendingSendList } = useExtensionLinkPayWaitListMutation();
const { mutateAsync: downloadExcel } = useExtensionLinkPayWaitDownloadExcelMutation();
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if(entry.isIntersecting){
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if(onActionIntersect && !!pageParam.cursor){
callList('page');
}
}
else{
console.log('Element is no longer intersecting with the root.');
}
});
};
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const onClickToOpenFilter = () => {
setFilterOn(!filterOn);
@@ -46,10 +66,8 @@ export const LinkPaymentWaitSendWrap = () => {
navigate(PATHS.additionalService.linkPayment.request)
}
const callList = (option?: {
sortType?: SortTypeKeys,
status?: LinkPaymentProcessStatus
}) => {
const callList = (type?: string) => {
setOnActionIntersect(false);
let listParams = {
mid: mid,
searchCl: searchType,
@@ -57,17 +75,39 @@ export const LinkPaymentWaitSendWrap = () => {
fromDate: startDate,
toDate: endDate,
sendMethod: sendMethod,
processStatus: option?.status ?? processStatus,
page: pageParam
processStatus: processStatus,
page: {
...pageParam,
...{ sortType: sortType }
}
}
if (listParams.page) {
listParams.page.sortType = option?.sortType || sortType;
setPageParam(listParams.page);
if(type !== 'page' && listParams.page){
listParams.page.cursor = null;
}
pendingSendList(listParams).then((rs) => {
setListItems(rs.content);
if(type === 'page'){
setListItems([
...listItems,
...rs.content
]);
}
else{
setListItems(rs.content);
}
if(rs.hasNext){
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
setOnActionIntersect(true);
}
else{
setPageParam({
...pageParam,
...{ cursor: null }
});
}
});
};
@@ -95,9 +135,6 @@ export const LinkPaymentWaitSendWrap = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({
sortType: sort
});
};
const onClickSendingStatus = (val: LinkPaymentProcessStatus) => {
@@ -113,7 +150,8 @@ export const LinkPaymentWaitSendWrap = () => {
startDate,
endDate,
sendMethod,
processStatus
processStatus,
sortType
]);
return (
@@ -174,6 +212,7 @@ export const LinkPaymentWaitSendWrap = () => {
additionalServiceCategory={AdditionalServiceCategory.LinkPaymentWait}
mid={mid}
></LinkPaymentWaitList>
<div ref={ setTarget }></div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"