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

필터 4개 이상 다중 버튼 처리

Browse Source
This commit is contained in:
focp212@naver.com
2025-09-15 14:48:02 +09:00
parent 359aa2921a
commit 5fd52bdd28
7 changed files with 100 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/entities/additional-service/model/contant.ts
View File

@@ -1,12 +0,0 @@
import { EscrowDeliveryStatus } from '@/entities/transaction/model/types';
export const deliveryStatusBtnGroup = [
{name: '전체', value: EscrowDeliveryStatus.ALL},
{name: '결제완료', value: EscrowDeliveryStatus.PAY_COMPLETE},
{name: '배송등록', value: EscrowDeliveryStatus.DELIVERY_INSERT},
{name: '배송완료', value: EscrowDeliveryStatus.DELIVERY_COMPLETE},
{name: '구매확인', value: EscrowDeliveryStatus.PURCHASE_CONFIRM},
{name: '구매거절', value: EscrowDeliveryStatus.PURCHASE_REJECT},
{name: '환불처리', value: EscrowDeliveryStatus.RETURN_PROCESSING},
{name: '지급완료', value: EscrowDeliveryStatus.DEPOSIT_COMPLETE},
];

41
src/entities/transaction/model/contant.ts Normal file
View File

@@ -0,0 +1,41 @@
import {
BillingPaymentMethod,
BillingProcessResult,
BillingRequestStatus,
EscrowDeliveryStatus,
EscrowSettlementStatus
} from '@/entities/transaction/model/types';
export const deliveryStatusBtnGroup = [
{name: '전체', value: EscrowDeliveryStatus.ALL},
{name: '결제완료', value: EscrowDeliveryStatus.PAY_COMPLETE},
{name: '배송등록', value: EscrowDeliveryStatus.DELIVERY_INSERT},
{name: '배송완료', value: EscrowDeliveryStatus.DELIVERY_COMPLETE},
{name: '구매확인', value: EscrowDeliveryStatus.PURCHASE_CONFIRM},
{name: '구매거절', value: EscrowDeliveryStatus.PURCHASE_REJECT},
{name: '환불처리', value: EscrowDeliveryStatus.RETURN_PROCESSING},
{name: '지급완료', value: EscrowDeliveryStatus.DEPOSIT_COMPLETE},
];
export let settlementStatusBtnGroup = [
{name: '전체', value: EscrowSettlementStatus.ALL},
{name: '신용카드', value: EscrowSettlementStatus.CREDIT_CARD},
{name: '가상계좌', value: EscrowSettlementStatus.REAL_ACCOUNT},
{name: '계좌이체', value: EscrowSettlementStatus.ACCOUNT_TRANSFER},
];
export const requestStatusBtnGroup = [
{name: '전체', value: BillingRequestStatus.ALL},
{name: '진행중', value: BillingRequestStatus.IN_PROGRESS},
{name: '성공', value: BillingRequestStatus.SUCCESS},
{name: '요청취소', value: BillingRequestStatus.REQUEST_CANCEL},
];
export const processResultBtnGroup = [
{name: '전체', value: BillingProcessResult.ALL},
{name: '성공', value: BillingProcessResult.SUCCESS},
{name: '실패', value: BillingProcessResult.FAILURE},
];
export const paymentMethodBtnGroup = [
{name: '전체', value: BillingPaymentMethod.ALL},
{name: '신용카드', value: BillingPaymentMethod.CREDIT_CARD},
{name: '가상계좌', value: BillingPaymentMethod.VIRTUAL_ACCOUNT},
{name: '휴대폰', value: BillingPaymentMethod.MOBILE_PAYMENT},
];

4
src/entities/transaction/model/types.ts
View File

