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-30 15:54:13 +09:00
parent bfcea1913d ac8b8d8c94
commit 5f420c212b
6 changed files with 163 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/entities/transaction/ui/filter/all-transaction-filter.tsx
View File

@@ -1,22 +1,23 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useState } from 'react'; import { useState } from 'react';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import { IMAGE_ROOT } from '@/shared/constants/common'; import { IMAGE_ROOT } from '@/shared/constants/common';
import { FilterSelect } from '@/shared/ui/filter/select'; import { FilterSelect } from '@/shared/ui/filter/select';
import { FilterSelectInput } from '@/shared/ui/filter/select-input'; import { FilterSelectInput } from '@/shared/ui/filter/select-input';
import { FilterCalendar } from '@/shared/ui/filter/calendar'; import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterRangeAmount } from '@/shared/ui/filter/range-amount'; import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
import { import {
AllTransactionMoidTidOptionsGroup, AllTransactionMoidTidOptionsGroup,
AllTracsactionStatusCode, AllTracsactionStatusCode,
} from '@/entities/transaction/model/contant'; } from '@/entities/transaction/model/contant';
import { import {
AllTransactionFilterProps, AllTransactionFilterProps,
AllTransactionSearchCl, AllTransactionSearchCl,
AllTransactionMoidTid AllTransactionMoidTid
} from '../../model/types'; } from '../../model/types';
import { import {
FilterMotionDuration, FilterMotionDuration,
FilterMotionStyle, FilterMotionStyle,
FilterMotionVariants FilterMotionVariants
@@ -53,6 +54,7 @@ export const AllTransactionFilter = ({
setSearchValue, setSearchValue,
serviceCodeOptions serviceCodeOptions
}: AllTransactionFilterProps) => { }: AllTransactionFilterProps) => {
const { t } = useTranslation();
const [filterMid, setFilterMid] = useState<string>(mid); const [filterMid, setFilterMid] = useState<string>(mid);
const [filterMoidTidType, setFilterMoidTidType] = useState<AllTransactionMoidTid>(AllTransactionMoidTid.MOID); const [filterMoidTidType, setFilterMoidTidType] = useState<AllTransactionMoidTid>(AllTransactionMoidTid.MOID);
@@ -63,7 +65,7 @@ export const AllTransactionFilter = ({
const [filterServiceCode, setFilterServiceCode] = useState<string>(serviceCode); const [filterServiceCode, setFilterServiceCode] = useState<string>(serviceCode);
const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount); const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount); const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
const [filterCardCode, setFilterCardCode] = useState<string | undefined>(cardCode); const [filterCardCode, setFilterCardCode] = useState<string | undefined>(cardCode);
const [filterBankCode, setFilterBankCode] = useState<string | undefined>(bankCode); const [filterBankCode, setFilterBankCode] = useState<string | undefined>(bankCode);
@@ -120,36 +122,36 @@ export const AllTransactionFilter = ({
} }
else if(value === '01'){ else if(value === '01'){
options.push({name: '카드번호', value: AllTransactionSearchCl.CARD_NO}); options.push({name: t('filter.searchOptions.cardNumber'), value: AllTransactionSearchCl.CARD_NO});
options.push({name: '승인번호', value: AllTransactionSearchCl.CARD_APPROVAL_NO}); options.push({name: t('filter.searchOptions.approvalNumber'), value: AllTransactionSearchCl.CARD_APPROVAL_NO});
} }
else if(value === '02'){ else if(value === '02'){
options.push({name: '구매자명', value: AllTransactionSearchCl.BANK_BUYER_NM}); options.push({name: t('filter.searchOptions.buyerName'), value: AllTransactionSearchCl.BANK_BUYER_NM});
} }
else if(value === '03'){ else if(value === '03'){
options.push({name: '가상계좌번호', value: AllTransactionSearchCl.VACCT_NO}); options.push({name: t('filter.searchOptions.virtualAccountNumber'), value: AllTransactionSearchCl.VACCT_NO});
options.push({name: '입금자명', value: AllTransactionSearchCl.VACCT_DEPOSIT_NM}); options.push({name: t('filter.searchOptions.depositorName'), value: AllTransactionSearchCl.VACCT_DEPOSIT_NM});
} }
else if(value === '05'){ else if(value === '05'){
options.push({name: '휴대폰번호', value: AllTransactionSearchCl.TEL_NO}); options.push({name: t('filter.searchOptions.phoneNumber'), value: AllTransactionSearchCl.TEL_NO});
} }
else if(value === '14'){ else if(value === '14'){
options.push({name: '상품권번호', value: AllTransactionSearchCl.SSGMONEY_GIFT_NO}); options.push({name: t('filter.searchOptions.giftCardNumber'), value: AllTransactionSearchCl.SSGMONEY_GIFT_NO});
} }
else if(value === '21'){ else if(value === '21'){
options.push({name: '승인번호', value: AllTransactionSearchCl.SSGBANK_APPROVAL_NO}); options.push({name: t('filter.searchOptions.approvalNumber'), value: AllTransactionSearchCl.SSGBANK_APPROVAL_NO});
} }
else if(value === '24'){ else if(value === '24'){
options.push({name: '고객ID', value: AllTransactionSearchCl.CMSBANK_USER_ID}); options.push({name: t('filter.searchOptions.customerId'), value: AllTransactionSearchCl.CMSBANK_USER_ID});
} }
else if(value === '26'){ else if(value === '26'){
options.push({name: '컬처랜드ID', value: AllTransactionSearchCl.SSGBANK_APPROVAL_NO}); options.push({name: t('filter.searchOptions.culturelandId'), value: AllTransactionSearchCl.SSGBANK_APPROVAL_NO});
} }
else if(value === '31'){ else if(value === '31'){
options.push({name: '카드번호', value: AllTransactionSearchCl.TMONEY_CARD_NO}); options.push({name: t('filter.searchOptions.tmoneyCardNumber'), value: AllTransactionSearchCl.TMONEY_CARD_NO});
} }
setSearchClOptionsGroup(options); setSearchClOptionsGroup(options);
}; };
const onChangeServiceCode = (val: string) => { const onChangeServiceCode = (val: string) => {
@@ -184,29 +186,29 @@ export const AllTransactionFilter = ({
> >
<div className="full-menu-container"> <div className="full-menu-container">
<div className="full-menu-header"> <div className="full-menu-header">
<div className="full-menu-title center">필터</div> <div className="full-menu-title center">{t('filter.filter')}</div>
<div className="full-menu-actions"> <div className="full-menu-actions">
<button <button
id="closeFullMenu" id="closeFullMenu"
className="full-menu-close" className="full-menu-close"
> >
<img <img
src={ IMAGE_ROOT + '/ico_close.svg' } src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기" alt={t('filter.close')}
onClick={ () => onClickToClose() } onClick={ () => onClickToClose() }
/> />
</button> </button>
</div> </div>
</div> </div>
<div className="option-list pt-16"> <div className="option-list pt-16">
<FilterSelectMid <FilterSelectMid
title='가맹점' title={t('filter.merchant')}
selectSetter={ setMid } selectSetter={ setMid }
showType={ 'GID' } showType={ 'GID' }
></FilterSelectMid> ></FilterSelectMid>
<FilterSelectInput <FilterSelectInput
title='주문번호/TID' title={t('filter.orderNumberTid')}
selectValue={ filterMoidTidType } selectValue={ filterMoidTidType }
selectSetter={ setFilterMoidTidType } selectSetter={ setFilterMoidTidType }
selectOptions={ AllTransactionMoidTidOptionsGroup } selectOptions={ AllTransactionMoidTidOptionsGroup }
@@ -214,31 +216,31 @@ export const AllTransactionFilter = ({
inputSetter={ setFilterMoidTidValue } inputSetter={ setFilterMoidTidValue }
></FilterSelectInput> ></FilterSelectInput>
<FilterCalendar <FilterCalendar
title='조회기간' title={t('filter.period')}
startDate={ filterFromDate } startDate={ filterFromDate }
endDate={ filterToDate } endDate={ filterToDate }
setStartDate={ setFilterFromDate } setStartDate={ setFilterFromDate }
setEndDate={ setFilterToDate } setEndDate={ setFilterToDate }
></FilterCalendar> ></FilterCalendar>
<FilterButtonGroups <FilterButtonGroups
title='거래상태' title={t('filter.transactionStatus')}
activeValue={ filterStatusCode } activeValue={ filterStatusCode }
btnGroups={ statusCodeBtns } btnGroups={ statusCodeBtns }
setter={ setFilterStatusCode } setter={ setFilterStatusCode }
></FilterButtonGroups> ></FilterButtonGroups>
{ serviceCodeOptions && { serviceCodeOptions &&
<FilterSelect <FilterSelect
title='결제수단' title={t('filter.paymentMethod')}
selectValue={ filterServiceCode } selectValue={ filterServiceCode }
selectSetter={ onChangeServiceCode } selectSetter={ onChangeServiceCode }
selectOptions={ serviceCodeOptions } selectOptions={ serviceCodeOptions }
></FilterSelect> ></FilterSelect>
} }
<FilterRangeAmount <FilterRangeAmount
title='거래금액' title={t('filter.transactionAmount')}
minAmount={ filterMinAmount } minAmount={ filterMinAmount }
maxAmount={ filterMaxAmount } maxAmount={ filterMaxAmount }
setMinAmount={ setFilterMinAmount } setMinAmount={ setFilterMinAmount }
@@ -253,20 +255,20 @@ export const AllTransactionFilter = ({
></FilterSelect> ></FilterSelect>
*/} */}
<FilterSelectInput <FilterSelectInput
title='상세조회' title={t('filter.detailSearch')}
selectValue={ filterSearchCl } selectValue={ filterSearchCl }
selectSetter={ setFilterSearchCl } selectSetter={ setFilterSearchCl }
selectOptions={ searchClOptionsGroup } selectOptions={ searchClOptionsGroup }
inputValue={ filterSearchValue } inputValue={ filterSearchValue }
inputSetter={ setFilterSearchValue } inputSetter={ setFilterSearchValue }
></FilterSelectInput> ></FilterSelectInput>
</div> </div>
<div className="apply-row"> <div className="apply-row">
<button <button
className="btn-50 btn-blue flex-1" className="btn-50 btn-blue flex-1"
onClick={ () => onClickToSetFilter() } onClick={ () => onClickToSetFilter() }
>적용</button> >{t('filter.apply')}</button>
</div> </div>
</div> </div>
</motion.div> </motion.div>

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

@@ -1,26 +1,27 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useState } from 'react'; import { useState } from 'react';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import { IMAGE_ROOT } from '@/shared/constants/common'; import { IMAGE_ROOT } from '@/shared/constants/common';
import { FilterSelect } from '@/shared/ui/filter/select'; import { FilterSelect } from '@/shared/ui/filter/select';
import { FilterSelectInput } from '@/shared/ui/filter/select-input'; import { FilterSelectInput } from '@/shared/ui/filter/select-input';
import { FilterCalendar } from '@/shared/ui/filter/calendar'; import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterRangeAmount } from '@/shared/ui/filter/range-amount'; import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
import { import {
BillingSearchTypeOptionsGroup, BillingSearchTypeOptionsGroup,
BillingRequestStatusBtnGroup, BillingRequestStatusBtnGroup,
BillingProcessResultBtnGroup, BillingProcessResultBtnGroup,
BillingPaymentMethodBtnGroup BillingPaymentMethodBtnGroup
} from '@/entities/transaction/model/contant'; } from '@/entities/transaction/model/contant';
import { import {
BillingFilterProps, BillingFilterProps,
BillingPaymentMethod, BillingPaymentMethod,
BillingProcessResult, BillingProcessResult,
BillingRequestStatus, BillingRequestStatus,
BillingSearchType BillingSearchType
} from '../../model/types'; } from '../../model/types';
import { import {
FilterMotionDuration, FilterMotionDuration,
FilterMotionStyle, FilterMotionStyle,
FilterMotionVariants FilterMotionVariants
@@ -52,6 +53,7 @@ export const BillingFilter = ({
setMinAmount, setMinAmount,
setMaxAmount setMaxAmount
}: BillingFilterProps) => { }: BillingFilterProps) => {
const { t } = useTranslation();
const [filterMid, setFilterMid] = useState<string>(mid); const [filterMid, setFilterMid] = useState<string>(mid);
const [filterSearchType, setFilterSearchType] = useState<BillingSearchType>(searchType); const [filterSearchType, setFilterSearchType] = useState<BillingSearchType>(searchType);
@@ -63,7 +65,7 @@ export const BillingFilter = ({
const [filterPaymentMethod, setFilterPaymentMethod] = useState<BillingPaymentMethod>(paymentMethod); const [filterPaymentMethod, setFilterPaymentMethod] = useState<BillingPaymentMethod>(paymentMethod);
const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount); const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount); const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
const midOptions = useStore.getState().UserStore.selectOptionsMids; const midOptions = useStore.getState().UserStore.selectOptionsMids;
const onClickToClose = () => { const onClickToClose = () => {
@@ -104,29 +106,29 @@ export const BillingFilter = ({
> >
<div className="full-menu-container"> <div className="full-menu-container">
<div className="full-menu-header"> <div className="full-menu-header">
<div className="full-menu-title center">필터</div> <div className="full-menu-title center">{t('filter.filter')}</div>
<div className="full-menu-actions"> <div className="full-menu-actions">
<button <button
id="closeFullMenu" id="closeFullMenu"
className="full-menu-close" className="full-menu-close"
> >
<img <img
src={ IMAGE_ROOT + '/ico_close.svg' } src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기" alt={t('filter.close')}
onClick={ () => onClickToClose() } onClick={ () => onClickToClose() }
/> />
</button> </button>
</div> </div>
</div> </div>
<div className="option-list pt-16"> <div className="option-list pt-16">
<FilterSelectMid <FilterSelectMid
title='가맹점' title={t('filter.merchant')}
selectSetter={ setMid } selectSetter={ setMid }
showType={ 'GID' } showType={ 'GID' }
></FilterSelectMid> ></FilterSelectMid>
<FilterSelectInput <FilterSelectInput
title='주문번호/TID' title={t('filter.orderNumberTid')}
selectValue={ filterSearchType } selectValue={ filterSearchType }
selectSetter={ setFilterSearchType } selectSetter={ setFilterSearchType }
selectOptions={ BillingSearchTypeOptionsGroup } selectOptions={ BillingSearchTypeOptionsGroup }
@@ -134,46 +136,46 @@ export const BillingFilter = ({
inputSetter={ setFilterSearchKeyword } inputSetter={ setFilterSearchKeyword }
></FilterSelectInput> ></FilterSelectInput>
<FilterCalendar <FilterCalendar
title='조회기간' title={t('filter.period')}
startDate={ filterStartDate } startDate={ filterStartDate }
endDate={ filterEndDate } endDate={ filterEndDate }
setStartDate={ setFilterStartDate } setStartDate={ setFilterStartDate }
setEndDate={ setFilterEndDate } setEndDate={ setFilterEndDate }
></FilterCalendar> ></FilterCalendar>
<FilterButtonGroups <FilterButtonGroups
title='요청상태' title={t('filter.requestStatus')}
activeValue={ filterRequestStatus } activeValue={ filterRequestStatus }
btnGroups={ BillingRequestStatusBtnGroup } btnGroups={ BillingRequestStatusBtnGroup }
setter={ setFilterRequestStatus } setter={ setFilterRequestStatus }
></FilterButtonGroups> ></FilterButtonGroups>
<FilterButtonGroups <FilterButtonGroups
title='처리결과' title={t('filter.processingResult')}
activeValue={ filterProcessResult } activeValue={ filterProcessResult }
btnGroups={ BillingProcessResultBtnGroup } btnGroups={ BillingProcessResultBtnGroup }
setter={ setFilterProcessResult } setter={ setFilterProcessResult }
></FilterButtonGroups> ></FilterButtonGroups>
<FilterButtonGroups <FilterButtonGroups
title='결제수단' title={t('filter.paymentMethod')}
activeValue={ filterPaymentMethod } activeValue={ filterPaymentMethod }
btnGroups={ BillingPaymentMethodBtnGroup } btnGroups={ BillingPaymentMethodBtnGroup }
setter={ setFilterPaymentMethod } setter={ setFilterPaymentMethod }
></FilterButtonGroups> ></FilterButtonGroups>
<FilterRangeAmount <FilterRangeAmount
title='거래금액' title={t('filter.transactionAmount')}
minAmount={ filterMinAmount } minAmount={ filterMinAmount }
maxAmount={ filterMaxAmount } maxAmount={ filterMaxAmount }
setMinAmount={ setFilterMinAmount } setMinAmount={ setFilterMinAmount }
setMaxAmount={ setFilterMaxAmount } setMaxAmount={ setFilterMaxAmount }
></FilterRangeAmount> ></FilterRangeAmount>
</div> </div>
<div className="apply-row"> <div className="apply-row">
<button <button
className="btn-50 btn-blue flex-1" className="btn-50 btn-blue flex-1"
onClick={ () => onClickToSetFilter() } onClick={ () => onClickToSetFilter() }
>적용</button> >{t('filter.apply')}</button>
</div> </div>
</div> </div>
</motion.div> </motion.div>

38
src/entities/transaction/ui/filter/cash-receipt-filter.tsx
View File

@@ -1,6 +1,7 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useState } from 'react'; import { useState } from 'react';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import { IMAGE_ROOT } from '@/shared/constants/common'; import { IMAGE_ROOT } from '@/shared/constants/common';
import { FilterSelect } from '@/shared/ui/filter/select'; import { FilterSelect } from '@/shared/ui/filter/select';
import { FilterSelectInput } from '@/shared/ui/filter/select-input'; import { FilterSelectInput } from '@/shared/ui/filter/select-input';
@@ -11,14 +12,14 @@ import {
CashReceiptTransactionTypeBtnGroup, CashReceiptTransactionTypeBtnGroup,
CashReceiptProcessResultBtnGroup CashReceiptProcessResultBtnGroup
} from '@/entities/transaction/model/contant'; } from '@/entities/transaction/model/contant';
import { import {
CashReceiptFilterProps, CashReceiptFilterProps,
CashReceiptPurposeType, CashReceiptPurposeType,
CashReceiptTransactionType, CashReceiptTransactionType,
CashReceiptProcessResult, CashReceiptProcessResult,
CashReceiptSearchNumberType CashReceiptSearchNumberType
} from '../../model/types'; } from '../../model/types';
import { import {
FilterMotionDuration, FilterMotionDuration,
FilterMotionStyle, FilterMotionStyle,
FilterMotionVariants FilterMotionVariants
@@ -44,6 +45,7 @@ export const CashReceiptFilter = ({
setProcessResult, setProcessResult,
setSearchNumberType setSearchNumberType
}: CashReceiptFilterProps) => { }: CashReceiptFilterProps) => {
const { t } = useTranslation();
const [filterMid, setFilterMid] = useState<string>(mid); const [filterMid, setFilterMid] = useState<string>(mid);
const [filterStartDate, setFilterStartDate] = useState<string>(startDate); const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
@@ -56,8 +58,8 @@ export const CashReceiptFilter = ({
const [filterIssueType, setFilterIssueType] = useState<string>(''); const [filterIssueType, setFilterIssueType] = useState<string>('');
const [filterIssueNumber, setFilterIssueNumber] = useState<string>(''); const [filterIssueNumber, setFilterIssueNumber] = useState<string>('');
const issueTypeOptionsGroup = [ const issueTypeOptionsGroup = [
{name: '승인번호', value: 'issue'}, {name: t('filter.searchOptions.approvalNumber'), value: 'issue'},
{name: '발행번호', value: 'issue2'}, {name: t('filter.searchOptions.issueNumber'), value: 'issue2'},
]; ];
const midOptions = useStore.getState().UserStore.selectOptionsMids; const midOptions = useStore.getState().UserStore.selectOptionsMids;
@@ -96,55 +98,55 @@ export const CashReceiptFilter = ({
> >
<div className="full-menu-container"> <div className="full-menu-container">
<div className="full-menu-header"> <div className="full-menu-header">
<div className="full-menu-title center">필터</div> <div className="full-menu-title center">{t('filter.filter')}</div>
<div className="full-menu-actions"> <div className="full-menu-actions">
<button <button
id="closeFullMenu" id="closeFullMenu"
className="full-menu-close" className="full-menu-close"
> >
<img <img
src={ IMAGE_ROOT + '/ico_close.svg' } src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기" alt={t('filter.close')}
onClick={ () => onClickToClose() } onClick={ () => onClickToClose() }
/> />
</button> </button>
</div> </div>
</div> </div>
<div className="option-list pt-16"> <div className="option-list pt-16">
<FilterSelectMid <FilterSelectMid
title='가맹점' title={t('filter.merchant')}
selectSetter={ setMid } selectSetter={ setMid }
showType={ 'GID' } showType={ 'GID' }
></FilterSelectMid> ></FilterSelectMid>
<FilterCalendar <FilterCalendar
title='발행일자' title={t('filter.issuanceDate')}
startDate={ filterStartDate } startDate={ filterStartDate }
endDate={ filterEndDate } endDate={ filterEndDate }
setStartDate={ setFilterStartDate } setStartDate={ setFilterStartDate }
setEndDate={ setFilterEndDate } setEndDate={ setFilterEndDate }
></FilterCalendar> ></FilterCalendar>
<FilterButtonGroups <FilterButtonGroups
title='용도' title={t('filter.purpose')}
activeValue={ filterPurposeType } activeValue={ filterPurposeType }
btnGroups={ CashReceiptPurposeTypeBtnGroup } btnGroups={ CashReceiptPurposeTypeBtnGroup }
setter={ setFilterPurposeType } setter={ setFilterPurposeType }
></FilterButtonGroups> ></FilterButtonGroups>
<FilterButtonGroups <FilterButtonGroups
title='거래구분' title={t('filter.transactionCategory')}
activeValue={ filterTransactionType } activeValue={ filterTransactionType }
btnGroups={ CashReceiptTransactionTypeBtnGroup } btnGroups={ CashReceiptTransactionTypeBtnGroup }
setter={ setFilterTransactionType } setter={ setFilterTransactionType }
></FilterButtonGroups> ></FilterButtonGroups>
<FilterButtonGroups <FilterButtonGroups
title='진행상태' title={t('filter.progressStatus')}
activeValue={ filterProcessResult } activeValue={ filterProcessResult }
btnGroups={ CashReceiptProcessResultBtnGroup } btnGroups={ CashReceiptProcessResultBtnGroup }
setter={ setFilterProcessResult } setter={ setFilterProcessResult }
></FilterButtonGroups> ></FilterButtonGroups>
<FilterSelectInput <FilterSelectInput
title='승인번호/발행번호' title={t('filter.approvalIssuanceNumber')}
selectValue={ filterSearchNumberType } selectValue={ filterSearchNumberType }
selectSetter={ setFilterSearchNumberType } selectSetter={ setFilterSearchNumberType }
selectOptions={ issueTypeOptionsGroup } selectOptions={ issueTypeOptionsGroup }
@@ -153,10 +155,10 @@ export const CashReceiptFilter = ({
></FilterSelectInput> ></FilterSelectInput>
</div> </div>
<div className="apply-row"> <div className="apply-row">
<button <button
className="btn-50 btn-blue flex-1" className="btn-50 btn-blue flex-1"
onClick={ () => onClickToSetFilter() } onClick={ () => onClickToSetFilter() }
>적용</button> >{t('filter.apply')}</button>
</div> </div>
</div> </div>
</motion.div> </motion.div>

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

@@ -1,24 +1,25 @@
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useState } from 'react'; import { useState } from 'react';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
import { IMAGE_ROOT } from '@/shared/constants/common'; import { IMAGE_ROOT } from '@/shared/constants/common';
import { FilterSelect } from '@/shared/ui/filter/select'; import { FilterSelect } from '@/shared/ui/filter/select';
import { FilterSelectInput } from '@/shared/ui/filter/select-input'; import { FilterSelectInput } from '@/shared/ui/filter/select-input';
import { FilterCalendar } from '@/shared/ui/filter/calendar'; import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterRangeAmount } from '@/shared/ui/filter/range-amount'; import { FilterRangeAmount } from '@/shared/ui/filter/range-amount';
import { import {
EscrowDeliveryStatusBtnGroup, EscrowDeliveryStatusBtnGroup,
EscrowSettlementStatusBtnGroup, EscrowSettlementStatusBtnGroup,
EscrowSearchTypeOptionsGroup EscrowSearchTypeOptionsGroup
} from '@/entities/transaction/model/contant'; } from '@/entities/transaction/model/contant';
import { import {
EscrowFilterProps, EscrowFilterProps,
EscrowSearchType, EscrowSearchType,
EscrowDeliveryStatus, EscrowDeliveryStatus,
EscrowSettlementStatus EscrowSettlementStatus
} from '../../model/types'; } from '../../model/types';
import { import {
FilterMotionDuration, FilterMotionDuration,
FilterMotionStyle, FilterMotionStyle,
FilterMotionVariants FilterMotionVariants
@@ -48,6 +49,7 @@ export const EscrowFilter = ({
setMinAmount, setMinAmount,
setMaxAmount setMaxAmount
}: EscrowFilterProps) => { }: EscrowFilterProps) => {
const { t } = useTranslation();
const [filterMid, setFilterMid] = useState<string>(mid); const [filterMid, setFilterMid] = useState<string>(mid);
const [filterSearchType, setFilterSearchType] = useState<EscrowSearchType>(searchType); const [filterSearchType, setFilterSearchType] = useState<EscrowSearchType>(searchType);
@@ -58,7 +60,7 @@ export const EscrowFilter = ({
const [filterSettlementStatus, setFilterSettlementStatus] = useState<EscrowSettlementStatus>(settlementStatus); const [filterSettlementStatus, setFilterSettlementStatus] = useState<EscrowSettlementStatus>(settlementStatus);
const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount); const [filterMinAmount, setFilterMinAmount] = useState<number | undefined>(minAmount);
const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount); const [filterMaxAmount, setFilterMaxAmount] = useState<number | undefined>(maxAmount);
const midOptions = useStore.getState().UserStore.selectOptionsMids; const midOptions = useStore.getState().UserStore.selectOptionsMids;
const onClickToClose = () => { const onClickToClose = () => {
@@ -98,29 +100,29 @@ export const EscrowFilter = ({
> >
<div className="full-menu-container"> <div className="full-menu-container">
<div className="full-menu-header"> <div className="full-menu-header">
<div className="full-menu-title center">필터</div> <div className="full-menu-title center">{t('filter.filter')}</div>
<div className="full-menu-actions"> <div className="full-menu-actions">
<button <button
id="closeFullMenu" id="closeFullMenu"
className="full-menu-close" className="full-menu-close"
> >
<img <img
src={ IMAGE_ROOT + '/ico_close.svg' } src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기" alt={t('filter.close')}
onClick={ () => onClickToClose() } onClick={ () => onClickToClose() }
/> />
</button> </button>
</div> </div>
</div> </div>
<div className="option-list pt-16"> <div className="option-list pt-16">
<FilterSelectMid <FilterSelectMid
title='가맹점' title={t('filter.merchant')}
selectSetter={ setMid } selectSetter={ setMid }
showType={ 'GID' } showType={ 'GID' }
></FilterSelectMid> ></FilterSelectMid>
<FilterSelectInput <FilterSelectInput
title='주문번호/TID' title={t('filter.orderNumberTid')}
selectValue={ filterSearchType } selectValue={ filterSearchType }
selectSetter={ setSearchType } selectSetter={ setSearchType }
selectOptions={ EscrowSearchTypeOptionsGroup } selectOptions={ EscrowSearchTypeOptionsGroup }
@@ -128,40 +130,40 @@ export const EscrowFilter = ({
inputSetter={ setSearchKeyword } inputSetter={ setSearchKeyword }
></FilterSelectInput> ></FilterSelectInput>
<FilterCalendar <FilterCalendar
title='조회기간' title={t('filter.period')}
startDate={ filterStartDate } startDate={ filterStartDate }
endDate={ filterEndDate } endDate={ filterEndDate }
setStartDate={ setFilterStartDate } setStartDate={ setFilterStartDate }
setEndDate={ setFilterEndDate } setEndDate={ setFilterEndDate }
></FilterCalendar> ></FilterCalendar>
<FilterButtonGroups <FilterButtonGroups
title='배송상태' title={t('filter.deliveryStatus')}
activeValue={ filterDeliveryStatus } activeValue={ filterDeliveryStatus }
btnGroups={ EscrowDeliveryStatusBtnGroup } btnGroups={ EscrowDeliveryStatusBtnGroup }
setter={ setFilterDeliveryStatus } setter={ setFilterDeliveryStatus }
></FilterButtonGroups> ></FilterButtonGroups>
<FilterButtonGroups <FilterButtonGroups
title='결제수단' title={t('filter.paymentMethod')}
activeValue={ filterSettlementStatus } activeValue={ filterSettlementStatus }
btnGroups={ EscrowSettlementStatusBtnGroup } btnGroups={ EscrowSettlementStatusBtnGroup }
setter={ setFilterSettlementStatus } setter={ setFilterSettlementStatus }
></FilterButtonGroups> ></FilterButtonGroups>
<FilterRangeAmount <FilterRangeAmount
title='거래금액' title={t('filter.transactionAmount')}
minAmount={ filterMinAmount } minAmount={ filterMinAmount }
maxAmount={ filterMaxAmount } maxAmount={ filterMaxAmount }
setMinAmount={ setFilterMinAmount } setMinAmount={ setFilterMinAmount }
setMaxAmount={ setFilterMaxAmount } setMaxAmount={ setFilterMaxAmount }
></FilterRangeAmount> ></FilterRangeAmount>
</div> </div>
<div className="apply-row"> <div className="apply-row">
<button <button
className="btn-50 btn-blue flex-1" className="btn-50 btn-blue flex-1"
onClick={ () => onClickToSetFilter() } onClick={ () => onClickToSetFilter() }
>적용</button> >{t('filter.apply')}</button>
</div> </div>
</div> </div>
</motion.div> </motion.div>

30
src/locales/en.json
View File

@@ -49,7 +49,37 @@
}, },
"filter": { "filter": {
"title": "Search Filters", "title": "Search Filters",
"filter": "Filter",
"close": "Close",
"apply": "Apply",
"merchant": "Merchant",
"orderNumberTid": "OID/TID",
"period": "Period", "period": "Period",
"issuanceDate": "Issuance Date",
"transactionStatus": "Transaction Status",
"paymentMethod": "Payment Method",
"transactionAmount": "Transaction Amount",
"detailSearch": "Detail Search",
"purpose": "Purpose",
"transactionCategory": "Transaction Category",
"progressStatus": "Progress Status",
"approvalIssuanceNumber": "Approval/Issuance Number",
"requestStatus": "Request Status",
"processingResult": "Processing Result",
"deliveryStatus": "Delivery Status",
"searchOptions": {
"cardNumber": "Card Number",
"approvalNumber": "Approval Number",
"buyerName": "Buyer Name",
"virtualAccountNumber": "Virtual Account Number",
"depositorName": "Depositor Name",
"phoneNumber": "Phone Number",
"giftCardNumber": "Gift Card Number",
"customerId": "Customer ID",
"culturelandId": "Cultureland ID",
"tmoneyCardNumber": "T-money Card Number",
"issueNumber": "Issue Number"
},
"periods": { "periods": {
"1month": "1 Month", "1month": "1 Month",
"3months": "3 Months", "3months": "3 Months",

30
src/locales/ko.json
View File

@@ -49,7 +49,37 @@
}, },
"filter": { "filter": {
"title": "조회조건 설정", "title": "조회조건 설정",
"filter": "필터",
"close": "닫기",
"apply": "적용",
"merchant": "가맹점",
"orderNumberTid": "주문번호/TID",
"period": "조회기간", "period": "조회기간",
"issuanceDate": "발행일자",
"transactionStatus": "거래상태",
"paymentMethod": "결제수단",
"transactionAmount": "거래금액",
"detailSearch": "상세조회",
"purpose": "용도",
"transactionCategory": "거래구분",
"progressStatus": "진행상태",
"approvalIssuanceNumber": "승인번호/발행번호",
"requestStatus": "요청상태",
"processingResult": "처리결과",
"deliveryStatus": "배송상태",
"searchOptions": {
"cardNumber": "카드번호",
"approvalNumber": "승인번호",
"buyerName": "구매자명",
"virtualAccountNumber": "가상계좌번호",
"depositorName": "입금자명",
"phoneNumber": "휴대폰번호",
"giftCardNumber": "상품권번호",
"customerId": "고객ID",
"culturelandId": "컬처랜드ID",
"tmoneyCardNumber": "티머니 카드번호",
"issueNumber": "발행번호"
},
"periods": { "periods": {
"1month": "1개월", "1month": "1개월",
"3months": "3개월", "3months": "3개월",