부가서비스 리스트

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

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;

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;

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,

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;

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>
</>

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

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">

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

View File

@@ -270,6 +270,8 @@ export const AccountHolderAuthPage = () => {
listItems={listItems}
mid={mid}
setDetailData={setDetailData}
onClickToOpenFilter={ onClickToOpenFilter }
onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
></AccountHolderAuthList>
<div ref={setTarget}></div>
</div>

View File

@@ -281,6 +281,8 @@ export const AccountHolderSearchPage = () => {
listItems={listItems}
mid={mid}
setDetailData={setDetailData}
onClickToOpenFilter={ onClickToOpenFilter }
onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
></AccountHolderSearchList>
<div ref={setTarget}></div>
</div>

View File

@@ -1,7 +1,7 @@
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { DefaultRequestPagination, HeaderType, SortTypeKeys } from '@/entities/common/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
import {
useSetHeaderTitle,
useSetHeaderType,
@@ -27,7 +27,7 @@ import { useExtensionAlimtalkListMutation } from '@/entities/additional-service/
import { useExtensionAlimtalkDownloadExcelMutation } from '@/entities/additional-service/api/alimtalk/use-extansion-alimtalk-download-excel-mutation';
import { ListDateGroup } from '@/entities/additional-service/ui/list-date-group';
import { AdditionalServiceCategory, DetailData } from '@/entities/additional-service/model/types';
import { useStore } from '@/shared/model/store';
import { useGroupDateOnStore, useGroupDateStore, useStore } from '@/shared/model/store';
import { snackBar } from '@/shared/lib';
import { DownloadBottomSheet, DownloadSelectedMode } from '@/entities/common/ui/download-bottom-sheet';
import { AlimtalkFilter } from '@/entities/additional-service/ui/filter/alimtalk-filter';
@@ -69,6 +69,11 @@ export const AlimtalkListPage = () => {
const [detailTid, setDetailTid] = useState<string>('');
const [detailSeq, setDetailSeq] = useState<number>(0);
const { groupDate, setGroupDate } = useGroupDateStore();
const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
const [listHeight, setListHeight] = useState<number>(0);
const { mutateAsync: extensionAlimtalkList } = useExtensionAlimtalkListMutation();
const { mutateAsync: extensionAlimtalkDownloadExcel } = useExtensionAlimtalkDownloadExcelMutation();
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
@@ -277,6 +282,65 @@ export const AlimtalkListPage = () => {
sendCl
]);
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);
};
}, []);
// if (!hasAccess) {
// return <AccessDeniedDialog />;
// }
@@ -318,8 +382,31 @@ export const AlimtalkListPage = () => {
</button>
</div>
</section>
<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' }}
>
{ getAlimtalkList() }
</section>
<div ref={ setTarget }></div>

View File

@@ -4,9 +4,9 @@ import { DefaultRequestPagination, HeaderType, SortTypeKeys } from '@/entities/c
import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { GetListHeight, IMAGE_ROOT, ListScrollOn } from '@/shared/constants/common';
import { useEffect, useState } from 'react';
import { useStore } from '@/shared/model/store';
import { useGroupDateOnStore, useGroupDateStore, useStore } from '@/shared/model/store';
import { PATHS } from '@/shared/constants/paths';
import {
useSetHeaderTitle,
@@ -54,6 +54,11 @@ export const FaceAuthPage = () => {
const [downloadBottomSheetOn, setDownloadBottomSheetOn] = useState<boolean>(false);
const { groupDate, setGroupDate } = useGroupDateStore();
const { groupDateOn, setGroupDateOn } = useGroupDateOnStore();
const [listHeight, setListHeight] = useState<number>(0);
useSetHeaderTitle(t('faceAuth.title'));
useSetHeaderType(HeaderType.LeftArrow);
useSetFooterMode(false);
@@ -233,6 +238,65 @@ export const FaceAuthPage = () => {
sortType
]);
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);
};
}, []);
// if (!hasAccess) {
// return <AccessDeniedDialog />;
// }
@@ -298,7 +362,31 @@ export const FaceAuthPage = () => {
</div>
</div>
</div>
<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 ref={ setTarget }></div>

View File

@@ -262,6 +262,8 @@ export const KeyInPaymentPage = () => {
listItems={listItems}
additionalServiceCategory={AdditionalServiceCategory.KeyInPayment}
mid={mid}
onClickToOpenFilter={ onClickToOpenFilter }
onClickToOpenDownloadBottomSheet={ onClickToOpenDownloadBottomSheet }
></KeyInPaymentList>
<div ref={ setTarget }></div>
</div>

View File

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