nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- 부가서비스 스크롤 중 필터 체크 마크 추가

Browse Source 
- 자금이체,알림톡 스크롤 중 DateGroup 누락 수정
This commit is contained in:
HyeonJongKim
2025-11-20 15:27:19 +09:00
parent 3face63c36
commit 21089bb779
27 changed files with 522 additions and 446 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/entities/additional-service/model/account-holder-auth/types.ts
View File

@@ -28,6 +28,7 @@ export interface AccountHolderAuthListProps {
listItems: Array<AccountHolderAuthItem>;
mid: string;
setDetailData: (detailData: DetailData) => void;
filterUsed: boolean;
onClickToOpenFilter: () => void;
onClickToOpenDownloadBottomSheet: () => void;
};

1
src/entities/additional-service/model/account-holder-search/types.ts
View File

@@ -25,6 +25,7 @@ export interface AccountHolderSearchListProps {
listItems: Array<AccountHolderSearchListItem>;
mid: string;
setDetailData: (detailData: DetailData) => void;
filterUsed: boolean;
onClickToOpenFilter: () => void;
onClickToOpenDownloadBottomSheet: () => void;
};

1
src/entities/additional-service/model/ars/types.ts
View File

@@ -26,6 +26,7 @@ export interface ArsListProps {
listItems: Array<ListItemProps>;
mid: string;
setDetailData: (detailData: DetailData) => void;
filterUsed: boolean;
onClickToOpenFilter: () => void;
onClickToOpenDownloadBottomSheet: () => void;
}

1
src/entities/additional-service/model/key-in/types.ts
View File

@@ -34,6 +34,7 @@ export interface KeyInPaymentListProps {
additionalServiceCategory: AdditionalServiceCategory;
listItems: Array<KeyInPaymentListItem>;
mid?: string;
filterUsed: boolean;
onClickToOpenFilter: () => void;
onClickToOpenDownloadBottomSheet: () => void;
};

2
src/entities/additional-service/model/link-pay/types.ts
View File

@@ -105,6 +105,7 @@ export interface LinkPaymentHistoryListProps {
listItems: Array<LinkPaymentHistoryListItem>;
mid: string;
setDetailData: (detailData: DetailData) => void;
filterUsed: boolean;
onClickToOpenFilter: () => void;
onClickToOpenDownloadBottomSheet: () => void;
};
@@ -114,6 +115,7 @@ export interface LinkPaymentWaitListProps {
listItems: Array<LinkPaymentWaitListItem>;
mid: string;
setDetailData: (detailData: DetailData) => void;
filterUsed: boolean;
onClickToOpenFilter: () => void;
onClickToOpenDownloadBottomSheet: () => void;
};

1
src/entities/additional-service/model/payout/types.ts
View File

@@ -19,6 +19,7 @@ export interface PayoutListProps {
searchDateType: PayoutSearchDateType
mid: string;
setDetailData: (detailData: DetailData) => void;
filterUsed: boolean;
onClickToOpenFilter: () => void;
onClickToOpenDownloadBottomSheet: () => void;
};

1
src/entities/additional-service/model/sms-payment/types.ts
View File

@@ -30,6 +30,7 @@ export interface SmsPaymentListProps {
additionalServiceCategory: AdditionalServiceCategory;
mid: string;
onResendClick?: (seq: number) => void;
filterUsed: boolean;
onClickToOpenFilter: () => void;
onClickToOpenDownloadBottomSheet: () => void;
};

68
src/entities/additional-service/ui/account-holder-auth/account-holder-auth-list.tsx
View File

