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

8
src/entities/transaction/model/types.ts
View File

@@ -155,21 +155,29 @@ export interface AllTransactionListProps {
transactionCategory: TransactionCategory;
listItems: Array<ListItemProps>;
setDetailData: (detailData: DetailData) => void;
onClickToOpenFilter?: () => void;
onClickToOpenDownloadBottomSheet?: () => void;
};
export interface CashReceiptListProps {
transactionCategory: TransactionCategory;
listItems: Array<ListItemProps>;
setDetailData: (detailData: DetailData) => void;
onClickToOpenFilter?: () => void;
onClickToOpenDownloadBottomSheet?: () => void;
};
export interface EscrowListProps {
transactionCategory: TransactionCategory;
listItems: Array<ListItemProps>;
setDetailData: (detailData: DetailData) => void;
onClickToOpenFilter?: () => void;
onClickToOpenDownloadBottomSheet?: () => void;
};
export interface BillingListProps {
transactionCategory: TransactionCategory;
listItems: Array<ListItemProps>;
setDetailData: (detailData: DetailData) => void;
onClickToOpenFilter?: () => void;
onClickToOpenDownloadBottomSheet?: () => void;
};
export interface AllTransactionListItem {
tid?: string;

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);

8
src/entities/vat-return/ui/section/amount-section.tsx
View File

@@ -155,7 +155,13 @@ export const AmountSection = ({
<TaxInvoiceSample
taxInvoiceSampleOn={ taxInvoiceSampleOn }
setTaxInvoiceSampleOn={ setTaxInvoiceSampleOn }
supplierInfo={ supplierInfo }
recipientInfo={ recipientInfo }
issueDate={ issueDate }
supplyAmount={ supplyAmount }
taxAmount={ taxAmount }
totalAmount={ totalAmount }
transactionDetails={ transactionDetails }
></TaxInvoiceSample>
}
</>

9
src/pages/transaction/all-transaction/list-page.tsx
View File

@@ -307,11 +307,10 @@ export const AllTransactionListPage = () => {
searchCl, searchValue
]);
return (
<>
<main>
<div className="tab-content">
<div className="tab-content">
<div className="tab-pane sub active">
<div className="summary-section">
<div className="summary-label">{t('transaction.searchAmount')}</div>
@@ -324,14 +323,14 @@ export const AllTransactionListPage = () => {
<img
src={ IMAGE_ROOT + '/ico_setting.svg' }
alt={t('transaction.searchOptions')}
onClick={ () => onClickToOpenFilter() }
onClick={ onClickToOpenFilter }
/>
</button>
<button className="download-btn">
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
alt={t('transaction.download')}
onClick={ () => onClickToOpenDownloadBottomSheet() }
onClick={ onClickToOpenDownloadBottomSheet }
/>
</button>
</div>
@@ -365,6 +364,8 @@ export const AllTransactionListPage = () => {
listItems={ listItems }
transactionCategory={ TransactionCategory.AllTransaction }
setDetailData={ setDetailData }
onClickToOpenFilter={ onClickToOpenFilter }
onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
></AllTransactionList>
<div ref={ setTarget }></div>
</div>

6
src/pages/transaction/billing/list-page.tsx
View File

@@ -240,7 +240,7 @@ export const BillingListPage = () => {
<img
src={ IMAGE_ROOT + '/ico_setting.svg' }
alt={ t('transaction.searchOptions') }
onClick={ () => onClickToOpenFilter() }
onClick={ onClickToOpenFilter }
/>
</button>
</div>
@@ -248,7 +248,7 @@ export const BillingListPage = () => {
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
alt={ t('transaction.download') }
onClick={ () => onClickToOpenDownloadBottomSheet() }
onClick={ onClickToOpenDownloadBottomSheet }
/>
</button>
</div>
@@ -277,6 +277,8 @@ export const BillingListPage = () => {
listItems={ listItems }
transactionCategory={ TransactionCategory.Billing }
setDetailData={ setDetailData }
onClickToOpenFilter={ onClickToOpenFilter }
onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
></BillingList>
<div ref={ setTarget }></div>
</div>

6
src/pages/transaction/cash-receipt/list-page.tsx
View File

@@ -270,7 +270,7 @@ export const CashReceiptListPage = () => {
<img
src={ IMAGE_ROOT + '/ico_setting.svg' }
alt={ t('transaction.searchOptions') }
onClick={ () => onClickToOpenFilter() }
onClick={ onClickToOpenFilter }
/>
</button>
</div>
@@ -278,7 +278,7 @@ export const CashReceiptListPage = () => {
<img
src={IMAGE_ROOT + '/ico_download.svg'}
alt={ t('transaction.download') }
onClick={() => onClickToOpenDownloadBottomSheet()}
onClick={ onClickToOpenDownloadBottomSheet }
/>
</button>
</div>
@@ -327,6 +327,8 @@ export const CashReceiptListPage = () => {
listItems={ listItems }
transactionCategory={ TransactionCategory.CashReceipt }
setDetailData={ setDetailData }
onClickToOpenFilter={ onClickToOpenFilter }
onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
></CashReceiptList>
<div ref={ setTarget }></div>
</div>

6
src/pages/transaction/escrow/list-page.tsx
View File

@@ -233,7 +233,7 @@ export const EscrowListPage = () => {
<img
src={ IMAGE_ROOT + '/ico_setting.svg' }
alt={ t('transaction.searchOptions') }
onClick={ () => onClickToOpenFilter() }
onClick={ onClickToOpenFilter }
/>
</button>
</div>
@@ -241,7 +241,7 @@ export const EscrowListPage = () => {
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
alt={ t('transaction.download') }
onClick={ () => onClickToOpenDownloadBottomSheet() }
onClick={ onClickToOpenDownloadBottomSheet }
/>
</button>
</div>
@@ -270,6 +270,8 @@ export const EscrowListPage = () => {
listItems={ listItems }
transactionCategory={ TransactionCategory.Escrow }
setDetailData={ setDetailData }
onClickToOpenFilter={ onClickToOpenFilter }
onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
></EscrowList>
<div ref={ setTarget }></div>
</div>

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

@@ -546,5 +546,8 @@ main.pop{
width: calc(100% - 42px);
top: 50px;
padding-left: 10px;
padding-bottom: 20px;
}
.filter-section{
margin-bottom: 0;
}

1
src/shared/ui/assets/css/style-tax-invoice.css
View File

@@ -65,7 +65,6 @@
.tax-invoice {
margin: 0; background: #FAFAFA;
min-height: unset;
position: fixed;
left: 0;
top: 0;