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:
HyeonJongKim
2025-09-15 10:33:27 +09:00
parent 9b8378ccad
commit 601f92369c
18 changed files with 569 additions and 322 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
src/entities/additional-service/ui/account-holder-search/account-holder-search-filter.tsx
View File

@@ -1,12 +1,15 @@
import moment from 'moment';
import { useEffect } from 'react';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { motion } from 'framer-motion';
import { ChangeEvent, useState } from 'react';
import {
AccountHolderSearchType,
AccountHolderSearchFilterProps,
AccountHolderSearchProcessResult
ProcessResult
} from '../../model/types';
import { FilterSelect } from '@/shared/ui/filter/select';
import { FilterSelectInput } from '@/shared/ui/filter/select-input';
import { FilterDateOptions } from '@/entities/common/model/types';
import { FilterCalendar } from '@/shared/ui/filter/filter-calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
@@ -36,7 +39,7 @@ export const AccountHolderSearchFilter = ({
const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
const [filterBank, setFilterBank] = useState<string>(bank)
const [filterProcessResult, setFilterProcessResult] = useState<AccountHolderSearchProcessResult>(processResult);
const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
const [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
@@ -50,38 +53,6 @@ export const AccountHolderSearchFilter = ({
const onClickToClose = () => {
setFilterOn(false);
};
const setFilterDate = (dateOptions: FilterDateOptions) => {
if (dateOptions === FilterDateOptions.Today) {
setFilterStartDate(moment().format('YYYY-MM-DD'));
setFilterEndDate(moment().format('YYYY-MM-DD'));
setDateReadyOnly(true);
setFilterDateOptionsBtn(FilterDateOptions.Today);
}
else if (dateOptions === FilterDateOptions.Week) {
setFilterStartDate(moment().subtract(1, 'week').format('YYYY-MM-DD'));
setFilterEndDate(moment().format('YYYY-MM-DD'));
setDateReadyOnly(true);
setFilterDateOptionsBtn(FilterDateOptions.Week);
}
else if (dateOptions === FilterDateOptions.Month) {
setFilterStartDate(moment().subtract(1, 'month').format('YYYY-MM-DD'));
setFilterEndDate(moment().format('YYYY-MM-DD'));
setDateReadyOnly(true);
setFilterDateOptionsBtn(FilterDateOptions.Month);
}
else if (dateOptions === FilterDateOptions.Input) {
setDateReadyOnly(false);
setFilterDateOptionsBtn(FilterDateOptions.Input);
}
};
const onClickToOpenCalendar = () => {
if (!dateReadOnly) {
setCalendarOpen(true);
}
else {
setCalendarOpen(false);
}
};
const setNewDate = (newDate: any) => {
console.log(newDate)
@@ -97,11 +68,27 @@ export const AccountHolderSearchFilter = ({
setProcessResult(filterProcessResult);
};
let processResultBtnGroup = [
{ name: '전체', value: AccountHolderSearchProcessResult.ALL },
{ name: '성공', value: AccountHolderSearchProcessResult.SUCCESS },
{ name: '실패', value: AccountHolderSearchProcessResult.FAILURE },
let MidOptions = [
{ name: 'nictest001m', value: 'nictest001m' },
{ name: 'nictest002m', value: 'nictest002m' }
];
let bankOptions = [
{ name: '우리은행', value: '우리은행'},
{ name: '토스뱅킹', value: '토스뱅킹'}
]
let searchTypeOption = [
{ name: '예금주', value: AccountHolderSearchType.ACCOUNT_HOLDER },
{ name: '계좌번호', value: AccountHolderSearchType.ACCOUNT_NUMBER },
]
let processResultBtnGroup = [
{ name: '전체', value: ProcessResult.ALL },
{ name: '성공', value: ProcessResult.SUCCESS },
{ name: '실패', value: ProcessResult.FAILURE },
];
return (
<>
<motion.div
@@ -134,40 +121,21 @@ export const AccountHolderSearchFilter = ({
</div>
<div className="option-list pt-16">
<div className="opt-field">
<div className="opt-label">가맹점</div>
<div className="opt-controls">
<select
className="flex-1"
value={filterMid}
onChange={(e: any) => setFilterMid(e.target.value)}
>
<option>nictest001m</option>
<option>nictest002m</option>
</select>
</div>
</div>
<FilterSelect
title='가맹점'
selectValue={mid}
selectSetter={setMid}
selectOptions={MidOptions}
></FilterSelect>
<div className="opt-field">
<div className="opt-label">예금주/계좌번호</div>
<div className="opt-controls">
<select
className="w-110"
value={filterSearchType}
onChange={(e: any) => setFilterSearchType(e.target.value)}
>
<option value={AccountHolderSearchType.ACCOUNT_HOLDER}>예금주</option>
<option value={AccountHolderSearchType.ACCOUNT_NUMBER}>계좌번호</option>
</select>
<input
className="flex-1"
type="text"
placeholder=""
value={filterSearchKeyword}
onChange={(e: ChangeEvent<HTMLInputElement>) => setFilterSearchKeyword(e.target.value)}
/>
</div>
</div>
<FilterSelectInput
title='예금주/계좌번호'
selectValue={searchType}
selectSetter={setSearchType}
selectOptions={searchTypeOption}
inputValue={searchKeyword}
inputSetter={setSearchKeyword}
></FilterSelectInput>
<FilterCalendar
startDate={filterStartDate}
endDate={filterEndDate}
@@ -175,19 +143,12 @@ export const AccountHolderSearchFilter = ({
setEndDate={setFilterEndDate}
></FilterCalendar>
<div className="opt-field">
<div className="opt-label">은행</div>
<div className="opt-controls">
<select
className="flex-1"
value={filterBank}
onChange={(e: any) => setFilterBank(e.target.value)}
>
<option>선택</option>
<option>우리은행</option>
</select>
</div>
</div>
<FilterSelect
title='은행'
selectValue={bank}
selectSetter={setBank}
selectOptions={bankOptions}
></FilterSelect>
<FilterButtonGroups
title='조회결과'