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

계좌성명 조회 페이지 UI 추가 (내역,상세,요청,필터)

Browse Source
This commit is contained in:
HyeonJongKim
2025-09-12 17:32:48 +09:00
parent 65bbfc12b9
commit 3b89dbdbb6
12 changed files with 782 additions and 144 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
src/entities/additional-service/ui/account-holder-search/account-holder-search-filter.tsx Normal file
View File

@@ -0,0 +1,210 @@
import moment from 'moment';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { motion } from 'framer-motion';
import { ChangeEvent, useState } from 'react';
import {
AccountHolderSearchType,
AccountHolderSearchFilterProps,
AccountHolderSearchProcessResult
} from '../../model/types';
import { FilterDateOptions } from '@/entities/common/model/types';
import { FilterCalendar } from '@/shared/ui/filter/filter-calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
export const AccountHolderSearchFilter = ({
filterOn,
setFilterOn,
mid,
searchType,
searchKeyword,
startDate,
endDate,
bank,
processResult,
setMid,
setSearchType,
setSearchKeyword,
setStartDate,
setEndDate,
setBank,
setProcessResult
}: AccountHolderSearchFilterProps) => {
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterSearchType, setFilterSearchType] = useState<AccountHolderSearchType>(searchType);
const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
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 [dateReadOnly, setDateReadyOnly] = useState<boolean>(true);
const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
const variants = {
hidden: { x: '100%' },
visible: { x: '0%' },
};
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)
};
const onClickToSetFilter = () => {
setMid(filterMid);
setSearchType(filterSearchType);
setSearchKeyword(filterSearchKeyword);
setStartDate(filterStartDate);
setEndDate(filterEndDate);
setBank(filterBank);
setProcessResult(filterProcessResult);
};
let processResultBtnGroup = [
{ name: '전체', value: AccountHolderSearchProcessResult.ALL },
{ name: '성공', value: AccountHolderSearchProcessResult.SUCCESS },
{ name: '실패', value: AccountHolderSearchProcessResult.FAILURE },
];
return (
<>
<motion.div
id="fullMenuModal"
className="full-menu-modal"
initial="hidden"
animate={(filterOn) ? 'visible' : 'hidden'}
variants={variants}
transition={{ duration: 0.3 }}
style={{
width: '100%',
height: '100%',
}}
>
<div className="full-menu-container">
<div className="full-menu-header">
<div className="full-menu-title center">필터</div>
<div className="full-menu-actions">
<button
id="closeFullMenu"
className="full-menu-close"
>
<img
src={IMAGE_ROOT + '/ico_close.svg'}
alt="닫기"
onClick={() => onClickToClose()}
/>
</button>
</div>
</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>
<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>
<FilterCalendar
startDate={filterStartDate}
endDate={filterEndDate}
setStartDate={setFilterStartDate}
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>
<FilterButtonGroups
title='조회결과'
activeValue={filterProcessResult}
btnGroups={processResultBtnGroup}
setter={setFilterProcessResult}
></FilterButtonGroups>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToSetFilter()}
>적용</button>
</div>
</div>
</motion.div>
</>
)
}