@@ -481,8 +481,8 @@ export interface EscrowFilterProps extends FilterProps {
endDate: string;
deliveryStatus: EscrowDeliveryStatus;
settlementStatus: EscrowSettlementStatus;
minAmount: number;
maxAmount: number;
minAmount?: number | string;
maxAmount?: number | string;
setMid: (mid: string) => void;
setSearchType: (searchType: EscrowSearchType) => void;
setSearchKeyword: (searchKeyword: string) => void;

23
src/entities/transaction/ui/filter/billing-filter.tsx
View File

@@ -7,6 +7,11 @@ import { FilterSelectInput } from '@/shared/ui/filter/select-input';
import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
import {
requestStatusBtnGroup,
processResultBtnGroup,
paymentMethodBtnGroup
} from '@/entities/transaction/model/contant';
import {
BillingFilterProps,
BillingPaymentMethod,
@@ -85,24 +90,6 @@ export const BillingFilter = ({
{name: 'TID', value: BillingSearchType.TID }
];
let requestStatusBtnGroup = [
{name: '전체', value: BillingRequestStatus.ALL},
{name: '진행중', value: BillingRequestStatus.IN_PROGRESS},
{name: '성공', value: BillingRequestStatus.SUCCESS},
{name: '요청취소', value: BillingRequestStatus.REQUEST_CANCEL},
];
let processResultBtnGroup = [
{name: '전체', value: BillingProcessResult.ALL},
{name: '성공', value: BillingProcessResult.SUCCESS},
{name: '실패', value: BillingProcessResult.FAILURE},
];
let paymentMethodBtnGroup = [
{name: '전체', value: BillingPaymentMethod.ALL},
{name: '신용카드', value: BillingPaymentMethod.CREDIT_CARD},
{name: '가상계좌', value: BillingPaymentMethod.VIRTUAL_ACCOUNT},
{name: '휴대폰', value: BillingPaymentMethod.MOBILE_PAYMENT},
];
useEffect(() => {
setFilterRequestStatus(requestStatus);
}, [requestStatus]);

21
src/entities/transaction/ui/filter/escrow-filter.tsx
View File

@@ -7,6 +7,10 @@ import { FilterSelectInput } from '@/shared/ui/filter/select-input';
import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
import {
deliveryStatusBtnGroup,
settlementStatusBtnGroup
} from '@/entities/transaction/model/contant';
import {
EscrowFilterProps,
EscrowSearchType,
@@ -80,23 +84,6 @@ export const EscrowFilter = ({
{name: 'TID', value: EscrowSearchType.TID }
];
let deliveryStatusBtnGroup = [
{name: '전체', value: EscrowDeliveryStatus.ALL},
{name: '결제완료', value: EscrowDeliveryStatus.PAY_COMPLETE},
{name: '배송등록', value: EscrowDeliveryStatus.DELIVERY_INSERT},
{name: '배송완료', value: EscrowDeliveryStatus.DELIVERY_COMPLETE},
{name: '구매확인', value: EscrowDeliveryStatus.PURCHASE_CONFIRM},
{name: '구매거절', value: EscrowDeliveryStatus.PURCHASE_REJECT},
{name: '환불처리', value: EscrowDeliveryStatus.RETURN_PROCESSING},
{name: '지급완료', value: EscrowDeliveryStatus.DEPOSIT_COMPLETE},
];
let settlementStatusBtnGroup = [
{name: '전체', value: EscrowSettlementStatus.ALL},
{name: '신용카드', value: EscrowSettlementStatus.CREDIT_CARD},
{name: '가상계좌', value: EscrowSettlementStatus.REAL_ACCOUNT},
{name: '계좌이체', value: EscrowSettlementStatus.ACCOUNT_TRANSFER},
];
useEffect(() => {
setFilterDeliveryStatus(deliveryStatus);
}, [deliveryStatus]);

28
src/pages/transaction/escrow/list-page.tsx
View File

@@ -9,8 +9,8 @@ import { EscrowListItem, TransactionCategory, SortByKeys, EscrowDeliveryStatus,
import { useEscrowListMutation } from '@/entities/transaction/api/use-escrow-list-mutation';
import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constants';
import { Filter } from '@/entities/transaction/ui/filter';
import { deliveryStatusBtnGroup } from '@/entities/additional-service/model/contant';
import { EscrowFilter } from '@/entities/transaction/ui/filter/escrow-filter';
import { deliveryStatusBtnGroup } from '@/entities/transaction/model/contant';
import { SortOptionsBox } from '@/entities/transaction/ui/sort-options-box';
import { HeaderType } from '@/entities/common/model/types';
import {
@@ -65,7 +65,7 @@ export const EscrowListPage = () => {
}
let listParams = {
mid: mid,
searchType: searchType,
searchType: 'ORDER_NUMBER',
searchKeyword: searchKeyword,
startDate: startDate,
endDate: endDate,
@@ -180,10 +180,28 @@ export const EscrowListPage = () => {
</div>
</div>
</main>
<Filter
<EscrowFilter
filterOn={ filterOn }
setFilterOn={ setFilterOn }
></Filter>
mid={ mid }
searchType={ searchType }
searchKeyword={searchKeyword }
startDate={ startDate }
endDate={ endDate }
deliveryStatus={ deliveryStatus }
settlementStatus={ settlementStatus }
minAmount={ minAmount }
maxAmount={ maxAmount }
setMid={ setMid }
setSearchType={ setSearchType }
setSearchKeyword={ setSearchKeyword }
setStartDate={ setStartDate }
setEndDate={ setEndDate }
setDeliveryStatus={ setDeliveryStatus }
setSettlementStatus={ setSettlementStatus }
setMinAmount={ setMinAmount }
setMaxAmount={ setMaxAmount }
></EscrowFilter>
</>
);
};

37
src/shared/ui/filter/button-groups.tsx
View File

@@ -9,24 +9,39 @@ export const FilterButtonGroups = ({
const getBtns = () => {
let rs = [];
if(!!btnGroups && btnGroups.length > 0){
let emptySpanCnt = 4 % btnGroups.length;
console.log(' btnGroups.length : ', btnGroups.length)
let emptySpanCnt = 4 - (btnGroups.length % 4);
let innerList = [];
for(let i=0;i<btnGroups.length;i++){
rs.push(
innerList.push(
<span
key={ `key-btngroup-span-${i}` }
className={ `keyword-tag flex-1 ${(activeValue === btnGroups[i]?.value)? 'active': ''}` }
onClick={ () => setter(btnGroups[i]?.value || '') }
>{ btnGroups[i]?.name }</span>
)
);
if((i % 4) === 3 ){
rs.push(
<div className="chip-row">{ innerList }</div>
);
innerList = [];
}
}
for(let i=0;i<emptySpanCnt;i++){
if(emptySpanCnt > 0 && emptySpanCnt < 4){
for(let i=0;i<emptySpanCnt;i++){
innerList.push(
<span
key={ `key-btngroup-span-nodata-${i}` }
className="keyword-tag flex-1"
style={{ visibility: 'hidden' }}
></span>
);
}
rs.push(
<span
key={ `key-btngroup-span-nodata-${i}` }
className="keyword-tag flex-1"
style={{ visibility: 'hidden' }}
></span>
<div className="chip-row">{ innerList }</div>
);
}
}
@@ -37,9 +52,7 @@ export const FilterButtonGroups = ({
<div className="opt-field">
<div className="opt-label">{ title }</div>
<div className="opt-controls col below h36">
<div className="chip-row">
{ getBtns() }
</div>
{ getBtns() }
</div>
</div>
</>