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-11-15 14:48:22 +09:00
parent 482bd0d43f
commit a64efdf697
13 changed files with 428 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

99
src/entities/transaction/ui/all-transaction-list.tsx
View File

@@ -1,11 +1,23 @@
import { useEffect, useState } from 'react';
import { AllTransactionListProps, ListItemProps } from '../model/types';
import { ListDateGroup } from './list-date-group';
import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
import { useTranslation } from 'react-i18next';
import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store';
export const AllTransactionList = ({
transactionCategory,
listItems,
setDetailData
setDetailData,
onClickToOpenFilter,
onClickToOpenDownloadBottomSheet
}: AllTransactionListProps) => {
const { t, i18n } = useTranslation();
const { groupDate, setGroupDate } = useGroupDateStore();
const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
const [listHeight, setListHeight] = useState<number>(0);
const getListDateGroup = () => {
let rs = [];
@@ -53,9 +65,92 @@ export const AllTransactionList = ({
return rs;
};
const getMax = (data: Array<Record<string, any>>) => {
let maxItem = null;
if(data.length > 0){
let numberArr = data.map((
value: Record<string, any>,
index: number
) => {
return value.top;
});
let max = Math.max(...numberArr);
maxItem = data.filter((
value: Record<string, any>,
index: number
) => {
return value.top === max;
});
}
return maxItem? maxItem[0]: null;
};
const setScrollAction = (e: Event) => {
let dateHeader = document.querySelectorAll('.date-header');
let posData: Array<Record<string, any>> = [];
dateHeader.forEach((value, index) => {
let date: string = value.innerHTML;
let top: number = value.getBoundingClientRect().top;
if(top < 10){
posData.push({
date: date,
top: top
});
}
});
let maxItem = getMax(posData);
if(maxItem){
setGroupDateOn(true);
setGroupDate(maxItem.date);
}
else{
setGroupDateOn(false);
setGroupDate('');
}
};
useEffect(() => {
ListScrollOn(true);
let heightList = GetListHeight();
setListHeight(heightList.listHeight);
let tabContent = document.querySelector('.tab-content');
tabContent?.addEventListener('scroll', setScrollAction);
return () => {
ListScrollOn(false);
tabContent?.removeEventListener('scroll', setScrollAction);
};
}, []);
return (
<>
<div className="transaction-list">
{ 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>
</div>
</div>
}
<div
className="transaction-list"
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
>
{ getListDateGroup() }
</div>
</>

103
src/entities/transaction/ui/billing-list.tsx
View File

@@ -1,14 +1,23 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { BillingListProps } from '../model/types';
import { ListDateGroup } from './list-date-group';
import { useTranslation } from 'react-i18next';
import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store';
import { useEffect, useState } from 'react';
import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
export const BillingList = ({
transactionCategory,
listItems,
setDetailData
setDetailData,
onClickToOpenFilter,
onClickToOpenDownloadBottomSheet
}: BillingListProps) => {
const { t, i18n } = useTranslation();
const { groupDate, setGroupDate } = useGroupDateStore();
const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
const [listHeight, setListHeight] = useState<number>(0);
const getListDateGroup = () => {
let rs = [];
@@ -55,13 +64,95 @@ export const BillingList = ({
return rs;
};
const getMax = (data: Array<Record<string, any>>) => {
let maxItem = null;
if(data.length > 0){
let numberArr = data.map((
value: Record<string, any>,
index: number
) => {
return value.top;
});
let max = Math.max(...numberArr);
maxItem = data.filter((
value: Record<string, any>,
index: number
) => {
return value.top === max;
});
}
return maxItem? maxItem[0]: null;
};
const setScrollAction = (e: Event) => {
let dateHeader = document.querySelectorAll('.date-header');
let posData: Array<Record<string, any>> = [];
dateHeader.forEach((value, index) => {
let date: string = value.innerHTML;
let top: number = value.getBoundingClientRect().top;
if(top < 10){
posData.push({
date: date,
top: top
});
}
});
let maxItem = getMax(posData);
if(maxItem){
setGroupDateOn(true);
setGroupDate(maxItem.date);
}
else{
setGroupDateOn(false);
setGroupDate('');
}
};
useEffect(() => {
ListScrollOn(true);
let heightList = GetListHeight();
setListHeight(heightList.listHeight);
let tabContent = document.querySelector('.tab-content');
tabContent?.addEventListener('scroll', setScrollAction);
return () => {
ListScrollOn(false);
tabContent?.removeEventListener('scroll', setScrollAction);
};
}, []);
return (
<>
<div className="transaction-list">
{ getListDateGroup() }
</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>
</div>
</div>
}
<div
className="transaction-list"
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
>
{ getListDateGroup() }
</div>
</>
);
};

104
src/entities/transaction/ui/cash-receipt-list.tsx
View File

@@ -1,11 +1,24 @@
import { useTranslation } from 'react-i18next';
import { CashReceiptListProps } from '../model/types';
import { ListDateGroup } from './list-date-group';
import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store';
import { useEffect, useState } from 'react';
import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
export const CashReceiptList = ({
transactionCategory,
listItems,
setDetailData
setDetailData,
onClickToOpenFilter,
onClickToOpenDownloadBottomSheet
}: CashReceiptListProps) => {
const { t, i18n } = useTranslation();
const { groupDate, setGroupDate } = useGroupDateStore();
const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
const [listHeight, setListHeight] = useState<number>(0);
const getListDateGroup = () => {
let rs = [];
let date = '';
@@ -51,11 +64,94 @@ export const CashReceiptList = ({
return rs;
};
const getMax = (data: Array<Record<string, any>>) => {
let maxItem = null;
if(data.length > 0){
let numberArr = data.map((
value: Record<string, any>,
index: number
) => {
return value.top;
});
let max = Math.max(...numberArr);
maxItem = data.filter((
value: Record<string, any>,
index: number
) => {
return value.top === max;
});
}
return maxItem? maxItem[0]: null;
};
const setScrollAction = (e: Event) => {
let dateHeader = document.querySelectorAll('.date-header');
let posData: Array<Record<string, any>> = [];
dateHeader.forEach((value, index) => {
let date: string = value.innerHTML;
let top: number = value.getBoundingClientRect().top;
if(top < 10){
posData.push({
date: date,
top: top
});
}
});
let maxItem = getMax(posData);
if(maxItem){
setGroupDateOn(true);
setGroupDate(maxItem.date);
}
else{
setGroupDateOn(false);
setGroupDate('');
}
};
useEffect(() => {
ListScrollOn(true);
let heightList = GetListHeight();
setListHeight(heightList.listHeight);
let tabContent = document.querySelector('.tab-content');
tabContent?.addEventListener('scroll', setScrollAction);
return () => {
ListScrollOn(false);
tabContent?.removeEventListener('scroll', setScrollAction);
};
}, []);
return (
<>
<div className="transaction-list">
{ getListDateGroup() }
</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>
</div>
</div>
}
<div
className="transaction-list"
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
>
{ getListDateGroup() }
</div>
</>
);
};

99
src/entities/transaction/ui/escrow-list.tsx
View File

@@ -1,11 +1,23 @@
import { useTranslation } from 'react-i18next';
import { EscrowListProps } from '../model/types';
import { ListDateGroup } from './list-date-group';
import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store';
import { useEffect, useState } from 'react';
import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
export const EscrowList = ({
transactionCategory,
listItems,
setDetailData
setDetailData,
onClickToOpenFilter,
onClickToOpenDownloadBottomSheet
}: EscrowListProps) => {
const { t, i18n } = useTranslation();
const { groupDate, setGroupDate } = useGroupDateStore();
const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
const [listHeight, setListHeight] = useState<number>(0);
const getListDateGroup = () => {
let rs = [];
@@ -51,10 +63,93 @@ export const EscrowList = ({
}
return rs;
};
const getMax = (data: Array<Record<string, any>>) => {
let maxItem = null;
if(data.length > 0){
let numberArr = data.map((
value: Record<string, any>,
index: number
) => {
return value.top;
});
let max = Math.max(...numberArr);
maxItem = data.filter((
value: Record<string, any>,
index: number
) => {
return value.top === max;
});
}
return maxItem? maxItem[0]: null;
};
const setScrollAction = (e: Event) => {
let dateHeader = document.querySelectorAll('.date-header');
let posData: Array<Record<string, any>> = [];
dateHeader.forEach((value, index) => {
let date: string = value.innerHTML;
let top: number = value.getBoundingClientRect().top;
if(top < 10){
posData.push({
date: date,
top: top
});
}
});
let maxItem = getMax(posData);
if(maxItem){
setGroupDateOn(true);
setGroupDate(maxItem.date);
}
else{
setGroupDateOn(false);
setGroupDate('');
}
};
useEffect(() => {
ListScrollOn(true);
let heightList = GetListHeight();
setListHeight(heightList.listHeight);
let tabContent = document.querySelector('.tab-content');
tabContent?.addEventListener('scroll', setScrollAction);
return () => {
ListScrollOn(false);
tabContent?.removeEventListener('scroll', setScrollAction);
};
}, []);
return (
<>
<div className="transaction-list">
{ 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>
</div>
</div>
}
<div
className="transaction-list"
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
>
{ getListDateGroup() }
</div>
</>

2
src/entities/transaction/ui/list-date-group.tsx
View File

@@ -13,7 +13,7 @@ export const ListDateGroup = ({
setDetailData
}: ListDateGroupProps) => {
const { t, i18n } = useTranslation();
// Set moment locale based on current language
const currentLocale = i18n.language === 'ko' ? 'ko' : 'en-gb';
moment.locale(currentLocale);