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 16:13:11 +09:00
parent 04caab913c
commit cbc465db95
14 changed files with 600 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -28,7 +28,9 @@ export interface AccountHolderAuthListProps {
listItems: Array<AccountHolderAuthItem>;
mid: string;
setDetailData: (detailData: DetailData) => void;
}
onClickToOpenFilter: () => void;
onClickToOpenDownloadBottomSheet: () => void;
};
export interface AccountHolderAuthFilterProps extends FilterProps {
mid: string;
startDate: string;

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

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

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

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

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

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

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

@@ -1,12 +1,24 @@
import { ListDateGroup } from '../list-date-group';
import { AccountHolderAuthListProps } from '../../model/account-holder-auth/types';
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 AccountHolderAuthList = ({
additionalServiceCategory,
listItems,
mid,
setDetailData
setDetailData,
onClickToOpenFilter,
onClickToOpenDownloadBottomSheet
}: AccountHolderAuthListProps) => {
const { t, i18n } = useTranslation();
const { groupDate, setGroupDate } = useGroupDateStore();
const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
const [listHeight, setListHeight] = useState<number>(0);
const getListDateGroup = () => {
let rs = [];
@@ -57,9 +69,92 @@ export const AccountHolderAuthList = ({
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>
</>

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

@@ -6,15 +6,25 @@ import { AccountHolderSearchListProps } from '../../model/account-holder-search/
import { useTranslation } from 'react-i18next';
import { checkGrant } from '@/shared/lib/check-grant';
import { showAlert } from '@/widgets/show-alert';
import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store';
import { useEffect, useState } from 'react';
import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
export const AccountHolderSearchList = ({
listItems,
mid,
setDetailData
setDetailData,
onClickToOpenFilter,
onClickToOpenDownloadBottomSheet
}: AccountHolderSearchListProps) => {
const { navigate } = useNavigate();
const { t } = useTranslation();
const { groupDate, setGroupDate } = useGroupDateStore();
const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
const [listHeight, setListHeight] = useState<number>(0);
const getListDateGroup = () => {
let rs = [];
let date = '';
@@ -72,17 +82,100 @@ export const AccountHolderSearchList = ({
navigate(PATHS.additionalService.accountHolderSearch.request)
};
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 (
<>
<section className="transaction-list">
{ getListDateGroup() }
</section>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={onClickToNavigate}
>{ t('additionalService.accountHolderSearch.searchRequest') }</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 }
/>
</button>
<button className="download-btn">
<img
src={ IMAGE_ROOT + '/ico_download.svg' }
alt={t('transaction.download')}
onClick={ onClickToOpenDownloadBottomSheet }
/>
</button>
</div>
</div>
}
<section
className="transaction-list"
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
>
{ getListDateGroup() }
</section>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={onClickToNavigate}
>{ t('additionalService.accountHolderSearch.searchRequest') }</button>
</div>
</>
);
}

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

@@ -2,19 +2,28 @@ import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { ListDateGroup } from '../list-date-group';
import { KeyInPaymentListItem, KeyInPaymentListProps } from '../../model/key-in/types';
import { JSX } from 'react';
import { useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { checkGrant } from '@/shared/lib/check-grant';
import { showAlert } from '@/widgets/show-alert';
import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
import { useGroupDateOnStore, useGroupDateStore } from '@/shared/model/store';
export const KeyInPaymentList = ({
additionalServiceCategory,
listItems,
mid
mid,
onClickToOpenFilter,
onClickToOpenDownloadBottomSheet
}: KeyInPaymentListProps) => {
const { navigate } = useNavigate();
const { t } = useTranslation();
const { groupDate, setGroupDate } = useGroupDateStore();
const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
const [listHeight, setListHeight] = useState<number>(0);
const getListDateGroup = () => {
let rs = [];
let date = '';
@@ -68,9 +77,92 @@ export const KeyInPaymentList = ({
navigate(PATHS.additionalService.keyInPayment.request);
};
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 (
<>
<section 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>
}
<section
className="transaction-list"
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
>
{getListDateGroup()}
</section>
<div className="apply-row">

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

@@ -1,12 +1,24 @@
import { useTranslation } from 'react-i18next';
import { SmsPaymentListProps } from '../../model/sms-payment/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 SmsPaymentList = ({
listItems,
additionalServiceCategory,
mid,
onResendClick
onResendClick,
onClickToOpenFilter,
onClickToOpenDownloadBottomSheet
}: SmsPaymentListProps) => {
const { t, i18n } = useTranslation();
const { groupDate, setGroupDate } = useGroupDateStore();
const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
const [listHeight, setListHeight] = useState<number>(0);
const getListDateGroup = () => {
let rs = [];
@@ -56,11 +68,94 @@ export const SmsPaymentList = ({
return rs;
};
return (
<>
<section className="transaction-list">
{getListDateGroup()}
</section>
</>
)
}
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 (
<>
{ 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>
}
<section
className="transaction-list"
style={{ height: (listHeight > 0)? listHeight + 'px': 'unset' }}
>
{getListDateGroup()}
</section>
</>
);
};