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:
focp212@naver.com
2025-10-24 15:45:43 +09:00
parent f95ace06c1
commit 3a9c480f7a
4 changed files with 132 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/entities/settlement/ui/list-wrap.tsx
View File

@@ -31,6 +31,7 @@ import {
import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
import { useStore } from '@/shared/model/store';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import useIntersectionObserver from '@/widgets/intersection-observer';
export interface ListWrapProps {
startDateFromCalendar?: string;
@@ -44,11 +45,14 @@ export const ListWrap = ({
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid;
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [settlementDateListItems, setSettlementDateListItems] = useState<Array<SettlementsHistoryContent>>([]);
const [transactionDatelistItems, setTransactionDateListItems] = useState<Array<SettlementsTransactionListContent>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [nextCursor, setNextCursor] = useState<string | null>(null);
const [mid, setMid] = useState<string>(userMid);
const [periodType, setPeriodType] = useState<SettlementPeriodType>(SettlementPeriodType.SETTLEMENT_DATE);
const [startDate, setStartDate] = useState(startDateFromCalendar? moment(startDateFromCalendar).format('YYYYMMDD'): moment().format('YYYYMMDD'));
@@ -77,18 +81,41 @@ export const ListWrap = ({
const { mutateAsync: settlementsTransactionSummary } = useSettlementsTransactionSummaryMutation();
const { mutateAsync: downloadExcel } = useDownloadExcelMutation();
const callList = () => {
const callList = (option?: {
type?: string
}) => {
setOnActionIntersect(false);
if(periodType === SettlementPeriodType.SETTLEMENT_DATE){
callSettlementList();
callSettlementList(option);
}
else if(periodType === SettlementPeriodType.TRANSACTION_DATE){
callTransactionList();
callTransactionList(option);
}
};
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 && !!nextCursor){
callList({
type: 'page'
});
}
}
else{
console.log('Element is no longer intersecting with the root.');
}
});
};
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const callSettlementList = (option?: {
sortType?: SortTypeKeys,
val?: string
type?: string
}) => {
let listSummaryParams: SettlementsHistorySummaryParams = {
mid: mid,
@@ -100,16 +127,41 @@ export const ListWrap = ({
let listParams: SettlementsHistoryParams = {
...listSummaryParams,
...{
page: pageParam
page: {
...pageParam,
...{ sortType: sortType }
}
}
};
if(listParams.page){
listParams.page.sortType = (option?.sortType)? option.sortType: sortType;
setPageParam(listParams.page);
}
if(option?.type === 'page'){
if(listParams.page){
listParams.page.cursor = nextCursor;
}
}
else{
setNextCursor(null);
if(listParams.page){
listParams.page.cursor = null;
}
}
settlementsHistory(listParams).then((rs: SettlementsHistoryResponse) => {
setSettlementDateListItems(rs.content);
if(option?.type === 'page'){
setSettlementDateListItems([
...settlementDateListItems,
...rs.content
]);
}
else{
setSettlementDateListItems(rs.content);
}
if(rs.hasNext){
setNextCursor(rs.nextCursor);
setOnActionIntersect(true);
}
else{
setNextCursor(null);
}
});
settlementsHistorySummary(listSummaryParams).then((rs: SettlementsHistorySummaryResponse) => {
setSettlementAmount(rs.settlementAmount || 0);
@@ -122,7 +174,8 @@ export const ListWrap = ({
};
const callTransactionList = (option?: {
sortType?: SortTypeKeys,
val?: string
val?: string,
type?: string
}) => {
let params = {
mid: mid,
@@ -143,9 +196,36 @@ export const ListWrap = ({
params.page.sortType = option?.sortType || sortType;
setPageParam(params.page);
}
if(option?.type === 'page'){
if(params.page){
params.page.cursor = nextCursor;
}
}
else{
setNextCursor(null);
if(params.page){
params.page.cursor = null;
}
}
settlementsTransactionList(params).then((rs) => {
setTransactionDateListItems(rs.content);
if(option?.type === 'page'){
setTransactionDateListItems([
...transactionDatelistItems,
...rs.content
]);
}
else{
setTransactionDateListItems(rs.content);
}
if(rs.hasNext){
setNextCursor(rs.nextCursor);
setOnActionIntersect(true);
}
else{
setNextCursor(null);
}
});
settlementsTransactionSummary(summaryParams).then((rs) => {
setSettlementAmount(rs.settlementAmount);
@@ -160,26 +240,10 @@ export const ListWrap = ({
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
if(periodType === SettlementPeriodType.SETTLEMENT_DATE){
callSettlementList({
sortType: sort
});
}
else if(periodType === SettlementPeriodType.TRANSACTION_DATE){
callTransactionList({
sortType: sort
});
}
};
const changePeriodType = (val: SettlementPeriodType) => {
if(val !== periodType){
setPeriodType(val);
if(val === SettlementPeriodType.SETTLEMENT_DATE){
callSettlementList();
}
else if(val === SettlementPeriodType.TRANSACTION_DATE){
callTransactionList();
}
}
};
@@ -302,9 +366,10 @@ export const ListWrap = ({
}, []);
useEffect(() => {
setNextCursor(null);
callList();
}, [
mid, periodType,
mid, periodType, sortType,
startDate, endDate,
paymentMethod
]);
@@ -414,6 +479,7 @@ export const ListWrap = ({
{ (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
getTransactionDateListDateGroup()
}
<div ref={ setTarget }></div>
</div>
<ListFilter
filterOn={ filterOn }

26
src/pages/support/faq/list-page.tsx
View File

@@ -21,7 +21,6 @@ export const FaqListPage = () => {
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [nextCursor, setNextCursor] = useState<string | null>(null);
const [searchValue, setSearchValue] = useState<string>('');
const [selectedCategory, setSelectedCategory] = useState<string>('');
const [resultList, setResultList] = useState<Array<FaqItem>>([]);
@@ -39,7 +38,7 @@ export const FaqListPage = () => {
entries.forEach((entry: IntersectionObserverEntry) => {
if(entry.isIntersecting){
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if(onActionIntersect && !!nextCursor){
if(onActionIntersect && !!pageParam.cursor){
callList('page');
}
}
@@ -64,16 +63,8 @@ export const FaqListPage = () => {
page: pageParam
}
};
if(type === 'page'){
if(listParams.page){
listParams.page.cursor = nextCursor;
}
}
else{
setNextCursor(null);
if(listParams.page){
listParams.page.cursor = null;
}
if(type !== 'page' && listParams.page){
listParams.page.cursor = null;
}
faqList(listParams).then((rs: FaqListResponse) => {
@@ -87,11 +78,17 @@ export const FaqListPage = () => {
setResultList(rs.content);
}
if(rs.hasNext){
setNextCursor(rs.nextCursor);
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
setOnActionIntersect(true);
}
else{
setNextCursor(null);
setPageParam({
...pageParam,
...{ cursor: null }
});
}
});
};
@@ -127,7 +124,6 @@ export const FaqListPage = () => {
};
useEffect(() => {
setNextCursor(null);
callList();
}, [selectedCategory]);

30
src/pages/support/notice/list-page.tsx
View File

@@ -6,7 +6,7 @@ import { useNoticeListMutation } from '@/entities/support/api/use-notice-list-mu
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { InformCl, NoticeItem, NoticeListParams, NoticeListResponse, SearchCl } from '@/entities/support/model/types';
import { SupportNoticeItem } from '@/entities/support/ui/notice-item';
import { HeaderType } from '@/entities/common/model/types';
import { DefaultRequestPagination, HeaderType } from '@/entities/common/model/types';
import {
useSetHeaderTitle,
useSetHeaderType,
@@ -20,8 +20,7 @@ export const NoticeListPage = () => {
const { t } = useTranslation();
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
const [nextCursor, setNextCursor] = useState<string | null>(null);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [informCl, setInformCl] = useState<InformCl | string>('');
const [searchKeyword, setSearchKeyword] = useState<string>('');
const [resultList, setResultList] = useState<Array<NoticeItem>>([]);
@@ -39,7 +38,7 @@ export const NoticeListPage = () => {
entries.forEach((entry: IntersectionObserverEntry) => {
if(entry.isIntersecting){
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if(onActionIntersect && !!nextCursor){
if(onActionIntersect && !!pageParam.cursor){
callList('page');
}
}
@@ -63,16 +62,8 @@ export const NoticeListPage = () => {
page: pageParam
}
};
if(type === 'page'){
if(listParams.page){
listParams.page.cursor = nextCursor;
}
}
else{
setNextCursor(null);
if(listParams.page){
listParams.page.cursor = null;
}
if(type !== 'page' && listParams.page){
listParams.page.cursor = null;
}
noticeList(listParams).then((rs: NoticeListResponse) => {
@@ -86,11 +77,17 @@ export const NoticeListPage = () => {
setResultList(rs.content);
}
if(rs.hasNext){
setNextCursor(rs.nextCursor);
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
setOnActionIntersect(true);
}
else{
setNextCursor(null);
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
}
});
};
@@ -121,7 +118,6 @@ export const NoticeListPage = () => {
};
useEffect(() => {
setNextCursor(null);
callList();
}, [informCl]);

33
src/pages/support/qna/list-page.tsx
View File

@@ -26,7 +26,6 @@ export const QnaListPage = () => {
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [mid, setMid] = useState<string>(userMid);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [nextCursor, setNextCursor] = useState<string | null>(null);
const [statusCode, setStatusCode] = useState<string>(''); // 02, 03
const [resultList, setResultList] = useState<Array<QnaItem>>([]);
@@ -43,13 +42,10 @@ export const QnaListPage = () => {
entries.forEach((entry: IntersectionObserverEntry) => {
if(entry.isIntersecting){
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if(onActionIntersect && !!nextCursor){
if(onActionIntersect && !!pageParam.cursor){
callList('page');
}
}
else{
console.log('Element is no longer intersecting with the root.');
}
});
};
@@ -67,13 +63,7 @@ export const QnaListPage = () => {
page: pageParam
}
};
if(type === 'page'){
if(listParams.page){
listParams.page.cursor = nextCursor;
}
}
else{
setNextCursor(null);
if(type !== 'page'){
if(listParams.page){
listParams.page.cursor = null;
}
@@ -90,11 +80,17 @@ export const QnaListPage = () => {
setResultList(rs.content);
}
if(rs.hasNext){
setNextCursor(rs.nextCursor);
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
setOnActionIntersect(true);
}
else{
setNextCursor(null);
setPageParam({
...pageParam,
...{ cursor: null }
});
}
});
};
@@ -126,13 +122,8 @@ export const QnaListPage = () => {
};
useEffect(() => {
setNextCursor(null);
callList();
}, [statusCode]);
useEffect(() => {
}, [resultList]);
}, [mid, statusCode]);
return (
<>
@@ -172,7 +163,7 @@ export const QnaListPage = () => {
</div>
<div className="inq-list" >
{ getQnaList() }
<div ref={setTarget}></div>
<div ref={ setTarget }></div>
</div>
</div>
<div className="apply-row">