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-26 11:28:06 +09:00
parent 35edb19062
commit f4b8ee29d8
10 changed files with 118 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/entities/additional-service/ui/fund-account/result-list-wrap.tsx
View File

@@ -361,8 +361,9 @@ export const FundAccountResultListWrap = () => {
<section className="transaction-list">
{ getListDateGroup() }
<div ref={ setTarget }></div>
</section>
<div ref={ setTarget }></div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"

2
src/entities/additional-service/ui/fund-account/transfer-list-wrap.tsx
View File

@@ -298,8 +298,8 @@ export const FundAccountTransferListWrap = () => {
<section className="transaction-list pb-86">
{ getListDateGroup() }
<div ref={ setTarget }></div>
</section>
<div ref={ setTarget }></div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"

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

@@ -481,8 +481,8 @@ export const ListWrap = ({
{ (periodType === SettlementPeriodType.TRANSACTION_DATE) &&
getTransactionDateListDateGroup()
}
<div ref={ setTarget }></div>
</div>
<div ref={ setTarget }></div>
<ListFilter
filterOn={ filterOn }
setFilterOn={ setFilterOn }

62
src/pages/additional-service/alimtalk/list-page.tsx
View File

@@ -32,6 +32,7 @@ import { snackBar } from '@/shared/lib';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import { AlimtalkFilter } from '@/entities/additional-service/ui/filter/alimtalk-filter';
import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const AlimtalkListPage = () => {
const { navigate } = useNavigate();
@@ -42,7 +43,7 @@ export const AlimtalkListPage = () => {
extensionCode: 'ALIMTALK'
});
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [listItems, setListItems] = useState<Array<AlimtalkListContent>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
@@ -59,6 +60,24 @@ export const AlimtalkListPage = () => {
const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
const { mutateAsync: extensionAlimtalkList } = useExtensionAlimtalkListMutation();
const { mutateAsync: extensionAlimtalkDownloadExcel } = useExtensionAlimtalkDownloadExcelMutation();
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
});
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) => {
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 = () => {
<section className="transaction-list">
{getAlimtalkList()}
</section>
<div ref={ setTarget }></div>
</div>
</div>
</main>

2
src/pages/additional-service/payout/list-page.tsx
View File

@@ -296,8 +296,8 @@ export const PayoutListPage = () => {
</section>
<section className="transaction-list">
{ getListDateGroup() }
<div ref={ setTarget }></div>
</section>
<div ref={ setTarget }></div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"

58
src/pages/additional-service/sms-payment/sms-payment-page.tsx
View File

@@ -22,6 +22,7 @@ import { AdditionalServiceCategory } from '@/entities/additional-service/model/t
import { PATHS } from '@/shared/constants/paths';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access-check';
import useIntersectionObserver from '@/widgets/intersection-observer';
export const SmsPaymentPage = () => {
const { navigate } = useNavigate();
@@ -34,7 +35,7 @@ export const SmsPaymentPage = () => {
const [bottomSmsPaymentDetailResendOn, setBottomSmsPaymentDetailResendOn] = useState<boolean>(false)
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const [listItems, setListItems] = useState<Array<SmsPaymentListItem>>([]);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [filterOn, setFilterOn] = useState<boolean>(false);
@@ -52,6 +53,24 @@ export const SmsPaymentPage = () => {
const { mutateAsync: smsPaymentList } = useExtensionSmsListMutation();
const { mutateAsync: downloadExcel } = useExtensionSmsDownloadExcelMutation();
const { mutateAsync: detail } = useExtensionSmsDetailMutation();
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
});
useSetHeaderTitle('SMS 결제 통보');
useSetHeaderType(HeaderType.LeftArrow);
@@ -59,9 +78,8 @@ export const SmsPaymentPage = () => {
useSetOnBack(() => {
navigate(PATHS.home);
});
const callList = (option?: {
sortType?: SortTypeKeys
}) => {
const callList = (type?: string) => {
setOnActionIntersect(false);
let listParams: ExtensionSmsPaymentListParams = {
mid: mid,
searchCl: searchCl,
@@ -71,14 +89,38 @@ export const SmsPaymentPage = () => {
smsCl: smsCl,
page: pageParam
}
if (listParams.page) {
listParams.page.sortType = option?.sortType || sortType;
setPageParam(listParams.page);
if(type !== 'page' && listParams.page){
listParams.page.cursor = null;
}
smsPaymentList(listParams).then((rs) => {
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
);
});
}

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

@@ -176,8 +176,8 @@ export const FaqListPage = () => {
</div>
<div className="faq-list">
{ getFaqList() }
<div ref={ setTarget }></div>
</div>
<div ref={ setTarget }></div>
</div>
<div className="apply-row">
<button

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

@@ -170,8 +170,8 @@ export const NoticeListPage = () => {
</div>
<div className="notice-list-114">
{ getNoticeList() }
<div ref={ setTarget }></div>
</div>
<div ref={ setTarget }></div>
</div>
</div>
</div>

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

@@ -166,8 +166,8 @@ export const QnaListPage = () => {
</div>
<div className="inq-list" >
{ getQnaList() }
<div ref={ setTarget }></div>
</div>
<div ref={ setTarget }></div>
</div>
<div className="apply-row">
<button

6
src/shared/ui/assets/css/style-fix.css
View File

@@ -386,3 +386,9 @@ main.home-main{
width: unset !important;
text-align: unset !important;
}
.transaction-content > .transaction-title{
text-overflow: ellipsis;
overflow-x: hidden;
width: 100%;
}