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:
Jay Sheen
2025-09-15 14:09:43 +09:00
parent e00dc65d7b 868864487c
commit 8646918ce7
28 changed files with 1155 additions and 526 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -0,0 +1,12 @@
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},
];

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

@@ -8,7 +8,7 @@ export interface FundTransferTabProps {
activeTab: FundTransferTabKeys;
};
export enum LinkPaymentTabKeys {
DispatchList = 'DispatchList',
ShippingHistory = 'ShippingHistory',
PendingSend = 'PendingSend'
};
export interface LinkPaymentTabProps {
@@ -23,16 +23,47 @@ export enum SortByKeys {
New = 'New',
Amount = 'Amount',
};
export enum ProcessResult {
ALL = 'ALL',
SUCCESS = 'SUCCESS',
FAILURE = 'FAILURE'
};
export enum KeyInPaymentTransactionStatus {
ALL = 'ALL',
APPROVE = 'APPROVE',
BF_CANCEL = 'BF_CANCEL',
AF_CANCEL = 'AF_CANCEL'
}
export enum AccountHolderSearchType {
ALL = 'ALL',
ACCOUNT_HOLDER = 'ACCOUNT_HOLDER',
ACCOUNT_NUMBER = 'ACCOUNT_NUMBER'
};
export enum AccountHolderSearchProcessResult {
ALL = 'ALL',
SUCCESS = 'SUCCESS',
FAILURE = 'FAILURE'
export enum LinkPaymentSearchType {
ALL = "ALL",
PHONE = "PHONE",
EMAIL = "EMAIL"
};
export enum LinkPaymentSendMethod {
ALL = "ALL",
SMS = "SMS",
EMAIL = "EMAIL",
KAKAO = "KAKAO"
};
export enum LinkPaymentTransactionStatus {
ALL = "ALL",
ACTIVATE = "ACTIVATE",
DEPOSIT_REQUEST = "DEPOSIT_REQUEST",
TRANSACTION_COMPLETE = "TRANSACTION_COMPLETE",
TRANSACTION_FAIL = "TRANSACTION_FAIL",
INACTIVE = "INACTIVE"
}
export enum LinkPaymentSendingStatus {
ALL = "ALL",
SEND_REQUEST = "SEND_REQUEST",
SEND_CANCEL = "SEND_CANCEL"
}
export interface SortOptionsBoxProps {
sortBy: SortByKeys;
onClickToSort: (sortBy: SortByKeys) => void;
@@ -328,7 +359,21 @@ export interface FilterProps {
filterOn: boolean;
setFilterOn: (filterOn: boolean) => void;
};
export interface KeyInPaymentFilterProps extends FilterProps {
mid: string,
startDate: string;
endDate: string;
transactionStatus: KeyInPaymentTransactionStatus;
minAmount?: number | string;
maxAmount?: number | string;
setMid: (mid: string) => void;
setStartDate: (startDate: string) => void;
setEndDate: (endDate: string) => void;
setTransactionStatus: (transactionStatus: KeyInPaymentTransactionStatus) => void;
setMinAmount: (minAmount: string | number) => void;
setMaxAmount: (maxAmount: string | number) => void;
}
// 계좌성명 조회 필터
export interface AccountHolderSearchFilterProps extends FilterProps {
mid: string;
searchType: AccountHolderSearchType;
@@ -336,17 +381,52 @@ export interface AccountHolderSearchFilterProps extends FilterProps {
startDate: string;
endDate: string;
bank: string;
processResult: AccountHolderSearchProcessResult;
processResult: ProcessResult;
setMid: (mid: string) => void;
setSearchType: (searchType: AccountHolderSearchType) => void;
setSearchKeyword: (searchKeyWorld: string) => void;
setStartDate: (startDate: string) => void;
setEndDate: (endDate: string) => void;
setBank: (bank: string) => void;
setProcessResult: (processResult: AccountHolderSearchProcessResult) => void;
setProcessResult: (processResult: ProcessResult) => void;
}
export interface LinkPaymentFilterProps extends FilterProps {
// 링크결제 - 발송내역 탭 필터
export interface LinkPaymentShippingHistoryFilterProps extends FilterProps {
mid: string;
searchType: LinkPaymentSearchType;
searchKeyword: string;
startDate: string;
endDate: string;
transactionStatus: LinkPaymentTransactionStatus;
processResult: ProcessResult;
sendMethod: LinkPaymentSendMethod;
setMid: (mid: string) => void;
setSearchType: (searchType: LinkPaymentSearchType) => void;
setSearchKeyword: (searchKeyWorld: string) => void;
setStartDate: (startDate: string) => void;
setEndDate: (endDate: string) => void;
setTransactionStatus: (transactionStatus: LinkPaymentTransactionStatus) => void;
setProcessResult: (processResult: ProcessResult) => void;
setSendMethod: (sendMethod: LinkPaymentSendMethod) => void;
}
// 링크결제 - 발송대기 탭 필터
export interface LinkPaymentPendingSendFilterProps extends FilterProps {
mid: string;
searchType: LinkPaymentSearchType;
searchKeyword: string;
startDate: string;
endDate: string;
sendMethod: LinkPaymentSendMethod;
sendingStatus: LinkPaymentSendingStatus;
setMid: (mid: string) => void;
setSearchType: (searchType: LinkPaymentSearchType) => void;
setSearchKeyword: (searchKeyWorld: string) => void;
setStartDate: (startDate: string) => void;
setEndDate: (endDate: string) => void;
setSendMethod: (sendMethod: LinkPaymentSendMethod) => void;
setSendingStatus: (sendingStatus: LinkPaymentSendingStatus) => void;
};
export enum DetailInfoSectionKeys {

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

@@ -1,14 +1,17 @@
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 { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
export const AccountHolderSearchFilter = ({
@@ -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='조회결과'

145
src/entities/additional-service/ui/key-in-payment/key-in-payment-filter.tsx Normal file
View File

@@ -0,0 +1,145 @@
import moment from 'moment';
import { useEffect } from 'react';
import { useState } from 'react';
import { motion } from 'framer-motion';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { FilterSelect } from '@/shared/ui/filter/select';
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 {
KeyInPaymentFilterProps,
KeyInPaymentTransactionStatus
} from '../../model/types';
export const KeyInPaymentFilter = ({
filterOn,
setFilterOn,
mid,
startDate,
endDate,
transactionStatus,
minAmount,
maxAmount,
setMid,
setStartDate,
setEndDate,
setTransactionStatus,
setMinAmount,
setMaxAmount
}: KeyInPaymentFilterProps) => {
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
const [filterTransactionStatus, setFilterTransactionStatus] = useState<KeyInPaymentTransactionStatus>(transactionStatus);
const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
const variants = {
hidden: { x: '100%' },
visible: { x: '0%' },
};
const onClickToClose = () => {
setFilterOn(false);
};
const setNewDate = (newDate: any) => {
console.log(newDate)
};
const onClickToSetFilter = () => {
setMid(filterMid);
setStartDate(filterStartDate);
setEndDate(filterEndDate);
setTransactionStatus(filterTransactionStatus);
setMinAmount(filterMinAmount);
setMaxAmount(filterMaxAmount);
onClickToClose();
};
let MidOptions = [
{ name: 'nictest001m', value: 'nictest001m' }
];
let transactionStatusOption = [
{ name: '전체', value: KeyInPaymentTransactionStatus.ALL },
{ name: '승인', value: KeyInPaymentTransactionStatus.APPROVE },
{ name: '전취소', value: KeyInPaymentTransactionStatus.BF_CANCEL },
{ name: '후취소', value: KeyInPaymentTransactionStatus.AF_CANCEL },
]
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">
<FilterSelect
title='가맹점'
selectValue={filterMid}
selectSetter={setFilterMid}
selectOptions={MidOptions}
></FilterSelect>
<FilterCalendar
title='조회기간'
startDate={filterStartDate}
endDate={filterEndDate}
setStartDate={setFilterStartDate}
setEndDate={setFilterEndDate}
></FilterCalendar>
<FilterButtonGroups
title='거래상태'
activeValue={filterTransactionStatus}
btnGroups={transactionStatusOption}
setter={setFilterTransactionStatus}
></FilterButtonGroups>
<FilterRangeAmount
title='상품가격'
minAmount={filterMinAmount}
maxAmount={filterMaxAmount}
setMinAmount={setFilterMinAmount}
setMaxAmount={setFilterMaxAmount}
></FilterRangeAmount>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToSetFilter()}
>적용</button>
</div>
</div>
</motion.div>
</>
);
};

174
src/entities/additional-service/ui/link-payment/filter/link-payment-pending-send-filter.tsx Normal file
View File

@@ -0,0 +1,174 @@
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 {
LinkPaymentPendingSendFilterProps,
LinkPaymentSearchType,
LinkPaymentSendMethod,
LinkPaymentSendingStatus,
} 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/calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
export const LinkPaymentPendingSendFilter = ({
filterOn,
setFilterOn,
mid,
searchType,
searchKeyword,
startDate,
endDate,
sendMethod,
sendingStatus,
setMid,
setSearchType,
setSearchKeyword,
setStartDate,
setEndDate,
setSendMethod,
setSendingStatus
}: LinkPaymentPendingSendFilterProps) => {
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterSearchType, setFilterSearchType] = useState<LinkPaymentSearchType>(searchType);
const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
const [filterSendMethod, setFilterSendMethod] = useState<LinkPaymentSendMethod>(sendMethod)
const [filterSendingStatus, setFilterSendingStatus] = useState<LinkPaymentSendingStatus>(sendingStatus);
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 setNewDate = (newDate: any) => {
console.log(newDate)
};
const onClickToSetFilter = () => {
setMid(filterMid);
setSearchType(filterSearchType);
setSearchKeyword(filterSearchKeyword);
setStartDate(filterStartDate);
setEndDate(filterEndDate);
setSendMethod(filterSendMethod);
setSendingStatus(filterSendingStatus);
};
let MidOptions = [
{ name: 'nictest001m', value: 'nictest001m' },
{ name: 'nictest002m', value: 'nictest002m' }
];
let searchTypeOption = [
{ name: '휴대폰번호', value: LinkPaymentSearchType.PHONE },
{ name: '이메일', value: LinkPaymentSearchType.EMAIL },
]
let sendMethodOption = [
{ name: '전체', value: LinkPaymentSendMethod.ALL },
{ name: 'SMS', value: LinkPaymentSendMethod.SMS },
{ name: '이메일', value: LinkPaymentSendMethod.EMAIL },
{ name: '카카오', value: LinkPaymentSendMethod.KAKAO },
]
let sendingStatusOption = [
{ name: '전체', value: LinkPaymentSendingStatus.ALL },
{ name: '발송요청', value: LinkPaymentSendingStatus.SEND_REQUEST },
{ name: '발송취소', value: LinkPaymentSendingStatus.SEND_CANCEL },
]
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">
<FilterSelect
title='가맹점'
selectValue={mid}
selectSetter={setFilterMid}
selectOptions={MidOptions}
></FilterSelect>
<FilterSelectInput
title='휴대폰번호/이메일'
selectValue={searchType}
selectSetter={setFilterSearchType}
selectOptions={searchTypeOption}
inputValue={searchKeyword}
inputSetter={setSearchKeyword}
></FilterSelectInput>
<FilterCalendar
startDate={filterStartDate}
endDate={filterEndDate}
setStartDate={setFilterStartDate}
setEndDate={setFilterEndDate}
></FilterCalendar>
<FilterButtonGroups
title='발송수단'
activeValue={filterSendMethod}
btnGroups={sendMethodOption}
setter={setFilterSendMethod}
></FilterButtonGroups>
<FilterButtonGroups
title='진행상태'
activeValue={filterSendingStatus}
btnGroups={sendingStatusOption}
setter={setFilterSendingStatus}
></FilterButtonGroups>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToSetFilter()}
>적용</button>
</div>
</div>
</motion.div>
</>
)
}

195
src/entities/additional-service/ui/link-payment/filter/link-payment-shipping-history-filter.tsx Normal file
View File

@@ -0,0 +1,195 @@
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 {
LinkPaymentSearchType,
LinkPaymentSendMethod,
LinkPaymentShippingHistoryFilterProps,
LinkPaymentTransactionStatus,
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/calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
export const LinkPaymentShippingHistoryFilter = ({
filterOn,
setFilterOn,
mid,
searchType,
searchKeyword,
startDate,
endDate,
transactionStatus,
processResult,
sendMethod,
setMid,
setSearchType,
setSearchKeyword,
setStartDate,
setEndDate,
setTransactionStatus,
setProcessResult,
setSendMethod
}: LinkPaymentShippingHistoryFilterProps) => {
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterSearchType, setFilterSearchType] = useState<LinkPaymentSearchType>(searchType);
const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
const [filterTransactionStatus, setFilterTransactionStatus] = useState<LinkPaymentTransactionStatus>(transactionStatus)
const [filterProcessResult, setFilterProcessResult] = useState<ProcessResult>(processResult);
const [filterSendMethod, setFilterSendMethod] = useState<LinkPaymentSendMethod>(sendMethod);
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 setNewDate = (newDate: any) => {
console.log(newDate)
};
const onClickToSetFilter = () => {
setMid(filterMid);
setSearchType(filterSearchType);
setSearchKeyword(filterSearchKeyword);
setStartDate(filterStartDate);
setEndDate(filterEndDate);
setTransactionStatus(filterTransactionStatus);
setProcessResult(filterProcessResult);
setSendMethod(filterSendMethod);
};
let MidOptions = [
{ name: 'nictest001m', value: 'nictest001m' },
{ name: 'nictest002m', value: 'nictest002m' }
];
let searchTypeOption = [
{ name: '휴대폰번호', value: LinkPaymentSearchType.PHONE },
{ name: '이메일', value: LinkPaymentSearchType.EMAIL },
]
let transactionStatusOption = [
{ name: '전체', value: LinkPaymentTransactionStatus.ALL },
{ name: '미완료/활성화', value: LinkPaymentTransactionStatus.ACTIVATE },
{ name: '입금요청', value: LinkPaymentTransactionStatus.DEPOSIT_REQUEST },
{ name: '결제완료', value: LinkPaymentTransactionStatus.TRANSACTION_COMPLETE },
{ name: '결제실패', value: LinkPaymentTransactionStatus.TRANSACTION_FAIL },
{ name: '결제중단/비활성화', value: LinkPaymentTransactionStatus.INACTIVE },
]
let processResultOption = [
{ name: '전체', value: ProcessResult.ALL },
{ name: '성공', value: ProcessResult.SUCCESS },
{ name: '실패', value: ProcessResult.FAILURE },
]
let sendMethodOption = [
{ name: '전체', value: LinkPaymentSendMethod.ALL },
{ name: 'SMS', value: LinkPaymentSendMethod.SMS },
{ name: '이메일', value: LinkPaymentSendMethod.EMAIL },
{ name: '카카오', value: LinkPaymentSendMethod.KAKAO },
]
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">
<FilterSelect
title='가맹점'
selectValue={filterMid}
selectSetter={setFilterMid}
selectOptions={MidOptions}
></FilterSelect>
<FilterSelectInput
title='휴대폰번호/이메일'
selectValue={filterSearchType}
selectSetter={setFilterSearchType}
selectOptions={searchTypeOption}
inputValue={searchKeyword}
inputSetter={setSearchKeyword}
></FilterSelectInput>
<FilterCalendar
startDate={filterStartDate}
endDate={filterEndDate}
setStartDate={setFilterStartDate}
setEndDate={setFilterEndDate}
></FilterCalendar>
<FilterButtonGroups
title='거래상태'
activeValue={filterTransactionStatus}
btnGroups={transactionStatusOption}
setter={setFilterTransactionStatus}
></FilterButtonGroups>
<FilterButtonGroups
title='전송결과'
activeValue={filterProcessResult}
btnGroups={processResultOption}
setter={setFilterProcessResult}
></FilterButtonGroups>
<FilterButtonGroups
title='발송수단'
activeValue={filterSendMethod}
btnGroups={sendMethodOption}
setter={setFilterSendMethod}
></FilterButtonGroups>
</div>
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1"
onClick={() => onClickToSetFilter()}
>적용</button>
</div>
</div>
</motion.div>
</>
)
}

193
src/entities/additional-service/ui/link-payment/link-payment-filter.tsx
View File

@@ -1,193 +0,0 @@
import { motion } from 'framer-motion';
import {IMAGE_ROOT} from "@/shared/constants/common";
import {LinkPaymentFilterProps} from "@/entities/additional-service/model/types";
export const LinkPaymentFilter = ({
filterOn,
setFilterOn
}: LinkPaymentFilterProps) => {
const variants = {
hidden:{ x: '100%'},
visible: {x: '0%'}
};
const onClickToClose = () => {
setFilterOn(false);
};
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 pb-120">
<div className="opt-field">
<div className="opt-label">가맹점</div>
<div className="opt-controls">
<select className="flex-1">
<option>nictest001m</option>
</select>
</div>
</div>
<div className="opt-field">
<div className="opt-label">휴대폰번호, 이메일</div>
<div className="opt-controls">
<select className="flex-1">
<option>휴대폰번호</option>
<option>이메일</option>
</select>
<input
type="text"/>
</div>
</div>
<div className="opt-field">
<div className="opt-label">결제수단</div>
<div className="opt-controls">
<select className="flex-1">
<option>nictext001m</option>
</select>
</div>
</div>
<div className="opt-field mt_top">
<div className="opt-label">조회기간</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span className="keyword-tag">당일</span>
<span className="keyword-tag">일주일</span>
<span className="keyword-tag">1개월</span>
<span className="keyword-tag active">직접입력</span>
</div>
<div className="range-row">
<div className="input-wrapper date">
<input
className="date-input"
type="text"
placeholder="날짜 선택"
value="2025.06.08"
readOnly={ true }
/>
<button
className="date-btn"
type="button"
>
<img
src={ IMAGE_ROOT + '/ico_date.svg' }
alt="날짜 선택"
/>
</button>
</div>
<span className="beetween">~</span>
<div className="input-wrapper date">
<input
className="date-input"
type="text"
placeholder="날짜 선택"
value="2025.06.08"
readOnly={ true }
/>
<button
className="date-btn"
type="button"
>
<img
src={ IMAGE_ROOT + '/ico_date.svg' }
alt="날짜 선택"
/>
</button>
</div>
</div>
</div>
</div>
<div className="opt-field">
<div className="opt-label">거래 구분</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span className="keyword-tag flex-1 active">전체</span>
<span className="keyword-tag flex-1">미완료/ <br/> 활성화</span>
<span className="keyword-tag flex-1">입금요청</span>
<span className="keyword-tag flex-1">결제완료</span>
<span
className="keyword-tag"
style={{ visibility: 'hidden' }}
></span>
</div>
</div>
<div className="opt-controls col below h50 mt-10">
<div className="chip-row">
<span className="keyword-tag flex-1">결제실패</span>
<span className="keyword-tag flex-1">결제중단/ <br/> 비활성화</span>
<span
className="keyword-tag"
style={{ visibility: 'hidden' }}
></span>
<span
className="keyword-tag"
style={{ visibility: 'hidden' }}
></span>
</div>
</div>
</div>
<div className="opt-field">
<div className="opt-label">전송결과</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span className="keyword-tag flex-1 active">전체</span>
<span className="keyword-tag flex-1">성공</span>
<span className="keyword-tag flex-1">실패</span>
</div>
</div>
</div>
<div className="opt-field">
<div className="opt-label">발송수단</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span className="keyword-tag flex-1 active">전체</span>
<span className="keyword-tag flex-1">SMS</span>
<span className="keyword-tag flex-1">이메일</span>
<span className="keyword-tag flex-1">카카오</span>
</div>
</div>
</div>
<div className="apply-row">
<button className="btn-50 btn-blue flex-1">적용</button>
</div>
</div>
</div>
</motion.div>
</>
)
}

39
src/entities/additional-service/ui/link-payment/link-payment-pending-send-wrap.tsx
View File

@@ -1,22 +1,33 @@
import moment from 'moment';
import { IMAGE_ROOT } from "@/shared/constants/common";
import { useState, useEffect } from "react";
import { LinkPaymentFilter } from "./link-payment-filter";
import { LinkPaymentPendingSendFilter } from "./filter/link-payment-pending-send-filter";
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { PATHS } from "@/shared/constants/paths";
import { LinkPaymentPendingList } from "./link-payment-pending-list";
import { LinkPaymentSearchType, LinkPaymentSendingStatus, LinkPaymentSendMethod } from "../../model/types";
export const LinkPaymentPendingSendWrap = () => {
const { navigate } = useNavigate();
const [filterOn, setFilterOn] = useState<boolean>(false);
const [mid, setMid] = useState<string>('nictest001m');
const [searchType, setSearchType] = useState<LinkPaymentSearchType>(LinkPaymentSearchType.ALL)
const [searchKeyword, setSearchKeyword] = useState<string>('');
const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL);
const [sendingStatus, setSendingStatus] = useState<LinkPaymentSendingStatus>(LinkPaymentSendingStatus.ALL);
const [listItems, setListItems] = useState({});
const onClickToOpenFilter = () => {
setFilterOn(!filterOn);
};
const onClickToNavigate = () => {
navigate(PATHS.additionalService.linkPayment.request)
}
const callList = () => {
setListItems({
'20250608': [
@@ -28,7 +39,7 @@ export const LinkPaymentPendingSendWrap = () => {
amount: 5254000
},
{
transactionId: 'pending2',
transactionId: 'pending2',
customerName: '김*환(7000)',
status: '발송요청',
channel: 'SMS',
@@ -111,7 +122,7 @@ export const LinkPaymentPendingSendWrap = () => {
</div>
</section>
<LinkPaymentPendingList
<LinkPaymentPendingList
listItems={listItems}
/>
<div className="apply-row">
@@ -120,10 +131,24 @@ export const LinkPaymentPendingSendWrap = () => {
onClick={() => onClickToNavigate()}
>결제 신청</button>
</div>
<LinkPaymentFilter
<LinkPaymentPendingSendFilter
filterOn={filterOn}
setFilterOn={setFilterOn}
></LinkPaymentFilter>
mid={mid}
searchType={searchType}
searchKeyword={searchKeyword}
startDate={startDate}
endDate={endDate}
sendMethod={sendMethod}
sendingStatus={sendingStatus}
setMid={setMid}
setSearchType={setSearchType}
setSearchKeyword={setSearchKeyword}
setStartDate={setStartDate}
setEndDate={setEndDate}
setSendMethod={setSendMethod}
setSendingStatus={setSendingStatus}
></LinkPaymentPendingSendFilter>
</>
)
}

38
src/entities/additional-service/ui/link-payment/link-payment-dispatch-list-wrap.tsx → src/entities/additional-service/ui/link-payment/link-payment-shipping-history-wrap.tsx
View File

@@ -1,18 +1,28 @@
import moment from 'moment';
import { IMAGE_ROOT } from "@/shared/constants/common";
import { useState, useEffect } from "react";
import { LinkPaymentFilter } from "./link-payment-filter";
import { LinkPaymentShippingHistoryFilter } from "./filter/link-payment-shipping-history-filter";
import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { PATHS } from "@/shared/constants/paths";
import { LinkPaymentList } from "./link-payment-list";
import { SortOptionsBox } from "./sort-options-box";
import { SortByKeys } from "../../model/types";
import { LinkPaymentSendMethod, LinkPaymentTransactionStatus, ProcessResult, SortByKeys } from "../../model/types";
import { LinkPaymentSearchType, } from "../../model/types";
export const LinkPaymentDispatchListWrap = () => {
export const LinkPaymentShippingHistoryWrap = () => {
const { navigate } = useNavigate();
const [filterOn, setFilterOn] = useState<boolean>(false);
const [sortBy, setSortBy] = useState<SortByKeys>(SortByKeys.New);
const [listItems, setListItems] = useState({});
const [mid, setMid] = useState<string>('nictest001m');
const [searchType, setSearchType] = useState<LinkPaymentSearchType>(LinkPaymentSearchType.ALL)
const [searchKeyword, setSearchKeyword] = useState<string>('');
const [startDate, setStartDate] = useState(moment().format('YYYY-MM-DD'));
const [endDate, setEndDate] = useState(moment().format('YYYY-MM-DD'));
const [transactionStatus, setTransactionStatus] = useState<LinkPaymentTransactionStatus>(LinkPaymentTransactionStatus.ALL)
const [processResult, setProcessResult] = useState<ProcessResult>(ProcessResult.ALL)
const [sendMethod, setSendMethod] = useState<LinkPaymentSendMethod>(LinkPaymentSendMethod.ALL)
const onClickToOpenFilter = () => {
setFilterOn(!filterOn);
@@ -25,7 +35,7 @@ export const LinkPaymentDispatchListWrap = () => {
callList({ sortBy: sort });
};
const callList = (option?: {sortBy?: string, val?: string}) => {
const callList = (option?: { sortBy?: string, val?: string }) => {
setListItems({
'20250608': [
{
@@ -134,10 +144,26 @@ export const LinkPaymentDispatchListWrap = () => {
onClick={() => onClickToNavigate()}
>결제 신청</button>
</div>
<LinkPaymentFilter
<LinkPaymentShippingHistoryFilter
filterOn={filterOn}
setFilterOn={setFilterOn}
></LinkPaymentFilter>
mid={mid}
searchType={searchType}
searchKeyword={searchKeyword}
startDate={startDate}
endDate={endDate}
transactionStatus={transactionStatus}
processResult={processResult}
sendMethod={sendMethod}
setMid={setMid}
setSearchType={setSearchType}
setSearchKeyword={setSearchKeyword}
setStartDate={setStartDate}
setEndDate={setEndDate}
setTransactionStatus={setTransactionStatus}
setProcessResult={setProcessResult}
setSendMethod={setSendMethod}
></LinkPaymentShippingHistoryFilter>
</>
)
}

8
src/entities/additional-service/ui/link-payment/link-payment-tab.tsx
View File

@@ -12,8 +12,8 @@ export const LinkPaymentTab = ({
const onClickToNavigation = (tab: LinkPaymentTabKeys) => {
if(activeTab !== tab){
if(tab === LinkPaymentTabKeys.DispatchList){
navigate(PATHS.additionalService.linkPayment.dispatchList);
if(tab === LinkPaymentTabKeys.ShippingHistory){
navigate(PATHS.additionalService.linkPayment.shippingHistory);
}
else if(tab === LinkPaymentTabKeys.PendingSend){
navigate(PATHS.additionalService.linkPayment.pendingSend);
@@ -25,8 +25,8 @@ export const LinkPaymentTab = ({
<>
<div className="subTab">
<button
className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.DispatchList)? 'active': ''}` }
onClick={ () => onClickToNavigation(LinkPaymentTabKeys.DispatchList) }
className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.ShippingHistory)? 'active': ''}` }
onClick={ () => onClickToNavigation(LinkPaymentTabKeys.ShippingHistory) }
>발송내역</button>
<button
className={`subtab-btn ${(activeTab === LinkPaymentTabKeys.PendingSend)? 'active': ''}` }

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

@@ -14,6 +14,10 @@ export enum FilterDateOptions {
Month = 'Month',
Input = 'Input'
};
export enum CalendarType {
Start = 'Start',
End = 'End'
};
export interface DefaultRequestPagination {
cursor: string;
size: number;

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

@@ -38,7 +38,27 @@ export enum CashReceiptPurpose {
INCOME_DEDUCTION = 'INCOME_DEDUCTION',
EXPENSE_PROOF = 'EXPENSE_PROOF',
};
export enum EscrowSearchType {
ALL = 'ALL',
ORDER_NUMBER = 'ORDER_NUMBER',
TID = 'TID'
};
export enum EscrowDeliveryStatus {
ALL = 'ALL',
PAY_COMPLETE = 'PAY_COMPLETE',
DELIVERY_INSERT = 'DELIVERY_INSERT',
DELIVERY_COMPLETE = 'DELIVERY_COMPLETE',
PURCHASE_CONFIRM = 'PURCHASE_CONFIRM',
PURCHASE_REJECT = 'PURCHASE_REJECT',
RETURN_PROCESSING = 'RETURN_PROCESSING',
DEPOSIT_COMPLETE = 'DEPOSIT_COMPLETE'
};
export enum EscrowSettlementStatus {
ALL = 'ALL',
CREDIT_CARD = 'CREDIT_CARD',
REAL_ACCOUNT = 'REAL_ACCOUNT',
ACCOUNT_TRANSFER = 'ACCOUNT_TRANSFER'
};
export enum BillingSearchType {
ALL = 'ALL',
ORDER_NUMBER = 'ORDER_NUMBER',
@@ -200,8 +220,8 @@ export interface EscrowListParams {
endDate?: string;
deliveryStatus?: string;
settlementStatus?: string;
minAmount?: number;
maxAmount?: number;
minAmount?: number | string;
maxAmount?: number | string;
pagination?: DefaultRequestPagination;
};
@@ -214,6 +234,8 @@ export interface BillingListParams {
requestStatus?: string;
processResult?: string;
paymentMethod?: string;
minAmount?: number | string;
maxAmount?: number | string;
pagination?: DefaultRequestPagination
};
@@ -452,7 +474,24 @@ export interface CashReceiptFilterProps extends FilterProps {
};
export interface EscrowFilterProps extends FilterProps {
mid: string;
searchType: EscrowSearchType;
searchKeyword: string;
startDate: string
endDate: string;
deliveryStatus: EscrowDeliveryStatus;
settlementStatus: EscrowSettlementStatus;
minAmount: number;
maxAmount: number;
setMid: (mid: string) => void;
setSearchType: (searchType: EscrowSearchType) => void;
setSearchKeyword: (searchKeyword: string) => void;
setStartDate: (startDate: string) => void;
setEndDate: (endDate: string) => void;
setDeliveryStatus: (deliveryStatus: EscrowDeliveryStatus) => void;
setSettlementStatus: (settlementStatus: EscrowSettlementStatus) => void;
setMinAmount: (minAmount: string | number) => void;
setMaxAmount: (maxAmount: string | number) => void;
};
export interface BillingFilterProps extends FilterProps {
mid: string;

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

@@ -1,11 +1,10 @@
import moment from 'moment';
import { useEffect } from 'react';
import { useState } from 'react';
import { motion } from 'framer-motion';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { FilterSelect } from '@/shared/ui/filter/select';
import { FilterSelectInput } from '@/shared/ui/filter/select-input';
import { FilterCalendar } from '@/shared/ui/filter/filter-calendar';
import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
import {
@@ -74,6 +73,8 @@ export const BillingFilter = ({
setRequestStatus(filterRequestStatus);
setProcessResult(filterProcessResult);
setPaymentMethod(filterPaymentMethod);
setMinAmount(filterMinAmount);
setMaxAmount(filterMaxAmount);
onClickToClose();
};
let MidOptions = [
@@ -140,17 +141,17 @@ export const BillingFilter = ({
<div className="option-list pt-16">
<FilterSelect
title='가맹점'
selectValue={ mid }
selectSetter={ setMid }
selectValue={ filterMid }
selectSetter={ setFilterMid }
selectOptions={ MidOptions }
></FilterSelect>
<FilterSelectInput
title='주문번호/ID'
selectValue={ searchType }
selectSetter={ setSearchType }
selectValue={ filterSearchType }
selectSetter={ setFilterSearchType }
selectOptions={ SearchTypeOptions }
inputValue={ searchKeyword }
inputSetter={ setSearchKeyword }
inputSetter={ setFilterSearchKeyword }
></FilterSelectInput>
<FilterCalendar
title='조회기간'

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

@@ -1,12 +1,52 @@
import { useEffect } from 'react';
import { useState } from 'react';
import { motion } from 'framer-motion';
import { IMAGE_ROOT } from '@/shared/constants/common';
import { FilterProps } from '../../model/types';
import { FilterSelect } from '@/shared/ui/filter/select';
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 {
EscrowFilterProps,
EscrowSearchType,
EscrowDeliveryStatus,
EscrowSettlementStatus
} from '../../model/types';
export const EscrowFilter = ({
filterOn,
setFilterOn
}: FilterProps) => {
setFilterOn,
mid,
searchType,
searchKeyword,
startDate,
endDate,
deliveryStatus,
settlementStatus,
minAmount,
maxAmount,
setMid,
setSearchType,
setSearchKeyword,
setStartDate,
setEndDate,
setDeliveryStatus,
setSettlementStatus,
setMinAmount,
setMaxAmount
}: EscrowFilterProps) => {
const [filterMid, setFilterMid] = useState<string>(mid);
const [filterSearchType, setFilterSearchType] = useState<EscrowSearchType>(searchType);
const [filterSearchKeyword, setFilterSearchKeyword] = useState<string>(searchKeyword);
const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
const [filterDeliveryStatus, setFilterDeliveryStatus] = useState<EscrowDeliveryStatus>(deliveryStatus);
const [filterSettlementStatus, setFilterSettlementStatus] = useState<EscrowSettlementStatus>(settlementStatus);
const [filterMinAmount, setFilterMinAmount] = useState<number | string>(minAmount || '');
const [filterMaxAmount, setFilterMaxAmount] = useState<number | string>(maxAmount || '');
const variants = {
hidden: { x: '100%' },
visible: { x: '0%' },
@@ -15,6 +55,52 @@ export const EscrowFilter = ({
const onClickToClose = () => {
setFilterOn(false);
};
const setNewDate = (newDate: any) => {
console.log(newDate)
};
const onClickToSetFilter = () => {
setMid(filterMid);
setSearchType(filterSearchType);
setSearchKeyword(filterSearchKeyword);
setStartDate(filterStartDate);
setEndDate(filterEndDate);
setDeliveryStatus(filterDeliveryStatus);
setSettlementStatus(filterSettlementStatus);
setMinAmount(filterMinAmount);
setMaxAmount(filterMaxAmount);
onClickToClose();
};
let MidOptions = [
{name: 'nictest001m', value: 'nictest001m'}
];
let SearchTypeOptions = [
{name: '주문번호', value: EscrowSearchType.ORDER_NUMBER },
{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]);
return (
<>
<motion.div
@@ -46,139 +132,56 @@ export const EscrowFilter = ({
</div>
</div>
<div className="option-list pb-120">
<div className="opt-field">
<div className="opt-label">가맹점</div>
<div className="opt-controls">
<select className="flex-1">
<option>nictest001m</option>
</select>
</div>
</div>
<div className="opt-field">
<div className="opt-label">주문번호/ID</div>
<div className="opt-controls">
<select className="w-110">
<option>주문번호</option>
<option>ID</option>
</select>
<input
className="flex-1"
type="text"
placeholder=""
/>
</div>
</div>
<div className="opt-field">
<div className="opt-label">조회기간</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span className="keyword-tag active">당일</span>
<span className="keyword-tag">일주일</span>
<span className="keyword-tag">1개월</span>
<span className="keyword-tag">직접입력</span>
</div>
<div className="range-row">
<div className="input-wrapper date">
<input
className="date-input"
type="text"
placeholder="날짜 선택"
value="2025.06.08"
readOnly={ true }
/>
<button
type="button"
className="date-btn"
>
<img
src={ IMAGE_ROOT + '/ico_date.svg' }
alt="날짜 선택"
/>
</button>
</div>
<span className="beetween">~</span>
<div className="input-wrapper date">
<input
className="date-input"
type="text"
placeholder="날짜 선택"
value="2025.06.08"
readOnly={ true }
/>
<button
type="button"
className="date-btn"
>
<img
src={ IMAGE_ROOT + '/ico_date.svg' }
alt="날짜 선택"
/>
</button>
</div>
</div>
</div>
</div>
<div className="opt-field">
<div className="opt-label">요청상태</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span className="keyword-tag active">전체</span>
<span className="keyword-tag">진행중</span>
<span className="keyword-tag">성공</span>
<span className="keyword-tag">요청취소</span>
</div>
</div>
</div>
<div className="opt-field">
<div className="opt-label">저리결과</div>
<div className="opt-controls col below h36">
<div className="chip-row">
<span className="keyword-tag active">전체</span>
<span className="keyword-tag">성공</span>
<span className="keyword-tag">실패</span>
<span
className="keyword-tag"
style={{ visibility: 'hidden' }}
></span>
</div>
</div>
</div>
<div className="opt-field">
<div className="opt-label">결제수단</div>
<div className="opt-controls">
<select className="flex-1">
<option>전체</option>
</select>
</div>
</div>
<div className="opt-field">
<div className="opt-label">거래금액</div>
<div className="opt-controls">
<div className="input-wrapper ">
<input
type="text"
placeholder=""
/>
</div>
<span> ~ </span>
<div className="input-wrapper date">
<input
type="text"
placeholder=""
/>
</div>
</div>
</div>
<div className="option-list pt-16">
<FilterSelect
title='가맹점'
selectValue={ filterMid }
selectSetter={ setMid }
selectOptions={ MidOptions }
></FilterSelect>
<FilterSelectInput
title='주문번호/ID'
selectValue={ filterSearchType }
selectSetter={ setSearchType }
selectOptions={ SearchTypeOptions }
inputValue={ searchKeyword }
inputSetter={ setSearchKeyword }
></FilterSelectInput>
<FilterCalendar
title='조회기간'
startDate={ filterStartDate }
endDate={ filterEndDate }
setStartDate={ setFilterStartDate }
setEndDate={ setFilterEndDate }
></FilterCalendar>
<FilterButtonGroups
title='배송상태'
activeValue={ filterDeliveryStatus }
btnGroups={ deliveryStatusBtnGroup }
setter={ setFilterDeliveryStatus }
></FilterButtonGroups>
<FilterButtonGroups
title='결제수단'
activeValue={ filterSettlementStatus }
btnGroups={ settlementStatusBtnGroup }
setter={ setFilterSettlementStatus }
></FilterButtonGroups>
<FilterRangeAmount
title='거래금액'
minAmount={ filterMinAmount }
maxAmount={ filterMaxAmount }
setMinAmount={ setFilterMinAmount }
setMaxAmount={ setFilterMaxAmount }
></FilterRangeAmount>
</div>
<div className="apply-row">
<button className="btn-50 btn-blue flex-1">적용</button>
<button
className="btn-50 btn-blue flex-1"
onClick={ () => onClickToSetFilter() }
>적용</button>
</div>
</div>
</motion.div>