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

Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web

Browse Source
This commit is contained in:
focp212@naver.com
2025-10-23 11:08:11 +09:00
parent 74ed1ff1ad 53f6731205
commit a60b5ba69e
48 changed files with 1070 additions and 1310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/entities/account/ui/user-account-auth-wrap.tsx
View File

@@ -111,7 +111,7 @@ export const UserAccountAuthWrap = ({
]
return (
<>
<div className="ing-list pdtop">
<div className="ing-list pdtop pb-86">
<div className="perm-form">
<div className="perm-field">
<div className="perm-label">계정 상태</div>
@@ -144,7 +144,7 @@ export const UserAccountAuthWrap = ({
menuGrants={ permissions }
></UserAccountAuthPermList>
<div className="apply-row bottom-padding">
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
type="button"

9
src/entities/account/ui/user-login-auth-info-wrap.tsx
View File

@@ -5,6 +5,7 @@ import { useEffect, useState } from 'react';
import { useUserModifyAuthMethodMutation } from '@/entities/user/api/use-user-modify-authmethod-mutation';
import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { snackBar } from '@/shared/lib/toast';
export const UserLoginAuthInfoWrap = ({
mid,
@@ -25,7 +26,7 @@ export const UserLoginAuthInfoWrap = ({
const { mutateAsync: userFindAuthMethod } = useUserFindAuthMethodMutation();
const { mutateAsync: userModifyAuthMethod } = useUserModifyAuthMethodMutation({
onSuccess: () => {
// snackBar('사용자 정보가 성공적으로 저장되었습니다.');
snackBar('사용자 정보가 성공적으로 저장되었습니다.');
navigate(PATHS.account.user.manage, {
state: {
mid: mid,
@@ -33,7 +34,7 @@ export const UserLoginAuthInfoWrap = ({
});
},
onError: (error) => {
// snackBar(error?.response?.data?.message || '사용자 정보 저장에 실패했습니다.');
snackBar(error?.response?.data?.message || '사용자 정보 저장에 실패했습니다.');
}
});
@@ -391,7 +392,7 @@ export const UserLoginAuthInfoWrap = ({
return (
<>
<div className="ing-list pdtop">
<div className="settings-login-auth">
<div className="settings-login-auth pb-86">
<div className="group">
<div className="group-header">
<div className="title">이메일 주소</div>
@@ -489,7 +490,7 @@ export const UserLoginAuthInfoWrap = ({
<div className="notice-bar">※ 탭을 변경하면 미저장 내용은 초기화됩니다.</div>
</div>
</div>
<div className="apply-row bottom-padding">
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
disabled={!isSaveButtonEnabled()}

3
src/entities/account/ui/user-manage-wrap.tsx
View File

@@ -41,7 +41,8 @@ export const UserManageWrap = () => {
return (
<>
<div className="ing-list" style={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 200px)' }}>
{/* <div className="ing-list" style={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 86px)' }}> */}
<div className="ing-list pb-86">
<div style={{ flexShrink: 0 }}>
<div className="input-wrapper top-select mt-16">
<select

29
src/entities/additional-service/api/fund-account/use-extension-fund-account-download-certificate-mutation.ts Normal file
View File

@@ -0,0 +1,29 @@
import axios from 'axios';
import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-service';
import { resultify } from '@/shared/lib/resultify';
import { CBDCAxiosError } from '@/shared/@types/error';
import {
ExtensionFundAccountDownloadReceiptParams as ExtensionFundAccountDownloadReceiptParams,
ExtensionFundAccountDownloadReceiptResponse as ExtensionFundAccountDownloadReceiptResponse
} from '../../model/fund-account/types';
import {
useMutation,
UseMutationOptions
} from '@tanstack/react-query';
export const extensionFundAccountDownloadReceipt = (params: ExtensionFundAccountDownloadReceiptParams) => {
return resultify(
axios.post<ExtensionFundAccountDownloadReceiptResponse>(API_URL_ADDITIONAL_SERVICE.extensionFundAccountDownloadReceipt(), params),
);
};
export const useExtensionFundAccountDownloadReceiptMutation = (options?: UseMutationOptions<ExtensionFundAccountDownloadReceiptResponse, CBDCAxiosError, ExtensionFundAccountDownloadReceiptParams>) => {
const mutation = useMutation<ExtensionFundAccountDownloadReceiptResponse, CBDCAxiosError, ExtensionFundAccountDownloadReceiptParams>({
...options,
mutationFn: (params: ExtensionFundAccountDownloadReceiptParams) => extensionFundAccountDownloadReceipt(params),
});
return {
...mutation,
};
};

29
src/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-regist-mutation.ts Normal file
View File

@@ -0,0 +1,29 @@
import axios from 'axios';
import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-service';
import { resultify } from '@/shared/lib/resultify';
import { CBDCAxiosError } from '@/shared/@types/error';
import {
ExtensionFundAccountTransferRegistParams,
ExtensionFundAccountTransferRegistResponse
} from '../../model/fund-account/types';
import {
useMutation,
UseMutationOptions
} from '@tanstack/react-query';
export const extensionFundAccountTransferRegist = (params: ExtensionFundAccountTransferRegistParams) => {
return resultify(
axios.post<ExtensionFundAccountTransferRegistResponse>(API_URL_ADDITIONAL_SERVICE.extensionFundAccountTransferRegist(), params),
);
};
export const useExtensionFundAccountTransferRegistMutation = (options?: UseMutationOptions<ExtensionFundAccountTransferRegistResponse, CBDCAxiosError, ExtensionFundAccountTransferRegistParams>) => {
const mutation = useMutation<ExtensionFundAccountTransferRegistResponse, CBDCAxiosError, ExtensionFundAccountTransferRegistParams>({
...options,
mutationFn: (params: ExtensionFundAccountTransferRegistParams) => extensionFundAccountTransferRegist(params),
});
return {
...mutation,
};
};

29
src/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-request-mutation.ts
View File

@@ -1,29 +0,0 @@
import axios from 'axios';
import { API_URL_ADDITIONAL_SERVICE } from '@/shared/api/api-url-additional-service';
import { resultify } from '@/shared/lib/resultify';
import { CBDCAxiosError } from '@/shared/@types/error';
import {
ExtensionFundAccountTransferRequestParams,
ExtensionFundAccountTransferRequestResponse
} from '../../model/fund-account/types';
import {
useMutation,
UseMutationOptions
} from '@tanstack/react-query';
export const extensionFundAccountTransferRequest = (params: ExtensionFundAccountTransferRequestParams) => {
return resultify(
axios.post<ExtensionFundAccountTransferRequestResponse>(API_URL_ADDITIONAL_SERVICE.extensionFundAccountTransferRequest(), params),
);
};
export const useExtensionFundAccountTransferRequestMutation = (options?: UseMutationOptions<ExtensionFundAccountTransferRequestResponse, CBDCAxiosError, ExtensionFundAccountTransferRequestParams>) => {
const mutation = useMutation<ExtensionFundAccountTransferRequestResponse, CBDCAxiosError, ExtensionFundAccountTransferRequestParams>({
...options,
mutationFn: (params: ExtensionFundAccountTransferRequestParams) => extensionFundAccountTransferRequest(params),
});
return {
...mutation,
};
};

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

@@ -1,5 +1,5 @@
import { DefaulResponsePagination, DefaultRequestPagination } from "@/entities/common/model/types";
import { ExtensionRequestParams, FilterProps, ListItemProps } from "../types";
import { AdditionalServiceCategory, ExtensionRequestParams, FilterProps, ListItemProps } from "../types";
// 계좌 점유 조회 관련 타입들
export enum AuthAndTransferStatus {
@@ -18,7 +18,8 @@ export interface AccountHolderAuthListItem {
transferStatus?: AuthAndTransferStatus;
}
export interface AccountHolderAuthListProps {
listItems: Record<string, Array<ListItemProps>>;
additionalServiceCategory: AdditionalServiceCategory;
listItems: Array<ExtensionAccountHolderAuthContentItem>;
mid: string;
}
export interface AccountHolderAuthFilterProps extends FilterProps {
@@ -34,7 +35,8 @@ export interface AccountHolderAuthFilterProps extends FilterProps {
// 계좌 점유 인증 확장 서비스
// ========================================
export interface ExtensionAccountHolderAuthListParams extends ExtensionRequestParams {
export interface ExtensionAccountHolderAuthListParams {
mid: string;
fromDate: string;
toDate: string;
authStatus: string;
@@ -42,7 +44,16 @@ export interface ExtensionAccountHolderAuthListParams extends ExtensionRequestPa
}
export interface ExtensionAccountHolderAuthListResponse extends DefaulResponsePagination {
content: Array<ListItemProps>
content: Array<ExtensionAccountHolderAuthContentItem>
}
export interface ExtensionAccountHolderAuthContentItem {
tid?: string;
accountName?: string;
accountNo?: string;
requestDate?: string;
bankName?: string;
authStatus?: AuthAndTransferStatus;
}
export interface ExtensionAccountHolderAuthDownloadExcelParams extends ExtensionRequestParams {

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

@@ -24,7 +24,6 @@ export interface AccountHolderSearchListItem {
export interface AccountHolderSearchListProps {
listItems: Array<AccountHolderSearchListItem>;
mid: string;
setTarget: (element: HTMLElement | null) => void;
}
export interface AccountHolderSearchFilterProps extends FilterProps {

42
src/entities/additional-service/model/alimtalk/constant.ts
View File

@@ -0,0 +1,42 @@
import { AlimtalkAlimCl, AlimtalkSearchCl, AlimTalkSendCl, AlimtalkSendType, ServiceCode } from "./types";
export const AlimtalkSearchClOptionGroup = [
{name: '주문자', value: AlimtalkSearchCl.BUYER_NAME },
{name: 'TID', value: AlimtalkSearchCl.TID },
];
export const AlimtalkServiceCodeOptionGroup = [
{name: '전체', value: ''},
{name: '카드', value: ServiceCode.CARD },
{name: '계좌이체', value: ServiceCode.BANK },
{name: '가상계좌', value: ServiceCode.VBANK },
{name: '휴대폰', value: ServiceCode.PHONE }
]
// 알림구분 - 카드/계좌이체/휴대폰용
export const AlimtalkAlimClBtnGroupForGeneral = [
{name: '전체', value: '' },
{name: '승인', value: AlimtalkAlimCl.APPROVAL },
{name: '취소', value: AlimtalkAlimCl.CANCEL }
]
// 알림구분 - 가상계좌용
export const AlimtalkAlimClBtnGroupForVBank = [
{name: '전체', value: '' },
{name: '입금요청', value: AlimtalkAlimCl.DEPOSIT_REQUEST },
{name: '입금완료', value: AlimtalkAlimCl.DEPOSIT_COMPLETE },
{name: '환불', value: AlimtalkAlimCl.REFUND }
]
export const AlimtalkSendTypeBtnGroup = [
{name: '전체', value: AlimtalkSendType.ALL },
{name: '카카오톡', value: AlimtalkSendType.KAKAOTALK },
{name: 'FB SMS', value: AlimtalkSendType.FB_SMS }
]
export const AlimtalkSendClBtnGroup = [
{name: '전체', value: AlimTalkSendCl.ALL },
{name: '요청', value: AlimTalkSendCl.REQUEST },
{name: '성공', value: AlimTalkSendCl.SUCCESS },
{name: '실패', value: AlimTalkSendCl.FAIL }
]

14
src/entities/additional-service/model/alimtalk/types.ts
View File

@@ -31,6 +31,14 @@ export enum AlimTalkSendCl {
SUCCESS = 'SUCCESS',
FAIL = 'FAIL'
};
export enum ServiceCode {
CARD = 'CARD',
BANK = 'BANK',
VBANK = 'VBANK',
PHONE = 'PHONE'
}
export interface ExtensionAlimtalkSettingSaveParams {
mid: string;
sendMerchantInfo?: SendMerchantInfo;
@@ -97,7 +105,7 @@ export interface ExtensionAlimtalkDownloadExcelParams {
mid?: string;
searchCl?: AlimtalkSearchCl;
searchValue?: string;
paymentMethod?: string;
serviceCode?: string;
alimCl?: AlimtalkAlimCl;
fromDate?: string;
toDate?: string;
@@ -105,7 +113,9 @@ export interface ExtensionAlimtalkDownloadExcelParams {
sendCl?: AlimTalkSendCl;
};
export interface ExtensionAlimtalkDownloadExcelResponse {};
export interface ExtensionAlimtalkDownloadExcelResponse {
status : boolean
};
export interface ExtensionAlimtalkDetailParams {
mid: string;

23
src/entities/additional-service/model/fund-account/types.ts
View File

@@ -20,8 +20,7 @@ export enum FundAccountReceiveAccountNameNo {
ReceiveAccountName = 'ReceiveAccountName'
};
export interface ExtensionFundAccountTransferRequestParams {
export interface ExtensionFundAccountTransferRegistParams {
mid?: string;
bankCode: string;
accountNo: string;
@@ -30,10 +29,19 @@ export interface ExtensionFundAccountTransferRequestParams {
moid: string;
depositParameter?: string;
};
export interface ExtensionFundAccountTransferRequestResponse {
export interface ExtensionFundAccountTransferRegistResponse {
status: boolean;
};
export interface ExtensionFundAccountTransferRequestParams {
}
export interface ExtensionFundAccountTransferRequestResponse {
}
export enum FundAccountSearchCl {
ACCOUNT_NAME = 'ACCOUNT_NAME',
ACCOUNT_NO = 'ACCOUNT_NO'
@@ -94,8 +102,7 @@ export interface ExtensionFundAccountTransferExcelResponse {
status: boolean;
};
export interface ExtensionFundAccountTransferDetailParams {
mid: string;
tid: string;
seq: string;
};
export interface ExtensionFundAccountTransferDetailResponse {
tid: string;
@@ -177,7 +184,7 @@ export interface ExtensionFundAccountResultDetailResponse {
requsetDate: string;
resultMessage: string;
failReason: string;
bankCode: string;
bankName: string;
};
export interface ExtensionFundAccountBalanceParams {
mid: string;
@@ -187,11 +194,11 @@ export interface ExtensionFundAccountBalanceResponse {
};
// 입금확인증 다운로드
export interface ExtensionFundAccountDownloadCertificateParams {
export interface ExtensionFundAccountDownloadReceiptParams {
mid: string;
tid: string;
email: string;
};
export interface ExtensionFundAccountDownloadCertificateResponse {
export interface ExtensionFundAccountDownloadReceiptResponse {
status: boolean;
};

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

@@ -22,7 +22,6 @@ export interface KeyInPaymentListProps {
additionalServiceCategory: AdditionalServiceCategory;
listItems: Array<KeyInPaymentListItem>;
mid?: string;
setTarget: (element: HTMLElement | null) => void;
}
export interface KeyInPaymentFilterProps extends FilterProps {

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

@@ -103,14 +103,12 @@ export interface LinkPaymentWaitListItem {
export interface LinkPaymentHistoryListProps {
additionalServiceCategory: AdditionalServiceCategory;
listItems: Array<LinkPaymentHistoryListItem>;
setTarget: (element: HTMLElement | null) => void;
mid: string;
}
export interface LinkPaymentWaitListProps {
additionalServiceCategory: AdditionalServiceCategory;
listItems: Array<LinkPaymentWaitListItem>;
setTarget: (element: HTMLElement | null) => void;
mid: string;
}

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

@@ -25,7 +25,6 @@ export interface SmsPaymentListProps {
additionalServiceCategory: AdditionalServiceCategory;
mid: string;
onResendClick?: (mid: string, tid: string) => void;
setTarget: (element: HTMLElement | null) => void;
}
export interface SmsPaymentFilterProps extends FilterProps {

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

@@ -167,6 +167,7 @@ export interface ListItemProps extends
ArsListContent, AlimtalkListContent, FaceAuthListItem {
additionalServiceCategory?: AdditionalServiceCategory;
mid?: string;
seq?: string;
onResendClick?: (mid: string, tid: string) => void;
}

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

@@ -1,27 +1,56 @@
import { ListDateGroup } from '../list-date-group';
import { AdditionalServiceCategory } from '../../model/types';
import { AccountHolderAuthListProps } from '../../model/account-holder-auth/types';
import { AccountHolderAuthListProps, ExtensionAccountHolderAuthContentItem } from '../../model/account-holder-auth/types';
import { JSX } from 'react';
export const AccountHolderAuthList = ({
additionalServiceCategory,
listItems,
mid
}: AccountHolderAuthListProps) => {
const getListDateGroup = () => {
let rs = [];
for (const [key, value] of Object.entries(listItems)) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.AccountHolderAuth}
key={key}
date={key}
items={value}
mid={mid}
></ListDateGroup>
)
const getListDateGroup = () => {
let rs: JSX.Element[] = [];
let date = '';
let list: ExtensionAccountHolderAuthContentItem[] = [];
for (let i = 0; i < listItems.length; i++) {
// sendDate(발송일자) 기준
let requestDate = listItems[i]?.requestDate || '';
let itemDate = requestDate.substring(0, 8);
if (i === 0) {
date = itemDate;
}
if (date !== itemDate) {
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
key={date + '-' + i}
date={date}
items={list as any}
mid={mid}
></ListDateGroup>
);
}
return rs;
};
date = itemDate;
list = [];
}
list.push(listItems[i] as any);
}
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
key={date + '-last'}
date={date}
items={list as any}
mid={mid}
></ListDateGroup>
);
}
return rs;
};
return (
<>

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

@@ -7,8 +7,7 @@ import { JSX } from 'react';
export const AccountHolderSearchList = ({
listItems,
mid,
setTarget
mid
}: AccountHolderSearchListProps) => {
const { navigate } = useNavigate();
@@ -63,7 +62,6 @@ export const AccountHolderSearchList = ({
<>
<section className="transaction-list">
{getListDateGroup()}
<div ref={setTarget}></div>
</section>
<div className="apply-row">
<button

191
src/entities/additional-service/ui/filter/alimtalk-filter.tsx
View File

@@ -1,116 +1,135 @@
import { useEffect, useState } from 'react';
import { useEffect, useState, useMemo } from 'react';
import { motion } from 'framer-motion';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { FilterSelect } from '@/shared/ui/filter/select';
import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
import {
FilterMotionDuration,
FilterMotionStyle,
import {
FilterMotionDuration,
FilterMotionStyle,
FilterMotionVariants
} from '@/entities/common/model/constant';
import moment from 'moment';
import { FilterInput } from '@/shared/ui/filter/input';
import { OrderStatus, PaymentStatus } from '../../model/ars/types';
import { ArsOrderStatusBtnGroup, ArsPaymentStatusBtnGroup } from '../../model/ars/constant';
import { useStore } from '@/shared/model/store';
import { AlimtalkAlimCl, AlimtalkSearchCl, AlimTalkSendCl, AlimtalkSendType, ServiceCode } from '../../model/alimtalk/types';
import { FilterSelectInput } from '@/shared/ui/filter/select-input';
import { AlimtalkAlimClBtnGroupForGeneral, AlimtalkAlimClBtnGroupForVBank, AlimtalkSearchClOptionGroup, AlimtalkSendClBtnGroup, AlimtalkSendTypeBtnGroup, AlimtalkServiceCodeOptionGroup } from '../../model/alimtalk/constant';
export interface AlimtalkFilterProps {
filterOn: boolean;
setFilterOn: (filterOn: boolean) => void;
mid: string;
moid: string;
searchCl: AlimtalkSearchCl;
searchValue: string;
fromDate: string;
toDate: string;
paymentStatus: PaymentStatus;
orderStatus: OrderStatus;
minAmount?: number;
maxAmount?: number;
serviceCode: ServiceCode;
alimCl: AlimtalkAlimCl;
sendType: AlimtalkSendType;
sendCl: AlimTalkSendCl;
setMid: (mid: string) => void;
setMoid: (moid: string) => void;
setSearchCl: (searchCl: AlimtalkSearchCl) => void;
setSearchValue: (searchValue: string) => void;
setFromDate: (fromDate: string) => void;
setToDate: (toDate: string) => void;
setPaymentStatus: (paymentStatus: PaymentStatus) => void;
setOrderStatus: (orderStatus: OrderStatus) => void;
setMinAmount: (minAmount?: number) => void;
setMaxAmount: (maxAmount?: number) => void;
setServiceCode: (serviceCode: ServiceCode) => void;
setAlimCl: (alimCl: AlimtalkAlimCl) => void;
setSendType: (sendType: AlimtalkSendType) => void;
setSendCl: (sendCl: AlimTalkSendCl) => void;
};
export const AlimtalkFilter = ({
filterOn,
setFilterOn,
mid,
moid,
searchCl,
searchValue,
fromDate,
toDate,
paymentStatus,
orderStatus,
minAmount,
maxAmount,
serviceCode,
alimCl,
sendType,
sendCl,
setMid,
setMoid,
setSearchCl,
setSearchValue,
setFromDate,
setToDate,
setPaymentStatus,
setOrderStatus,
setMinAmount,
setMaxAmount
setServiceCode,
setAlimCl,
setSendType,
setSendCl
}: AlimtalkFilterProps) => {
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterMoid, setFilterMoid] = useState<string>(moid);
const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYY.MM.DD'));
const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYY.MM.DD'));
const [filterPaymentStatus, setFilterPaymentStatus] = useState<PaymentStatus>(paymentStatus);
const [filterOrderStatus, setFilterOrderStatus] = useState<OrderStatus>(orderStatus);
const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
const [filterSearchCl, setFilterSearchCl] = useState<AlimtalkSearchCl>(searchCl);
const [filterSearchValue, setFilterSearchValue] = useState<string>(searchValue);
const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYYMMDD'));
const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYYMMDD'));
const [filterServiceCode, setFilterServiceCode] = useState<ServiceCode>(serviceCode);
const [filterAlimCl, setFilterAlimCl] = useState<AlimtalkAlimCl>(alimCl);
const [filterSendType, setFilterSendType] = useState<AlimtalkSendType>(sendType);
const [filterSendCl, setFilterSendCl] = useState<AlimTalkSendCl>(sendCl);
const midOptions = useStore.getState().UserStore.selectOptionsMids;
// 결제수단에 따라 알림구분 버튼 그룹 선택
const alimClBtnGroup = useMemo(() => {
if (filterServiceCode === ServiceCode.VBANK) {
return AlimtalkAlimClBtnGroupForVBank;
}
return AlimtalkAlimClBtnGroupForGeneral;
}, [filterServiceCode]);
const onClickToClose = () => {
setFilterOn(false);
};
const onClickToSetFilter = () => {
setMid(filterMid);
setFilterMoid(filterMoid);
setSearchCl(filterSearchCl);
setSearchValue(filterSearchValue);
setFromDate(filterFromDate);
setToDate(filterToDate);
setPaymentStatus(filterPaymentStatus);
setOrderStatus(filterOrderStatus);
setMinAmount(filterMinAmount);
setMaxAmount(filterMaxAmount);
setServiceCode(filterServiceCode);
setAlimCl(filterAlimCl);
setSendType(filterSendType);
setSendCl(filterSendCl);
onClickToClose();
};
useEffect(() => {
setFilterPaymentStatus(paymentStatus);
}, [paymentStatus]);
setFilterSendCl(sendCl);
}, [searchCl]);
// 결제수단이 변경되면 알림구분을 초기화
useEffect(() => {
setFilterAlimCl('' as AlimtalkAlimCl);
}, [filterServiceCode]);
return (
<>
<motion.div
className="full-menu-modal"
<motion.div
className="full-menu-modal"
initial="hidden"
animate={ (filterOn)? 'visible': 'hidden' }
variants={ FilterMotionVariants }
transition={ FilterMotionDuration }
style={ FilterMotionStyle }
animate={(filterOn) ? 'visible' : 'hidden'}
variants={FilterMotionVariants}
transition={FilterMotionDuration}
style={FilterMotionStyle}
>
<div className="full-menu-container">
<div className="full-menu-header">
<div className="full-menu-title center">필터</div>
<div className="full-menu-actions">
<button
<button
id="closeFullMenu"
className="full-menu-close"
>
<img
src={ IMAGE_ROOT + '/ico_close.svg' }
<img
src={IMAGE_ROOT + '/ico_close.svg'}
alt="닫기"
onClick={ () => onClickToClose() }
onClick={() => onClickToClose()}
/>
</button>
</div>
@@ -118,46 +137,54 @@ export const AlimtalkFilter = ({
<div className="option-list pt-16">
<FilterSelect
title='가맹점'
selectValue={ filterMid }
selectSetter={ setFilterMid }
selectOptions={ midOptions }
selectValue={filterMid}
selectSetter={setFilterMid}
selectOptions={midOptions}
></FilterSelect>
<FilterInput
title='주문번호'
inputValue={ filterMoid }
inputSetter={ setFilterMoid }
></FilterInput>
<FilterSelectInput
title='주문자,TID'
selectValue={filterSearchCl}
selectSetter={setFilterSearchCl}
selectOptions={AlimtalkSearchClOptionGroup}
inputValue={filterSearchValue}
inputSetter={setFilterSearchValue}
></FilterSelectInput>
<FilterSelect
title='결제수단'
selectValue={filterServiceCode}
selectSetter={setFilterServiceCode}
selectOptions={AlimtalkServiceCodeOptionGroup}
></FilterSelect>
<FilterButtonGroups
title='알림구분'
activeValue={filterAlimCl}
btnGroups={alimClBtnGroup}
setter={setFilterAlimCl}
></FilterButtonGroups>
<FilterCalendar
title='조회기간'
startDate={ filterFromDate }
endDate={ filterToDate }
setStartDate={ setFilterFromDate }
setEndDate={ setFilterToDate }
startDate={filterFromDate}
endDate={filterToDate}
setStartDate={setFilterFromDate}
setEndDate={setFilterToDate}
></FilterCalendar>
<FilterButtonGroups
title='결제상태'
activeValue={ filterPaymentStatus }
btnGroups={ ArsPaymentStatusBtnGroup }
setter={ setFilterPaymentStatus }
title='발송 종류'
activeValue={filterSendType}
btnGroups={AlimtalkSendTypeBtnGroup}
setter={setFilterSendType}
></FilterButtonGroups>
<FilterButtonGroups
title='주문상태'
activeValue={ filterOrderStatus }
btnGroups={ ArsOrderStatusBtnGroup }
setter={ setFilterOrderStatus }
title='발송 구분'
activeValue={filterSendCl}
btnGroups={AlimtalkSendClBtnGroup}
setter={setFilterSendCl}
></FilterButtonGroups>
<FilterRangeAmount
title='거래금액'
minAmount={ filterMinAmount }
maxAmount={ filterMaxAmount }
setMinAmount={ setFilterMinAmount }
setMaxAmount={ setFilterMaxAmount }
></FilterRangeAmount>
</div>
<div className="apply-row">
<button
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToSetFilter() }
onClick={() => onClickToSetFilter()}
>적용</button>
</div>
</div>

4
src/entities/additional-service/ui/filter/fund-account-trnasaction-filter.tsx
View File

@@ -51,8 +51,8 @@ export const FundAccountTransactionFilter = ({
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterSearchCl,setFilterSearchCl] = useState<FundAccountSearchCl>(searchCl);
const [filterSearchValue, setFilterSearchValue] = useState<string>(searchValue);
const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYY.MM.DD'));
const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYY.MM.DD'));
const [filterFromDate, setFilterFromDate] = useState<string>(moment(fromDate).format('YYYYMMDD'));
const [filterToDate, setFilterToDate] = useState<string>(moment(toDate).format('YYYYMMDD'));
const [filterBankCode, setFilterBankCode] = useState<string>(bankCode);
const [filterStatus, setFilterStatus] = useState<FundAccountStatus>(status);
const midOptions = useStore.getState().UserStore.selectOptionsMids;

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

@@ -1,5 +1,5 @@
import moment from 'moment';
import { SortTypeKeys } from '@/entities/common/model/types';
import { DefaultRequestPagination, SortTypeKeys } from '@/entities/common/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { JSX, useEffect, useState } from 'react';
@@ -16,38 +16,17 @@ import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
import { FundAccountResultStatusBtnGroup, FundAccountStatusBtnGroup } from '../../model/fund-account/constant';
import { FundAccountResultFilter } from '../filter/fund-account-result-filter';
import { useStore } from '@/shared/model/store';
import useIntersectionObserver from '@/widgets/intersection-observer';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
export const FundAccountResultListWrap = () => {
const { navigate } = useNavigate();
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if (entry.isIntersecting) {
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if (onActionIntersect) {
callList();
}
}
else {
console.log('Element is no longer intersecting with the root.');
}
});
};
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const userMid = useStore.getState().UserStore.mid;
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<FundAccountResultContentItem>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [nextCursor, setNextCursor] = useState<string | null>(null);
const [pageParam, setPageParam] = useState(DEFAULT_PAGE_PARAM);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [mid, setMid] = useState<string>(userMid);
const [searchCl, setSearchCl] = useState<FundAccountSearchCl>(FundAccountSearchCl.ACCOUNT_NAME);
@@ -74,49 +53,28 @@ export const FundAccountResultListWrap = () => {
const callList = (option?: {
sortType?: SortTypeKeys,
resultStatus?: FundAccountResultStatus,
resetPage?: boolean
resultStatus?: FundAccountResultStatus
}) => {
setOnActionIntersect(false);
const currentPageParam = option?.resetPage
? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType }
: { ...pageParam, sortType: option?.sortType ?? sortType };
setPageParam(currentPageParam);
let listSummaryParams: ExtensionFundAccountResultListParams = {
mid: mid,
searchCl: searchCl,
searchValue: searchValue,
searchDateType: searchDateType,
fromDate: '20240901',
toDate: '20250930',
fromDate: fromDate,
toDate: toDate,
bankCode: bankCode,
resultStatus: option?.resultStatus ?? resultStatus,
... {
page: currentPageParam
}
page: pageParam
};
if (listSummaryParams.page) {
listSummaryParams.page.sortType = option?.sortType || sortType;
setPageParam(listSummaryParams.page);
}
extensionFundAccountResultList(listSummaryParams).then((rs: any) => {
console.log(rs);
// resetPage면 기존 리스트 무시, 아니면 추가
setListItems(option?.resetPage ? rs.content : [
...listItems,
...rs.content
]);
if (rs.hasNext) {
setNextCursor(rs.nextCursor);
setPageParam({
...currentPageParam, // pageParam이 아니라 currentPageParam 사용
cursor: rs.nextCursor
});
setOnActionIntersect(true)
}
else {
setNextCursor(null);
}
setListItems(rs.content);
});
};
@@ -159,46 +117,46 @@ export const FundAccountResultListWrap = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({
sortType: sort,
resetPage: true
sortType: sort
});
};
const onClickToStatus = (val: FundAccountResultStatus) => {
setResultStatus(val);
callList({
resultStatus: val,
resetPage: true
resultStatus: val
});
};
const getListDateGroup = () => {
let rs: JSX.Element[] = [];
let rs = [];
let date = '';
let list: FundAccountResultContentItem[] = [];
let list = [];
for (let i = 0; i < listItems.length; i++) {
// requestDate format: "20211018140420" (YYYYMMDDHHmmss)
let requestDate = listItems[i]?.requestDate || '';
let itemDate = requestDate.substring(0, 8);
if (i === 0) {
date = itemDate;
}
if (date !== itemDate) {
// 날짜가 바뀌면 이전 리스트를 푸시 (날짜 업데이트 전에!)
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.FundAccountResult}
mid={mid}
key={date + '-' + i}
date={date} // 이전 날짜 사용
items={list as any}
></ListDateGroup>
);
let items = listItems[i];
if (!!items) {
let requestDate = items?.requestDate;
requestDate = requestDate?.substring(0, 8);
if (!!requestDate) {
if (i === 0) {
date = requestDate;
}
if (date !== requestDate) {
date = requestDate;
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.FundAccountResult}
key={date + '-' + i}
date={date}
items={list}
></ListDateGroup>
);
}
list = [];
}
list.push(items);
}
date = itemDate; // 그 다음에 날짜 업데이트
list = [];
}
list.push(listItems[i] as any);
}
if (list.length > 0) {
rs.push(
@@ -207,7 +165,7 @@ export const FundAccountResultListWrap = () => {
mid={mid}
key={date + '-last'}
date={date}
items={list as any}
items={list}
></ListDateGroup>
);
}
@@ -219,8 +177,7 @@ export const FundAccountResultListWrap = () => {
}, []);
useEffect(() => {
// 필터 조건이 변경되면 첫 페이지부터 다시 시작
callList({ resetPage: true });
callList();
}, [
mid,
searchCl,
@@ -361,7 +318,6 @@ export const FundAccountResultListWrap = () => {
<section className="transaction-list">
{getListDateGroup()}
<div ref={setTarget}></div>
</section>
<div className="apply-row">
<button

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

@@ -25,37 +25,16 @@ import { NumericFormat } from 'react-number-format';
import { FundAccountTransactionFilter } from '../filter/fund-account-trnasaction-filter';
import { PATHS } from '@/shared/constants/paths';
import { useStore } from '@/shared/model/store';
import useIntersectionObserver from '@/widgets/intersection-observer';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
export const FundAccountTransferListWrap = () => {
const { navigate } = useNavigate();
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if (entry.isIntersecting) {
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if (onActionIntersect) {
callList();
}
}
else {
console.log('Element is no longer intersecting with the root.');
}
});
};
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const userMid = useStore.getState().UserStore.mid;
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<FundAccountTransferContentItem>>([]);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [nextCursor, setNextCursor] = useState<string | null>(null);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [mid, setMid] = useState<string>(userMid);
const [searchCl, setSearchCl] = useState<FundAccountSearchCl>(FundAccountSearchCl.ACCOUNT_NAME);
@@ -65,7 +44,7 @@ export const FundAccountTransferListWrap = () => {
const [status, setStatus] = useState<FundAccountStatus>(FundAccountStatus.ALL);
const [bankCode, setBankCode] = useState<string>('');
const [email, setEmail] = useState<string>('');
const [emailBottomSheetOn, setEmailBottomSheetOn] = useState<boolean>(false);
const [balance, setBalance] = useState<number>(0);
const { mutateAsync: extensionFundAccountTransferList } = useExtensionFundAccountTransferListMutation();
@@ -74,17 +53,8 @@ export const FundAccountTransferListWrap = () => {
const callList = (option?: {
sortType?: SortTypeKeys,
status?: FundAccountStatus,
resetPage?: boolean
status?: FundAccountStatus
}) => {
setOnActionIntersect(false);
const currentPageParam = option?.resetPage
? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType }
: { ...pageParam, sortType: option?.sortType ?? sortType };
setPageParam(currentPageParam);
let listSummaryParams: ExtensionFundAccountTransferListParams = {
mid: mid,
searchCl: searchCl,
@@ -93,41 +63,37 @@ export const FundAccountTransferListWrap = () => {
fromDate: fromDate,
toDate: toDate,
resultStatus: option?.status ?? status,
... {
page: currentPageParam
}
page: pageParam
};
if (listSummaryParams.page) {
listSummaryParams.page.sortType = option?.sortType || sortType;
setPageParam(listSummaryParams.page);
}
extensionFundAccountTransferList(listSummaryParams).then((rs: any) => {
setListItems(option?.resetPage ? rs.content : [
...listItems,
...rs.content
]);
if (rs.hasNext) {
setNextCursor(rs.nextCursor);
setPageParam({
...currentPageParam, // pageParam이 아니라 currentPageParam 사용
cursor: rs.nextCursor
});
setOnActionIntersect(true)
}
else {
setNextCursor(null);
}
setListItems(rs.content);
});
callBalance();
};
const callDownloadExcel = () => {
let params: ExtensionFundAccountTransferExcelParams = {
mid: mid,
email: email,
fromDate: fromDate,
toDate: toDate,
};
extensionFundAccountTransferExcel(params).then((rs: ExtensionFundAccountTransferExcelResponse) => {
const onClickToOpenEmailBottomSheet = () => {
setEmailBottomSheetOn(true);
};
});
const onSendRequest = (selectedEmail?: string) => {
if (selectedEmail) {
const params: ExtensionFundAccountTransferExcelParams = {
mid: mid,
email: selectedEmail,
fromDate: fromDate,
toDate: toDate,
};
extensionFundAccountTransferExcel(params).then((rs: ExtensionFundAccountTransferExcelResponse) => {
console.log('Excel Download Status:', rs.status);
});
}
setEmailBottomSheetOn(false);
};
const callBalance = () => {
@@ -139,59 +105,54 @@ export const FundAccountTransferListWrap = () => {
});
};
const onClickToDownloadExcel = () => {
callDownloadExcel();
};
const onClickToOpenFilter = () => {
setFilterOn(!filterOn);
};
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({
sortType: sort,
resetPage: true
callList({
sortType: sort
});
};
const onClickToStatus = (val: FundAccountStatus) => {
setStatus(val);
callList({
status: val,
resetPage: true
status: val
});
};
const getListDateGroup = () => {
let rs: JSX.Element[] = [];
let date = '';
let list: FundAccountTransferContentItem[] = [];
let rs = [];
let date = '';
let list = [];
for (let i = 0; i < listItems.length; i++) {
// registDate format: "20211018140420" (YYYYMMDDHHmmss)
let registDate = listItems[i]?.registDate || '';
let itemDate = registDate.substring(0, 8);
if (i === 0) {
date = itemDate;
}
if (date !== itemDate) {
// 날짜가 바뀌면 이전 리스트를 푸시 (날짜 업데이트 전에!)
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.FundAccountTransfer}
mid={mid}
key={date + '-' + i}
date={date} // 이전 날짜 사용
items={list as any}
></ListDateGroup>
);
let items = listItems[i];
if (!!items) {
let registDate = items?.registDate;
registDate = registDate?.substring(0, 8);
if (!!registDate) {
if (i === 0) {
date = registDate;
}
if (date !== registDate) {
date = registDate;
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={AdditionalServiceCategory.FundAccountTransfer}
key={date + '-' + i}
date={date}
items={list}
></ListDateGroup>
);
}
list = [];
}
list.push(items);
}
date = itemDate; // 그 다음에 날짜 업데이트
list = [];
}
list.push(listItems[i] as any);
}
if (list.length > 0) {
rs.push(
@@ -200,7 +161,7 @@ export const FundAccountTransferListWrap = () => {
mid={mid}
key={date + '-last'}
date={date}
items={list as any}
items={list}
></ListDateGroup>
);
}
@@ -208,8 +169,7 @@ export const FundAccountTransferListWrap = () => {
};
useEffect(() => {
// 필터 조건이 변경되면 첫 페이지부터 다시 시작
callList({ resetPage: true });
callList();
}, [
mid,
searchCl,
@@ -249,7 +209,7 @@ export const FundAccountTransferListWrap = () => {
<button
className="download-btn"
aria-label="다운로드"
onClick={() => onClickToDownloadExcel()}
onClick={onClickToOpenEmailBottomSheet}
>
<img
src={IMAGE_ROOT + '/ico_download.svg'}
@@ -298,7 +258,6 @@ export const FundAccountTransferListWrap = () => {
<section className="transaction-list pb-86">
{getListDateGroup()}
<div ref={setTarget}></div>
</section>
<div className="apply-row">
<button
@@ -324,6 +283,14 @@ export const FundAccountTransferListWrap = () => {
setBankCode={setBankCode}
setStatus={setStatus}
></FundAccountTransactionFilter>
<EmailBottomSheet
bottomSheetOn={emailBottomSheetOn}
setBottomSheetOn={setEmailBottomSheetOn}
imageSave={false}
sendEmail={true}
sendRequest={onSendRequest}
/>
</>
);
};

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

@@ -7,38 +7,40 @@ import { JSX } from 'react';
export const KeyInPaymentList = ({
additionalServiceCategory,
listItems,
mid,
setTarget
mid
}: KeyInPaymentListProps) => {
const { navigate } = useNavigate();
const getListDateGroup = () => {
let rs: JSX.Element[] = [];
let rs = [];
let date = '';
let list: KeyInPaymentListItem[] = [];
let list = [];
for (let i = 0; i < listItems.length; i++) {
// paymentDate format: "20211018140420" (YYYYMMDDHHmmss)
let paymentDate = listItems[i]?.paymentDate || '';
let itemDate = paymentDate.substring(0, 8);
if (i === 0) {
date = itemDate;
}
if (date !== itemDate) {
date = itemDate;
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
mid={mid}
key={date + '-' + i}
date={date}
items={list as any}
></ListDateGroup>
);
let items = listItems[i];
if (!!items) {
let paymentDate = items?.paymentDate;
paymentDate = paymentDate?.substring(0, 8)
if (!!paymentDate) {
if (i === 0) {
date = paymentDate;
}
if (date !== paymentDate) {
date = paymentDate;
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
key={date + '-' + i}
date={date}
items={list}
></ListDateGroup>
);
}
list = [];
}
list.push(items);
}
list = [];
}
list.push(listItems[i] as any);
}
if (list.length > 0) {
rs.push(
@@ -47,7 +49,7 @@ export const KeyInPaymentList = ({
mid={mid}
key={date + '-last'}
date={date}
items={list as any}
items={list}
></ListDateGroup>
);
}
@@ -62,7 +64,6 @@ export const KeyInPaymentList = ({
<>
<section className="transaction-list">
{getListDateGroup()}
<div ref={setTarget}></div>
</section>
<div className="apply-row">
<button

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

@@ -5,47 +5,48 @@ import { ListDateGroup } from '../list-date-group';
export const LinkPaymentHistoryList = ({
additionalServiceCategory,
listItems,
setTarget,
mid
}: LinkPaymentHistoryListProps) => {
const getListDateGroup = () => {
let rs: JSX.Element[] = [];
let rs = [];
let date = '';
let list: LinkPaymentHistoryListItem[] = [];
let list = [];
for (let i = 0; i < listItems.length; i++) {
// sendDate(발송일자) 기준
let sendDate = listItems[i]?.sendDate || '';
let itemDate = sendDate.substring(0, 8);
if (i === 0) {
date = itemDate;
}
if (date !== itemDate) {
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
key={date + '-' + i}
date={date}
items={list as any}
mid={mid}
></ListDateGroup>
);
let items = listItems[i];
if (!!items) {
let sendDate = items?.sendDate;
sendDate = sendDate?.substring(0, 8);
if (!!sendDate) {
if (i === 0) {
date = sendDate;
}
if (date !== sendDate) {
date = sendDate;
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
key={date + '-' + i}
date={date}
items={list}
></ListDateGroup>
);
}
list = [];
}
list.push(items);
}
date = itemDate;
list = [];
}
list.push(listItems[i] as any);
}
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
mid={mid}
key={date + '-last'}
date={date}
items={list as any}
mid={mid}
items={list}
></ListDateGroup>
);
}
@@ -56,7 +57,6 @@ export const LinkPaymentHistoryList = ({
<>
<div className="transaction-list">
{getListDateGroup()}
<div ref={setTarget}></div>
</div>
</>
)

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

@@ -13,7 +13,6 @@ import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { useExtensionLinkPayHistoryDownloadExcelMutation } from '../../api/link-payment/use-extension-link-pay-history-download-excel-mutation';
import { useStore } from '@/shared/model/store';
import { ExtensionLinkPayHistoryListParams, LinkPaymentHistoryListItem, LinkPaymentPaymentMethod, LinkPaymentPaymentStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus } from '../../model/link-pay/types';
import useIntersectionObserver from '@/widgets/intersection-observer';
const paymentResultBtnGroup = [
{ name: '전체', value: LinkPaymentPaymentStatus.ALL },
@@ -27,30 +26,10 @@ const paymentResultBtnGroup = [
export const LinkPaymentHistoryWrap = () => {
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid;
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if (entry.isIntersecting) {
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if (onActionIntersect) {
callList();
}
}
else {
console.log('Element is no longer intersecting with the root.');
}
});
};
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const [filterOn, setFilterOn] = useState<boolean>(false);
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [listItems, setListItems] = useState<Array<LinkPaymentHistoryListItem>>([]);
const [nextCursor, setNextCursor] = useState<string | null>(null);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [mid, setMid] = useState<string>(userMid);
@@ -74,17 +53,8 @@ export const LinkPaymentHistoryWrap = () => {
const callList = (option?: {
sortType?: SortTypeKeys,
status?: LinkPaymentPaymentStatus,
resetPage?: boolean
status?: LinkPaymentPaymentStatus
}) => {
setOnActionIntersect(false);
const currentPageParam = option?.resetPage
? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType }
: { ...pageParam, sortType: option?.sortType ?? sortType };
setPageParam(currentPageParam); // currentPageParam으로 수정!
let listParams: ExtensionLinkPayHistoryListParams = {
mid: mid,
searchCl: searchCl,
@@ -94,27 +64,16 @@ export const LinkPaymentHistoryWrap = () => {
paymentStatus: option?.status ?? paymentStatus,
sendStatus: sendStatus,
sendMethod: sendMethod,
... {
page: currentPageParam
}
page: pageParam
};
if (listParams.page) {
listParams.page.sortType = option?.sortType || sortType;
setPageParam(listParams.page);
}
linkPayHistoryList(listParams).then((rs) => {
setListItems(option?.resetPage ? rs.content : [
...listItems,
...rs.content
]);
if (rs.hasNext) {
setNextCursor(rs.nextCursor);
setPageParam({
...currentPageParam, // pageParam이 아니라 currentPageParam 사용
cursor: rs.nextCursor
});
setOnActionIntersect(true)
}
else {
setNextCursor(null);
}
setListItems(rs.content);
});
};
@@ -138,16 +97,14 @@ export const LinkPaymentHistoryWrap = () => {
const onClickPaymentStatus = (val: LinkPaymentPaymentStatus) => {
setPaymentStatus(val);
callList({
status: val,
resetPage: true
status: val
})
}
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({
sortType: sort,
resetPage: true
sortType: sort
});
};
@@ -156,8 +113,7 @@ export const LinkPaymentHistoryWrap = () => {
};
useEffect(() => {
// 필터 조건이 변경되면 첫 페이지부터 다시 시작
callList({ resetPage: true });
callList();
}, [
mid,
searchCl,
@@ -227,7 +183,6 @@ export const LinkPaymentHistoryWrap = () => {
<LinkPaymentHistoryList
listItems={listItems}
additionalServiceCategory={AdditionalServiceCategory.LinkPaymentHistory}
setTarget={setTarget}
mid={mid}
></LinkPaymentHistoryList>
<div className="apply-row">

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

@@ -5,46 +5,48 @@ import { ListDateGroup } from '../list-date-group';
export const LinkPaymentWaitList = ({
additionalServiceCategory,
listItems,
setTarget,
mid
}: LinkPaymentWaitListProps) => {
const getListDateGroup = () => {
let rs: JSX.Element[] = [];
let rs = [];
let date = '';
let list: LinkPaymentWaitListItem[] = [];
let list = [];
for (let i = 0; i < listItems.length; i++) {
// paymentDate format: "20211018140420" (YYYYMMDDHHmmss)
let scheduledSendDate = listItems[i]?.scheduledSendDate || '';
let itemDate = scheduledSendDate.substring(0, 8);
if (i === 0) {
date = itemDate;
}
if (date !== itemDate) {
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
key={date + '-' + i}
date={date}
items={list as any}
mid={mid}
></ListDateGroup>
);
let items = listItems[i];
if(!!items) {
let scheduledSendDate = items?.scheduledSendDate;
scheduledSendDate = scheduledSendDate?.substring(0, 8);
if(!!scheduledSendDate) {
if(i === 0) {
date = scheduledSendDate;
}
if(date !== scheduledSendDate) {
date = scheduledSendDate;
if(list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
key={ date + '-' + i}
date={ date }
items={ list }
></ListDateGroup>
);
}
list = [];
}
list.push(items);
}
date = itemDate;
list = [];
}
list.push(listItems[i] as any);
}
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
mid={mid}
key={date + '-last'}
date={date}
items={list as any}
mid={mid}
items={list}
></ListDateGroup>
);
}
@@ -55,7 +57,6 @@ export const LinkPaymentWaitList = ({
<>
<div className="transaction-list">
{getListDateGroup()}
<div ref={setTarget}></div>
</div>
</>
)

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

@@ -13,9 +13,9 @@ import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { useExtensionLinkPayWaitDownloadExcelMutation } from '../../api/link-payment/use-extension-link-pay-wait-download-excel-mutation';
import { useStore } from '@/shared/model/store';
import { LinkPaymentProcessStatus, LinkPaymentSearchCl, LinkPaymentSendMethod, LinkPaymentSendStatus, LinkPaymentWaitListItem } from '../../model/link-pay/types';
import useIntersectionObserver from '@/widgets/intersection-observer';
import { ProcessStatusBtnGrouup } from '../../model/link-pay/constant';
import { useExtensionLinkPayWaitDeleteMutation } from '../../api/link-payment/use-extension-link-pay-wait-delete-mutation';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
@@ -23,26 +23,6 @@ export const LinkPaymentWaitSendWrap = () => {
const { navigate } = useNavigate();
const userMid = useStore.getState().UserStore.mid;
const [onActionIntersect, setOnActionIntersect] = useState<boolean>(false);
const onIntersect: IntersectionObserverCallback = (entries: Array<IntersectionObserverEntry>) => {
entries.forEach((entry: IntersectionObserverEntry) => {
if (entry.isIntersecting) {
console.log('Element is now intersecting with the root. [' + onActionIntersect + ']');
if (onActionIntersect) {
callList();
}
}
else {
console.log('Element is no longer intersecting with the root.');
}
});
};
const { setTarget } = useIntersectionObserver({
threshold: 1,
onIntersect
});
const [sortType, setSortType] = useState<SortTypeKeys>(SortTypeKeys.LATEST);
const [filterOn, setFilterOn] = useState<boolean>(false);
const [mid, setMid] = useState<string>(userMid);
@@ -53,7 +33,6 @@ export const LinkPaymentWaitSendWrap = () => {
const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL);
const [processStatus, setProcessStatus] = useState<LinkPaymentProcessStatus>(LinkPaymentProcessStatus.ALL);
const [listItems, setListItems] = useState<Array<LinkPaymentWaitListItem>>([]);
const [nextCursor, setNextCursor] = useState<string | null>(null);
const [pageParam, setPageParam] = useState<DefaultRequestPagination>(DEFAULT_PAGE_PARAM);
const [email, setEmail] = useState<string>('');
@@ -69,17 +48,8 @@ export const LinkPaymentWaitSendWrap = () => {
const callList = (option?: {
sortType?: SortTypeKeys,
status?: LinkPaymentProcessStatus,
resetPage?: boolean
status?: LinkPaymentProcessStatus
}) => {
setOnActionIntersect(false);
const currentPageParam = option?.resetPage
? { ...DEFAULT_PAGE_PARAM, sortType: option?.sortType ?? sortType }
: { ...pageParam, sortType: option?.sortType ?? sortType };
setPageParam(currentPageParam);
let listParams = {
mid: mid,
searchCl: searchType,
@@ -88,27 +58,16 @@ export const LinkPaymentWaitSendWrap = () => {
toDate: endDate,
sendMethod: sendMethod,
processStatus: option?.status ?? processStatus,
... {
page: currentPageParam
}
page: pageParam
}
if (listParams.page) {
listParams.page.sortType = option?.sortType || sortType;
setPageParam(listParams.page);
}
pendingSendList(listParams).then((rs) => {
setListItems(option?.resetPage ? rs.content : [
...listItems,
...rs.content
]);
if (rs.hasNext) {
setNextCursor(rs.nextCursor);
setPageParam({
...currentPageParam,
cursor: rs.nextCursor
});
setOnActionIntersect(true);
}
else {
setNextCursor(null);
}
setListItems(rs.content);
});
};
@@ -130,22 +89,19 @@ export const LinkPaymentWaitSendWrap = () => {
const onClickToSort = (sort: SortTypeKeys) => {
setSortType(sort);
callList({
sortType: sort,
resetPage: true
sortType: sort
});
};
const onClickSendingStatus = (val: LinkPaymentProcessStatus) => {
setProcessStatus(val);
callList({
status: val,
resetPage: true
status: val
});
};
useEffect(() => {
// 필터 조건이 변경되면 첫 페이지부터 다시 시작
callList({ resetPage: true });
callList();
}, [
mid,
searchType,
@@ -212,7 +168,6 @@ export const LinkPaymentWaitSendWrap = () => {
<LinkPaymentWaitList
listItems={listItems}
additionalServiceCategory={AdditionalServiceCategory.LinkPaymentWait}
setTarget={setTarget}
mid={mid}
></LinkPaymentWaitList>
<div className="apply-row">

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

@@ -71,6 +71,8 @@ export const ListDateGroup = ({
smsCl= { items[i]?.smsCl }
onResendClick={ onResendClick }
seq= { items[i]?.seq}
></ListItem>
)
}

4
src/entities/additional-service/ui/list-item.tsx
View File

@@ -28,6 +28,7 @@ export const ListItem = ({
paymentMethod, receiverName,
requestId,subReqId,
buyerName,receiverInfo,
seq,
smsCl,
name,
@@ -190,8 +191,7 @@ export const ListItem = ({
navigate(PATHS.additionalService.fundAccount.transferDetail, {
state: {
additionalServiceCategory: additionalServiceCategory,
mid: mid,
tid: tid
seq: seq
}
});
}

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

@@ -6,58 +6,59 @@ export const SmsPaymentList = ({
listItems,
additionalServiceCategory,
mid,
onResendClick,
setTarget
onResendClick
}: SmsPaymentListProps) => {
const getListDateGroup = () => {
let rs = [];
let date = '';
let list: SmsPaymentListItem[] = [];
for (let i = 0; i < listItems.length; i++) {
let paymentDate = listItems[i]?.paymentDate || '';
let itemDate = paymentDate.substring(0, 8);
if (i === 0) {
date = itemDate;
}
if (date !== itemDate) {
date = itemDate;
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
onResendClick={onResendClick}
mid={mid}
key={date + '-' + i}
date={date}
items={list as any}
></ListDateGroup>
);
}
list = [];
}
list.push(listItems[i] as any);
}
if (list.length > 0) {
rs.push(
const getListDateGroup = () => {
let rs = [];
let date = '';
let list = [];
for (let i = 0; i < listItems.length; i++) {
let items = listItems[i];
if(!!items) {
let paymentDate = items?.paymentDate;
paymentDate = paymentDate?.substring(0, 8);
if(!!paymentDate) {
if(i === 0) {
date = paymentDate;
}
if(date !== paymentDate) {
date = paymentDate;
if(list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
onResendClick={onResendClick}
mid={mid}
key={date + '-last'}
date={date}
items={list as any}
additionalServiceCategory={additionalServiceCategory}
key={ date + '-' + i}
date={ date }
items={ list }
></ListDateGroup>
);
);
}
list = [];
}
list.push(items);
}
return rs;
};
}
}
if (list.length > 0) {
rs.push(
<ListDateGroup
additionalServiceCategory={additionalServiceCategory}
onResendClick={onResendClick}
mid={mid}
key={date + '-last'}
date={date}
items={list}
></ListDateGroup>
);
}
return rs;
};
return (
<>
<section className="transaction-list">
{getListDateGroup()}
<div ref={setTarget}></div>
</section>
</>
)

2
src/entities/common/ui/email-bottom-sheet.tsx
View File

@@ -18,12 +18,12 @@ export const EmailBottomSheet = ({
sendEmail,
sendRequest
}: EmailBottomSheetProps) => {
const [userEmail, setUserEmail] = useState<string>('');
const emailList = [
{name: 'test1@nicepay.co.kr', value: 'test1@nicepay.co.kr'},
{name: 'test2@nicepay.co.kr', value: 'test2@nicepay.co.kr'},
{name: 'test3@nicepay.co.kr', value: 'test3@nicepay.co.kr'},
];
const [userEmail, setUserEmail] = useState<string>(emailList[0]?.value || '');
const onClickToClose = () => {
setBottomSheetOn(false);
};