diff --git a/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx b/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx index 5d93a29..d816915 100644 --- a/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx +++ b/src/entities/additional-service/ui/fund-account/result-list-wrap.tsx @@ -361,8 +361,9 @@ export const FundAccountResultListWrap = () => {
{ getListDateGroup() } -
+
+
+
{ const { navigate } = useNavigate(); @@ -42,7 +43,7 @@ export const AlimtalkListPage = () => { extensionCode: 'ALIMTALK' }); - const [sortType, setSortType] = useState(SortTypeKeys.LATEST); + const [onActionIntersect, setOnActionIntersect] = useState(false); const [listItems, setListItems] = useState>([]); const [filterOn, setFilterOn] = useState(false); const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM); @@ -59,6 +60,24 @@ export const AlimtalkListPage = () => { const [emailBottomSheetOn, setEmailBottomSheetOn] = useState(false); const { mutateAsync: extensionAlimtalkList } = useExtensionAlimtalkListMutation(); const { mutateAsync: extensionAlimtalkDownloadExcel } = useExtensionAlimtalkDownloadExcelMutation(); + const onIntersect: IntersectionObserverCallback = (entries: Array) => { + 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 + }); useSetHeaderTitle('알림톡 결제통보'); useSetHeaderType(HeaderType.LeftArrow); @@ -67,10 +86,8 @@ export const AlimtalkListPage = () => { navigate(PATHS.home); }); - const callList = (option?: { - sortType?: SortTypeKeys - }) => { - let params: ExtensionAlimtalkListParams = { + const callList = (type?: string) => { + let listParams: ExtensionAlimtalkListParams = { mid: mid, searchCl: searchCl, searchValue: searchValue, @@ -82,14 +99,38 @@ export const AlimtalkListPage = () => { sendCl: sendCl, page: pageParam }; - - if (params.page) { - params.page.sortType = option?.sortType || sortType; - setPageParam(params.page); + if(type !== 'page' && listParams.page){ + listParams.page.cursor = null; } - extensionAlimtalkList(params).then((rs: ExtensionAlimtalkListResponse) => { - setListItems(rs.content); + extensionAlimtalkList(listParams).then((rs: ExtensionAlimtalkListResponse) => { + if(type === 'page'){ + setListItems([ + ...listItems, + ...rs.content + ]); + } + else{ + setListItems(rs.content); + } + if(rs.hasNext + && rs.content.length === DEFAULT_PAGE_PARAM.size + ){ + setPageParam({ + ...pageParam, + ...{ cursor: rs.nextCursor } + }); + } + else{ + setPageParam({ + ...pageParam, + ...{ cursor: null } + }); + } + setOnActionIntersect( + !!rs.hasNext + && rs.content.length === DEFAULT_PAGE_PARAM.size + ); }); }; @@ -233,6 +274,7 @@ export const AlimtalkListPage = () => {
{getAlimtalkList()}
+
diff --git a/src/pages/additional-service/payout/list-page.tsx b/src/pages/additional-service/payout/list-page.tsx index f93f723..2fc574d 100644 --- a/src/pages/additional-service/payout/list-page.tsx +++ b/src/pages/additional-service/payout/list-page.tsx @@ -296,8 +296,8 @@ export const PayoutListPage = () => {
{ getListDateGroup() } -
+
{ getFaqList() } -
+
{ getNoticeList() } -
+
diff --git a/src/pages/support/qna/list-page.tsx b/src/pages/support/qna/list-page.tsx index f7e7739..23c7b60 100644 --- a/src/pages/support/qna/list-page.tsx +++ b/src/pages/support/qna/list-page.tsx @@ -166,8 +166,8 @@ export const QnaListPage = () => {
{ getQnaList() } -
+