@@ -9,6 +9,7 @@ export const AccountHolderAuthList = ({
listItems,
mid,
setDetailData,
filterUsed,
onClickToOpenFilter,
onClickToOpenDownloadBottomSheet
}: AccountHolderAuthListProps) => {
@@ -37,12 +38,12 @@ export const AccountHolderAuthList = ({
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={ additionalServiceCategory }
key={ date + '-' + i }
mid={ mid }
date={ date }
items={ list }
setDetailData={ setDetailData }
additionalServiceCategory={additionalServiceCategory}
key={date + '-' + i}
mid={mid}
date={date}
items={list}
setDetailData={setDetailData}
></ListDateGroup>
);
}
@@ -56,12 +57,12 @@ export const AccountHolderAuthList = ({
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={ additionalServiceCategory }
mid={ mid }
key={ date + '-last' }
date={ date }
items={ list }
setDetailData={ setDetailData }
additionalServiceCategory={additionalServiceCategory}
mid={mid}
key={date + '-last'}
date={date}
items={list}
setDetailData={setDetailData}
></ListDateGroup>
)
}
@@ -88,30 +89,33 @@ export const AccountHolderAuthList = ({
return (
<>
{ groupDateOn &&
<div className="summary-amount scroll-group-date">
<span className="amount-text">{ groupDate }</span>
<div className="summary-actions">
<button className="filter-btn">
<img
src={ IMAGE_ROOT + '/ico_setting.svg' }
alt={t('transaction.searchOptions')}
onClick={ onClickToOpenFilter }
/>
</button>
<button className="download-btn">
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
alt={t('transaction.download')}
onClick={ onClickToOpenDownloadBottomSheet }
/>
</button>
{groupDateOn &&
<div className="summary-amount scroll-group-date">
<span className="amount-text">{groupDate}</span>
<div className="summary-actions">
<button className="filter-btn">
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt={t('transaction.searchOptions')}
onClick={onClickToOpenFilter}
/>
{filterUsed &&
<span className="notification-badge2"></span>
}
</button>
<button className="download-btn">
<img
src={IMAGE_ROOT + '/ico_download.svg'}
alt={t('transaction.download')}
onClick={onClickToOpenDownloadBottomSheet}
/>
</button>
</div>
</div>
</div>
}
<div
className="transaction-list"
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
style={{ height: (listHeight > 0) ? listHeight + 'px' : 'unset' }}
>
{getListDateGroup()}
</div>

5
src/entities/additional-service/ui/account-holder-search/account-holder-search-list.tsx
View File

@@ -13,6 +13,7 @@ export const AccountHolderSearchList = ({
listItems,
mid,
setDetailData,
filterUsed,
onClickToOpenFilter,
onClickToOpenDownloadBottomSheet
}: AccountHolderSearchListProps) => {
@@ -111,6 +112,9 @@ export const AccountHolderSearchList = ({
alt={t('transaction.searchOptions')}
onClick={ onClickToOpenFilter }
/>
{ filterUsed &&
<span className="notification-badge2"></span>
}
</button>
<button className="download-btn">
<img
@@ -124,7 +128,6 @@ export const AccountHolderSearchList = ({
}
<section
className="transaction-list"
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
>
{ getListDateGroup() }
</section>

62
src/entities/additional-service/ui/ars/ars-list.tsx
View File

@@ -10,13 +10,14 @@ export const ArsList = ({
listItems,
mid,
setDetailData,
filterUsed,
onClickToOpenFilter,
onClickToOpenDownloadBottomSheet
}: ArsListProps) => {
const { t, i18n } = useTranslation();
const [groupDate, setGroupDate] = useState<string>('');
const [groupDateOn, setGroupDateOn] = useState<boolean>(false);
const [groupDateOn, setGroupDateOn] = useState<boolean>(false);
const [listHeight, setListHeight] = useState<number>(0);
@@ -24,17 +25,17 @@ export const ArsList = ({
let rs = [];
let date = '';
let list: Array<ListItemProps> = [];
for(let i=0;i<listItems.length;i++){
for (let i = 0; i < listItems.length; i++) {
let item = listItems[i];
if(!!item){
if (!!item) {
let orderDate = item?.orderDate || '';
let itemDate = orderDate.substring(0, 8);
if(!!itemDate){
if(i === 0){
if (!!itemDate) {
if (i === 0) {
date = itemDate;
}
if(date !== itemDate){
if(list.length > 0){
if (date !== itemDate) {
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
@@ -53,7 +54,7 @@ export const ArsList = ({
}
}
}
if(list.length > 0){
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
@@ -88,32 +89,35 @@ export const ArsList = ({
return (
<>
{ groupDateOn &&
<div className="summary-amount scroll-group-date">
<span className="amount-text">{ groupDate }</span>
<div className="summary-actions">
<button className="filter-btn">
<img
src={ IMAGE_ROOT + '/ico_setting.svg' }
alt={t('transaction.searchOptions')}
onClick={ onClickToOpenFilter }
/>
</button>
<button className="download-btn">
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
alt={t('transaction.download')}
onClick={ onClickToOpenDownloadBottomSheet }
/>
</button>
{groupDateOn &&
<div className="summary-amount scroll-group-date">
<span className="amount-text">{groupDate}</span>
<div className="summary-actions">
<button className="filter-btn">
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt={t('transaction.searchOptions')}
onClick={onClickToOpenFilter}
/>
{ filterUsed &&
<span className="notification-badge2"></span>
}
</button>
<button className="download-btn">
<img
src={IMAGE_ROOT + '/ico_download.svg'}
alt={t('transaction.download')}
onClick={onClickToOpenDownloadBottomSheet}
/>
</button>
</div>
</div>
</div>
}
<section
className="transaction-list"
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
style={{ height: (listHeight > 0) ? listHeight + 'px' : 'unset' }}
>
{ getListDateGroup() }
{getListDateGroup()}
</section>
</>
);

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

@@ -296,16 +296,24 @@ export const FundAccountResultListWrap = () => {
let heightList = GetListHeight();
setListHeight(heightList.listHeight);
let tabContent = document.querySelector('.tab-content');
tabContent?.addEventListener('scroll', (e: Event) => {
setScrollAction(e, setGroupDate, setGroupDateOn);
});
// DOM이 렌더링된 후에 이벤트 리스너 등록
const timer = setTimeout(() => {
let tabContent = document.querySelector('.tab-content');
const handleScroll = (e: Event) => {
setScrollAction(e, setGroupDate, setGroupDateOn);
};
tabContent?.addEventListener('scroll', handleScroll);
return () => {
tabContent?.removeEventListener('scroll', handleScroll);
};
}, 100);
return () => {
ListScrollOn(false);
tabContent?.removeEventListener('scroll', (e: Event) => {
setScrollAction(e, setGroupDate, setGroupDateOn);
});
clearTimeout(timer);
};
}, []);
@@ -425,6 +433,9 @@ export const FundAccountResultListWrap = () => {
alt={t('transaction.searchOptions')}
onClick={onClickToOpenFilter}
/>
{filterUsed &&
<span className="notification-badge2"></span>
}
</button>
<button className="download-btn">
<img
@@ -438,7 +449,6 @@ export const FundAccountResultListWrap = () => {
}
<section
className="transaction-list"
style={{ height: (listHeight > 0) ? listHeight + 'px' : 'unset' }}
>
{getListDateGroup()}
</section>

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

@@ -78,8 +78,8 @@ export const FundAccountTransferListWrap = () => {
const { mutateAsync: extensionFundAccountBalance } = useExtensionFundAccountBalanceMutation();
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if(entry.isIntersecting){
if(onActionIntersect && !!pageParam.cursor){
if (entry.isIntersecting) {
if (onActionIntersect && !!pageParam.cursor) {
setOnActionIntersect(false);
callList('page');
}
@@ -87,7 +87,7 @@ export const FundAccountTransferListWrap = () => {
});
};
const { setTarget } = useIntersectionObserver({
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
@@ -103,34 +103,34 @@ export const FundAccountTransferListWrap = () => {
toDate: toDate,
resultStatus: status,
page: {
...pageParam,
...{ sortType: sortType }
}
...pageParam,
...{ sortType: sortType }
}
};
if(type !== 'page' && listParams.page){
if (type !== 'page' && listParams.page) {
listParams.page.cursor = null;
}
extensionFundAccountTransferList(listParams).then((rs: any) => {
if(type === 'page'){
if (type === 'page') {
setListItems([
...listItems,
...rs.content
]);
}
else{
else {
setListItems(rs.content);
}
if(rs.hasNext
if (rs.hasNext
&& rs.nextCursor !== pageParam.cursor
&& rs.content.length === DEFAULT_PAGE_PARAM.size
){
) {
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
}
else{
else {
setPageParam({
...pageParam,
...{ cursor: null }
@@ -142,7 +142,7 @@ export const FundAccountTransferListWrap = () => {
&& rs.content.length === DEFAULT_PAGE_PARAM.size
);
}).catch((e: any) => {
if(e.response?.data?.error?.message){
if (e.response?.data?.error?.message) {
snackBar(e.response?.data?.error?.message);
return;
}
@@ -160,18 +160,18 @@ export const FundAccountTransferListWrap = () => {
const setDetailData = (detailData: DetailData) => {
setDetailOn(detailData.detailOn);
if(detailData.seq){
if (detailData.seq) {
setDetailSeq(detailData.seq);
}
};
const onRequestDownloadExcel = (
selectedMode: DownloadSelectedMode,
userEmail?: string
) => {
if(selectedMode === DownloadSelectedMode.EMAIL
selectedMode: DownloadSelectedMode,
userEmail?: string
) => {
if (selectedMode === DownloadSelectedMode.EMAIL
&& userEmail
){
) {
const params: ExtensionFundAccountTransferExcelParams = {
mid: mid,
email: userEmail,
@@ -181,7 +181,7 @@ export const FundAccountTransferListWrap = () => {
extensionFundAccountTransferExcel(params).then((rs: ExtensionFundAccountTransferExcelResponse) => {
console.log('Excel Download Status:', rs.status);
}).catch((e: any) => {
if(e.response?.data?.error?.message){
if (e.response?.data?.error?.message) {
snackBar(e.response?.data?.error?.message);
return;
}
@@ -196,7 +196,7 @@ export const FundAccountTransferListWrap = () => {
extensionFundAccountBalance(params).then((rs: ExtensionFundAccountBalanceResponse) => {
setBalance(rs.balance);
}).catch((e: any) => {
if(e.response?.data?.error?.message){
if (e.response?.data?.error?.message) {
snackBar(e.response?.data?.error?.message);
return;
}
@@ -232,11 +232,11 @@ export const FundAccountTransferListWrap = () => {
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={ AdditionalServiceCategory.FundAccountTransfer }
key={ date + '-' + i }
date={ date }
items={ list }
setDetailData={ setDetailData }
additionalServiceCategory={AdditionalServiceCategory.FundAccountTransfer}
key={date + '-' + i}
date={date}
items={list}
setDetailData={setDetailData}
></ListDateGroup>
);
}
@@ -250,12 +250,12 @@ export const FundAccountTransferListWrap = () => {
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={ AdditionalServiceCategory.FundAccountTransfer }
mid={ mid }
key={ date + '-last' }
date={ date }
items={ list }
setDetailData={ setDetailData }
additionalServiceCategory={AdditionalServiceCategory.FundAccountTransfer}
mid={mid}
key={date + '-last'}
date={date}
items={list}
setDetailData={setDetailData}
></ListDateGroup>
);
}
@@ -272,17 +272,17 @@ export const FundAccountTransferListWrap = () => {
const checkUsedFilter = () => {
let rs: boolean = true;
if(searchCl === defaultParams.searchCl
if (searchCl === defaultParams.searchCl
&& searchValue === defaultParams.searchValue
&& fromDate === defaultParams.fromDate
&& toDate === defaultParams.toDate
&& status === defaultParams.status
&& bankCode === defaultParams.bankCode
){
rs = false;
) {
rs = false;
}
setFilterUsed(rs);
};
};
useEffect(() => {
callList();
@@ -303,16 +303,24 @@ export const FundAccountTransferListWrap = () => {
let heightList = GetListHeight();
setListHeight(heightList.listHeight);
let tabContent = document.querySelector('.tab-content');
tabContent?.addEventListener('scroll', (e: Event) => {
setScrollAction(e, setGroupDate, setGroupDateOn);
});
// DOM이 렌더링된 후에 이벤트 리스너 등록
const timer = setTimeout(() => {
let tabContent = document.querySelector('.tab-content');
const handleScroll = (e: Event) => {
setScrollAction(e, setGroupDate, setGroupDateOn);
};
tabContent?.addEventListener('scroll', handleScroll);
return () => {
tabContent?.removeEventListener('scroll', handleScroll);
};
}, 100);
return () => {
ListScrollOn(false);
tabContent?.removeEventListener('scroll', (e: Event) => {
setScrollAction(e, setGroupDate, setGroupDateOn);
});
clearTimeout(timer);
};
}, []);
@@ -330,13 +338,13 @@ export const FundAccountTransferListWrap = () => {
<button
className="filter-btn"
aria-label="필터"
onClick={ onClickToOpenFilter }
onClick={onClickToOpenFilter}
>
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt="검색옵션"
/>
{ filterUsed &&
{filterUsed &&
<span className="notification-badge2"></span>
}
</button>
@@ -344,7 +352,7 @@ export const FundAccountTransferListWrap = () => {
<button
className="download-btn"
aria-label="다운로드"
onClick={ onClickToOpenDownloadBottomSheet }
onClick={onClickToOpenDownloadBottomSheet}
>
<img
src={IMAGE_ROOT + '/ico_download.svg'}
@@ -386,34 +394,36 @@ export const FundAccountTransferListWrap = () => {
</div>
</div>
</section>
{ groupDateOn &&
<div className="summary-amount scroll-group-date">
<span className="amount-text">{ groupDate }</span>
<div className="summary-actions">
<button className="filter-btn">
<img
src={ IMAGE_ROOT + '/ico_setting.svg' }
alt={t('transaction.searchOptions')}
onClick={ onClickToOpenFilter }
/>
</button>
<button className="download-btn">
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
alt={t('transaction.download')}
onClick={ onClickToOpenDownloadBottomSheet }
/>
</button>
{groupDateOn &&
<div className="summary-amount scroll-group-date">
<span className="amount-text">{groupDate}</span>
<div className="summary-actions">
<button className="filter-btn">
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt={t('transaction.searchOptions')}
onClick={onClickToOpenFilter}
/>
{filterUsed &&
<span className="notification-badge2"></span>
}
</button>
<button className="download-btn">
<img
src={IMAGE_ROOT + '/ico_download.svg'}
alt={t('transaction.download')}
onClick={onClickToOpenDownloadBottomSheet}
/>
</button>
</div>
</div>
</div>
}
<section
className="transaction-list pb-86"
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
>
{ getListDateGroup() }
{getListDateGroup()}
</section>
<div ref={ setTarget }></div>
<div ref={setTarget}></div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
@@ -439,17 +449,17 @@ export const FundAccountTransferListWrap = () => {
setStatus={setStatus}
></FundAccountTransactionFilter>
<FundAccountTransferDetail
detailOn={ detailOn }
setDetailOn={ setDetailOn }
seq={ detailSeq }
detailOn={detailOn}
setDetailOn={setDetailOn}
seq={detailSeq}
></FundAccountTransferDetail>
{ !!downloadBottomSheetOn &&
{!!downloadBottomSheetOn &&
<DownloadBottomSheet
bottomSheetOn={ downloadBottomSheetOn }
setBottomSheetOn={ setDownloadBottomSheetOn }
imageMode={ false }
emailMode={ true }
sendRequest={ onRequestDownloadExcel }
bottomSheetOn={downloadBottomSheetOn}
setBottomSheetOn={setDownloadBottomSheetOn}
imageMode={false}
emailMode={true}
sendRequest={onRequestDownloadExcel}
></DownloadBottomSheet>
}
</>

43
src/entities/additional-service/ui/key-in-payment/key-in-payment-list.tsx
View File

@@ -12,6 +12,7 @@ export const KeyInPaymentList = ({
additionalServiceCategory,
listItems,
mid,
filterUsed,
onClickToOpenFilter,
onClickToOpenDownloadBottomSheet
}: KeyInPaymentListProps) => {
@@ -96,30 +97,32 @@ export const KeyInPaymentList = ({
return (
<>
{ groupDateOn &&
<div className="summary-amount scroll-group-date">
<span className="amount-text">{ groupDate }</span>
<div className="summary-actions">
<button className="filter-btn">
<img
src={ IMAGE_ROOT + '/ico_setting.svg' }
alt={t('transaction.searchOptions')}
onClick={ onClickToOpenFilter }
/>
</button>
<button className="download-btn">
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
alt={t('transaction.download')}
onClick={ onClickToOpenDownloadBottomSheet }
/>
</button>
{groupDateOn &&
<div className="summary-amount scroll-group-date">
<span className="amount-text">{groupDate}</span>
<div className="summary-actions">
<button className="filter-btn">
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt={t('transaction.searchOptions')}
onClick={onClickToOpenFilter}
/>
{filterUsed &&
<span className="notification-badge2"></span>
}
</button>
<button className="download-btn">
<img
src={IMAGE_ROOT + '/ico_download.svg'}
alt={t('transaction.download')}
onClick={onClickToOpenDownloadBottomSheet}
/>
</button>
</div>
</div>
</div>
}
<section
className="transaction-list"
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
>
{getListDateGroup()}
</section>

67
src/entities/additional-service/ui/link-payment/link-payment-history-list.tsx
View File

@@ -9,6 +9,7 @@ export const LinkPaymentHistoryList = ({
listItems,
mid,
setDetailData,
filterUsed,
onClickToOpenFilter,
onClickToOpenDownloadBottomSheet
}: LinkPaymentHistoryListProps) => {
@@ -36,12 +37,12 @@ export const LinkPaymentHistoryList = ({
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={ additionalServiceCategory }
mid={ mid }
key={ date + '-' + i }
date={ date }
items={ list }
setDetailData={ setDetailData }
additionalServiceCategory={additionalServiceCategory}
mid={mid}
key={date + '-' + i}
date={date}
items={list}
setDetailData={setDetailData}
></ListDateGroup>
);
}
@@ -55,12 +56,12 @@ export const LinkPaymentHistoryList = ({
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={ additionalServiceCategory }
mid={ mid }
key={ date + '-last' }
date={ date }
items={ list }
setDetailData={ setDetailData }
additionalServiceCategory={additionalServiceCategory}
mid={mid}
key={date + '-last'}
date={date}
items={list}
setDetailData={setDetailData}
></ListDateGroup>
);
}
@@ -87,30 +88,32 @@ export const LinkPaymentHistoryList = ({
return (
<>
{ groupDateOn &&
<div className="summary-amount scroll-group-date">
<span className="amount-text">{ groupDate }</span>
<div className="summary-actions">
<button className="filter-btn">
<img
src={ IMAGE_ROOT + '/ico_setting.svg' }
alt={t('transaction.searchOptions')}
onClick={ onClickToOpenFilter }
/>
</button>
<button className="download-btn">
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
alt={t('transaction.download')}
onClick={ onClickToOpenDownloadBottomSheet }
/>
</button>
{groupDateOn &&
<div className="summary-amount scroll-group-date">
<span className="amount-text">{groupDate}</span>
<div className="summary-actions">
<button className="filter-btn">
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt={t('transaction.searchOptions')}
onClick={onClickToOpenFilter}
/>
{filterUsed &&
<span className="notification-badge2"></span>
}
</button>
<button className="download-btn">
<img
src={IMAGE_ROOT + '/ico_download.svg'}
alt={t('transaction.download')}
onClick={onClickToOpenDownloadBottomSheet}
/>
</button>
</div>
</div>
</div>
}
<div
className="transaction-list"
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
>
{getListDateGroup()}
</div>

1
src/entities/additional-service/ui/link-payment/link-payment-history-wrap.tsx
View File

@@ -316,6 +316,7 @@ export const LinkPaymentHistoryWrap = () => {
additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
mid={mid}
setDetailData={setDetailData}
filterUsed={filterUsed}
onClickToOpenFilter={onClickToOpenFilter}
onClickToOpenDownloadBottomSheet={onClickToOpenDownloadBottomSheet}
></LinkPaymentHistoryList>

67
src/entities/additional-service/ui/link-payment/link-payment-wait-list.tsx
View File

@@ -9,6 +9,7 @@ export const LinkPaymentWaitList = ({
listItems,
mid,
setDetailData,
filterUsed,
onClickToOpenFilter,
onClickToOpenDownloadBottomSheet
}: LinkPaymentWaitListProps) => {
@@ -36,12 +37,12 @@ export const LinkPaymentWaitList = ({
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={ additionalServiceCategory }
key={ date + '-' + i }
mid={ mid }
date={ date }
items={ list }
setDetailData={ setDetailData }
additionalServiceCategory={additionalServiceCategory}
key={date + '-' + i}
mid={mid}
date={date}
items={list}
setDetailData={setDetailData}
></ListDateGroup>
);
}
@@ -55,12 +56,12 @@ export const LinkPaymentWaitList = ({
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={ additionalServiceCategory }
mid={ mid }
key={ date + '-last' }
date={ date }
items={ list }
setDetailData={ setDetailData }
additionalServiceCategory={additionalServiceCategory}
mid={mid}
key={date + '-last'}
date={date}
items={list}
setDetailData={setDetailData}
></ListDateGroup>
);
}
@@ -87,30 +88,32 @@ export const LinkPaymentWaitList = ({
return (
<>
{ groupDateOn &&
<div className="summary-amount scroll-group-date">
<span className="amount-text">{ groupDate }</span>
<div className="summary-actions">
<button className="filter-btn">
<img
src={ IMAGE_ROOT + '/ico_setting.svg' }
alt={t('transaction.searchOptions')}
onClick={ onClickToOpenFilter }
/>
</button>
<button className="download-btn">
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
alt={t('transaction.download')}
onClick={ onClickToOpenDownloadBottomSheet }
/>
</button>
{groupDateOn &&
<div className="summary-amount scroll-group-date">
<span className="amount-text">{groupDate}</span>
<div className="summary-actions">
<button className="filter-btn">
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt={t('transaction.searchOptions')}
onClick={onClickToOpenFilter}
/>
{filterUsed &&
<span className="notification-badge2"></span>
}
</button>
<button className="download-btn">
<img
src={IMAGE_ROOT + '/ico_download.svg'}
alt={t('transaction.download')}
onClick={onClickToOpenDownloadBottomSheet}
/>
</button>
</div>
</div>
</div>
}
<div
className="transaction-list"
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
>
{getListDateGroup()}
</div>

1
src/entities/additional-service/ui/link-payment/link-payment-wait-send-wrap.tsx
View File

@@ -281,6 +281,7 @@ export const LinkPaymentWaitSendWrap = () => {
additionalServiceCategory={AdditionalServiceCategory.LinkPaymentWait}
mid={mid}
setDetailData={setDetailData}
filterUsed={filterUsed}
onClickToOpenFilter={onClickToOpenFilter}
onClickToOpenDownloadBottomSheet={onClickToOpenDownloadBottomSheet}
></LinkPaymentWaitList>

63
src/entities/additional-service/ui/payout/payout-list.tsx
View File

@@ -10,13 +10,14 @@ export const PayoutList = ({
searchDateType,
mid,
setDetailData,
onClickToOpenFilter,
onClickToOpenDownloadBottomSheet
filterUsed,
onClickToOpenFilter,
onClickToOpenDownloadBottomSheet
}: PayoutListProps) => {
const { t, i18n } = useTranslation();
const [groupDate, setGroupDate] = useState<string>('');
const [groupDateOn, setGroupDateOn] = useState<boolean>(false);
const [groupDateOn, setGroupDateOn] = useState<boolean>(false);
const [listHeight, setListHeight] = useState<number>(0);
@@ -24,20 +25,20 @@ export const PayoutList = ({
let rs = [];
let date = '';
let list = [];
for (let i=0;i<listItems.length;i++){
for (let i = 0; i < listItems.length; i++) {
let itemDateStr = '';
if(searchDateType === PayoutSearchDateType.REQUEST_DATE){
if (searchDateType === PayoutSearchDateType.REQUEST_DATE) {
itemDateStr = listItems[i]?.requestDate || '';
}
else if(searchDateType === PayoutSearchDateType.SETTLEMENT_DATE){
else if (searchDateType === PayoutSearchDateType.SETTLEMENT_DATE) {
itemDateStr = listItems[i]?.settlementDate || '';
}
let itemDate = itemDateStr.substring(0, 8);
if(i === 0){
if (i === 0) {
date = itemDate;
}
if(date !== itemDate){
if(list.length > 0){
if (date !== itemDate) {
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
@@ -54,7 +55,7 @@ export const PayoutList = ({
}
list.push(listItems[i] as any);
}
if(list.length > 0){
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
@@ -89,30 +90,32 @@ export const PayoutList = ({
return (
<>
{ groupDateOn &&
<div className="summary-amount scroll-group-date">
<span className="amount-text">{ groupDate }</span>
<div className="summary-actions">
<button className="filter-btn">
<img
src={ IMAGE_ROOT + '/ico_setting.svg' }
alt={t('transaction.searchOptions')}
onClick={ onClickToOpenFilter }
/>
</button>
<button className="download-btn">
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
alt={t('transaction.download')}
onClick={ onClickToOpenDownloadBottomSheet }
/>
</button>
{groupDateOn &&
<div className="summary-amount scroll-group-date">
<span className="amount-text">{groupDate}</span>
<div className="summary-actions">
<button className="filter-btn">
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt={t('transaction.searchOptions')}
onClick={onClickToOpenFilter}
/>
{filterUsed &&
<span className="notification-badge2"></span>
}
</button>
<button className="download-btn">
<img
src={IMAGE_ROOT + '/ico_download.svg'}
alt={t('transaction.download')}
onClick={onClickToOpenDownloadBottomSheet}
/>
</button>
</div>
</div>
</div>
}
<section
className="transaction-list"
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
>
{getListDateGroup()}
</section>

77
src/entities/additional-service/ui/sms-payment/sms-payment-list.tsx
View File

@@ -5,12 +5,13 @@ import { useEffect, useState } from 'react';
import { GetListHeight, IMAGE_ROOT, ListScrollOn, setScrollAction } from '@/shared/constants/common';
export const SmsPaymentList = ({
listItems,
additionalServiceCategory,
mid,
onResendClick,
onClickToOpenFilter,
onClickToOpenDownloadBottomSheet
listItems,
additionalServiceCategory,
mid,
onResendClick,
filterUsed,
onClickToOpenFilter,
onClickToOpenDownloadBottomSheet
}: SmsPaymentListProps) => {
const { t, i18n } = useTranslation();
@@ -25,23 +26,23 @@ export const SmsPaymentList = ({
let list = [];
for (let i = 0; i < listItems.length; i++) {
let items = listItems[i];
if(!!items) {
if (!!items) {
let sendDate = items?.sendDate;
sendDate = sendDate?.substring(0, 8);
if(!!sendDate) {
if(i === 0) {
if (!!sendDate) {
if (i === 0) {
date = sendDate;
}
if(date !== sendDate) {
if(list.length > 0) {
if (date !== sendDate) {
if (list.length > 0) {
rs.push(
<ListDateGroup
onResendClick={onResendClick}
additionalServiceCategory={additionalServiceCategory}
key={ date + '-' + i}
mid={mid}
date={ date }
items={ list }
onResendClick={onResendClick}
additionalServiceCategory={additionalServiceCategory}
key={date + '-' + i}
mid={mid}
date={date}
items={list}
></ListDateGroup>
);
}
@@ -87,30 +88,32 @@ export const SmsPaymentList = ({
return (
<>
{ groupDateOn &&
<div className="summary-amount scroll-group-date">
<span className="amount-text">{ groupDate }</span>
<div className="summary-actions">
<button className="filter-btn">
<img
src={ IMAGE_ROOT + '/ico_setting.svg' }
alt={t('transaction.searchOptions')}
onClick={ onClickToOpenFilter }
/>
</button>
<button className="download-btn">
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
alt={t('transaction.download')}
onClick={ onClickToOpenDownloadBottomSheet }
/>
</button>
{groupDateOn &&
<div className="summary-amount scroll-group-date">
<span className="amount-text">{groupDate}</span>
<div className="summary-actions">
<button className="filter-btn">
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt={t('transaction.searchOptions')}
onClick={onClickToOpenFilter}
/>
{filterUsed &&
<span className="notification-badge2"></span>
}
</button>
<button className="download-btn">
<img
src={IMAGE_ROOT + '/ico_download.svg'}
alt={t('transaction.download')}
onClick={onClickToOpenDownloadBottomSheet}
/>
</button>
</div>
</div>
</div>
}
<section
className="transaction-list"
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
>
{getListDateGroup()}
</section>

1
src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx
View File

@@ -291,6 +291,7 @@ export const AccountHolderAuthPage = () => {
listItems={listItems}
mid={mid}
setDetailData={setDetailData}
filterUsed={ filterUsed }
onClickToOpenFilter={ onClickToOpenFilter }
onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
></AccountHolderAuthList>

1
src/pages/additional-service/account-holder-search/account-holder-search-page.tsx
View File

@@ -311,6 +311,7 @@ export const AccountHolderSearchPage = () => {
listItems={listItems}
mid={mid}
setDetailData={setDetailData}
filterUsed={filterUsed}
onClickToOpenFilter={ onClickToOpenFilter }
onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
></AccountHolderSearchList>

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

@@ -324,16 +324,24 @@ export const AlimtalkListPage = () => {
let heightList = GetListHeight();
setListHeight(heightList.listHeight);
let tabContent = document.querySelector('.tab-content');
tabContent?.addEventListener('scroll', (e: Event) => {
setScrollAction(e, setGroupDate, setGroupDateOn);
});
// DOM이 렌더링된 후에 이벤트 리스너 등록
const timer = setTimeout(() => {
let tabContent = document.querySelector('.tab-content');
const handleScroll = (e: Event) => {
setScrollAction(e, setGroupDate, setGroupDateOn);
};
tabContent?.addEventListener('scroll', handleScroll);
return () => {
tabContent?.removeEventListener('scroll', handleScroll);
};
}, 100);
return () => {
ListScrollOn(false);
tabContent?.removeEventListener('scroll', (e: Event) => {
setScrollAction(e, setGroupDate, setGroupDateOn);
});
clearTimeout(timer);
};
}, []);
@@ -393,6 +401,9 @@ export const AlimtalkListPage = () => {
alt={t('transaction.searchOptions')}
onClick={ onClickToOpenFilter }
/>
{ filterUsed &&
<span className="notification-badge2"></span>
}
</button>
<button className="download-btn">
<img

1
src/pages/additional-service/ars/list-page.tsx
View File

@@ -321,6 +321,7 @@ export const ArsListPage = () => {
listItems={listItems}
mid={mid}
setDetailData={setDetailData}
filterUsed={filterUsed}
onClickToOpenFilter={onClickToOpenFilter}
onClickToOpenDownloadBottomSheet={onClickToOpenDownloadBottomSheet}
></ArsList>

187
src/pages/additional-service/face-auth/face-auth-page.tsx
View File

@@ -78,8 +78,8 @@ export const FaceAuthPage = () => {
const { mutateAsync: downloadExcel } = useExtensionFaceAuthDownloadExcelMutation();
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if(entry.isIntersecting){
if(onActionIntersect && !!pageParam.cursor){
if (entry.isIntersecting) {
if (onActionIntersect && !!pageParam.cursor) {
setOnActionIntersect(false);
callList('page');
}
@@ -105,42 +105,42 @@ export const FaceAuthPage = () => {
...{ sortType: sortType }
}
};
if(type !== 'page' && listParams.page){
listParams.page.cursor = null;
}
if (type !== 'page' && listParams.page) {
listParams.page.cursor = null;
}
faceAuthHistoryList(listParams).then((rs: ExtensionFaceAuthListResponse) => {
if(type === 'page'){
setListItems([
...listItems,
...rs.content
]);
}
else{
setListItems(rs.content);
}
if(rs.hasNext
if (type === 'page') {
setListItems([
...listItems,
...rs.content
]);
}
else {
setListItems(rs.content);
}
if (rs.hasNext
&& rs.nextCursor !== pageParam.cursor
&& rs.content.length === DEFAULT_PAGE_PARAM.size
){
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
}
else{
setPageParam({
...pageParam,
...{ cursor: null }
});
&& rs.content.length === DEFAULT_PAGE_PARAM.size
) {
setPageParam({
...pageParam,
...{ cursor: rs.nextCursor }
});
}
else {
setPageParam({
...pageParam,
...{ cursor: null }
});
}
setOnActionIntersect(
!!rs.hasNext
!!rs.hasNext
&& rs.nextCursor !== pageParam.cursor
&& rs.content.length === DEFAULT_PAGE_PARAM.size
);
}).catch((e: any) => {
if(e.response?.data?.error?.message){
&& rs.content.length === DEFAULT_PAGE_PARAM.size
);
}).catch((e: any) => {
if (e.response?.data?.error?.message) {
snackBar(e.response?.data?.error?.message);
return;
}
@@ -159,9 +159,9 @@ export const FaceAuthPage = () => {
selectedMode: DownloadSelectedMode,
userEmail?: string
) => {
if(selectedMode === DownloadSelectedMode.EMAIL
&& userEmail
){
if (selectedMode === DownloadSelectedMode.EMAIL
&& userEmail
) {
const params: ExtensionFaceAuthExcelDownlaodPrams = {
mid: mid,
email: userEmail,
@@ -171,11 +171,11 @@ export const FaceAuthPage = () => {
downloadExcel(params).then((rs: ExtensionFaceAuthExcelDownlaodResponse) => {
console.log('Excel Download Status:', rs.status);
}).catch((e: any) => {
if(e.response?.data?.error?.message){
snackBar(e.response?.data?.error?.message);
return;
}
});
if (e.response?.data?.error?.message) {
snackBar(e.response?.data?.error?.message);
return;
}
});
}
};
@@ -195,17 +195,17 @@ export const FaceAuthPage = () => {
let rs = [];
let date = '';
let list = [];
for(let i = 0; i < listItems.length; i++){
for (let i = 0; i < listItems.length; i++) {
let item = listItems[i];
if(!!item){
if (!!item) {
let requestDate = item?.requestDate;
requestDate = requestDate?.substring(0, 8);
if(!!requestDate){
if(i === 0){
if (!!requestDate) {
if (i === 0) {
date = requestDate;
}
if(date !== requestDate){
if(list.length > 0){
if (date !== requestDate) {
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.FaceAuth}
@@ -223,7 +223,7 @@ export const FaceAuthPage = () => {
}
}
}
if(list.length > 0){
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.FaceAuth}
@@ -238,16 +238,16 @@ export const FaceAuthPage = () => {
};
const checkUsedFilter = () => {
let rs: boolean = true;
if(userMallId === defaultParams.userMallId
&& fromDate === defaultParams.fromDate
&& toDate === defaultParams.toDate
&& transType === defaultParams.transType
&& authResult === defaultParams.authResult
){
rs = false;
}
setFilterUsed(rs);
let rs: boolean = true;
if (userMallId === defaultParams.userMallId
&& fromDate === defaultParams.fromDate
&& toDate === defaultParams.toDate
&& transType === defaultParams.transType
&& authResult === defaultParams.authResult
) {
rs = false;
}
setFilterUsed(rs);
};
useEffect(() => {
@@ -278,8 +278,8 @@ export const FaceAuthPage = () => {
};
}, []);
if(!hasAccess){
return <AccessDeniedDialog />;
if (!hasAccess) {
return <AccessDeniedDialog />;
}
return (
@@ -303,17 +303,17 @@ export const FaceAuthPage = () => {
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt={t('transaction.searchOptions')}
onClick={ onClickToOpenFilter }
onClick={onClickToOpenFilter}
/>
{ filterUsed &&
<span className="notification-badge2"></span>
}
{filterUsed &&
<span className="notification-badge2"></span>
}
</button>
</div>
<button
className="download-btn"
aria-label={t('transaction.download')}
onClick={ onClickToOpenDownloadBottomSheet }
onClick={onClickToOpenDownloadBottomSheet}
>
<img
src={IMAGE_ROOT + '/ico_download.svg'}
@@ -346,34 +346,37 @@ export const FaceAuthPage = () => {
</div>
</div>
</div>
{ groupDateOn &&
<div className="summary-amount scroll-group-date">
<span className="amount-text">{ groupDate }</span>
<div className="summary-actions">
<button className="filter-btn">
<img
src={ IMAGE_ROOT + '/ico_setting.svg' }
alt={t('transaction.searchOptions')}
onClick={ onClickToOpenFilter }
/>
</button>
<button className="download-btn">
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
alt={t('transaction.download')}
onClick={ onClickToOpenDownloadBottomSheet }
/>
</button>
{groupDateOn &&
<div className="summary-amount scroll-group-date">
<span className="amount-text">{groupDate}</span>
<div className="summary-actions">
<button className="filter-btn">
<img
src={IMAGE_ROOT + '/ico_setting.svg'}
alt={t('transaction.searchOptions')}
onClick={onClickToOpenFilter}
/>
{ filterUsed &&
<span className="notification-badge2"></span>
}
</button>
<button className="download-btn">
<img
src={IMAGE_ROOT + '/ico_download.svg'}
alt={t('transaction.download')}
onClick={onClickToOpenDownloadBottomSheet}
/>
</button>
</div>
</div>
</div>
}
<section
className="transaction-list"
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
style={{ height: (listHeight > 0) ? listHeight + 'px' : 'unset' }}
>
{ getListDateGroup() }
{getListDateGroup()}
</section>
<div ref={ setTarget }></div>
<div ref={setTarget}></div>
</div>
</div>
</main>
@@ -393,13 +396,13 @@ export const FaceAuthPage = () => {
setTransType={setTransType}
setAuthResult={setAuthResult}
/>
{ !!downloadBottomSheetOn &&
{!!downloadBottomSheetOn &&
<DownloadBottomSheet
bottomSheetOn={ downloadBottomSheetOn }
setBottomSheetOn={ setDownloadBottomSheetOn }
imageMode={ false }
emailMode={ true }
sendRequest={ onRequestDownloadExcel }
bottomSheetOn={downloadBottomSheetOn}
setBottomSheetOn={setDownloadBottomSheetOn}
imageMode={false}
emailMode={true}
sendRequest={onRequestDownloadExcel}
></DownloadBottomSheet>
}
</>

1
src/pages/additional-service/key-in-payment/key-in-payment-page.tsx
View File

@@ -289,6 +289,7 @@ export const KeyInPaymentPage = () => {
listItems={listItems}
additionalServiceCategory={AdditionalServiceCategory.KeyInPayment}
mid={mid}
filterUsed={filterUsed}
onClickToOpenFilter={ onClickToOpenFilter }
onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
></KeyInPaymentList>

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

@@ -331,6 +331,7 @@ export const PayoutListPage = () => {
searchDateType={searchDateType}
mid={mid}
setDetailData={setDetailData}
filterUsed={filterUsed}
onClickToOpenFilter={onClickToOpenFilter}
onClickToOpenDownloadBottomSheet={onClickToOpenDownloadBottomSheet}
></PayoutList>

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

@@ -278,6 +278,7 @@ export const SmsPaymentPage = () => {
additionalServiceCategory={AdditionalServiceCategory.SMSPayment}
mid={mid}
onResendClick={onClickToShowDetail}
filterUsed={filterUsed}
onClickToOpenFilter={ onClickToOpenFilter }
onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
></SmsPaymentList>