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-31 08:34:26 +09:00
parent 11014a9c69 2ed93ec742
commit 5b28674121
79 changed files with 1997 additions and 1053 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
src/entities/additional-service/lib/payment-status-utils.ts
View File

@@ -1,55 +1,57 @@
export const getPaymentStatusText = (status?: string): string => { import { TFunction } from 'i18next';
export const getPaymentStatusText = (t: TFunction) => (status?: string): string => {
if (!status) return ''; if (!status) return '';
const statusMap: Record<string, string> = { const statusMap: Record<string, string> = {
// 숫자 문자열 매핑 // Numeric string mapping
'0': '미완료/활성화', '0': t('additionalService.linkPay.incompleteActive'),
'1': '입금요청', '1': t('additionalService.linkPay.depositRequest'),
'2': '결제완료', '2': t('additionalService.linkPay.paymentComplete'),
'3': '결제실패', '3': t('additionalService.linkPay.paymentFail'),
'4': '결제중단', '4': t('additionalService.linkPay.paymentStopped'),
// 문자열 키 매핑 (하위 호환성) // String key mapping (backward compatibility)
'ALL': '전체', 'ALL': t('transaction.constants.all'),
'ACTIVE': '미완료/활성화', 'ACTIVE': t('additionalService.linkPay.incompleteActive'),
'DEPOSIT_REQUEST': '입금요청', 'DEPOSIT_REQUEST': t('additionalService.linkPay.depositRequest'),
'PAYMENT_COMPLETE': '결제완료', 'PAYMENT_COMPLETE': t('additionalService.linkPay.paymentComplete'),
'PAYMENT_FAIL': '결제실패', 'PAYMENT_FAIL': t('additionalService.linkPay.paymentFail'),
'INACTIVE': '결제중단/비활성화' 'INACTIVE': t('additionalService.linkPay.paymentStoppedInactive')
}; };
return statusMap[status] || status; return statusMap[status] || status;
}; };
export const getProcessStatusText = (status?: string): string => { export const getProcessStatusText = (t: TFunction) => (status?: string): string => {
if (!status) return ''; if (!status) return '';
const processStatusMap: Record<string, string> = { const processStatusMap: Record<string, string> = {
'SEND_REQUEST': '발송요청', 'SEND_REQUEST': t('additionalService.linkPay.sendRequest'),
'SEND_CANCEL': '발송취소', 'SEND_CANCEL': t('additionalService.linkPay.sendCancel'),
'PENDING': '대기중' 'PENDING': t('additionalService.linkPay.pending')
}; };
return processStatusMap[status] || status; return processStatusMap[status] || status;
}; };
export const getSendMethodText = (method?: string): string => { export const getSendMethodText = (t: TFunction) => (method?: string): string => {
if (!method) return ''; if (!method) return '';
const sendMethodMap: Record<string, string> = { const sendMethodMap: Record<string, string> = {
'SMS': 'SMS', 'SMS': 'SMS',
'EMAIL': '이메일', 'EMAIL': t('additionalService.linkPay.email'),
'KAKAO': '알림톡' 'KAKAO': t('additionalService.linkPay.alimtalk')
}; };
return sendMethodMap[method] || method; return sendMethodMap[method] || method;
}; };
export const getResultStatusText = (status?: string): string => { export const getResultStatusText = (t: TFunction) => (status?: string): string => {
if (!status) return ''; if (!status) return '';
const resultStatusMap: Record<string, string> = { const resultStatusMap: Record<string, string> = {
'SUCCESS': '성공', 'SUCCESS': t('additionalService.common.success'),
'FAIL': '실패' 'FAIL': t('additionalService.common.fail')
}; };
return resultStatusMap[status] || status; return resultStatusMap[status] || status;

27
src/entities/additional-service/model/account-holder-auth/constant.ts
View File

@@ -1,31 +1,32 @@
import { TFunction } from 'i18next';
import { AccountHolderAuthStatus } from "./types"; import { AccountHolderAuthStatus } from "./types";
export const authStatusBtnGroup = [ export const getAuthStatusBtnGroup = (t: TFunction) => [
{ name: '전체', value: AccountHolderAuthStatus.ALL }, { name: t('transaction.constants.all'), value: AccountHolderAuthStatus.ALL },
{ name: '요청', value: AccountHolderAuthStatus.REQUEST}, { name: t('additionalService.common.request'), value: AccountHolderAuthStatus.REQUEST},
{ name: '성공', value: AccountHolderAuthStatus.SUCCESS}, { name: t('additionalService.common.success'), value: AccountHolderAuthStatus.SUCCESS},
{ name: '실패', value: AccountHolderAuthStatus.FAIL} { name: t('additionalService.common.fail'), value: AccountHolderAuthStatus.FAIL}
] ]
export const getAuthStatusText = (status?: string): string => { export const getAuthStatusText = (t: TFunction) => (status?: string): string => {
if (!status) return ''; if (!status) return '';
const AuthStatusMap: Record<string, string> = { const AuthStatusMap: Record<string, string> = {
'REQUEST' : '요청', 'REQUEST' : t('additionalService.common.request'),
'SUCCESS' : '성공', 'SUCCESS' : t('additionalService.common.success'),
'FAIL' : '실패' 'FAIL' : t('additionalService.common.fail')
} }
return AuthStatusMap[status] || status; return AuthStatusMap[status] || status;
} }
export const getAuthResultText = (status?: string): string => { export const getAuthResultText = (t: TFunction) => (status?: string): string => {
if (!status) return ''; if (!status) return '';
const AuthResultMap: Record<string, string> = { const AuthResultMap: Record<string, string> = {
'MATCHED' : '예금주명 일치', 'MATCHED' : t('additionalService.accountHolderAuth.accountHolderNameMatch'),
'NOT_MATCHED' : '예금주명 불일치', 'NOT_MATCHED' : t('additionalService.accountHolderAuth.accountHolderNameMismatch'),
'FAILED' : '인증실패 (계좌 오류 등)' 'FAILED' : t('additionalService.accountHolderAuth.authFailedAccountError')
} }
return AuthResultMap[status] || status; return AuthResultMap[status] || status;

21
src/entities/additional-service/model/account-holder-search/constant.ts
View File

@@ -1,25 +1,26 @@
import { TFunction } from 'i18next';
import { ProcessResult } from "../types"; import { ProcessResult } from "../types";
import { AccountHolderResultStatus, AccountHolderSearchCl } from "./types"; import { AccountHolderResultStatus, AccountHolderSearchCl } from "./types";
export const resultStatusBtnGroup = [ export const getResultStatusBtnGroup = (t: TFunction) => [
{ name: '전체', value: AccountHolderResultStatus.ALL }, { name: t('transaction.constants.all'), value: AccountHolderResultStatus.ALL },
{ name: '성공', value: AccountHolderResultStatus.SUCCESS }, { name: t('additionalService.common.success'), value: AccountHolderResultStatus.SUCCESS },
{ name: '실패', value: AccountHolderResultStatus.FAIL }, { name: t('additionalService.common.fail'), value: AccountHolderResultStatus.FAIL },
] ]
export const SearchTypeOption = [ export const getSearchTypeOption = (t: TFunction) => [
{ name: '예금주', value: AccountHolderSearchCl.ACCOUNT_NAME }, { name: t('additionalService.accountHolderSearch.accountHolder'), value: AccountHolderSearchCl.ACCOUNT_NAME },
{ name: '계좌번호', value: AccountHolderSearchCl.ACCOUNT_NO }, { name: t('additionalService.accountHolderSearch.accountNumber'), value: AccountHolderSearchCl.ACCOUNT_NO },
]; ];
export const getAccountHolderStatusText = (status?: string): string => { export const getAccountHolderStatusText = (t: TFunction) => (status?: string): string => {
if (!status) return ''; if (!status) return '';
const resultStatusMap: Record<string, string> = { const resultStatusMap: Record<string, string> = {
'SUCCESS': '성공', 'SUCCESS': t('additionalService.common.success'),
'FAIL': '실패' 'FAIL': t('additionalService.common.fail')
}; };
return resultStatusMap[status] || status; return resultStatusMap[status] || status;
} }

95
src/entities/additional-service/model/alimtalk/constant.ts
View File

@@ -1,90 +1,91 @@
import { TFunction } from 'i18next';
import { AlimtalkAlimCl, AlimtalkSearchCl, AlimTalkSendCl, AlimtalkSendType, ServiceCode } from "./types"; import { AlimtalkAlimCl, AlimtalkSearchCl, AlimTalkSendCl, AlimtalkSendType, ServiceCode } from "./types";
export const AlimtalkSearchClOptionGroup = [ export const getAlimtalkSearchClOptionGroup = (t: TFunction) => [
{ name: '주문자', value: AlimtalkSearchCl.BUYER_NAME }, { name: t('additionalService.alimtalk.buyer'), value: AlimtalkSearchCl.BUYER_NAME },
{ name: 'TID', value: AlimtalkSearchCl.TID }, { name: t('transaction.constants.tid'), value: AlimtalkSearchCl.TID },
]; ];
export const AlimtalkServiceCodeOptionGroup = [ export const getAlimtalkServiceCodeOptionGroup = (t: TFunction) => [
{ name: '전체', value: '' }, { name: t('transaction.constants.all'), value: '' },
{ name: '카드', value: ServiceCode.CARD }, { name: t('transaction.constants.card'), value: ServiceCode.CARD },
{ name: '계좌이체', value: ServiceCode.BANK }, { name: t('transaction.constants.accountTransfer'), value: ServiceCode.BANK },
{ name: '가상계좌', value: ServiceCode.VBANK }, { name: t('transaction.constants.virtualAccount'), value: ServiceCode.VBANK },
{ name: '휴대폰', value: ServiceCode.PHONE } { name: t('transaction.constants.mobilePhone'), value: ServiceCode.PHONE }
] ]
// 알림구분 - 카드/계좌이체/휴대폰용 // Notification type - For Card/Account Transfer/Mobile
export const AlimtalkAlimClBtnGroupForGeneral = [ export const getAlimtalkAlimClBtnGroupForGeneral = (t: TFunction) => [
{ name: '전체', value: '' }, { name: t('transaction.constants.all'), value: '' },
{ name: '승인', value: AlimtalkAlimCl.APPROVAL }, { name: t('transaction.constants.approval'), value: AlimtalkAlimCl.APPROVAL },
{ name: '취소', value: AlimtalkAlimCl.CANCEL } { name: t('transaction.constants.cancel'), value: AlimtalkAlimCl.CANCEL }
] ]
// 알림구분 - 가상계좌용 // Notification type - For Virtual Account
export const AlimtalkAlimClBtnGroupForVBank = [ export const getAlimtalkAlimClBtnGroupForVBank = (t: TFunction) => [
{ name: '전체', value: '' }, { name: t('transaction.constants.all'), value: '' },
{ name: '입금요청', value: AlimtalkAlimCl.DEPOSIT_REQUEST }, { name: t('additionalService.alimtalk.depositRequest'), value: AlimtalkAlimCl.DEPOSIT_REQUEST },
{ name: '입금완료', value: AlimtalkAlimCl.DEPOSIT_COMPLETE }, { name: t('additionalService.alimtalk.depositComplete'), value: AlimtalkAlimCl.DEPOSIT_COMPLETE },
{ name: '환불', value: AlimtalkAlimCl.REFUND } { name: t('transaction.constants.refund'), value: AlimtalkAlimCl.REFUND }
] ]
export const AlimtalkSendTypeBtnGroup = [ export const getAlimtalkSendTypeBtnGroup = (t: TFunction) => [
{ name: '전체', value: AlimtalkSendType.ALL }, { name: t('transaction.constants.all'), value: AlimtalkSendType.ALL },
{ name: '카카오톡', value: AlimtalkSendType.KAKAOTALK }, { name: t('additionalService.alimtalk.kakaotalk'), value: AlimtalkSendType.KAKAOTALK },
{ name: 'FB SMS', value: AlimtalkSendType.FB_SMS } { name: t('additionalService.alimtalk.fbSms'), value: AlimtalkSendType.FB_SMS }
] ]
export const AlimtalkSendClBtnGroup = [ export const getAlimtalkSendClBtnGroup = (t: TFunction) => [
{ name: '전체', value: AlimTalkSendCl.ALL }, { name: t('transaction.constants.all'), value: AlimTalkSendCl.ALL },
{ name: '요청', value: AlimTalkSendCl.REQUEST }, { name: t('additionalService.common.request'), value: AlimTalkSendCl.REQUEST },
{ name: '성공', value: AlimTalkSendCl.SUCCESS }, { name: t('additionalService.common.success'), value: AlimTalkSendCl.SUCCESS },
{ name: '실패', value: AlimTalkSendCl.FAIL } { name: t('additionalService.common.fail'), value: AlimTalkSendCl.FAIL }
] ]
export const getAlimtalkAlimClText = (status?: string): string => { export const getAlimtalkAlimClText = (t: TFunction) => (status?: string): string => {
if (!status) return ''; if (!status) return '';
const alimClMap: Record<string, string> = { const alimClMap: Record<string, string> = {
'APPROVAL' : '승인', 'APPROVAL' : t('transaction.constants.approval'),
'CANCEL' : '취소', 'CANCEL' : t('transaction.constants.cancel'),
'DEPOSIT_REQUEST' : '입금요청', 'DEPOSIT_REQUEST' : t('additionalService.alimtalk.depositRequest'),
'DEPOSIT_COMPLETE' : '입금완료', 'DEPOSIT_COMPLETE' : t('additionalService.alimtalk.depositComplete'),
'REFUND' : '환불' 'REFUND' : t('transaction.constants.refund')
} }
return alimClMap[status] || status; return alimClMap[status] || status;
} }
export const getAlimtalkSendTypeText = (status?: string): string => { export const getAlimtalkSendTypeText = (t: TFunction) => (status?: string): string => {
if (!status) return ''; if (!status) return '';
const sendTypeMap: Record<string, string> = { const sendTypeMap: Record<string, string> = {
"KAKAOTALK": '카카오톡', "KAKAOTALK": t('additionalService.alimtalk.kakaotalk'),
'FB SMS': '페이스북', 'FB SMS': t('additionalService.alimtalk.fbSms'),
}; };
return sendTypeMap[status] || status; return sendTypeMap[status] || status;
} }
export const getAlimtalkSendClTypeText = (status?: string): string => { export const getAlimtalkSendClTypeText = (t: TFunction) => (status?: string): string => {
if (!status) return ''; if (!status) return '';
const sendClMap: Record<string, string> = { const sendClMap: Record<string, string> = {
'REQUEST': '요청', 'REQUEST': t('additionalService.common.request'),
'SUCCESS': '성공', 'SUCCESS': t('additionalService.common.success'),
'FAIL': '실패' 'FAIL': t('additionalService.common.fail')
}; };
return sendClMap[status] || status; return sendClMap[status] || status;
} }
export const getAlimtalkServiceCodeText = (status?: string): string => { export const getAlimtalkServiceCodeText = (t: TFunction) => (status?: string): string => {
if (!status) return ''; if (!status) return '';
const serviceCodeMap: Record<string, string> = { const serviceCodeMap: Record<string, string> = {
'CARD': '신용카드', 'CARD': t('transaction.constants.creditCard'),
'BANK': '계좌이체', 'BANK': t('transaction.constants.accountTransfer'),
'VBANK': '가상계좌', 'VBANK': t('transaction.constants.virtualAccount'),
'PHONE': '휴대폰' 'PHONE': t('transaction.constants.mobilePhone')
} }
return serviceCodeMap[status] || status; return serviceCodeMap[status] || status;

33
src/entities/additional-service/model/ars/constant.ts
View File

@@ -1,30 +1,33 @@
import { TFunction } from 'i18next';
import { ArsPaymentMethod, OrderStatus, PaymentStatus } from './types'; import { ArsPaymentMethod, OrderStatus, PaymentStatus } from './types';
export const ArsPaymentStatusBtnGroup = [ export const getArsPaymentStatusBtnGroup = (t: TFunction) => [
{name: '전체', value: PaymentStatus.ALL }, {name: t('transaction.constants.all'), value: PaymentStatus.ALL },
{name: '결제완료', value: PaymentStatus.COMPLETE }, {name: t('additionalService.ars.paymentComplete'), value: PaymentStatus.COMPLETE },
{name: '미결제', value: PaymentStatus.UNPAID } {name: t('additionalService.ars.unpaid'), value: PaymentStatus.UNPAID }
]; ];
export const ArsOrderStatusBtnGroup = [
{name: '전체', value: OrderStatus.ALL }, export const getArsOrderStatusBtnGroup = (t: TFunction) => [
{name: '결제대기', value: OrderStatus.PENDING }, {name: t('transaction.constants.all'), value: OrderStatus.ALL },
{name: '결제성공', value: OrderStatus.SUCCESS }, {name: t('additionalService.ars.pendingPayment'), value: OrderStatus.PENDING },
{name: '기간만료', value: OrderStatus.EXPIRED }, {name: t('additionalService.ars.paymentSuccess'), value: OrderStatus.SUCCESS },
{name: '취소완료', value: OrderStatus.CANCELED }, {name: t('additionalService.ars.expired'), value: OrderStatus.EXPIRED },
{name: t('additionalService.ars.canceled'), value: OrderStatus.CANCELED },
]; ];
export const ArsPaymentMethodBtnGroup = [
export const getArsPaymentMethodBtnGroup = (t: TFunction) => [
{name: 'SMS', value: ArsPaymentMethod.SMS }, {name: 'SMS', value: ArsPaymentMethod.SMS },
{name: 'ARS', value: ArsPaymentMethod.ARS }, {name: 'ARS', value: ArsPaymentMethod.ARS },
]; ];
export const getArsPaymentStatusName = (status?: string): string => { export const getArsPaymentStatusName = (t: TFunction) => (status?: string): string => {
if (!status) return ''; if (!status) return '';
const found = ArsPaymentStatusBtnGroup.find(item => item.value === status); const found = getArsPaymentStatusBtnGroup(t).find(item => item.value === status);
return found ? found.name : status; return found ? found.name : status;
} }
export const getArsOrderStatusName = (status?: string): string => { export const getArsOrderStatusName = (t: TFunction) => (status?: string): string => {
if (!status) return ''; if (!status) return '';
const found = ArsOrderStatusBtnGroup.find(item => item.value === status); const found = getArsOrderStatusBtnGroup(t).find(item => item.value === status);
return found ? found.name : status; return found ? found.name : status;
} }

29
src/entities/additional-service/model/face-auth/constant.ts
View File

@@ -1,35 +1,36 @@
import { TFunction } from 'i18next';
import { FaceAuthResult, FaceAuthTransType } from "./types"; import { FaceAuthResult, FaceAuthTransType } from "./types";
export const AuthResultBtnGroup = [ export const getAuthResultBtnGroup = (t: TFunction) => [
{ name: '전체', value: FaceAuthResult.ALL }, { name: t('transaction.constants.all'), value: FaceAuthResult.ALL },
{ name: '성공', value: FaceAuthResult.SUCCESS }, { name: t('additionalService.common.success'), value: FaceAuthResult.SUCCESS },
{ name: '실패', value: FaceAuthResult.FAIL }, { name: t('additionalService.common.fail'), value: FaceAuthResult.FAIL },
]; ];
export const TransactionTypeBtnGroup = [ export const getTransactionTypeBtnGroup = (t: TFunction) => [
{ name: '전체', value: FaceAuthTransType.ALL }, { name: t('transaction.constants.all'), value: FaceAuthTransType.ALL },
{ name: '인증', value: FaceAuthTransType.AUTH }, { name: t('additionalService.faceAuth.authentication'), value: FaceAuthTransType.AUTH },
{ name: '등록', value: FaceAuthTransType.REGISTER }, { name: t('additionalService.faceAuth.registration'), value: FaceAuthTransType.REGISTER },
]; ];
export const getAuthResultStatusText = (status?: string): string => { export const getAuthResultStatusText = (t: TFunction) => (status?: string): string => {
if (!status) return ''; if (!status) return '';
const authResultMap: Record<string, string> = { const authResultMap: Record<string, string> = {
'SUCCESS': '성공', 'SUCCESS': t('additionalService.common.success'),
'FAIL': '실패' 'FAIL': t('additionalService.common.fail')
} }
return authResultMap[status] || status; return authResultMap[status] || status;
} }
export const getTransTypeText = (transType?: string): string => { export const getTransTypeText = (t: TFunction) => (transType?: string): string => {
if (!transType) return ''; if (!transType) return '';
const transTypeMap: Record<string, string> = { const transTypeMap: Record<string, string> = {
'REGISTER': '등록', 'REGISTER': t('additionalService.faceAuth.registration'),
'AUTH': '인증' 'AUTH': t('additionalService.faceAuth.authentication')
} }
return transTypeMap[transType] || transType; return transTypeMap[transType] || transType;

45
src/entities/additional-service/model/fund-account/constant.ts
View File

@@ -1,3 +1,4 @@
import { TFunction } from 'i18next';
import { import {
FundAccountReceiveAccountNameNo, FundAccountReceiveAccountNameNo,
FundAccountResultStatus, FundAccountResultStatus,
@@ -6,41 +7,41 @@ import {
FundAccountStatus FundAccountStatus
} from './types'; } from './types';
export const FundAccountStatusBtnGroup = [ export const getFundAccountStatusBtnGroup = (t: TFunction) => [
{ name: '전체', value: FundAccountStatus.ALL }, { name: t('transaction.constants.all'), value: FundAccountStatus.ALL },
{ name: '등록완료', value: FundAccountStatus.REGIST_COMPLETE }, { name: t('additionalService.fundAccount.registrationComplete'), value: FundAccountStatus.REGIST_COMPLETE },
{ name: '이체요청', value: FundAccountStatus.TRANSFER_REQUEST }, { name: t('additionalService.fundAccount.transferRequest'), value: FundAccountStatus.TRANSFER_REQUEST },
{ name: '요청성공', value: FundAccountStatus.REQUEST_SUCCESS }, { name: t('additionalService.fundAccount.requestSuccess'), value: FundAccountStatus.REQUEST_SUCCESS },
{ name: '요청실패', value: FundAccountStatus.REQUEST_FAIL } { name: t('additionalService.fundAccount.requestFail'), value: FundAccountStatus.REQUEST_FAIL }
]; ];
export const FundAccountResultStatusBtnGroup = [ export const getFundAccountResultStatusBtnGroup = (t: TFunction) => [
{ name: '전체', value: FundAccountResultStatus.ALL }, { name: t('transaction.constants.all'), value: FundAccountResultStatus.ALL },
{ name: '요청', value: FundAccountResultStatus.REQUEST }, { name: t('additionalService.common.request'), value: FundAccountResultStatus.REQUEST },
{ name: '성공', value: FundAccountResultStatus.SUCCESS }, { name: t('additionalService.common.success'), value: FundAccountResultStatus.SUCCESS },
{ name: '실패', value: FundAccountResultStatus.FAIL }, { name: t('additionalService.common.fail'), value: FundAccountResultStatus.FAIL },
] ]
export const getFundAccountStatusName = (status?: string): string => { export const getFundAccountStatusName = (t: TFunction) => (status?: string): string => {
if (!status) return ''; if (!status) return '';
const found = FundAccountStatusBtnGroup.find(item => item.value === status); const found = getFundAccountStatusBtnGroup(t).find(item => item.value === status);
return found ? found.name : status; return found ? found.name : status;
}; };
export const getFundAccountResultStatusName = (status?: string): string => { export const getFundAccountResultStatusName = (t: TFunction) => (status?: string): string => {
if (!status) return ''; if (!status) return '';
const found = FundAccountResultStatusBtnGroup.find(item => item.value === status); const found = getFundAccountResultStatusBtnGroup(t).find(item => item.value === status);
return found ? found.name : status; return found ? found.name : status;
} }
export const FundAccountResultSearchDateTypeBtnGroup = [ export const getFundAccountResultSearchDateTypeBtnGroup = (t: TFunction) => [
{ name: '요청일자', value: FundAccountSearchDateType.REQUEST_DATE }, { name: t('additionalService.fundAccount.requestDate'), value: FundAccountSearchDateType.REQUEST_DATE },
{ name: '이체일자', value: FundAccountSearchDateType.APPLICATION_DATE } { name: t('additionalService.fundAccount.transferDate'), value: FundAccountSearchDateType.APPLICATION_DATE }
]; ];
export const FundAccountSearchClOptionsGroup = [ export const getFundAccountSearchClOptionsGroup = (t: TFunction) => [
{ name: '수취인', value: FundAccountSearchCl.ACCOUNT_NAME }, { name: t('additionalService.fundAccount.recipient'), value: FundAccountSearchCl.ACCOUNT_NAME },
{ name: '계좌번호', value: FundAccountSearchCl.ACCOUNT_NO }, { name: t('additionalService.fundAccount.accountNumber'), value: FundAccountSearchCl.ACCOUNT_NO },
]; ];

16
src/entities/additional-service/model/key-in/constant.ts
View File

@@ -1,15 +1,15 @@
import { TFunction } from 'i18next';
import { KeyInPaymentTansactionType } from "./types"; import { KeyInPaymentTansactionType } from "./types";
// contant로 옮기기 export const getKeyInPaymentPaymentStatusBtnGroup = (t: TFunction) => [
export const keyInPaymentPaymentStatusBtnGroup = [ { name: t('transaction.constants.all'), value: KeyInPaymentTansactionType.ALL },
{ name: '전체', value: KeyInPaymentTansactionType.ALL }, { name: t('transaction.constants.approval'), value: KeyInPaymentTansactionType.APPROVAL },
{ name: '승인', value: KeyInPaymentTansactionType.APPROVAL }, { name: t('additionalService.keyIn.fullCancel'), value: KeyInPaymentTansactionType.FULL_CANCEL },
{ name: '전취소', value: KeyInPaymentTansactionType.FULL_CANCEL }, { name: t('additionalService.keyIn.partialCancel'), value: KeyInPaymentTansactionType.PARTIAL_CANCEL }
{ name: '후취소', value: KeyInPaymentTansactionType.PARTIAL_CANCEL }
]; ];
export const getKeyInPaymentPaymentStatusName = (status?: string): string => { export const getKeyInPaymentPaymentStatusName = (t: TFunction) => (status?: string): string => {
if (!status) return ''; if (!status) return '';
const found = keyInPaymentPaymentStatusBtnGroup.find(item => item.value === status); const found = getKeyInPaymentPaymentStatusBtnGroup(t).find(item => item.value === status);
return found ? found.name : status; return found ? found.name : status;
} }

9
src/entities/additional-service/model/link-pay/constant.ts
View File

@@ -1,7 +1,8 @@
import { TFunction } from 'i18next';
import { LinkPaymentProcessStatus } from "./types"; import { LinkPaymentProcessStatus } from "./types";
export const ProcessStatusBtnGrouup = [ export const getProcessStatusBtnGroup = (t: TFunction) => [
{ name: '전체', value: LinkPaymentProcessStatus.ALL }, { name: t('transaction.constants.all'), value: LinkPaymentProcessStatus.ALL },
{ name: '발송요청', value: LinkPaymentProcessStatus.SEND_REQUEST }, { name: t('additionalService.linkPay.sendRequest'), value: LinkPaymentProcessStatus.SEND_REQUEST },
{ name: '발송취소', value: LinkPaymentProcessStatus.SEND_CANCEL } { name: t('additionalService.linkPay.sendCancel'), value: LinkPaymentProcessStatus.SEND_CANCEL }
] ]

28
src/entities/additional-service/model/payout/constant.ts
View File

@@ -1,23 +1,25 @@
import { TFunction } from 'i18next';
import { PayoutSearchDateType, PayoutDisbursementStatus } from './types'; import { PayoutSearchDateType, PayoutDisbursementStatus } from './types';
export const PayoutSearchClBtnGroup = [ export const getPayoutSearchClBtnGroup = (t: TFunction) => [
{name: '요청일자', value: PayoutSearchDateType.REQUEST_DATE }, {name: t('additionalService.payout.requestDate'), value: PayoutSearchDateType.REQUEST_DATE },
{name: '지급일자', value: PayoutSearchDateType.SETTLEMENT_DATE } {name: t('additionalService.payout.disbursementDate'), value: PayoutSearchDateType.SETTLEMENT_DATE }
];
export const PayoutDisbursementStatusBtnGroup = [
{name: '전체', value: PayoutDisbursementStatus.ALL},
{name: '요청', value: PayoutDisbursementStatus.REQUEST},
{name: '성공', value: PayoutDisbursementStatus.SUCCESS},
{name: '실패', value: PayoutDisbursementStatus.FAIL},
]; ];
export const getPayoutStatusText = (status?: string): string => { export const getPayoutDisbursementStatusBtnGroup = (t: TFunction) => [
{name: t('transaction.constants.all'), value: PayoutDisbursementStatus.ALL},
{name: t('additionalService.common.request'), value: PayoutDisbursementStatus.REQUEST},
{name: t('additionalService.common.success'), value: PayoutDisbursementStatus.SUCCESS},
{name: t('additionalService.common.fail'), value: PayoutDisbursementStatus.FAIL},
];
export const getPayoutStatusText = (t: TFunction) => (status?: string): string => {
if (!status) return ''; if (!status) return '';
const statusMap: Record<string, string> = { const statusMap: Record<string, string> = {
"REQUEST" : "요청", "REQUEST" : t('additionalService.common.request'),
"SUCCESS" : "성공", "SUCCESS" : t('additionalService.common.success'),
"FAIL" : "실패" "FAIL" : t('additionalService.common.fail')
} }
return statusMap[status] || status; return statusMap[status] || status;

11
src/entities/additional-service/model/sms-payment/constant.ts
View File

@@ -1,13 +1,14 @@
import { TFunction } from 'i18next';
import { SmsCl } from './types'; import { SmsCl } from './types';
export const SmsClBtnGroup = [ export const getSmsClBtnGroup = (t: TFunction) => [
{ name: '', value: SmsCl.ALL }, { name: '', value: SmsCl.ALL },
{ name: '가상계좌 요청', value: SmsCl.VACCOUNT_REQ }, { name: t('additionalService.sms.virtualAccountRequest'), value: SmsCl.VACCOUNT_REQ },
{ name: '가상계좌 요청 + 입금', value: SmsCl.VACCOUNT_REQ_DEPOSIT } { name: t('additionalService.sms.virtualAccountRequestDeposit'), value: SmsCl.VACCOUNT_REQ_DEPOSIT }
]; ];
export const getSmsClName = (smsCl?: string): string => { export const getSmsClName = (t: TFunction) => (smsCl?: string): string => {
if (!smsCl) return ''; if (!smsCl) return '';
const found = SmsClBtnGroup.find(item => item.value === smsCl); const found = getSmsClBtnGroup(t).find(item => item.value === smsCl);
return found ? found.name : smsCl; return found ? found.name : smsCl;
}; };

13
src/entities/additional-service/ui/ars/resend-sms-bottom-sheet.tsx
View File

@@ -1,6 +1,8 @@
import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from "@/entities/common/model/constant"; import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from "@/entities/common/model/constant";
import { IMAGE_ROOT } from '@/shared/constants/common'; import { IMAGE_ROOT } from '@/shared/constants/common';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
export interface ArsResendSmsBottomSheetProps { export interface ArsResendSmsBottomSheetProps {
bottomSheetOn: boolean; bottomSheetOn: boolean;
setBottomSheetOn: (bottomSheetOn: boolean) => void; setBottomSheetOn: (bottomSheetOn: boolean) => void;
@@ -14,6 +16,7 @@ export const ArsResendSmsBottomSheet = ({
phoneNumber, phoneNumber,
callResendSms callResendSms
}: ArsResendSmsBottomSheetProps) => { }: ArsResendSmsBottomSheetProps) => {
const { t } = useTranslation();
const onClickToClose = () => { const onClickToClose = () => {
setBottomSheetOn(false); setBottomSheetOn(false);
@@ -40,14 +43,14 @@ export const ArsResendSmsBottomSheet = ({
> >
<div className="bottomsheet-header"> <div className="bottomsheet-header">
<div className="bottomsheet-title"> <div className="bottomsheet-title">
<h2>SMS 재전송</h2> <h2>{t('additionalService.common.resend')} SMS</h2>
<button <button
className="close-btn" className="close-btn"
type="button" type="button"
> >
<img <img
src={ IMAGE_ROOT + '/ico_close.svg' } src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기" alt={t('common.close')}
onClick={ () => onClickToClose() } onClick={ () => onClickToClose() }
/> />
</button> </button>
@@ -55,7 +58,7 @@ export const ArsResendSmsBottomSheet = ({
</div> </div>
<div className="bottomsheet-content"> <div className="bottomsheet-content">
<div className="bottom-section"> <div className="bottom-section">
<p>[01095800212] 번호로 SMS를 재발송 하시겠습니까?</p> <p>[{phoneNumber}] {t('transaction.sms.resendConfirmMessage')}</p>
</div> </div>
</div> </div>
<div className="bottomsheet-footer"> <div className="bottomsheet-footer">
@@ -63,7 +66,7 @@ export const ArsResendSmsBottomSheet = ({
className="btn-50 btn-blue flex-1" className="btn-50 btn-blue flex-1"
type="button" type="button"
onClick={ () => onCliickToResendSms() } onClick={ () => onCliickToResendSms() }
>신청</button> >{t('transaction.apply')}</button>
</div> </div>
</motion.div> </motion.div>
</> </>

41
src/entities/additional-service/ui/filter/ars-filter.tsx
View File

@@ -1,19 +1,20 @@
import { useEffect, useState } from 'react'; import { useEffect, 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 { 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 {
FilterMotionDuration, FilterMotionDuration,
FilterMotionStyle, FilterMotionStyle,
FilterMotionVariants FilterMotionVariants
} from '@/entities/common/model/constant'; } from '@/entities/common/model/constant';
import moment from 'moment'; import moment from 'moment';
import { FilterInput } from '@/shared/ui/filter/input'; import { FilterInput } from '@/shared/ui/filter/input';
import { OrderStatus, PaymentStatus } from '../../model/ars/types'; import { OrderStatus, PaymentStatus } from '../../model/ars/types';
import { ArsOrderStatusBtnGroup, ArsPaymentStatusBtnGroup } from '../../model/ars/constant'; import { getArsOrderStatusBtnGroup, getArsPaymentStatusBtnGroup } from '../../model/ars/constant';
import { useStore } from '@/shared/model/store'; import { useStore } from '@/shared/model/store';
import { FilterSelectMid } from '@/shared/ui/filter/select-mid'; import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
@@ -67,7 +68,9 @@ export const ArsFilter = ({
const [filterOrderStatus, setFilterOrderStatus] = useState<OrderStatus>(orderStatus); const [filterOrderStatus, setFilterOrderStatus] = useState<OrderStatus>(orderStatus);
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 { t } = useTranslation();
const onClickToClose = () => { const onClickToClose = () => {
setFilterOn(false); setFilterOn(false);
}; };
@@ -100,15 +103,15 @@ export const ArsFilter = ({
> >
<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>
@@ -116,36 +119,36 @@ export const ArsFilter = ({
</div> </div>
<div className="option-list pt-16"> <div className="option-list pt-16">
<FilterSelectMid <FilterSelectMid
title='가맹점' title={t('filter.merchant')}
selectSetter={ setFilterMid } selectSetter={ setFilterMid }
showType={ 'GID'} showType={ 'GID'}
></FilterSelectMid> ></FilterSelectMid>
<FilterInput <FilterInput
title='주문번호' title={t('transaction.constants.orderNumber')}
inputValue={ filterMoid } inputValue={ filterMoid }
inputSetter={ setFilterMoid } inputSetter={ setFilterMoid }
></FilterInput> ></FilterInput>
<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('transaction.filter.paymentStatus')}
activeValue={ filterPaymentStatus } activeValue={ filterPaymentStatus }
btnGroups={ ArsPaymentStatusBtnGroup } btnGroups={ getArsPaymentStatusBtnGroup(t) }
setter={ setFilterPaymentStatus } setter={ setFilterPaymentStatus }
></FilterButtonGroups> ></FilterButtonGroups>
<FilterButtonGroups <FilterButtonGroups
title='주문상태' title={t('transaction.filter.orderStatus')}
activeValue={ filterOrderStatus } activeValue={ filterOrderStatus }
btnGroups={ ArsOrderStatusBtnGroup } btnGroups={ getArsOrderStatusBtnGroup(t) }
setter={ setFilterOrderStatus } setter={ setFilterOrderStatus }
></FilterButtonGroups> ></FilterButtonGroups>
<FilterRangeAmount <FilterRangeAmount
title='거래금액' title={t('filter.transactionAmount')}
minAmount={ filterMinAmount } minAmount={ filterMinAmount }
maxAmount={ filterMaxAmount } maxAmount={ filterMaxAmount }
setMinAmount={ setFilterMinAmount } setMinAmount={ setFilterMinAmount }
@@ -153,10 +156,10 @@ export const ArsFilter = ({
></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>

17
src/entities/common/ui/sort-type-box.tsx
View File

@@ -1,17 +1,24 @@
import { SortTypeKeys, SortTypeBoxProps } from '../model/types'; import { SortTypeKeys, SortTypeBoxProps } from '../model/types';
import { useTranslation } from 'react-i18next';
export const SortTypeBox = ({ export const SortTypeBox = ({
sortType, sortType,
onClickToSort, onClickToSort,
sortOptions = [ sortOptions
{ key: SortTypeKeys.LATEST, label: '최신순' },
{ key: SortTypeKeys.HIGH_AMOUNT, label: '고액순' }
]
}: SortTypeBoxProps) => { }: SortTypeBoxProps) => {
const { t } = useTranslation();
const defaultSortOptions = [
{ key: SortTypeKeys.LATEST, label: t('filter.sortOrders.latest') },
{ key: SortTypeKeys.HIGH_AMOUNT, label: t('filter.sortOrders.highest') }
];
const options = sortOptions || defaultSortOptions;
return ( return (
<> <>
<div className="sort-options"> <div className="sort-options">
{ sortOptions.map((option: Record<string, any>, index: number) => ( { options.map((option: Record<string, any>, index: number) => (
<> <>
{ (index > 0) && { (index > 0) &&
<span <span

32
src/entities/home/ui/auth-reguster.tsx
View File

@@ -3,12 +3,14 @@ import { AuthRegisterProps } from '../model/types';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { useAppBridge } from '@/hooks/useAppBridge'; import { useAppBridge } from '@/hooks/useAppBridge';
import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant'; import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
import { useTranslation } from 'react-i18next';
export const AuthRegister = ({ export const AuthRegister = ({
setAuthRegisterOn, setAuthRegisterOn,
authRegisterOn, authRegisterOn,
}: AuthRegisterProps) => { }: AuthRegisterProps) => {
const { registerBiometric, closeBiometricRegistrationPopup } = useAppBridge(); const { registerBiometric, closeBiometricRegistrationPopup } = useAppBridge();
const { t } = useTranslation();
const onClickToClose = () => { const onClickToClose = () => {
closeBiometricRegistrationPopup(); closeBiometricRegistrationPopup();
@@ -33,14 +35,14 @@ export const AuthRegister = ({
> >
<div className="bottomsheet-header"> <div className="bottomsheet-header">
<div className="bottomsheet-title"> <div className="bottomsheet-title">
<h2>간편 인증 등록</h2> <h2>{t('home.biometricRegistration.title')}</h2>
<button <button
className="close-btn" className="close-btn"
type="button" type="button"
> >
<img <img
src={ IMAGE_ROOT + '/ico_close.svg' } src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기" alt={t('common.close')}
onClick={ () => onClickToClose() } onClick={ () => onClickToClose() }
/> />
</button> </button>
@@ -49,22 +51,26 @@ export const AuthRegister = ({
<div className="bottomsheet-content"> <div className="bottomsheet-content">
<div className="text-section"> <div className="text-section">
<div> <div>
간편 인증 등록 한번으로,<br/> {t('home.biometricRegistration.description').split('\n').map((line, index) => (
비밀번호 없이 편리하게 로그인하세요. <span key={index}>
{line}
{index === 0 && <br />}
</span>
))}
</div> </div>
</div> </div>
</div> </div>
<div className="bottomsheet-footer"> <div className="bottomsheet-footer">
<button <button
className="btn-50 btn-darkgray flex-1" className="btn-50 btn-darkgray flex-1"
type="button" type="button"
onClick={ () => onClickToClose() } onClick={ () => onClickToClose() }
>다음에</button> >{t('home.biometricRegistration.later')}</button>
<button <button
className="btn-50 btn-blue flex-2" className="btn-50 btn-blue flex-2"
type="button" type="button"
onClick={ () => onClickToRegister() } onClick={ () => onClickToRegister() }
>지금 등록하기</button> >{t('home.biometricRegistration.registerNow')}</button>
</div> </div>
</motion.div> </motion.div>
</> </>

8
src/entities/home/ui/home-bottom-banner.tsx
View File

@@ -11,6 +11,7 @@ import { useEffect, useState } from 'react';
import { Swiper, SwiperSlide } from 'swiper/react'; import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css'; import 'swiper/css';
import { Autoplay, Pagination } from 'swiper/modules'; import { Autoplay, Pagination } from 'swiper/modules';
import { useTranslation } from 'react-i18next';
export const HomeBottomBanner = ({ export const HomeBottomBanner = ({
setBottomBannerOn, setBottomBannerOn,
@@ -18,7 +19,8 @@ export const HomeBottomBanner = ({
bannerList bannerList
}: HomeBottomBannerProps) => { }: HomeBottomBannerProps) => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const { t } = useTranslation();
const [isFirstOpen, setIsFirstOpen] = useState<boolean>(false); const [isFirstOpen, setIsFirstOpen] = useState<boolean>(false);
const [currentSlide, setCurrentSlide] = useState<number>(1); const [currentSlide, setCurrentSlide] = useState<number>(1);
@@ -109,8 +111,8 @@ export const HomeBottomBanner = ({
</div> </div>
</div> </div>
<div className="bottom-btn"> <div className="bottom-btn">
<span onClick={ () => onClickToCloseDay() }>오늘 하루 보지 않기</span> <span onClick={ () => onClickToCloseDay() }>{t('home.banner.doNotShowToday')}</span>
<span onClick={ () => onClickToClose() }>닫기</span> <span onClick={ () => onClickToClose() }>{t('home.banner.close')}</span>
</div> </div>
</motion.div> </motion.div>
</> </>

6
src/entities/home/ui/home-notice-item.tsx
View File

@@ -34,9 +34,9 @@ export const HomeNoticeItem = ({
<div className="notice-meta">{ t(`support.notice.categories.${informCl}`) }<span>{ moment(regDt).format('YY년 MM월 DD일') }</span></div> <div className="notice-meta">{ t(`support.notice.categories.${informCl}`) }<span>{ moment(regDt).format('YY년 MM월 DD일') }</span></div>
</div> </div>
<div className="notice-arrow"> <div className="notice-arrow">
<img <img
src={ IMAGE_ROOT + '/Forward.svg' } src={ IMAGE_ROOT + '/Forward.svg' }
alt="공지사항 바로가기" alt={t('home.notice.goTo')}
/> />
</div> </div>
</div> </div>

58
src/entities/payment/ui/info-wrap.tsx
View File

@@ -48,7 +48,7 @@ export const InfoWrap = () => {
const [cardCommissionBottomSheetOn, setCardCommissionBottomSheetOn] = useState<boolean>(false); const [cardCommissionBottomSheetOn, setCardCommissionBottomSheetOn] = useState<boolean>(false);
const [creditCardListBottomSheetOn, setCreditCardListBottomSheetOn] = useState<boolean>(false); const [creditCardListBottomSheetOn, setCreditCardListBottomSheetOn] = useState<boolean>(false);
const [cardCompany, setCardCompany] = useState<string>('비씨'); const [cardCompany, setCardCompany] = useState<string>(t('payment.paymentMethods.bcCard'));
const [cardCompanyOptions, setCardCompanyOptions] = useState<Array<string>>(); const [cardCompanyOptions, setCardCompanyOptions] = useState<Array<string>>();
const [installmentDetails, setInstallmentDetails] = useState<Array<InstallmentDetails>>([]); const [installmentDetails, setInstallmentDetails] = useState<Array<InstallmentDetails>>([]);
@@ -76,37 +76,37 @@ export const InfoWrap = () => {
const { mutateAsync: paymentInstallmentDetail } = usePaymentInstallmentDetailMutation(); const { mutateAsync: paymentInstallmentDetail } = usePaymentInstallmentDetailMutation();
const list1 = [ const list1 = [
{payName: '신용카드', payImage: 'pay_01.svg', infoLink: '', payType: 2}, {payName: t('payment.paymentMethods.creditCard'), payImage: 'pay_01.svg', infoLink: '', payType: 2},
{payName: '카카오페이', payImage: 'pay_02.svg', infoLink: '', payType: 3}, {payName: t('payment.paymentMethods.kakaoPay'), payImage: 'pay_02.svg', infoLink: '', payType: 3},
{payName: '네이버페이', payImage: 'pay_03.svg', infoLink: '', payType: 3}, {payName: t('payment.paymentMethods.naverPay'), payImage: 'pay_03.svg', infoLink: '', payType: 3},
{payName: '삼성페이', payImage: 'pay_04.svg', infoLink: '', payType: 2}, {payName: t('payment.paymentMethods.samsungPay'), payImage: 'pay_04.svg', infoLink: '', payType: 2},
{payName: '계좌이체', payImage: 'pay_05.svg', infoLink: '', payType: 1}, {payName: t('payment.paymentMethods.accountTransfer'), payImage: 'pay_05.svg', infoLink: '', payType: 1},
{payName: '휴대폰결제', payImage: 'pay_06.svg', infoLink: '', payType: 1}, {payName: t('payment.paymentMethods.mobilePaymentFull'), payImage: 'pay_06.svg', infoLink: '', payType: 1},
{payName: '문화상품권', payImage: 'pay_07.svg', infoLink: '', payType: 1}, {payName: t('payment.paymentMethods.cultureLandGiftCard'), payImage: 'pay_07.svg', infoLink: '', payType: 1},
{payName: 'SSG머니', payImage: 'pay_08.svg', infoLink: '', payType: 1}, {payName: t('payment.paymentMethods.ssgMoney'), payImage: 'pay_08.svg', infoLink: '', payType: 1},
{payName: 'TV페이', payImage: 'pay_09.svg', infoLink: '', payType: 1}, {payName: t('payment.paymentMethods.tvPay'), payImage: 'pay_09.svg', infoLink: '', payType: 1},
{payName: '삼성페이(카드)', payImage: 'pay_10.svg', infoLink: '', payType: 2}, {payName: t('payment.paymentMethods.samsungPayCard'), payImage: 'pay_10.svg', infoLink: '', payType: 2},
{payName: '애플페이', payImage: 'pay_11.svg', infoLink: '', payType: 2}, {payName: t('payment.paymentMethods.applePay'), payImage: 'pay_11.svg', infoLink: '', payType: 2},
{payName: '토스페이', payImage: 'pay_12.svg', infoLink: '', payType: 3}, {payName: t('payment.paymentMethods.tossPay'), payImage: 'pay_12.svg', infoLink: '', payType: 3},
{payName: 'PAYCO', payImage: 'pay_13.svg', infoLink: '', payType: 2}, {payName: t('payment.paymentMethods.payco'), payImage: 'pay_13.svg', infoLink: '', payType: 2},
{payName: '리브페이', payImage: 'pay_14.svg', infoLink: '', payType: 2}, {payName: t('payment.paymentMethods.livePay'), payImage: 'pay_14.svg', infoLink: '', payType: 2},
{payName: '대만결제', payImage: 'pay_15.svg', infoLink: '', payType: 1}, {payName: t('payment.paymentMethods.taiwanPayment'), payImage: 'pay_15.svg', infoLink: '', payType: 1},
{payName: '티머니페이', payImage: 'pay_16.svg', infoLink: '', payType: 1}, {payName: t('payment.paymentMethods.tmoneyPay'), payImage: 'pay_16.svg', infoLink: '', payType: 1},
{payName: 'L.PAY', payImage: 'pay_17.svg', infoLink: '', payType: 2}, {payName: t('payment.paymentMethods.lPay'), payImage: 'pay_17.svg', infoLink: '', payType: 2},
{payName: 'PAYU', payImage: 'pay_18.svg', infoLink: '', payType: 2}, {payName: t('payment.paymentMethods.payU'), payImage: 'pay_18.svg', infoLink: '', payType: 2},
{payName: 'TW라인페이', payImage: 'pay_19.svg', infoLink: '', payType: 2}, {payName: t('payment.paymentMethods.twLinePay'), payImage: 'pay_19.svg', infoLink: '', payType: 2},
{payName: 'SSG페이', payImage: 'pay_21.svg', infoLink: '', payType: 3}, {payName: t('payment.paymentMethods.ssgPay'), payImage: 'pay_21.svg', infoLink: '', payType: 3},
{payName: '케이뱅크페이', payImage: 'pay_22.svg', infoLink: '', payType: 2}, {payName: t('payment.paymentMethods.kBankPay'), payImage: 'pay_22.svg', infoLink: '', payType: 2},
{payName: '가상계좌', payImage: 'pay_23.svg', infoLink: '', payType: 1}, {payName: t('payment.paymentMethods.virtualAccount'), payImage: 'pay_23.svg', infoLink: '', payType: 1},
{payName: 'SSG은행계좌', payImage: 'pay_21.svg', infoLink: '', payType: 1}, {payName: t('payment.paymentMethods.ssgBankAccount'), payImage: 'pay_21.svg', infoLink: '', payType: 1},
{payName: '계좌간편결제', payImage: 'pay_24.svg', infoLink: '', payType: 1}, {payName: t('payment.paymentMethods.accountSimplePayment'), payImage: 'pay_24.svg', infoLink: '', payType: 1},
]; ];
const list2 = [ const list2 = [
{payName: '신용카드', payImage: 'pay_01.svg', infoLink: ''}, {payName: t('payment.paymentMethods.creditCard'), payImage: 'pay_01.svg', infoLink: ''},
{payName: 'SK PAY', payImage: 'pay_20.svg', infoLink: ''}, {payName: t('payment.paymentMethods.skPay'), payImage: 'pay_20.svg', infoLink: ''},
{payName: 'TV페이', payImage: 'pay_09.svg', infoLink: ''}, {payName: t('payment.paymentMethods.tvPay'), payImage: 'pay_09.svg', infoLink: ''},
{payName: '삼성페이(카드)', payImage: 'pay_04.svg', infoLink: ''}, {payName: t('payment.paymentMethods.samsungPayCard'), payImage: 'pay_04.svg', infoLink: ''},
]; ];
const getList = (type: PaymentInfoItemType) => { const getList = (type: PaymentInfoItemType) => {

30
src/entities/settlement/model/constant.ts
View File

@@ -1,18 +1,20 @@
import { TFunction } from 'i18next';
import { SettlementPaymentMethod, SettlementPeriodType } from './types'; import { SettlementPaymentMethod, SettlementPeriodType } from './types';
export const SettlementPeriodTypeBtnGroup = [ export const getSettlementPeriodTypeBtnGroup = (t: TFunction) => [
{name: '정산일자', value: SettlementPeriodType.SETTLEMENT_DATE }, {name: t('settlement.periodType.settlementDate'), value: SettlementPeriodType.SETTLEMENT_DATE },
{name: '거래일자', value: SettlementPeriodType.TRANSACTION_DATE } {name: t('settlement.periodType.transactionDate'), value: SettlementPeriodType.TRANSACTION_DATE }
]; ];
export const SettlementPaymentMethodOptionsGroup = [
{name: '전체', value: SettlementPaymentMethod.ALL}, export const getSettlementPaymentMethodOptionsGroup = (t: TFunction) => [
{name: '신용카드', value: SettlementPaymentMethod.CREDIT_CARD}, {name: t('transaction.constants.all'), value: SettlementPaymentMethod.ALL},
{name: '가상계좌', value: SettlementPaymentMethod.VIRTUAL_ACCOUNT}, {name: t('transaction.constants.creditCard'), value: SettlementPaymentMethod.CREDIT_CARD},
{name: '계좌이체', value: SettlementPaymentMethod.ACCOUNT_TRANSFER}, {name: t('transaction.constants.virtualAccount'), value: SettlementPaymentMethod.VIRTUAL_ACCOUNT},
{name: '계좌간편결제', value: SettlementPaymentMethod.ACCOUNT_EASY_PAY}, {name: t('transaction.constants.accountTransfer'), value: SettlementPaymentMethod.ACCOUNT_TRANSFER},
{name: '휴대폰', value: SettlementPaymentMethod.MOBILE_PAYMENT}, {name: t('transaction.constants.accountSimpleTransfer'), value: SettlementPaymentMethod.ACCOUNT_EASY_PAY},
{name: 'SSG 머니', value: SettlementPaymentMethod.SSG_MONEY}, {name: t('transaction.constants.mobilePayment'), value: SettlementPaymentMethod.MOBILE_PAYMENT},
{name: 'SSG 은행계좌', value: SettlementPaymentMethod.SSG_BANK_ACCOUNT}, {name: t('transaction.constants.ssgMoney'), value: SettlementPaymentMethod.SSG_MONEY},
{name: '문화상품권', value: SettlementPaymentMethod.CULTURE_VOUCHER}, {name: t('transaction.constants.ssgBank'), value: SettlementPaymentMethod.SSG_BANK_ACCOUNT},
{name: '티머니페이', value: SettlementPaymentMethod.TMONEY_PAY}, {name: t('transaction.constants.cultureLand'), value: SettlementPaymentMethod.CULTURE_VOUCHER},
{name: t('transaction.constants.tmoneyPay'), value: SettlementPaymentMethod.TMONEY_PAY},
]; ];

16
src/entities/settlement/ui/calandar-amount-row.tsx
View File

@@ -1,4 +1,5 @@
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
import { SettlementStatus } from '../model/types'; import { SettlementStatus } from '../model/types';
export interface CalendarAmountRowProps { export interface CalendarAmountRowProps {
@@ -10,23 +11,24 @@ export const CalendarAmountRow = ({
amount, amount,
settlementStatus settlementStatus
}: CalendarAmountRowProps) => { }: CalendarAmountRowProps) => {
const { t } = useTranslation();
const makeTitle = () => { const makeTitle = () => {
let rs = []; let rs = [];
if(settlementStatus === SettlementStatus.SCHEDULED){ if(settlementStatus === SettlementStatus.SCHEDULED){
rs.push( rs.push(
<span <span
key='amount-label-scheduled' key='amount-label-scheduled'
className="scheduled" className="scheduled"
>예정</span> >{t('settlement.scheduled')}</span>
); );
} }
else if(settlementStatus === SettlementStatus.COMPLETED){ else if(settlementStatus === SettlementStatus.COMPLETED){
rs.push( rs.push(
<span <span
key='amount-label-complete' key='amount-label-complete'
className="complete" className="complete"
>완료</span> >{t('settlement.completed')}</span>
); );
} }
return rs; return rs;
@@ -35,13 +37,13 @@ export const CalendarAmountRow = ({
return ( return (
<> <>
<div className="amount-row"> <div className="amount-row">
<div className="amount-label">정산 { makeTitle() } 금액</div> <div className="amount-label">{t('settlement.settlementShort')} { makeTitle() } {t('filter.amount')}</div>
<div className="amount-value"> <div className="amount-value">
<NumericFormat <NumericFormat
value={ amount } value={ amount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
suffix='원' suffix={t('common.currencyUnit')}
></NumericFormat> ></NumericFormat>
</div> </div>
</div> </div>

28
src/entities/settlement/ui/calandar-wrap.tsx
View File

@@ -1,11 +1,12 @@
import moment from 'moment'; import moment from 'moment';
import { ChangeEvent, useEffect, useState } from 'react'; import { ChangeEvent, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { IMAGE_ROOT } from '@/shared/constants/common'; import { IMAGE_ROOT } from '@/shared/constants/common';
import { useSettlementsCalendarMutation } from '../api/use-settlements-calendar-mutation'; import { useSettlementsCalendarMutation } from '../api/use-settlements-calendar-mutation';
import { CalendarAmountRow } from './calandar-amount-row'; import { CalendarAmountRow } from './calandar-amount-row';
import { CalendarSettlementItem } from './calendar-settlement-item'; import { CalendarSettlementItem } from './calendar-settlement-item';
import { CalendarGrid } from './calendar-grid'; import { CalendarGrid } from './calendar-grid';
import { import {
SettlementDays, SettlementDays,
SettlementsCalendarParams, SettlementsCalendarParams,
SettlementsCalendarResponse, SettlementsCalendarResponse,
@@ -14,7 +15,8 @@ import {
import { useStore } from '@/shared/model/store'; import { useStore } from '@/shared/model/store';
export const CalendarWrap = () => { export const CalendarWrap = () => {
moment.locale('ko'); const { t, i18n } = useTranslation();
moment.locale(i18n.language);
const midOptions = useStore.getState().UserStore.selectOptionsMids; const midOptions = useStore.getState().UserStore.selectOptionsMids;
const userMid = useStore.getState().UserStore.mid; const userMid = useStore.getState().UserStore.mid;
@@ -135,25 +137,25 @@ export const CalendarWrap = () => {
</div> </div>
<div className="month-group"> <div className="month-group">
<button <button
className={ `month-btn ${(!onActionCalendar)? 'disabled': ''}` } className={ `month-btn ${(!onActionCalendar)? 'disabled': ''}` }
aria-label="이전 달" aria-label={t('settlement.previousMonth')}
onClick={ onClickToMoveMonthPrev } onClick={ onClickToMoveMonthPrev }
> >
<img <img
src={ IMAGE_ROOT + '/ico_date_prev.svg' } src={ IMAGE_ROOT + '/ico_date_prev.svg' }
alt="이전" alt={t('settlement.previous')}
/> />
</button> </button>
<div className="month-title">{ moment(yearMonth).format('YYYY년 MM월') }</div> <div className="month-title">{ moment(yearMonth).format('YYYY년 MM월') }</div>
<button <button
className={ `month-btn ${(lastMonth || !onActionCalendar)? 'disabled': ''}` } className={ `month-btn ${(lastMonth || !onActionCalendar)? 'disabled': ''}` }
aria-label="다음 달" aria-label={t('settlement.nextMonth')}
onClick={ onClickToMoveMonthNext } onClick={ onClickToMoveMonthNext }
> >
<img <img
src={ IMAGE_ROOT + '/ico_date_next.svg' } src={ IMAGE_ROOT + '/ico_date_next.svg' }
alt="다음" alt={t('settlement.next')}
/> />
</button> </button>
</div> </div>
@@ -172,11 +174,11 @@ export const CalendarWrap = () => {
<div className="legend-group"> <div className="legend-group">
<div className="legend-item"> <div className="legend-item">
<div className="legend-dot complete"></div> <div className="legend-dot complete"></div>
<div className="legend-text">정산 완료</div> <div className="legend-text">{t('settlement.settlementCompleted')}</div>
</div> </div>
<div className="legend-item"> <div className="legend-item">
<div className="legend-dot scheduled"></div> <div className="legend-dot scheduled"></div>
<div className="legend-text">입금 예정</div> <div className="legend-text">{t('settlement.depositScheduled')}</div>
</div> </div>
</div> </div>

18
src/entities/settlement/ui/calendar-grid.tsx
View File

@@ -1,4 +1,5 @@
import moment from 'moment'; import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { SettlementDays, SettlementStatus } from '../model/types'; import { SettlementDays, SettlementStatus } from '../model/types';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@@ -13,7 +14,8 @@ export const CalendarGrid = ({
scheduledDateList, scheduledDateList,
completedDateList completedDateList
}: CalendarGridProps) => { }: CalendarGridProps) => {
const { t } = useTranslation();
const makeCalendarDate = () => { const makeCalendarDate = () => {
let startDay = moment(yearMonth).startOf('month').day(); let startDay = moment(yearMonth).startOf('month').day();
let lastDate = moment(yearMonth).endOf('month').date(); let lastDate = moment(yearMonth).endOf('month').date();
@@ -73,13 +75,13 @@ export const CalendarGrid = ({
<> <>
<div className="calendar-grid"> <div className="calendar-grid">
<div className="weekdays"> <div className="weekdays">
<div className="weekday sun">일</div> <div className="weekday sun">{t('common.weekdays.sun')}</div>
<div className="weekday">월</div> <div className="weekday">{t('common.weekdays.mon')}</div>
<div className="weekday">화</div> <div className="weekday">{t('common.weekdays.tue')}</div>
<div className="weekday">수</div> <div className="weekday">{t('common.weekdays.wed')}</div>
<div className="weekday">목</div> <div className="weekday">{t('common.weekdays.thu')}</div>
<div className="weekday">금</div> <div className="weekday">{t('common.weekdays.fri')}</div>
<div className="weekday sat">토</div> <div className="weekday sat">{t('common.weekdays.sat')}</div>
</div> </div>
<div className="days"> <div className="days">
{ makeCalendarDate() } { makeCalendarDate() }

6
src/entities/settlement/ui/calendar-settlement-item.tsx
View File

@@ -1,5 +1,6 @@
import moment from 'moment'; import moment from 'moment';
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
import { PATHS } from '@/shared/constants/paths'; import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { SettlementDays, SettlementStatus } from '../model/types'; import { SettlementDays, SettlementStatus } from '../model/types';
@@ -14,6 +15,7 @@ export const CalendarSettlementItem = ({
settlementStatus settlementStatus
}: CalendarSettlementItemProps) => { }: CalendarSettlementItemProps) => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const { t } = useTranslation();
const getAmount = ( const getAmount = (
scheduledAmount: number | undefined, scheduledAmount: number | undefined,
@@ -65,10 +67,10 @@ export const CalendarSettlementItem = ({
</div> </div>
<div className="settlement-amount"> <div className="settlement-amount">
<NumericFormat <NumericFormat
value={ getAmount(value?.scheduledAmount, value?.completedAmount) } value={ getAmount(value?.scheduledAmount, value?.completedAmount) }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
suffix='원' suffix={t('common.currencyUnit')}
></NumericFormat> ></NumericFormat>
</div> </div>
</div> </div>

38
src/entities/settlement/ui/filter/list-filter.tsx
View File

@@ -1,19 +1,20 @@
import { useEffect, useState } from 'react'; import { useEffect, 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 { useStore } from '@/shared/model/store'; import { useStore } from '@/shared/model/store';
import { import {
SettlementPaymentMethod, SettlementPaymentMethod,
SettlementPeriodType SettlementPeriodType
} from '../../model/types'; } from '../../model/types';
import { import {
FilterMotionDuration, FilterMotionDuration,
FilterMotionStyle, FilterMotionStyle,
FilterMotionVariants FilterMotionVariants
} from '@/entities/common/model/constant'; } from '@/entities/common/model/constant';
import { FilterSelect } from '@/shared/ui/filter/select'; import { FilterSelect } from '@/shared/ui/filter/select';
import { FilterCalendar } from '@/shared/ui/filter/calendar'; import { FilterCalendar } from '@/shared/ui/filter/calendar';
import { SettlementPaymentMethodOptionsGroup, SettlementPeriodTypeBtnGroup } from '../../model/constant'; import { getSettlementPaymentMethodOptionsGroup, getSettlementPeriodTypeBtnGroup } from '../../model/constant';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { FilterSelectMid } from '@/shared/ui/filter/select-mid'; import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
@@ -46,13 +47,14 @@ export const ListFilter = ({
setEndDate, setEndDate,
setPaymentMethod setPaymentMethod
}: ListFilterProps) => { }: ListFilterProps) => {
const { t } = useTranslation();
const [filterMid, setFilterMid] = useState<string>(mid); const [filterMid, setFilterMid] = useState<string>(mid);
const [filterPeriodType, setFilterPeriodType] = useState<SettlementPeriodType>(periodType); const [filterPeriodType, setFilterPeriodType] = useState<SettlementPeriodType>(periodType);
const [filterStartDate, setFilterStartDate] = useState<string>(startDate); const [filterStartDate, setFilterStartDate] = useState<string>(startDate);
const [filterEndDate, setFilterEndDate] = useState<string>(endDate); const [filterEndDate, setFilterEndDate] = useState<string>(endDate);
const [filterPaymentMethod, setFilterPaymentMethod] = useState<SettlementPaymentMethod>(paymentMethod); const [filterPaymentMethod, setFilterPaymentMethod] = useState<SettlementPaymentMethod>(paymentMethod);
const midOptions = useStore.getState().UserStore.selectOptionsMids; const midOptions = useStore.getState().UserStore.selectOptionsMids;
const onClickToClose = () => { const onClickToClose = () => {
@@ -84,15 +86,15 @@ export const ListFilter = ({
> >
<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('common.close')}
onClick={ () => onClickToClose() } onClick={ () => onClickToClose() }
/> />
</button> </button>
@@ -100,35 +102,35 @@ export const ListFilter = ({
</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>
<FilterButtonGroups <FilterButtonGroups
title='조회기준' title={t('settlement.searchCriteria')}
activeValue={ filterPeriodType } activeValue={ filterPeriodType }
btnGroups={ SettlementPeriodTypeBtnGroup } btnGroups={ getSettlementPeriodTypeBtnGroup(t) }
setter={ setFilterPeriodType } setter={ setFilterPeriodType }
></FilterButtonGroups> ></FilterButtonGroups>
<FilterCalendar <FilterCalendar
title='조회기간' title={t('settlement.searchPeriod')}
startDate={ filterStartDate } startDate={ filterStartDate }
endDate={ filterEndDate } endDate={ filterEndDate }
setStartDate={ setFilterStartDate } setStartDate={ setFilterStartDate }
setEndDate={ setFilterEndDate } setEndDate={ setFilterEndDate }
></FilterCalendar> ></FilterCalendar>
<FilterSelect <FilterSelect
title='결제수단' title={t('filter.paymentMethod')}
selectValue={ filterPaymentMethod } selectValue={ filterPaymentMethod }
selectSetter={ setFilterPaymentMethod } selectSetter={ setFilterPaymentMethod }
selectOptions={ SettlementPaymentMethodOptionsGroup } selectOptions={ getSettlementPaymentMethodOptionsGroup(t) }
></FilterSelect> ></FilterSelect>
</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/settlement/ui/info-wrap/settlement-info-wrap.tsx
View File

@@ -1,11 +1,12 @@
import moment from 'moment'; import moment from 'moment';
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; import { useTranslation } from 'react-i18next';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import SlideDown from 'react-slidedown'; import SlideDown from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css'; import 'react-slidedown/lib/slidedown.css';
import { import {
InfoWrapKeys, InfoWrapKeys,
SettlementInfoWrapProps, SettlementInfoWrapProps,
SettlementPeriodType SettlementPeriodType
} from '../../model/types'; } from '../../model/types';
@@ -14,6 +15,7 @@ export const SettlementInfoWrap = ({
isOpen, isOpen,
onClickToShowInfo onClickToShowInfo
}: SettlementInfoWrapProps) => { }: SettlementInfoWrapProps) => {
const { t } = useTranslation();
const onClickToSetShowInfo = () => { const onClickToSetShowInfo = () => {
if(!!onClickToShowInfo){ if(!!onClickToShowInfo){
@@ -24,59 +26,59 @@ export const SettlementInfoWrap = ({
return ( return (
<> <>
<div className="txn-section"> <div className="txn-section">
<div <div
className="section-title" className="section-title"
onClick={ () => onClickToSetShowInfo() } onClick={ () => onClickToSetShowInfo() }
> >
정산 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow> {t('settlement.settlementInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div> </div>
<SlideDown className={'my-dropdown-slidedown'}> <SlideDown className={'my-dropdown-slidedown'}>
{ isOpen && { isOpen &&
<ul className="kv-list"> <ul className="kv-list">
<li className="kv-row"> <li className="kv-row">
<span className="k">MID</span> <span className="k">{t('transaction.fields.mid')}</span>
<span className="v">{ settlementInfo?.mid }</span> <span className="v">{ settlementInfo?.mid }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">이체상태</span> <span className="k">{t('settlement.transferStatus')}</span>
<span className="v">{ settlementInfo?.transferStatus }</span> <span className="v">{ settlementInfo?.transferStatus }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">이체ID</span> <span className="k">{t('settlement.transferId')}</span>
<span className="v">{ settlementInfo?.transferId }</span> <span className="v">{ settlementInfo?.transferId }</span>
</li> </li>
<li className="kv-row bolder"> <li className="kv-row bolder">
<span className="k">이체시간</span> <span className="k">{t('settlement.transferTime')}</span>
<span className="v"> <span className="v">
{ settlementInfo?.transferTime && { settlementInfo?.transferTime &&
moment(settlementInfo?.transferTime).format('YYYY.MM.DD HH:mm:ss') moment(settlementInfo?.transferTime).format('YYYY.MM.DD HH:mm:ss')
} }
</span> </span>
</li> </li>
<li className="kv-row bolder"> <li className="kv-row bolder">
<span className="k">은행명</span> <span className="k">{t('settlement.bankName')}</span>
<span className="v">{ settlementInfo?.bankName }</span> <span className="v">{ settlementInfo?.bankName }</span>
</li> </li>
<li className="kv-row bolder"> <li className="kv-row bolder">
<span className="k">계좌번호</span> <span className="k">{t('settlement.accountNumber')}</span>
<span className="v">{ settlementInfo?.accountNumber }</span> <span className="v">{ settlementInfo?.accountNumber }</span>
</li> </li>
<li className="kv-row bolder"> <li className="kv-row bolder">
<span className="k">입금인자</span> <span className="k">{t('settlement.depositorName')}</span>
<span className="v">{ settlementInfo?.depositorName }</span> <span className="v">{ settlementInfo?.depositorName }</span>
</li> </li>
<li className="kv-row bolder"> <li className="kv-row bolder">
<span className="k">정상입금액</span> <span className="k">{t('settlement.settlementDepositAmount')}</span>
<span className="v"> <span className="v">
<NumericFormat <NumericFormat
value={ settlementInfo?.settlementDepositAmount } value={ settlementInfo?.settlementDepositAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</span> </span>
</li> </li>
<li className="kv-row bolder"> <li className="kv-row bolder">
<span className="k">오류사유</span> <span className="k">{t('settlement.errorReason')}</span>
<span className="v">{ settlementInfo?.errorReason }</span> <span className="v">{ settlementInfo?.errorReason }</span>
</li> </li>
</ul> </ul>

40
src/entities/settlement/ui/info-wrap/transaction-info-wrap.tsx
View File

@@ -1,10 +1,11 @@
import moment from 'moment'; import moment from 'moment';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; import { useTranslation } from 'react-i18next';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import SlideDown from 'react-slidedown'; import SlideDown from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css'; import 'react-slidedown/lib/slidedown.css';
import { import {
InfoWrapKeys, InfoWrapKeys,
TransactionInfoWrapProps, TransactionInfoWrapProps,
} from '@/entities/settlement/model/types'; } from '@/entities/settlement/model/types';
export const TransactionInfoWrap = ({ export const TransactionInfoWrap = ({
@@ -12,6 +13,7 @@ export const TransactionInfoWrap = ({
isOpen, isOpen,
onClickToShowInfo onClickToShowInfo
}: TransactionInfoWrapProps) => { }: TransactionInfoWrapProps) => {
const { t } = useTranslation();
const onClickToSetShowInfo = () => { const onClickToSetShowInfo = () => {
if(!!onClickToShowInfo){ if(!!onClickToShowInfo){
@@ -22,61 +24,61 @@ export const TransactionInfoWrap = ({
return ( return (
<> <>
<div className="txn-section"> <div className="txn-section">
<div <div
className="section-title" className="section-title"
onClick={ () => onClickToSetShowInfo() } onClick={ () => onClickToSetShowInfo() }
> >
거래 상세 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow> {t('settlement.transactionDetailInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div> </div>
<SlideDown className={'my-dropdown-slidedown'}> <SlideDown className={'my-dropdown-slidedown'}>
{ isOpen && { isOpen &&
<ul className="kv-list"> <ul className="kv-list">
<li className="kv-row"> <li className="kv-row">
<span className="k">주문번호</span> <span className="k">{t('transaction.fields.orderNumber')}</span>
<span className="v">{ transactionInfo?.orderNumber }</span> <span className="v">{ transactionInfo?.orderNumber }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">TID</span> <span className="k">{t('transaction.fields.tid')}</span>
<span className="v">{ transactionInfo?.tid }</span> <span className="v">{ transactionInfo?.tid }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">원거래 TID</span> <span className="k">{t('transaction.fields.originalTid')}</span>
<span className="v">{ transactionInfo?.originalTid }</span> <span className="v">{ transactionInfo?.originalTid }</span>
</li> </li>
<li className="kv-row bolder"> <li className="kv-row bolder">
<span className="k">거래상태</span> <span className="k">{t('transaction.fields.transactionStatus')}</span>
<span className="v">{ transactionInfo?.transactionStatus }</span> <span className="v">{ transactionInfo?.transactionStatus }</span>
</li> </li>
<li className="kv-row bolder"> <li className="kv-row bolder">
<span className="k">결제수단</span> <span className="k">{t('transaction.fields.paymentMethod')}</span>
<span className="v">{ transactionInfo?.paymentMethod }</span> <span className="v">{ transactionInfo?.paymentMethod }</span>
</li> </li>
<li className="kv-row bolder"> <li className="kv-row bolder">
<span className="k">정산일</span> <span className="k">{t('additionalService.settlementAgency.settlementDate')}</span>
<span className="v">{ moment(transactionInfo?.settlementDate).format('YYYY.MM.DD') }</span> <span className="v">{ moment(transactionInfo?.settlementDate).format('YYYY.MM.DD') }</span>
</li> </li>
<li className="kv-row bolder"> <li className="kv-row bolder">
<span className="k">승인일</span> <span className="k">{t('transaction.fields.approvalDay')}</span>
<span className="v">{ moment(transactionInfo?.approvalDate).format('YYYY.MM.DD') }</span> <span className="v">{ moment(transactionInfo?.approvalDate).format('YYYY.MM.DD') }</span>
</li> </li>
<li className="kv-row bolder"> <li className="kv-row bolder">
<span className="k">취소일</span> <span className="k">{t('transaction.fields.cancelDate')}</span>
<span className="v">{ moment(transactionInfo?.cancelDate).format('YYYY.MM.DD') }</span> <span className="v">{ moment(transactionInfo?.cancelDate).format('YYYY.MM.DD') }</span>
</li> </li>
<li className="kv-row bolder"> <li className="kv-row bolder">
<span className="k">카드/은행/이통사</span> <span className="k">{t('settlement.cardBankTelecom')}</span>
<span className="v">{ transactionInfo?.cardCompany }</span> <span className="v">{ transactionInfo?.cardCompany }</span>
</li> </li>
<li className="kv-row bolder"> <li className="kv-row bolder">
<span className="k">승인번호/계좌번호/휴대번호</span> <span className="k">{t('settlement.approvalAccountPhone')}</span>
<span className="v">{ transactionInfo?.approvalNumber }</span> <span className="v">{ transactionInfo?.approvalNumber }</span>
</li> </li>
<li className="kv-row bolder"> <li className="kv-row bolder">
<span className="k">상품명</span> <span className="k">{t('transaction.fields.productName')}</span>
<span className="v">{ transactionInfo?.productName }</span> <span className="v">{ transactionInfo?.productName }</span>
</li> </li>
<li className="kv-row bolder"> <li className="kv-row bolder">
<span className="k">구매자</span> <span className="k">{t('transaction.fields.buyer')}</span>
<span className="v">{ transactionInfo?.buyerName }</span> <span className="v">{ transactionInfo?.buyerName }</span>
</li> </li>
</ul> </ul>

34
src/entities/settlement/ui/list-summary-extend-settlement.tsx
View File

@@ -1,4 +1,5 @@
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
import { SettlementsHistorySummaryResponse } from '../model/types'; import { SettlementsHistorySummaryResponse } from '../model/types';
export interface ListSummaryExtendSettlementProps extends SettlementsHistorySummaryResponse {}; export interface ListSummaryExtendSettlementProps extends SettlementsHistorySummaryResponse {};
@@ -11,59 +12,60 @@ export const ListSummaryExtendSettlement = ({
releaseAmount, releaseAmount,
offsetAmount offsetAmount
}: ListSummaryExtendSettlementProps) => { }: ListSummaryExtendSettlementProps) => {
const { t } = useTranslation();
return ( return (
<> <>
<div className="summary-extend"> <div className="summary-extend">
<ul className="summary-amount-list"> <ul className="summary-amount-list">
<li className="summary-amount-item"> <li className="summary-amount-item">
<span className="label">거래금액</span> <span className="label">{t('settlement.transactionAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ transactionAmount } value={ transactionAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> <span className="unit">원</span> ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
</span> </span>
</li> </li>
<li className="summary-amount-item"> <li className="summary-amount-item">
<span className="label">PG 수수료</span> <span className="label">{t('settlement.totalPgFee')}</span>
<span className="value minus"> <span className="value minus">
<NumericFormat <NumericFormat
value={ pgFeeAmount } value={ pgFeeAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> <span className="unit">원</span> ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
</span> </span>
</li> </li>
<li className="summary-amount-item"> <li className="summary-amount-item">
<span className="label">보류</span> <span className="label">{t('settlement.hold')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ holdAmount } value={ holdAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> <span className="unit">원</span> ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
</span> </span>
</li> </li>
<li className="summary-amount-item"> <li className="summary-amount-item">
<span className="label">해제</span> <span className="label">{t('settlement.release')}</span>
<span className="value link"> <span className="value link">
<NumericFormat <NumericFormat
value={ releaseAmount } value={ releaseAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> <span className="unit">원</span> ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
</span> </span>
</li> </li>
<li className="summary-amount-item"> <li className="summary-amount-item">
<span className="label">상계</span> <span className="label">{t('settlement.offset')}</span>
<span className="value minus"> <span className="value minus">
<NumericFormat <NumericFormat
value={ offsetAmount } value={ offsetAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> <span className="unit">원</span> ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
</span> </span>
</li> </li>
</ul> </ul>

38
src/entities/settlement/ui/list-summary-extend-transaction.tsx
View File

@@ -1,4 +1,5 @@
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
import { SettlementsTransactionSummaryResponse } from '../model/types'; import { SettlementsTransactionSummaryResponse } from '../model/types';
export interface ListSummaryExtendTransactionProps extends SettlementsTransactionSummaryResponse {}; export interface ListSummaryExtendTransactionProps extends SettlementsTransactionSummaryResponse {};
@@ -12,69 +13,70 @@ export const ListSummaryExtendTransaction = ({
vatAmount, vatAmount,
preSettlementCancelOffset preSettlementCancelOffset
}: ListSummaryExtendTransactionProps) => { }: ListSummaryExtendTransactionProps) => {
const { t } = useTranslation();
return ( return (
<> <>
<div className="summary-extend"> <div className="summary-extend">
<ul className="summary-amount-list"> <ul className="summary-amount-list">
<li className="summary-amount-item"> <li className="summary-amount-item">
<span className="label">거래금액</span> <span className="label">{t('settlement.transactionAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ transactionAmount } value={ transactionAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> <span className="unit">원</span> ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
</span> </span>
</li> </li>
<li className="summary-amount-item"> <li className="summary-amount-item">
<span className="label">결제 수수료</span> <span className="label">{t('settlement.paymentFee')}</span>
<span className="value minus"> <span className="value minus">
<NumericFormat <NumericFormat
value={ paymentFeeAmount } value={ paymentFeeAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> <span className="unit">원</span> ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
</span> </span>
</li> </li>
<li className="summary-amount-item"> <li className="summary-amount-item">
<span className="label">에스크로 수수료</span> <span className="label">{t('settlement.escrowFee')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ escrowFeeAmount } value={ escrowFeeAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> <span className="unit">원</span> ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
</span> </span>
</li> </li>
<li className="summary-amount-item"> <li className="summary-amount-item">
<span className="label">인증 수수료</span> <span className="label">{t('settlement.authFee')}</span>
<span className="value link"> <span className="value link">
<NumericFormat <NumericFormat
value={ authFeeAmount } value={ authFeeAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> <span className="unit">원</span> ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
</span> </span>
</li> </li>
<li className="summary-amount-item"> <li className="summary-amount-item">
<span className="label">VAT</span> <span className="label">VAT</span>
<span className="value minus"> <span className="value minus">
<NumericFormat <NumericFormat
value={ vatAmount } value={ vatAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> <span className="unit">원</span> ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
</span> </span>
</li> </li>
<li className="summary-amount-item"> <li className="summary-amount-item">
<span className="label">정산전 취소상계</span> <span className="label">{t('settlement.preSettlementCancelOffset')}</span>
<span className="value minus"> <span className="value minus">
<NumericFormat <NumericFormat
value={ preSettlementCancelOffset } value={ preSettlementCancelOffset }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> <span className="unit">원</span> ></NumericFormat> <span className="unit">{t('common.currencyUnit')}</span>
</span> </span>
</li> </li>
</ul> </ul>

4
src/entities/support/ui/qna-item.tsx
View File

@@ -48,8 +48,8 @@ export const SupportQnaItem = ({
<div className="inq-line"> <div className="inq-line">
<div className="inq-title-text">{ title }</div> <div className="inq-title-text">{ title }</div>
<div className="inq-meta"> <div className="inq-meta">
등록일<span>{ moment(requestDate).format('YYYY.MM.DD') }</span> {t('support.qna.registrationDate')}<span>{ moment(requestDate).format('YYYY.MM.DD') }</span>
<span className="sai">ㅣ</span>상태 <span>[{t(`support.qna.statusCode.${statusCode}`)}]</span> <span className="sai">ㅣ</span>{t('support.qna.status')} <span>[{t(`support.qna.statusCode.${statusCode}`)}]</span>
</div> </div>
<span className={`dot ${(statusCode === '03')? 'blue': 'gray'}`}></span> <span className={`dot ${(statusCode === '03')? 'blue': 'gray'}`}></span>
</div> </div>

244
src/entities/transaction/model/contant.ts
View File

@@ -1,4 +1,5 @@
import { import { TFunction } from 'i18next';
import {
AllTransactionMoidTid, AllTransactionMoidTid,
AllTransactionSearchCl, AllTransactionSearchCl,
AllTransactionServiceCode, AllTransactionServiceCode,
@@ -6,7 +7,7 @@ import {
CashReceiptPurposeType, CashReceiptPurposeType,
CashReceiptTransactionType, CashReceiptTransactionType,
CashReceiptProcessResult, CashReceiptProcessResult,
BillingPaymentMethod, BillingPaymentMethod,
BillingProcessResult, BillingProcessResult,
BillingRequestStatus, BillingRequestStatus,
BillingSearchType, BillingSearchType,
@@ -15,121 +16,121 @@ import {
EscrowSettlementStatus EscrowSettlementStatus
} from '@/entities/transaction/model/types'; } from '@/entities/transaction/model/types';
export const AllTransactionMoidTidOptionsGroup = [ export const getAllTransactionMoidTidOptionsGroup = (t: TFunction) => [
{name: '주문번호', value: AllTransactionMoidTid.MOID}, {name: t('transaction.constants.orderNumber'), value: AllTransactionMoidTid.MOID},
{name: 'TID', value: AllTransactionMoidTid.TID}, {name: t('transaction.constants.tid'), value: AllTransactionMoidTid.TID},
]; ];
export const AllTransactionStatusCodeBtnGroup = [ export const getAllTransactionStatusCodeBtnGroup = (t: TFunction) => [
{name: '전체', value: AllTransactionStatusCode.ALL}, {name: t('transaction.constants.all'), value: AllTransactionStatusCode.ALL},
{name: '승인/입금완료', value: AllTransactionStatusCode.APPROVAL}, {name: t('transaction.constants.approvalComplete'), value: AllTransactionStatusCode.APPROVAL},
{name: '전취소/취소', value: AllTransactionStatusCode.CANCEL}, {name: t('transaction.constants.totalCancel'), value: AllTransactionStatusCode.CANCEL},
{name: '후취소/환불', value: AllTransactionStatusCode.REFUND} {name: t('transaction.constants.refund'), value: AllTransactionStatusCode.REFUND}
];
export const AllTransactionServiceCodeOptionsGroup = [
{name: '전체', value: AllTransactionServiceCode.ALL},
{name: '신용카드', value: AllTransactionServiceCode.CREDIT_CARD},
{name: '가상계좌', value: AllTransactionServiceCode.VIRTUAL_ACCOUNT},
{name: '계좌이체', value: AllTransactionServiceCode.ACCOUNT_TRANSFER},
{name: '계좌간편결제', value: AllTransactionServiceCode.ACCOUNT_SIMPLE_TRANSFER},
{name: '휴대폰', value: AllTransactionServiceCode.MOBILE_PAYMENT},
{name: 'SSG 머니', value: AllTransactionServiceCode.SSGMONEY},
{name: 'SSG 은행계좌', value: AllTransactionServiceCode.SSGBANK},
{name: '문화상품권', value: AllTransactionServiceCode.CULT},
{name: '티머니페이', value: AllTransactionServiceCode.TMONEY},
]; ];
export const AllTracsactionStatusCode = [ export const getAllTransactionServiceCodeOptionsGroup = (t: TFunction) => [
{name: t('transaction.constants.all'), value: AllTransactionServiceCode.ALL},
{name: t('transaction.constants.creditCard'), value: AllTransactionServiceCode.CREDIT_CARD},
{name: t('transaction.constants.virtualAccount'), value: AllTransactionServiceCode.VIRTUAL_ACCOUNT},
{name: t('transaction.constants.accountTransfer'), value: AllTransactionServiceCode.ACCOUNT_TRANSFER},
{name: t('transaction.constants.accountSimpleTransfer'), value: AllTransactionServiceCode.ACCOUNT_SIMPLE_TRANSFER},
{name: t('transaction.constants.mobilePayment'), value: AllTransactionServiceCode.MOBILE_PAYMENT},
{name: t('transaction.constants.ssgMoney'), value: AllTransactionServiceCode.SSGMONEY},
{name: t('transaction.constants.ssgBank'), value: AllTransactionServiceCode.SSGBANK},
{name: t('transaction.constants.cultureLand'), value: AllTransactionServiceCode.CULT},
{name: t('transaction.constants.tmoneyPay'), value: AllTransactionServiceCode.TMONEY},
];
export const getAllTransactionStatusCode = (t: TFunction) => [
{ {
serviceCode: '', serviceCode: '',
list: [ list: [
{code: '', ko: '전체', en: 'All'}, {code: '', name: t('transaction.constants.all')},
{code: '0', ko: '승인/입금완료', en: 'Approval'}, {code: '0', name: t('transaction.constants.approvalComplete')},
{code: '1', ko: '전취소/취소', en: 'Total Cancellation'}, {code: '1', name: t('transaction.constants.totalCancel')},
{code: '2', ko: '후취소/환불', en: 'Cancellation'} {code: '2', name: t('transaction.constants.refund')}
] ]
}, },
{ {
serviceCode: '01', serviceCode: '01',
list: [ list: [
{code: '', ko: '전체', en: 'All'}, {code: '', name: t('transaction.constants.all')},
{code: '0', ko: '승인', en: 'Approval'}, {code: '0', name: t('transaction.constants.approval')},
{code: '1', ko: '전취소', en: 'Total Cancellation'}, {code: '1', name: t('transaction.constants.totalCancelShort')},
{code: '2', ko: '후취소', en: 'Cancellation'} {code: '2', name: t('transaction.constants.cancelShort')}
] ]
}, },
{ {
serviceCode: '02', serviceCode: '02',
list: [ list: [
{code: '', ko: '전체', en: 'All'}, {code: '', name: t('transaction.constants.all')},
{code: '0', ko: '승인', en: 'Approval'}, {code: '0', name: t('transaction.constants.approval')},
{code: '1', ko: '취소', en: 'Cancellation'}, {code: '1', name: t('transaction.constants.cancel')},
{code: '2', ko: '환불', en: 'Refund'}, {code: '2', name: t('transaction.constants.refund')},
] ]
}, },
{ {
serviceCode: '03', serviceCode: '03',
list: [ list: [
{code: '', ko: '전체', en: 'All'}, {code: '', name: t('transaction.constants.all')},
{code: '0', ko: '입금', en: 'Payment Complete'}, {code: '0', name: t('transaction.constants.deposit')},
{code: '2', ko: '환불', en: 'Refund'}, {code: '2', name: t('transaction.constants.refund')},
{code: '3', ko: '입금대기', en: 'Waiting Payment'}, {code: '3', name: t('transaction.constants.waitingDeposit')},
{code: '4', ko: '채번취소', en: 'Cancellation Issue'}, {code: '4', name: t('transaction.constants.issueCancel')},
] ]
}, },
{ {
serviceCode: '05', serviceCode: '05',
list: [ list: [
{code: '', ko: '전체', en: 'All'}, {code: '', name: t('transaction.constants.all')},
{code: '0', ko: '승인', en: 'Approval'}, {code: '0', name: t('transaction.constants.approval')},
{code: '1', ko: '취소', en: 'Cancellation'}, {code: '1', name: t('transaction.constants.cancel')},
{code: '2', ko: '환불', en: 'Refund'}, {code: '2', name: t('transaction.constants.refund')},
] ]
}, },
{ {
serviceCode: '14', serviceCode: '14',
list: [ list: [
{code: '', ko: '전체', en: 'All'}, {code: '', name: t('transaction.constants.all')},
{code: '0', ko: '승인', en: 'Approval'}, {code: '0', name: t('transaction.constants.approval')},
{code: '1', ko: '취소', en: 'Cancellation'}, {code: '1', name: t('transaction.constants.cancel')},
{code: '2', ko: '환불', en: 'Refund'}, {code: '2', name: t('transaction.constants.refund')},
] ]
}, },
{ {
serviceCode: '21', serviceCode: '21',
list: [ list: [
{code: '', ko: '전체', en: 'All'}, {code: '', name: t('transaction.constants.all')},
{code: '0', ko: '승인', en: 'Approval'}, {code: '0', name: t('transaction.constants.approval')},
{code: '1', ko: '취소', en: 'Cancellation'}, {code: '1', name: t('transaction.constants.cancel')},
{code: '2', ko: '환불', en: 'Refund'}, {code: '2', name: t('transaction.constants.refund')},
] ]
}, },
{ {
serviceCode: '24', serviceCode: '24',
list: [ list: [
{code: '', ko: '전체', en: 'All'}, {code: '', name: t('transaction.constants.all')},
{code: '0', ko: '승인', en: 'Approval'}, {code: '0', name: t('transaction.constants.approval')},
{code: '1', ko: '취소', en: 'Cancellation'}, {code: '1', name: t('transaction.constants.cancel')},
{code: '2', ko: '환불', en: 'Refund'}, {code: '2', name: t('transaction.constants.refund')},
] ]
}, },
{ {
serviceCode: '26', serviceCode: '26',
list: [ list: [
{code: '', ko: '전체', en: 'All'}, {code: '', name: t('transaction.constants.all')},
{code: '0', ko: '승인', en: 'Approval'}, {code: '0', name: t('transaction.constants.approval')},
{code: '1', ko: '취소', en: 'Cancellation'}, {code: '1', name: t('transaction.constants.cancel')},
{code: '2', ko: '환불', en: 'Refund'}, {code: '2', name: t('transaction.constants.refund')},
] ]
}, },
{ {
serviceCode: '31', serviceCode: '31',
list: [ list: [
{code: '', ko: '전체', en: 'All'}, {code: '', name: t('transaction.constants.all')},
{code: '0', ko: '승인', en: 'Approval'}, {code: '0', name: t('transaction.constants.approval')},
{code: '1', ko: '전취소', en: 'Total Cancellation'}, {code: '1', name: t('transaction.constants.totalCancelShort')},
{code: '2', ko: '후취소', en: 'Cancellation'}, {code: '2', name: t('transaction.constants.cancelShort')},
] ]
}, },
]; ];
@@ -140,63 +141,72 @@ export const AllTransactionCardBankCodeOptionsGroup = {
export const CashReceiptPurposeTypeBtnGroup = [ export const getCashReceiptPurposeTypeBtnGroup = (t: TFunction) => [
{name: '전체', value: CashReceiptPurposeType.ALL}, {name: t('transaction.constants.all'), value: CashReceiptPurposeType.ALL},
{name: '소득공제', value: CashReceiptPurposeType.INCOME_DEDUCTION}, {name: t('transaction.handWrittenIssuance.incomeDeduction'), value: CashReceiptPurposeType.INCOME_DEDUCTION},
{name: '지출증빙', value: CashReceiptPurposeType.EXPENSE_PROOF}, {name: t('transaction.handWrittenIssuance.expenseProof'), value: CashReceiptPurposeType.EXPENSE_PROOF},
]; ];
export const CashReceiptTransactionTypeBtnGroup = [
{name: '전체', value: CashReceiptTransactionType.ALL}, export const getCashReceiptTransactionTypeBtnGroup = (t: TFunction) => [
{name: '승인', value: CashReceiptTransactionType.APPROVAL}, {name: t('transaction.constants.all'), value: CashReceiptTransactionType.ALL},
{name: '취소', value: CashReceiptTransactionType.CANCEL}, {name: t('transaction.constants.approval'), value: CashReceiptTransactionType.APPROVAL},
{name: t('transaction.constants.cancel'), value: CashReceiptTransactionType.CANCEL},
]; ];
export const CashReceiptProcessResultBtnGroup = [
{name: '전체', value: CashReceiptProcessResult.ALL}, export const getCashReceiptProcessResultBtnGroup = (t: TFunction) => [
{name: '요청', value: CashReceiptProcessResult.REQUEST}, {name: t('transaction.constants.all'), value: CashReceiptProcessResult.ALL},
{name: '요청취소', value: CashReceiptProcessResult.REQUEST_CANCEL}, {name: t('transaction.constants.request'), value: CashReceiptProcessResult.REQUEST},
{name: '요청완료', value: CashReceiptProcessResult.REQUEST_COMPLETE}, {name: t('transaction.constants.requestCancel'), value: CashReceiptProcessResult.REQUEST_CANCEL},
{name: '발급완료', value: CashReceiptProcessResult.ISSUE_COMPLETE}, {name: t('transaction.constants.requestComplete'), value: CashReceiptProcessResult.REQUEST_COMPLETE},
{name: '요청실패', value: CashReceiptProcessResult.REQUEST_FAIL}, {name: t('transaction.constants.issueComplete'), value: CashReceiptProcessResult.ISSUE_COMPLETE},
{name: '발급실패', value: CashReceiptProcessResult.ISSUE_FAIL}, {name: t('transaction.constants.requestFail'), value: CashReceiptProcessResult.REQUEST_FAIL},
{name: t('transaction.constants.issueFail'), value: CashReceiptProcessResult.ISSUE_FAIL},
]; ];
export const EscrowSearchTypeOptionsGroup = [
{name: '주문번호', value: EscrowSearchType.ORDER_NUMBER }, export const getEscrowSearchTypeOptionsGroup = (t: TFunction) => [
{name: 'TID', value: EscrowSearchType.TID } {name: t('transaction.constants.orderNumber'), value: EscrowSearchType.ORDER_NUMBER },
{name: t('transaction.constants.tid'), value: EscrowSearchType.TID }
]; ];
export const EscrowDeliveryStatusBtnGroup = [
{name: '전체', value: EscrowDeliveryStatus.ALL}, export const getEscrowDeliveryStatusBtnGroup = (t: TFunction) => [
{name: '결제완료', value: EscrowDeliveryStatus.PAY_COMPLETE}, {name: t('transaction.constants.all'), value: EscrowDeliveryStatus.ALL},
{name: '배송등록', value: EscrowDeliveryStatus.DELIVERY_INSERT}, {name: t('transaction.constants.paymentComplete'), value: EscrowDeliveryStatus.PAY_COMPLETE},
{name: '배송완료', value: EscrowDeliveryStatus.DELIVERY_COMPLETE}, {name: t('transaction.constants.deliveryRegistration'), value: EscrowDeliveryStatus.DELIVERY_INSERT},
{name: '구매확인', value: EscrowDeliveryStatus.PURCHASE_CONFIRM}, {name: t('transaction.constants.deliveryComplete'), value: EscrowDeliveryStatus.DELIVERY_COMPLETE},
{name: '구매거절', value: EscrowDeliveryStatus.PURCHASE_REJECT}, {name: t('transaction.constants.purchaseConfirm'), value: EscrowDeliveryStatus.PURCHASE_CONFIRM},
{name: '환불처리', value: EscrowDeliveryStatus.RETURN_PROCESSING}, {name: t('transaction.constants.purchaseReject'), value: EscrowDeliveryStatus.PURCHASE_REJECT},
{name: '지급완료', value: EscrowDeliveryStatus.DEPOSIT_COMPLETE}, {name: t('transaction.constants.refundProcessing'), value: EscrowDeliveryStatus.RETURN_PROCESSING},
{name: t('transaction.constants.depositComplete'), value: EscrowDeliveryStatus.DEPOSIT_COMPLETE},
]; ];
export const EscrowSettlementStatusBtnGroup = [
{name: '전체', value: EscrowSettlementStatus.ALL}, export const getEscrowSettlementStatusBtnGroup = (t: TFunction) => [
{name: '신용카드', value: EscrowSettlementStatus.CREDIT_CARD}, {name: t('transaction.constants.all'), value: EscrowSettlementStatus.ALL},
{name: '가상계좌', value: EscrowSettlementStatus.REAL_ACCOUNT}, {name: t('transaction.constants.creditCard'), value: EscrowSettlementStatus.CREDIT_CARD},
{name: '계좌이체', value: EscrowSettlementStatus.ACCOUNT_TRANSFER}, {name: t('transaction.constants.virtualAccount'), value: EscrowSettlementStatus.REAL_ACCOUNT},
{name: t('transaction.constants.accountTransfer'), value: EscrowSettlementStatus.ACCOUNT_TRANSFER},
]; ];
export const BillingSearchTypeOptionsGroup = [
{name: '주문번호', value: BillingSearchType.ORDER_NUMBER }, export const getBillingSearchTypeOptionsGroup = (t: TFunction) => [
{name: 'TID', value: BillingSearchType.TID } {name: t('transaction.constants.orderNumber'), value: BillingSearchType.ORDER_NUMBER },
{name: t('transaction.constants.tid'), value: BillingSearchType.TID }
]; ];
export const BillingRequestStatusBtnGroup = [
{name: '전체', value: BillingRequestStatus.ALL}, export const getBillingRequestStatusBtnGroup = (t: TFunction) => [
{name: '진행중', value: BillingRequestStatus.IN_PROGRESS}, {name: t('transaction.constants.all'), value: BillingRequestStatus.ALL},
{name: '성공', value: BillingRequestStatus.SUCCESS}, {name: t('transaction.constants.inProgress'), value: BillingRequestStatus.IN_PROGRESS},
{name: '요청취소', value: BillingRequestStatus.REQUEST_CANCEL}, {name: t('transaction.constants.success'), value: BillingRequestStatus.SUCCESS},
{name: t('transaction.constants.requestCancel'), value: BillingRequestStatus.REQUEST_CANCEL},
]; ];
export const BillingProcessResultBtnGroup = [
{name: '전체', value: BillingProcessResult.ALL}, export const getBillingProcessResultBtnGroup = (t: TFunction) => [
{name: '성공', value: BillingProcessResult.SUCCESS}, {name: t('transaction.constants.all'), value: BillingProcessResult.ALL},
{name: '실패', value: BillingProcessResult.FAILURE}, {name: t('transaction.constants.success'), value: BillingProcessResult.SUCCESS},
{name: t('transaction.constants.failure'), value: BillingProcessResult.FAILURE},
]; ];
export const BillingPaymentMethodBtnGroup = [
{name: '전체', value: BillingPaymentMethod.ALL}, export const getBillingPaymentMethodBtnGroup = (t: TFunction) => [
{name: '신용카드', value: BillingPaymentMethod.CREDIT_CARD}, {name: t('transaction.constants.all'), value: BillingPaymentMethod.ALL},
{name: '가상계좌', value: BillingPaymentMethod.VIRTUAL_ACCOUNT}, {name: t('transaction.constants.creditCard'), value: BillingPaymentMethod.CREDIT_CARD},
{name: '휴대폰', value: BillingPaymentMethod.MOBILE_PAYMENT}, {name: t('transaction.constants.virtualAccount'), value: BillingPaymentMethod.VIRTUAL_ACCOUNT},
{name: t('transaction.constants.mobilePayment'), value: BillingPaymentMethod.MOBILE_PAYMENT},
]; ];

11
src/entities/transaction/ui/all-transaction-all-cancel.tsx
View File

@@ -3,6 +3,7 @@ import { AllTransactionCancelInfoResponse } from '../model/types';
import { AllTransactionCancelSectionPasswordGroup } from './section/all-transaction-cancel-section-password-group'; import { AllTransactionCancelSectionPasswordGroup } from './section/all-transaction-cancel-section-password-group';
import { AllTransactionCancelSectionBankGroup } from './section/all-transaction-cancel-section-bank-group'; import { AllTransactionCancelSectionBankGroup } from './section/all-transaction-cancel-section-bank-group';
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
export interface AllTransactionAllCancelProps extends AllTransactionCancelInfoResponse { export interface AllTransactionAllCancelProps extends AllTransactionCancelInfoResponse {
serviceCode: string; serviceCode: string;
@@ -45,25 +46,27 @@ export const AllTransactionAllCancel = ({
requestSuccess, requestSuccess,
totalCancelAmount totalCancelAmount
}: AllTransactionAllCancelProps) => { }: AllTransactionAllCancelProps) => {
const { t } = useTranslation();
return ( return (
<> <>
<div className="amount-info"> <div className="amount-info">
<ul className="amount-list"> <ul className="amount-list">
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;총 잔액</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.totalBalance')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ remainAmount } value={ remainAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</span> </span>
</li> </li>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;총 취소금액</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.totalCancelAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ totalCancelAmount } value={ totalCancelAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>

54
src/entities/transaction/ui/all-transaction-cancel-prevent-bond.tsx
View File

@@ -7,6 +7,7 @@ import { NumericFormat } from 'react-number-format';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant'; import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
import { useNavigate } from '@/shared/lib/hooks'; import { useNavigate } from '@/shared/lib/hooks';
import { PATHS } from '@/shared/constants/paths'; import { PATHS } from '@/shared/constants/paths';
import { useTranslation } from 'react-i18next';
export interface AllTransactionCancelPreventBondProps { export interface AllTransactionCancelPreventBondProps {
cancelPreventBondOn: boolean; cancelPreventBondOn: boolean;
setCancelPreventBondOn: (cancelPreventBondOn: boolean) => void; setCancelPreventBondOn: (cancelPreventBondOn: boolean) => void;
@@ -22,6 +23,7 @@ export const AllTransactionCancelPreventBond = ({
serviceCode, serviceCode,
tid tid
}: AllTransactionCancelPreventBondProps) => { }: AllTransactionCancelPreventBondProps) => {
const { t } = useTranslation();
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const [item, setItem] = useState<DebtPreventionCancelDisplayInfo | null | undefined>(debtPreventionCancelDisplayInfo); const [item, setItem] = useState<DebtPreventionCancelDisplayInfo | null | undefined>(debtPreventionCancelDisplayInfo);
const onClickToClose = () => { const onClickToClose = () => {
@@ -48,15 +50,15 @@ export const AllTransactionCancelPreventBond = ({
> >
<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('transaction.cancel.afterDeposit.title')}</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('common.close')}
onClick={ onClickToClose } onClick={ onClickToClose }
/> />
</button> </button>
@@ -64,43 +66,43 @@ export const AllTransactionCancelPreventBond = ({
</div> </div>
<div className="option-list-nopadding pw-26"> <div className="option-list-nopadding pw-26">
<div className="after-deposit-cancel pb-120"> <div className="after-deposit-cancel pb-120">
<div className="notice-text">요청하신 거래취소는 입금 후 취소처리 가능합니다.</div> <div className="notice-text">{t('transaction.cancel.afterDeposit.notice')}</div>
<div className="section-title">취소거래내역</div> <div className="section-title">{t('transaction.cancel.afterDeposit.cancelTransactionTitle')}</div>
<div className="amount-info"> <div className="amount-info">
<ul className="kv-list"> <ul className="kv-list">
<li className="kv-row"> <li className="kv-row">
<div className="k">· 승인일</div> <div className="k">· {t('transaction.fields.approvalDay')}</div>
<div className="v">{ item?.approvalDate? moment(item?.approvalDate).format('YYYY.MM.DD'): '' }</div> <div className="v">{ item?.approvalDate? moment(item?.approvalDate).format('YYYY.MM.DD'): '' }</div>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<div className="k">· 승인번호</div> <div className="k">· {t('transaction.fields.approvalNumber')}</div>
<div className="v">{ item?.approvalNo }</div> <div className="v">{ item?.approvalNo }</div>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<div className="k">· 승인금액</div> <div className="k">· {t('transaction.cancel.afterDeposit.approvalAmount')}</div>
<div className="v"> <div className="v">
<NumericFormat <NumericFormat
value={ item?.amount } value={ item?.amount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</div> </div>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<div className="k">· 총 취소금액</div> <div className="k">· {t('transaction.fields.totalCancelAmount')}</div>
<div className="v"> <div className="v">
<NumericFormat <NumericFormat
value={ item?.totalCancelAmount } value={ item?.totalCancelAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</div> </div>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<div className="k red">· 입금요청금액 :</div> <div className="k red">· {t('transaction.cancel.afterDeposit.depositRequestAmount')} :</div>
<div className="v red"> <div className="v red">
<NumericFormat <NumericFormat
value={ item?.depositRequestAmount } value={ item?.depositRequestAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
@@ -109,40 +111,40 @@ export const AllTransactionCancelPreventBond = ({
</ul> </ul>
</div> </div>
<div className="section-title">입금 정보</div> <div className="section-title">{t('transaction.cancel.afterDeposit.depositInfoTitle')}</div>
<div className="amount-info"> <div className="amount-info">
<ul className="kv-list"> <ul className="kv-list">
<li className="kv-row"> <li className="kv-row">
<div className="k">· 은행</div> <div className="k">· {t('transaction.fields.bank')}</div>
<div className="v">{ item?.bankName }</div> <div className="v">{ item?.bankName }</div>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<div className="k">· 계좌번호</div> <div className="k">· {t('transaction.fields.accountNo')}</div>
<div className="v">{ item?.accountNo }</div> <div className="v">{ item?.accountNo }</div>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<div className="k">· 예금주</div> <div className="k">· {t('transaction.fields.accountHolder')}</div>
<div className="v">{ item?.accountName }</div> <div className="v">{ item?.accountName }</div>
</li> </li>
</ul> </ul>
</div> </div>
<div className="guide-list mt-26"> <div className="guide-list mt-26">
<div className="desc dot">[취소요청] 버튼을 통해 취소 요청을 진행해야 접수됩니다.</div> <div className="desc dot">{t('transaction.cancel.afterDeposit.guide1')}</div>
<div className="desc dot">입금자명은 가맹점 상호로 입력해 주세요.</div> <div className="desc dot">{t('transaction.cancel.afterDeposit.guide2')}</div>
<div className="desc dot">입금요청금액과 동일한 금액을 입금해야 취소가 진행됩니다.</div> <div className="desc dot">{t('transaction.cancel.afterDeposit.guide3')}</div>
<div className="desc dot">취소내역은 최대 3일 이후 확인 가능합니다.</div> <div className="desc dot">{t('transaction.cancel.afterDeposit.guide4')}</div>
<div className="desc dot">입금 후 취소 프로세스 :<br />가맹점의 취소요청 -&gt; 가맹점의입금 -&gt; 입금 확인 -&gt; 취소 처리</div> <div className="desc dot" dangerouslySetInnerHTML={{ __html: t('transaction.cancel.afterDeposit.guide5') }}></div>
<div className="desc dot">정산받지 않은 거래인 경우 <span className="link-blue">service@nicepay.co.kr</span>로 거래내역을 발송바랍니다. (단. 정산예정일이 2일 이상 남은 거래에 한함)</div> <div className="desc dot" dangerouslySetInnerHTML={{ __html: t('transaction.cancel.afterDeposit.guide6') }}></div>
</div> </div>
</div> </div>
</div> </div>
</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={ () => callTransactionCancel() } onClick={ () => callTransactionCancel() }
>신청</button> >{t('transaction.submit')}</button>
</div> </div>
</motion.div> </motion.div>
</> </>

34
src/entities/transaction/ui/all-transaction-part-cancel.tsx
View File

@@ -3,6 +3,7 @@ import { AllTransactionCancelInfoResponse } from '../model/types';
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
import { AllTransactionCancelSectionPasswordGroup } from './section/all-transaction-cancel-section-password-group'; import { AllTransactionCancelSectionPasswordGroup } from './section/all-transaction-cancel-section-password-group';
import { AllTransactionCancelSectionBankGroup } from './section/all-transaction-cancel-section-bank-group'; import { AllTransactionCancelSectionBankGroup } from './section/all-transaction-cancel-section-bank-group';
import { useTranslation } from 'react-i18next';
export interface AllTransactionPartCancelProps extends AllTransactionCancelInfoResponse { export interface AllTransactionPartCancelProps extends AllTransactionCancelInfoResponse {
serviceCode: string; serviceCode: string;
@@ -63,6 +64,7 @@ export const AllTransactionPartCancel = ({
totalCancelAmount, totalCancelAmount,
setTotalCancelAmount setTotalCancelAmount
}: AllTransactionPartCancelProps) => { }: AllTransactionPartCancelProps) => {
const { t } = useTranslation();
const [cancelTotalCancelAmountReadonly, setCancelTotalCancelAmountReadonly] = useState<boolean>(true); const [cancelTotalCancelAmountReadonly, setCancelTotalCancelAmountReadonly] = useState<boolean>(true);
const [cancelSupplyAmountDisabled, setCancelSupplyAmountDisabled] = useState<boolean>(false); const [cancelSupplyAmountDisabled, setCancelSupplyAmountDisabled] = useState<boolean>(false);
const [cancelGoodsVatDisabled, setCancelGoodsVatDisabled] = useState<boolean>(false); const [cancelGoodsVatDisabled, setCancelGoodsVatDisabled] = useState<boolean>(false);
@@ -180,20 +182,20 @@ export const AllTransactionPartCancel = ({
<div className="amount-info"> <div className="amount-info">
<ul className="amount-list"> <ul className="amount-list">
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;총 잔액</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.totalBalance')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ remainAmount } value={ remainAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</span> </span>
</li> </li>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;총 취소금액</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.totalCancelAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ totalCancelAmount } value={ totalCancelAmount }
displayType="input" displayType="input"
allowNegative={ false } allowNegative={ false }
max={ remainAmount } max={ remainAmount }
@@ -215,19 +217,19 @@ export const AllTransactionPartCancel = ({
<thead> <thead>
<tr> <tr>
<th className="header-empty"></th> <th className="header-empty"></th>
<th className="header-balance">잔액</th> <th className="header-balance">{t('transaction.cancel.partCancel.balance')}</th>
<th className="header-cancel">취소금액</th> <th className="header-cancel">{t('transaction.cancel.partCancel.cancelAmount')}</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td className="row-label">과세액</td> <td className="row-label">{t('transaction.cancel.partCancel.taxableAmount')}</td>
<td className="row-balance"> <td className="row-balance">
<NumericFormat <NumericFormat
value={ supplyAmount } value={ supplyAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</td> </td>
<td className="row-cancel"> <td className="row-cancel">
<NumericFormat <NumericFormat
@@ -241,13 +243,13 @@ export const AllTransactionPartCancel = ({
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="row-label">부가세</td> <td className="row-label">{t('transaction.cancel.partCancel.taxAmount')}</td>
<td className="row-balance"> <td className="row-balance">
<NumericFormat <NumericFormat
value={ goodsVat } value={ goodsVat }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</td> </td>
<td className="row-cancel"> <td className="row-cancel">
<NumericFormat <NumericFormat
@@ -261,10 +263,10 @@ export const AllTransactionPartCancel = ({
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="row-label">면세</td> <td className="row-label">{t('transaction.cancel.partCancel.taxFree')}</td>
<td className="row-balance"> <td className="row-balance">
<NumericFormat <NumericFormat
value={ taxFreeAmount } value={ taxFreeAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
@@ -281,10 +283,10 @@ export const AllTransactionPartCancel = ({
</td> </td>
</tr> </tr>
<tr> <tr>
<td className="row-label">봉사료</td> <td className="row-label">{t('transaction.cancel.partCancel.serviceFee')}</td>
<td className="row-balance"> <td className="row-balance">
<NumericFormat <NumericFormat
value={ serviceAmount } value={ serviceAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>

12
src/entities/transaction/ui/billing-list.tsx
View File

@@ -2,12 +2,14 @@ import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { BillingListProps } from '../model/types'; import { BillingListProps } from '../model/types';
import { ListDateGroup } from './list-date-group'; import { ListDateGroup } from './list-date-group';
import { useTranslation } from 'react-i18next';
export const BillingList = ({ export const BillingList = ({
transactionCategory, transactionCategory,
listItems listItems
}: BillingListProps) => { }: BillingListProps) => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const { t } = useTranslation();
const getListDateGroup = () => { const getListDateGroup = () => {
let rs = []; let rs = [];
@@ -62,10 +64,10 @@ export const BillingList = ({
{ getListDateGroup() } { getListDateGroup() }
</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={ () => onClickToNavigate() } onClick={ () => onClickToNavigate() }
>결제신청</button> >{ t('transaction.list.paymentRequest') }</button>
</div> </div>
</> </>
); );

44
src/entities/transaction/ui/cash-receipt-hand-written-issuance-step1.tsx
View File

@@ -4,6 +4,7 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout'; import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
import { CashReceiptPurposeType } from '../model/types'; import { CashReceiptPurposeType } from '../model/types';
import { PatternFormat } from 'react-number-format'; import { PatternFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
export interface CashReceiptHandWrittenIssuanceStep1Props { export interface CashReceiptHandWrittenIssuanceStep1Props {
businessNumber?: string; businessNumber?: string;
@@ -38,19 +39,20 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
setEmail, setEmail,
setPhoneNumber setPhoneNumber
}: CashReceiptHandWrittenIssuanceStep1Props) => { }: CashReceiptHandWrittenIssuanceStep1Props) => {
const { t } = useTranslation();
const { navigate } = useNavigate(); const { navigate } = useNavigate();
useSetOnBack(() => { useSetOnBack(() => {
navigate(PATHS.transaction.cashReceipt.list); navigate(PATHS.transaction.cashReceipt.list);
}); });
return ( return (
<> <>
<h2 className="issue-title">발행 정보 입력</h2> <h2 className="issue-title">{t('transaction.handWrittenIssuance.step1Title')}</h2>
<div className="issue-form"> <div className="issue-form">
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">사업자 번호</div> <div className="issue-label">{t('transaction.handWrittenIssuance.businessNumber')}</div>
<div className="issue-field"> <div className="issue-field">
<input <input
className="error" className="error"
type="text" type="text"
value={ businessNumber } value={ businessNumber }
@@ -60,49 +62,49 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
</div> </div>
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">용도</div> <div className="issue-label">{t('transaction.fields.purpose')}</div>
<div className="issue-field"> <div className="issue-field">
<div className="seg-buttons"> <div className="seg-buttons">
<button <button
className={ `btn-40 ${(purposeType === CashReceiptPurposeType.INCOME_DEDUCTION)? 'btn-blue': 'btn-white'}` } className={ `btn-40 ${(purposeType === CashReceiptPurposeType.INCOME_DEDUCTION)? 'btn-blue': 'btn-white'}` }
type="button" type="button"
onClick={ () => setPurposeType(CashReceiptPurposeType.INCOME_DEDUCTION) } onClick={ () => setPurposeType(CashReceiptPurposeType.INCOME_DEDUCTION) }
>소득공제</button> >{t('transaction.handWrittenIssuance.incomeDeduction')}</button>
<button <button
className={ `btn-40 ${(purposeType === CashReceiptPurposeType.EXPENSE_PROOF)? 'btn-blue': 'btn-white'}` } className={ `btn-40 ${(purposeType === CashReceiptPurposeType.EXPENSE_PROOF)? 'btn-blue': 'btn-white'}` }
type="button" type="button"
onClick={ () => setPurposeType(CashReceiptPurposeType.EXPENSE_PROOF) } onClick={ () => setPurposeType(CashReceiptPurposeType.EXPENSE_PROOF) }
>지출증빙</button> >{t('transaction.handWrittenIssuance.expenseProof')}</button>
</div> </div>
</div> </div>
</div> </div>
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">상품명</div> <div className="issue-label">{t('transaction.fields.productName')}</div>
<div className="issue-field"> <div className="issue-field">
<input <input
type="text" type="text"
placeholder="상품명" placeholder={t('transaction.handWrittenIssuance.productNamePlaceholder')}
value={ productName } value={ productName }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value) } onChange={ (e: ChangeEvent<HTMLInputElement>) => setProductName(e.target.value) }
/> />
</div> </div>
</div> </div>
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">구매자</div> <div className="issue-label">{t('transaction.fields.buyer')}</div>
<div className="issue-field"> <div className="issue-field">
<input <input
type="text" type="text"
placeholder="구매자명" placeholder={t('transaction.handWrittenIssuance.buyerNamePlaceholder')}
value={ buyerName } value={ buyerName }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value) } onChange={ (e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value) }
/> />
</div> </div>
</div> </div>
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">발행번호</div> <div className="issue-label">{t('transaction.fields.issueNumber')}</div>
<div className="issue-field"> <div className="issue-field">
<PatternFormat <PatternFormat
placeholder="사업자번호 OR 휴대폰번호" placeholder={t('transaction.handWrittenIssuance.issueNumberPlaceholder')}
value={ issueNumber } value={ issueNumber }
valueIsNumericString valueIsNumericString
format="###########" format="###########"
@@ -111,21 +113,21 @@ export const CashReceiptHandWrittenIssuanceStep1 = ({
</div> </div>
</div> </div>
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">이메일 주소</div> <div className="issue-label">{t('account.emailAddress')}</div>
<div className="issue-field"> <div className="issue-field">
<input <input
type="email" type="email"
placeholder="TEST123@nicepay.com" placeholder={t('transaction.handWrittenIssuance.emailPlaceholder')}
value={ email } value={ email }
onChange={ (e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value) } onChange={ (e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value) }
/> />
</div> </div>
</div> </div>
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">전화번호</div> <div className="issue-label">{t('account.phoneNumber')}</div>
<div className="issue-field"> <div className="issue-field">
<PatternFormat <PatternFormat
placeholder="01012345678" placeholder={t('transaction.handWrittenIssuance.phoneNumberPlaceholder')}
value={ phoneNumber } value={ phoneNumber }
valueIsNumericString valueIsNumericString
format="###########" format="###########"

21
src/entities/transaction/ui/cash-receipt-hand-written-issuance-step2.tsx
View File

@@ -2,6 +2,7 @@ import { ChangeEvent } from 'react';
import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout'; import { useSetOnBack } from '@/widgets/sub-layout/use-sub-layout';
import { ProcessStep } from '../model/types'; import { ProcessStep } from '../model/types';
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
import { useTranslation } from 'react-i18next';
export interface CashReceiptHandWrittenIssuanceStep2Props { export interface CashReceiptHandWrittenIssuanceStep2Props {
setProcessStep: (processStep: ProcessStep) => void; setProcessStep: (processStep: ProcessStep) => void;
@@ -31,17 +32,19 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
setServiceCharge, setServiceCharge,
onClickToVatCalculate onClickToVatCalculate
}: CashReceiptHandWrittenIssuanceStep2Props) => { }: CashReceiptHandWrittenIssuanceStep2Props) => {
const { t } = useTranslation();
useSetOnBack(() => { useSetOnBack(() => {
setProcessStep(ProcessStep.One); setProcessStep(ProcessStep.One);
}); });
return ( return (
<> <>
<h2 className="issue-title">발행 금액 입력</h2> <h2 className="issue-title">{t('transaction.handWrittenIssuance.step2Title')}</h2>
<div className="issue-form"> <div className="issue-form">
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">발행금액</div> <div className="issue-label">{t('transaction.handWrittenIssuance.issueAmount')}</div>
<div className="issue-field"> <div className="issue-field">
<div className="seg-buttons"> <div className="seg-buttons">
<NumericFormat <NumericFormat
@@ -54,13 +57,13 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
className="btn-40 btn-white" className="btn-40 btn-white"
type="button" type="button"
onClick={ onClickToVatCalculate } onClick={ onClickToVatCalculate }
>VAT자동계산</button> >{t('transaction.handWrittenIssuance.vatAutoCalc')}</button>
</div> </div>
</div> </div>
</div> </div>
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">공급가액</div> <div className="issue-label">{t('transaction.fields.supplyAmount')}</div>
<div className="issue-field"> <div className="issue-field">
<NumericFormat <NumericFormat
value={ supplyAmount } value={ supplyAmount }
@@ -71,7 +74,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
</div> </div>
</div> </div>
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">VAT</div> <div className="issue-label">{t('transaction.fields.vat')}</div>
<div className="issue-field"> <div className="issue-field">
<NumericFormat <NumericFormat
value={ vatAmount } value={ vatAmount }
@@ -82,7 +85,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
</div> </div>
</div> </div>
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">면세금액</div> <div className="issue-label">{t('transaction.fields.taxFreeAmount')}</div>
<div className="issue-field"> <div className="issue-field">
<NumericFormat <NumericFormat
value={ taxFreeAmount } value={ taxFreeAmount }
@@ -93,7 +96,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
</div> </div>
</div> </div>
<div className="issue-row"> <div className="issue-row">
<div className="issue-label">봉사료</div> <div className="issue-label">{t('transaction.fields.serviceAmount')}</div>
<div className="issue-field"> <div className="issue-field">
<NumericFormat <NumericFormat
value={ serviceCharge } value={ serviceCharge }
@@ -104,7 +107,7 @@ export const CashReceiptHandWrittenIssuanceStep2 = ({
</div> </div>
</div> </div>
<div className="issue-note error"> <div className="issue-note error">
발행금액은 공급가액 VAT,면세금액, 봉사료의 총합과 같아야 합니다. {t('transaction.handWrittenIssuance.errorMessage')}
</div> </div>
</div> </div>
</> </>

12
src/entities/transaction/ui/cash-receipt-list.tsx
View File

@@ -2,12 +2,14 @@ import { PATHS } from '@/shared/constants/paths';
import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { CashReceiptListProps } from '../model/types'; import { CashReceiptListProps } from '../model/types';
import { ListDateGroup } from './list-date-group'; import { ListDateGroup } from './list-date-group';
import { useTranslation } from 'react-i18next';
export const CashReceiptList = ({ export const CashReceiptList = ({
transactionCategory, transactionCategory,
listItems listItems
}: CashReceiptListProps) => { }: CashReceiptListProps) => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const { t } = useTranslation();
const getListDateGroup = () => { const getListDateGroup = () => {
let rs = []; let rs = [];
@@ -62,10 +64,10 @@ export const CashReceiptList = ({
{ getListDateGroup() } { getListDateGroup() }
</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={ () => onClickToNavigate() } onClick={ () => onClickToNavigate() }
>수기발행</button> >{ t('transaction.list.manualIssuance') }</button>
</div> </div>
</> </>
); );

22
src/entities/transaction/ui/cash-receit-purpose-update-bottom-sheet.tsx
View File

@@ -1,6 +1,7 @@
import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant'; import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant';
import { IMAGE_ROOT } from '@/shared/constants/common'; import { IMAGE_ROOT } from '@/shared/constants/common';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
export interface CashReceitPurposeUpdateBottomSheetProps { export interface CashReceitPurposeUpdateBottomSheetProps {
bottomSheetOn: boolean; bottomSheetOn: boolean;
@@ -13,20 +14,21 @@ export const CashReceitPurposeUpdateBottomSheet = ({
setBottomSheetOn, setBottomSheetOn,
callPurposeUpdate callPurposeUpdate
}: CashReceitPurposeUpdateBottomSheetProps) => { }: CashReceitPurposeUpdateBottomSheetProps) => {
const { t } = useTranslation();
const onClickToClose = () => { const onClickToClose = () => {
setBottomSheetOn(false); setBottomSheetOn(false);
}; };
const onCliickToPurposeUpdate = () => { const onCliickToPurposeUpdate = () => {
callPurposeUpdate(); callPurposeUpdate();
}; };
return ( return (
<> <>
{ (bottomSheetOn) && { (bottomSheetOn) &&
<div className="bg-dim"></div> <div className="bg-dim"></div>
} }
<motion.div <motion.div
className="bottomsheet" className="bottomsheet"
initial="hidden" initial="hidden"
animate={ (bottomSheetOn)? 'visible': 'hidden' } animate={ (bottomSheetOn)? 'visible': 'hidden' }
@@ -35,14 +37,14 @@ export const CashReceitPurposeUpdateBottomSheet = ({
> >
<div className="bottomsheet-header"> <div className="bottomsheet-header">
<div className="bottomsheet-title"> <div className="bottomsheet-title">
<h2>현금영수증 용도 변경 안내</h2> <h2>{ t('transaction.bottomSheet.cashReceiptPurposeUpdate.title') }</h2>
<button <button
className="close-btn" className="close-btn"
type="button" type="button"
> >
<img <img
src={ IMAGE_ROOT + '/ico_close.svg' } src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기" alt={ t('common.close') }
onClick={ () => onClickToClose() } onClick={ () => onClickToClose() }
/> />
</button> </button>
@@ -51,10 +53,10 @@ export const CashReceitPurposeUpdateBottomSheet = ({
<div className="bottomsheet-content"> <div className="bottomsheet-content">
<div className="bottom-section"> <div className="bottom-section">
<p>현금영수증의 용도 변경 시 기존 발급 내역이 취소되며, 선택한 용도에 맞게 새로 발급됩니다. </p> <p>{ t('transaction.bottomSheet.cashReceiptPurposeUpdate.description') } </p>
<ul className="list-style-circle"> <ul className="list-style-circle">
<li>지출증빙용 → 소득공제용</li> <li>{ t('transaction.bottomSheet.cashReceiptPurposeUpdate.expenseToIncome') }</li>
<li>소득공제용 → 지출증빙용</li> <li>{ t('transaction.bottomSheet.cashReceiptPurposeUpdate.incomeToExpense') }</li>
</ul> </ul>
</div> </div>
</div> </div>
@@ -64,7 +66,7 @@ export const CashReceitPurposeUpdateBottomSheet = ({
className="btn-50 btn-blue flex-1" className="btn-50 btn-blue flex-1"
type="button" type="button"
onClick={ () => onCliickToPurposeUpdate() } onClick={ () => onCliickToPurposeUpdate() }
>신청</button> >{ t('transaction.submit') }</button>
</div> </div>
</motion.div> </motion.div>
</> </>

26
src/entities/transaction/ui/escrow-mail-resend-bottom-sheet.tsx
View File

@@ -1,5 +1,6 @@
import { IMAGE_ROOT } from '@/shared/constants/common'; import { IMAGE_ROOT } from '@/shared/constants/common';
import { motion } from 'framer-motion'; import { motion } from 'framer-motion';
import { useTranslation } from 'react-i18next';
export interface EscrowMailResendBottomSheetProps { export interface EscrowMailResendBottomSheetProps {
setBottomSheetOn: (bottomSheetOn: boolean) => void; setBottomSheetOn: (bottomSheetOn: boolean) => void;
@@ -12,6 +13,7 @@ export const EscrowMailResendBottomSheet = ({
bottomSheetOn, bottomSheetOn,
callMailResend callMailResend
}: EscrowMailResendBottomSheetProps) => { }: EscrowMailResendBottomSheetProps) => {
const { t } = useTranslation();
const onClickToClose = () => { const onClickToClose = () => {
setBottomSheetOn(false); setBottomSheetOn(false);
@@ -30,7 +32,7 @@ export const EscrowMailResendBottomSheet = ({
{ (bottomSheetOn) && { (bottomSheetOn) &&
<div className="bg-dim"></div> <div className="bg-dim"></div>
} }
<motion.div <motion.div
className="bottomsheet" className="bottomsheet"
initial="hidden" initial="hidden"
animate={ (bottomSheetOn)? 'visible': 'hidden' } animate={ (bottomSheetOn)? 'visible': 'hidden' }
@@ -39,14 +41,14 @@ export const EscrowMailResendBottomSheet = ({
> >
<div className="bottomsheet-header"> <div className="bottomsheet-header">
<div className="bottomsheet-title"> <div className="bottomsheet-title">
<h2>이메일 주소를 선택하세요</h2> <h2>{ t('transaction.bottomSheet.escrowMailResend.title') }</h2>
<button <button
className="close-btn" className="close-btn"
type="button" type="button"
> >
<img <img
src={ IMAGE_ROOT + '/ico_close.svg' } src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기" alt={ t('transaction.bottomSheet.escrowMailResend.close') }
onClick={ () => onClickToClose() } onClick={ () => onClickToClose() }
/> />
</button> </button>
@@ -60,24 +62,24 @@ export const EscrowMailResendBottomSheet = ({
<div className="mail-icon-bg"></div> <div className="mail-icon-bg"></div>
<img <img
src={ IMAGE_ROOT +'/ico_email.svg' } src={ IMAGE_ROOT +'/ico_email.svg' }
alt="메일" alt={ t('transaction.bottomSheet.escrowMailResend.mail') }
/> />
</div> </div>
<span className="label-text">메일로 받기</span> <span className="label-text">{ t('transaction.bottomSheet.escrowMailResend.mailLabel') }</span>
</div> </div>
<div className="email-select"> <div className="email-select">
<div className="select-wrapper"> <div className="select-wrapper">
<select> <select>
<option>선택</option> <option>{ t('transaction.bottomSheet.escrowMailResend.select') }</option>
<option>선택1</option> <option>{ t('transaction.bottomSheet.escrowMailResend.select') }1</option>
<option>선택2</option> <option>{ t('transaction.bottomSheet.escrowMailResend.select') }2</option>
</select> </select>
</div> </div>
</div> </div>
<div className="error-message"> <div className="error-message">
<p>등록된 메일 정보가 없습니다.<br />이메일 인증정보를 사용자관리 메뉴에서 추가 후 신청하세요.</p> <p>{ t('transaction.bottomSheet.escrowMailResend.errorNoEmail') }</p>
</div> </div>
</div> </div>
</div> </div>
@@ -87,7 +89,7 @@ export const EscrowMailResendBottomSheet = ({
className="btn-50 btn-blue flex-1" className="btn-50 btn-blue flex-1"
type="button" type="button"
onClick={ () => onClickToMailResend() } onClick={ () => onClickToMailResend() }
>신청</button> >{ t('transaction.submit') }</button>
</div> </div>
</motion.div> </motion.div>
</> </>

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

@@ -9,8 +9,8 @@ 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, getAllTransactionMoidTidOptionsGroup,
AllTracsactionStatusCode, getAllTransactionStatusCode,
} from '@/entities/transaction/model/contant'; } from '@/entities/transaction/model/contant';
import { import {
AllTransactionFilterProps, AllTransactionFilterProps,
@@ -80,6 +80,9 @@ export const AllTransactionFilter = ({
const [statusCodeBtns, setStatusCodeBtns] = useState<Array<Record<string, string>>>(); const [statusCodeBtns, setStatusCodeBtns] = useState<Array<Record<string, string>>>();
const moidTidOptionsGroup = getAllTransactionMoidTidOptionsGroup(t);
const allTransactionStatusCode = getAllTransactionStatusCode(t);
const onClickToClose = () => { const onClickToClose = () => {
setFilterOn(false); setFilterOn(false);
}; };
@@ -155,12 +158,12 @@ export const AllTransactionFilter = ({
}; };
const onChangeServiceCode = (val: string) => { const onChangeServiceCode = (val: string) => {
let list = AllTracsactionStatusCode.filter((value, index) => { let list = allTransactionStatusCode.filter((value, index) => {
return val === value.serviceCode; return val === value.serviceCode;
})[0]?.list; })[0]?.list;
let btns = list?.map((value, index) => { let btns = list?.map((value, index) => {
return { return {
name: value.ko, name: value.name,
value: value.code value: value.code
} }
}); });
@@ -211,7 +214,7 @@ export const AllTransactionFilter = ({
title={t('filter.orderNumberTid')} title={t('filter.orderNumberTid')}
selectValue={ filterMoidTidType } selectValue={ filterMoidTidType }
selectSetter={ setFilterMoidTidType } selectSetter={ setFilterMoidTidType }
selectOptions={ AllTransactionMoidTidOptionsGroup } selectOptions={ moidTidOptionsGroup }
inputValue={ filterMoidTidValue } inputValue={ filterMoidTidValue }
inputSetter={ setFilterMoidTidValue } inputSetter={ setFilterMoidTidValue }
></FilterSelectInput> ></FilterSelectInput>

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

@@ -9,10 +9,10 @@ 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, getBillingSearchTypeOptionsGroup,
BillingRequestStatusBtnGroup, getBillingRequestStatusBtnGroup,
BillingProcessResultBtnGroup, getBillingProcessResultBtnGroup,
BillingPaymentMethodBtnGroup getBillingPaymentMethodBtnGroup
} from '@/entities/transaction/model/contant'; } from '@/entities/transaction/model/contant';
import { import {
BillingFilterProps, BillingFilterProps,
@@ -68,6 +68,11 @@ export const BillingFilter = ({
const midOptions = useStore.getState().UserStore.selectOptionsMids; const midOptions = useStore.getState().UserStore.selectOptionsMids;
const searchTypeOptionsGroup = getBillingSearchTypeOptionsGroup(t);
const requestStatusBtnGroup = getBillingRequestStatusBtnGroup(t);
const processResultBtnGroup = getBillingProcessResultBtnGroup(t);
const paymentMethodBtnGroup = getBillingPaymentMethodBtnGroup(t);
const onClickToClose = () => { const onClickToClose = () => {
setFilterOn(false); setFilterOn(false);
}; };
@@ -131,7 +136,7 @@ export const BillingFilter = ({
title={t('filter.orderNumberTid')} title={t('filter.orderNumberTid')}
selectValue={ filterSearchType } selectValue={ filterSearchType }
selectSetter={ setFilterSearchType } selectSetter={ setFilterSearchType }
selectOptions={ BillingSearchTypeOptionsGroup } selectOptions={ searchTypeOptionsGroup }
inputValue={ searchKeyword } inputValue={ searchKeyword }
inputSetter={ setFilterSearchKeyword } inputSetter={ setFilterSearchKeyword }
></FilterSelectInput> ></FilterSelectInput>
@@ -146,19 +151,19 @@ export const BillingFilter = ({
<FilterButtonGroups <FilterButtonGroups
title={t('filter.requestStatus')} title={t('filter.requestStatus')}
activeValue={ filterRequestStatus } activeValue={ filterRequestStatus }
btnGroups={ BillingRequestStatusBtnGroup } btnGroups={ requestStatusBtnGroup }
setter={ setFilterRequestStatus } setter={ setFilterRequestStatus }
></FilterButtonGroups> ></FilterButtonGroups>
<FilterButtonGroups <FilterButtonGroups
title={t('filter.processingResult')} title={t('filter.processingResult')}
activeValue={ filterProcessResult } activeValue={ filterProcessResult }
btnGroups={ BillingProcessResultBtnGroup } btnGroups={ processResultBtnGroup }
setter={ setFilterProcessResult } setter={ setFilterProcessResult }
></FilterButtonGroups> ></FilterButtonGroups>
<FilterButtonGroups <FilterButtonGroups
title={t('filter.paymentMethod')} title={t('filter.paymentMethod')}
activeValue={ filterPaymentMethod } activeValue={ filterPaymentMethod }
btnGroups={ BillingPaymentMethodBtnGroup } btnGroups={ paymentMethodBtnGroup }
setter={ setFilterPaymentMethod } setter={ setFilterPaymentMethod }
></FilterButtonGroups> ></FilterButtonGroups>

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

@@ -8,9 +8,9 @@ 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 { import {
CashReceiptPurposeTypeBtnGroup, getCashReceiptPurposeTypeBtnGroup,
CashReceiptTransactionTypeBtnGroup, getCashReceiptTransactionTypeBtnGroup,
CashReceiptProcessResultBtnGroup getCashReceiptProcessResultBtnGroup
} from '@/entities/transaction/model/contant'; } from '@/entities/transaction/model/contant';
import { import {
CashReceiptFilterProps, CashReceiptFilterProps,
@@ -64,6 +64,10 @@ export const CashReceiptFilter = ({
const midOptions = useStore.getState().UserStore.selectOptionsMids; const midOptions = useStore.getState().UserStore.selectOptionsMids;
const purposeTypeBtnGroup = getCashReceiptPurposeTypeBtnGroup(t);
const transactionTypeBtnGroup = getCashReceiptTransactionTypeBtnGroup(t);
const processResultBtnGroup = getCashReceiptProcessResultBtnGroup(t);
const onClickToClose = () => { const onClickToClose = () => {
setFilterOn(false); setFilterOn(false);
}; };
@@ -130,19 +134,19 @@ export const CashReceiptFilter = ({
<FilterButtonGroups <FilterButtonGroups
title={t('filter.purpose')} title={t('filter.purpose')}
activeValue={ filterPurposeType } activeValue={ filterPurposeType }
btnGroups={ CashReceiptPurposeTypeBtnGroup } btnGroups={ purposeTypeBtnGroup }
setter={ setFilterPurposeType } setter={ setFilterPurposeType }
></FilterButtonGroups> ></FilterButtonGroups>
<FilterButtonGroups <FilterButtonGroups
title={t('filter.transactionCategory')} title={t('filter.transactionCategory')}
activeValue={ filterTransactionType } activeValue={ filterTransactionType }
btnGroups={ CashReceiptTransactionTypeBtnGroup } btnGroups={ transactionTypeBtnGroup }
setter={ setFilterTransactionType } setter={ setFilterTransactionType }
></FilterButtonGroups> ></FilterButtonGroups>
<FilterButtonGroups <FilterButtonGroups
title={t('filter.progressStatus')} title={t('filter.progressStatus')}
activeValue={ filterProcessResult } activeValue={ filterProcessResult }
btnGroups={ CashReceiptProcessResultBtnGroup } btnGroups={ processResultBtnGroup }
setter={ setFilterProcessResult } setter={ setFilterProcessResult }
></FilterButtonGroups> ></FilterButtonGroups>
<FilterSelectInput <FilterSelectInput

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

@@ -9,9 +9,9 @@ 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, getEscrowDeliveryStatusBtnGroup,
EscrowSettlementStatusBtnGroup, getEscrowSettlementStatusBtnGroup,
EscrowSearchTypeOptionsGroup getEscrowSearchTypeOptionsGroup
} from '@/entities/transaction/model/contant'; } from '@/entities/transaction/model/contant';
import { import {
EscrowFilterProps, EscrowFilterProps,
@@ -62,7 +62,11 @@ export const EscrowFilter = ({
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 searchTypeOptionsGroup = getEscrowSearchTypeOptionsGroup(t);
const deliveryStatusBtnGroup = getEscrowDeliveryStatusBtnGroup(t);
const settlementStatusBtnGroup = getEscrowSettlementStatusBtnGroup(t);
const onClickToClose = () => { const onClickToClose = () => {
setFilterOn(false); setFilterOn(false);
}; };
@@ -125,7 +129,7 @@ export const EscrowFilter = ({
title={t('filter.orderNumberTid')} title={t('filter.orderNumberTid')}
selectValue={ filterSearchType } selectValue={ filterSearchType }
selectSetter={ setSearchType } selectSetter={ setSearchType }
selectOptions={ EscrowSearchTypeOptionsGroup } selectOptions={ searchTypeOptionsGroup }
inputValue={ searchKeyword } inputValue={ searchKeyword }
inputSetter={ setSearchKeyword } inputSetter={ setSearchKeyword }
></FilterSelectInput> ></FilterSelectInput>
@@ -140,13 +144,13 @@ export const EscrowFilter = ({
<FilterButtonGroups <FilterButtonGroups
title={t('filter.deliveryStatus')} title={t('filter.deliveryStatus')}
activeValue={ filterDeliveryStatus } activeValue={ filterDeliveryStatus }
btnGroups={ EscrowDeliveryStatusBtnGroup } btnGroups={ deliveryStatusBtnGroup }
setter={ setFilterDeliveryStatus } setter={ setFilterDeliveryStatus }
></FilterButtonGroups> ></FilterButtonGroups>
<FilterButtonGroups <FilterButtonGroups
title={t('filter.paymentMethod')} title={t('filter.paymentMethod')}
activeValue={ filterSettlementStatus } activeValue={ filterSettlementStatus }
btnGroups={ EscrowSettlementStatusBtnGroup } btnGroups={ settlementStatusBtnGroup }
setter={ setFilterSettlementStatus } setter={ setFilterSettlementStatus }
></FilterButtonGroups> ></FilterButtonGroups>

31
src/entities/transaction/ui/list-item.tsx
View File

@@ -4,7 +4,8 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { ListItemProps, TransactionCategory } from '../model/types'; import { ListItemProps, TransactionCategory } from '../model/types';
import moment from 'moment'; import moment from 'moment';
import { useStore } from '@/shared/model/store'; import { useStore } from '@/shared/model/store';
import { AllTracsactionStatusCode } from '../model/contant'; import { getAllTransactionStatusCode } from '../model/contant';
import { useTranslation } from 'react-i18next';
export const ListItem = ({ export const ListItem = ({
transactionCategory, transactionCategory,
@@ -12,12 +13,13 @@ export const ListItem = ({
installmentMonth, serviceName, serviceCode, installmentMonth, serviceName, serviceCode,
serviceDetailName, goodsAmount, serviceDetailName, goodsAmount,
amount, customerName, issueNumber, approvalNumber, amount, customerName, issueNumber, approvalNumber,
paymentMethod, processResult, transactionType, paymentMethod, processResult, transactionType,
transactionDateTime, transactionAmount, transactionDateTime, transactionAmount,
deliveryStatus, settlementStatus, deliveryStatus, settlementStatus,
cancelStatus, billKey, orderNumber cancelStatus, billKey, orderNumber
}: ListItemProps) => { }: ListItemProps) => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const { t } = useTranslation();
const getItemClass = () => { const getItemClass = () => {
let rs = ''; let rs = '';
if(statusCode === '0'){ if(statusCode === '0'){
@@ -78,7 +80,7 @@ export const ListItem = ({
}); });
} }
else{ else{
alert('pageType 이 존재하지 않습니다.'); alert(t('common.error'));
} }
}; };
@@ -127,15 +129,16 @@ export const ListItem = ({
const getStatusName = () => { const getStatusName = () => {
let str; let str;
if(transactionCategory === TransactionCategory.AllTransaction){ if(transactionCategory === TransactionCategory.AllTransaction){
Loop1: const allTransactionStatusCode = getAllTransactionStatusCode(t);
for(let i=0;i<AllTracsactionStatusCode.length;i++){ Loop1:
if(serviceCode === AllTracsactionStatusCode[i]?.serviceCode){ for(let i=0;i<allTransactionStatusCode.length;i++){
let list = AllTracsactionStatusCode[i]?.list; if(serviceCode === allTransactionStatusCode[i]?.serviceCode){
let list = allTransactionStatusCode[i]?.list;
if(!!list){ if(!!list){
Loop2: Loop2:
for(let j=0;j<list.length;j++){ for(let j=0;j<list.length;j++){
if(list[j]?.code === statusCode){ if(list[j]?.code === statusCode){
str = list[j]?.ko; str = list[j]?.name;
break Loop1; break Loop1;
} }
} }
@@ -163,7 +166,7 @@ export const ListItem = ({
(!!installmentMonth && parseInt(installmentMonth) > 1) && (!!installmentMonth && parseInt(installmentMonth) > 1) &&
<> <>
<span className="separator">|</span> <span className="separator">|</span>
<span>{ installmentMonth }개월 할부</span> <span>{ t('transaction.fields.installmentMonthly', { count: parseInt(installmentMonth) }) }</span>
</> </>
} }
</div> </div>
@@ -196,7 +199,7 @@ export const ListItem = ({
(!!installmentMonth && parseInt(installmentMonth) > 1) && (!!installmentMonth && parseInt(installmentMonth) > 1) &&
<> <>
<span className="separator">|</span> <span className="separator">|</span>
<span>{ installmentMonth }개월 할부</span> <span>{ t('transaction.fields.installmentMonthly', { count: parseInt(installmentMonth) }) }</span>
</> </>
} }
</div> </div>
@@ -231,11 +234,11 @@ export const ListItem = ({
</div> </div>
<div className="transaction-amount"> <div className="transaction-amount">
<NumericFormat <NumericFormat
value={ goodsAmount || amount || transactionAmount } value={ goodsAmount || amount || transactionAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
suffix={ '원' } suffix={ t('home.currencyWon') }
></NumericFormat> ></NumericFormat>
</div> </div>
</div> </div>
</> </>

26
src/entities/transaction/ui/section/all-transaction-cancel-section-bank-group.tsx
View File

@@ -1,3 +1,4 @@
import { useTranslation } from 'react-i18next';
import { useStore } from "@/shared/model/store"; import { useStore } from "@/shared/model/store";
import { ChangeEvent, useState } from "react"; import { ChangeEvent, useState } from "react";
@@ -17,6 +18,7 @@ export const AllTransactionCancelSectionBankGroup = ({
accountHolder, accountHolder,
setAccountHolder setAccountHolder
}: AllTransactionCancelSectionBankGroupProps ) => { }: AllTransactionCancelSectionBankGroupProps ) => {
const { t } = useTranslation();
let bankList = useStore.getState().CommonStore.virtualBankList; let bankList = useStore.getState().CommonStore.virtualBankList;
bankList = bankList.filter((value, index) => value.code1 !== '****'); bankList = bankList.filter((value, index) => value.code1 !== '****');
@@ -37,14 +39,14 @@ export const AllTransactionCancelSectionBankGroup = ({
return ( return (
<> <>
<div className="form-group"> <div className="form-group">
<label className="form-label">은행</label> <label className="form-label">{t('transaction.fields.bank')}</label>
<div className="input-wrapper wid-100"> <div className="input-wrapper wid-100">
<select <select
className="wid-100 align-right" className="wid-100 align-right"
value={ bankCode } value={ bankCode }
onChange={ (e: ChangeEvent<HTMLSelectElement>) => onChangeNewBankCode(e.target.value) } onChange={ (e: ChangeEvent<HTMLSelectElement>) => onChangeNewBankCode(e.target.value) }
> >
<option value="">선택</option> <option value="">{t('transaction.cancel.bankGroup.select')}</option>
{ bankList.map((value, index) => ( { bankList.map((value, index) => (
<option value={ value.code1 }>{ value.desc1 }</option> <option value={ value.code1 }>{ value.desc1 }</option>
)) ))
@@ -54,11 +56,11 @@ export const AllTransactionCancelSectionBankGroup = ({
</div> </div>
<div className="form-group"> <div className="form-group">
<label className="form-label">계좌번호</label> <label className="form-label">{t('transaction.fields.accountNo')}</label>
<div className="input-wrapper wid-100"> <div className="input-wrapper wid-100">
<input <input
className="form-input wid-100" className="form-input wid-100"
type="text" type="text"
value={ newAccountNo } value={ newAccountNo }
onChange={ (e: ChangeEvent<HTMLInputElement>) => onChangeNewAccountNo(e.target.value) } onChange={ (e: ChangeEvent<HTMLInputElement>) => onChangeNewAccountNo(e.target.value) }
/> />
@@ -66,11 +68,11 @@ export const AllTransactionCancelSectionBankGroup = ({
</div> </div>
<div className="form-group"> <div className="form-group">
<label className="form-label">예금주</label> <label className="form-label">{t('transaction.fields.accountHolder')}</label>
<div className="input-wrapper wid-100"> <div className="input-wrapper wid-100">
<input <input
className="form-input wid-100" className="form-input wid-100"
type="text" type="text"
value={ newAccountHolder } value={ newAccountHolder }
onChange={ (e: ChangeEvent<HTMLInputElement>) => onChangeNewAccountHolder(e.target.value) } onChange={ (e: ChangeEvent<HTMLInputElement>) => onChangeNewAccountHolder(e.target.value) }
/> />
@@ -78,7 +80,7 @@ export const AllTransactionCancelSectionBankGroup = ({
</div> </div>
<div className="notice-text wid-100"> <div className="notice-text wid-100">
<p>환불은 입력한 계좌정보로 별도 확인 절차없이 지급됩니다.<br />입력 정보를 한번 더 확인해 주세요.</p> <p>{t('transaction.cancel.bankGroup.notice')}</p>
</div> </div>
</> </>
); );

12
src/entities/transaction/ui/section/all-transaction-cancel-section-password-group.tsx
View File

@@ -1,3 +1,4 @@
import { useTranslation } from 'react-i18next';
import { ChangeEvent, useState } from "react"; import { ChangeEvent, useState } from "react";
export interface AllTransactionCancelSectionPasswordGroupProps { export interface AllTransactionCancelSectionPasswordGroupProps {
@@ -11,6 +12,7 @@ export const AllTransactionCancelSectionPasswordGroup = ({
setCancelPassword, setCancelPassword,
requestSuccess requestSuccess
}: AllTransactionCancelSectionPasswordGroupProps) => { }: AllTransactionCancelSectionPasswordGroupProps) => {
const { t } = useTranslation();
const [newCancelPassword, setNewCancelPassword] = useState<string>(cancelPassword); const [newCancelPassword, setNewCancelPassword] = useState<string>(cancelPassword);
@@ -21,18 +23,18 @@ export const AllTransactionCancelSectionPasswordGroup = ({
return ( return (
<> <>
<div className="form-group"> <div className="form-group">
<label className="form-label">취소 비밀번호</label> <label className="form-label">{t('transaction.cancel.passwordGroup.cancelPassword')}</label>
<div className="input-wrapper wid-100 error"> <div className="input-wrapper wid-100 error">
<input <input
className="wid-100 align-right" className="wid-100 align-right"
type="password" type="password"
value={ newCancelPassword } value={ newCancelPassword }
onChange={ (e: ChangeEvent<HTMLInputElement>) => onChangeNewCancelPassword(e.target.value) } onChange={ (e: ChangeEvent<HTMLInputElement>) => onChangeNewCancelPassword(e.target.value) }
/> />
</div> </div>
</div> </div>
{ !requestSuccess && { !requestSuccess &&
<div className="error-msg">비밀번호 불일치</div> <div className="error-msg">{t('transaction.cancel.passwordGroup.passwordMismatch')}</div>
} }
</> </>
); );

127
src/entities/transaction/ui/section/amount-info-section.tsx
View File

@@ -1,4 +1,5 @@
import moment from 'moment'; import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { useDownloadConfirmationMutation } from '../../api/use-download-confirmation-mutation'; import { useDownloadConfirmationMutation } from '../../api/use-download-confirmation-mutation';
@@ -7,7 +8,7 @@ import { SlideDown } from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css'; import 'react-slidedown/lib/slidedown.css';
export const AmountInfoSection = ({ export const AmountInfoSection = ({
transactionCategory, transactionCategory,
amountInfo, amountInfo,
isOpen, isOpen,
tid, tid,
@@ -15,23 +16,24 @@ export const AmountInfoSection = ({
onClickToOpenInfo, onClickToOpenInfo,
canDownloadReceipt canDownloadReceipt
}: InfoSectionProps) => { }: InfoSectionProps) => {
const { t } = useTranslation();
const { mutateAsync: downloadConfirmation } = useDownloadConfirmationMutation(); const { mutateAsync: downloadConfirmation } = useDownloadConfirmationMutation();
let newAmountInfo: Record<string, any> | undefined = amountInfo; let newAmountInfo: Record<string, any> | undefined = amountInfo;
const subItems: Record<string, Record<string, string>> = { const subItems: Record<string, Record<string, string>> = {
mid: {name: 'MID', type: 'string'}, mid: {name: t('transaction.fields.mid'), type: 'string'},
transactionRequestAmount: {name: '거래요청금액', type: 'number'}, transactionRequestAmount: {name: t('transaction.fields.transactionRequestAmount'), type: 'number'},
transactionAmount: {name: '거래금액', type: 'number'}, transactionAmount: {name: t('transaction.fields.transactionAmount'), type: 'number'},
pointAmount: {name: '포인트금액', type: 'number'}, pointAmount: {name: t('transaction.fields.pointAmount'), type: 'number'},
couponAmount: {name: '쿠폰금액', type: 'number'}, couponAmount: {name: t('transaction.fields.couponAmount'), type: 'number'},
escrowFee: {name: '에스크로수수료', type: 'number'}, escrowFee: {name: t('transaction.fields.escrowFee'), type: 'number'},
kakaoMoneyAmount: {name: '카카오머니', type: 'number'}, kakaoMoneyAmount: {name: t('transaction.fields.kakaoMoneyAmount'), type: 'number'},
kakaoPointAmount: {name: '카카오포인트', type: 'number'}, kakaoPointAmount: {name: t('transaction.fields.kakaoPointAmount'), type: 'number'},
kakaoDiscountAmount: {name: '카카오 즉시할인', type: 'number'}, kakaoDiscountAmount: {name: t('transaction.fields.kakaoDiscountAmount'), type: 'number'},
naverPointAmount: {name: '네이버 포인트', type: 'number'}, naverPointAmount: {name: t('transaction.fields.naverPointAmount'), type: 'number'},
tossMoneyAmount: {name: '토스머니', type: 'number'}, tossMoneyAmount: {name: t('transaction.fields.tossMoneyAmount'), type: 'number'},
tossDiscountAmount: {name: '토스할인', type: 'number'}, tossDiscountAmount: {name: t('transaction.fields.tossDiscountAmount'), type: 'number'},
paycoPointAmount: {name: '페이코포인트', type: 'number'}, paycoPointAmount: {name: t('transaction.fields.paycoPointAmount'), type: 'number'},
paycoCouponAmount: {name: '페이코쿠폰', type: 'number'}, paycoCouponAmount: {name: t('transaction.fields.paycoCouponAmount'), type: 'number'},
}; };
const openSubItems: Record<string, Array<string>> = { const openSubItems: Record<string, Array<string>> = {
@@ -134,13 +136,14 @@ export const AmountInfoSection = ({
let k = openSubItems[serviceCode][i]; let k = openSubItems[serviceCode][i];
if(!!k){ if(!!k){
let name = subItems[k]?.name; let name = subItems[k]?.name;
if(serviceCode === '01'){ if(serviceCode === '01'){
if(k === 'transactionAmount'){ if(k === 'transactionAmount'){
name = '신용카드금액' name = t('transaction.fields.cardAmount')
} }
if(k === 'transactionRequestAmount'){ if(k === 'transactionRequestAmount'){
name = '승인요청금액'; name = t('transaction.fields.approvalRequestAmount');
} }
} }
@@ -223,12 +226,12 @@ export const AmountInfoSection = ({
} }
<span className="unit">원</span> <span className="unit">원</span>
</div> </div>
<button <button
className="chip-btn" className="chip-btn"
type="button" type="button"
onClick={ () => onClickToSetShowInfo() } onClick={ () => onClickToSetShowInfo() }
> >
금액상세 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow> {t('transaction.sections.amountDetail')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</button> </button>
</div> </div>
@@ -239,43 +242,43 @@ export const AmountInfoSection = ({
{ (transactionCategory === TransactionCategory.AllTransaction) && { (transactionCategory === TransactionCategory.AllTransaction) &&
subLi() subLi()
} }
{ (transactionCategory === TransactionCategory.CashReceipt) && { (transactionCategory === TransactionCategory.CashReceipt) &&
<> <>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;공급가액</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.supplyAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.supplyAmount } value={ amountInfo?.supplyAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</span> </span>
</li> </li>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;VAT</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.vat')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.vat } value={ amountInfo?.vat }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</span> </span>
</li> </li>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;봉사료</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.serviceAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.serviceAmount } value={ amountInfo?.serviceAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</span> </span>
</li> </li>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;면세금액</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.taxFreeAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.taxFreeAmount } value={ amountInfo?.taxFreeAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
@@ -283,47 +286,47 @@ export const AmountInfoSection = ({
</li> </li>
</> </>
} }
{ (transactionCategory === TransactionCategory.Escrow) && { (transactionCategory === TransactionCategory.Escrow) &&
<> <>
{ (serviceCode === '02' || serviceCode === '03') && { (serviceCode === '02' || serviceCode === '03') &&
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;거래금액</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.transactionAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.transactionAmount } value={ amountInfo?.transactionAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</span> </span>
</li> </li>
} }
{ (serviceCode === '01') && { (serviceCode === '01') &&
<> <>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;신용카드금액</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.cardAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.cardAmount } value={ amountInfo?.cardAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</span> </span>
</li> </li>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;포인트금액</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.pointAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.pointAmount } value={ amountInfo?.pointAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</span> </span>
</li> </li>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;쿠폰금액</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.couponAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.couponAmount } value={ amountInfo?.couponAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
@@ -333,10 +336,10 @@ export const AmountInfoSection = ({
} }
{ (serviceCode === '01' || serviceCode === '02') && { (serviceCode === '01' || serviceCode === '02') &&
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;에스크로수수료</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.escrowFee')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.escrowFee } value={ amountInfo?.escrowFee }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
@@ -348,30 +351,30 @@ export const AmountInfoSection = ({
{ (amountInfo?.simplePaymentServiceCode === 'E016') && { (amountInfo?.simplePaymentServiceCode === 'E016') &&
<> <>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;카카오머니</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.kakaoMoneyAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.multiPointAmount } value={ amountInfo?.multiPointAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</span> </span>
</li> </li>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;카카오포인트</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.kakaoPointAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.multiCouponAmount } value={ amountInfo?.multiCouponAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</span> </span>
</li> </li>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;카카오즉시할인</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.kakaoDiscountAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.kakaoDiscountAmount } value={ amountInfo?.kakaoDiscountAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
@@ -381,10 +384,10 @@ export const AmountInfoSection = ({
} }
{ (amountInfo?.simplePaymentServiceCode === 'E020') && { (amountInfo?.simplePaymentServiceCode === 'E020') &&
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;네이버포인트</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.naverPointAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.multiPointAmount } value={ amountInfo?.multiPointAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
@@ -394,20 +397,20 @@ export const AmountInfoSection = ({
{ (amountInfo?.simplePaymentServiceCode === 'E025') && { (amountInfo?.simplePaymentServiceCode === 'E025') &&
<> <>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;토스머니</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.tossMoneyAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.multiPointAmount } value={ amountInfo?.multiPointAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</span> </span>
</li> </li>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;토스할인</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.tossDiscountAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.tossDiscountAmount } value={ amountInfo?.tossDiscountAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
@@ -418,20 +421,20 @@ export const AmountInfoSection = ({
{ (amountInfo?.simplePaymentServiceCode === 'E015') && { (amountInfo?.simplePaymentServiceCode === 'E015') &&
<> <>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;페이코포인트</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.paycoPointAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.multiPointAmount } value={ amountInfo?.multiPointAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</span> </span>
</li> </li>
<li className="amount-item"> <li className="amount-item">
<span className="label">·&nbsp;&nbsp;페이코쿠폰</span> <span className="label">·&nbsp;&nbsp;{t('transaction.fields.paycoCouponAmount')}</span>
<span className="value"> <span className="value">
<NumericFormat <NumericFormat
value={ amountInfo?.multiCouponAmount } value={ amountInfo?.multiCouponAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
@@ -460,13 +463,13 @@ export const AmountInfoSection = ({
} }
<div className="txn-doc"> <div className="txn-doc">
{ {
(transactionCategory === TransactionCategory.CashReceipt) && (transactionCategory === TransactionCategory.CashReceipt) &&
!!canDownloadReceipt && !!canDownloadReceipt &&
<button <button
className="doc-btn" className="doc-btn"
type="button" type="button"
onClick={ () => onClickToDownloadConfirmation() } onClick={ () => onClickToDownloadConfirmation() }
>거래 확인서</button> >{t('transaction.fields.transactionConfirmation')}</button>
} }
</div> </div>
</div> </div>

38
src/entities/transaction/ui/section/billing-info-section.tsx
View File

@@ -1,32 +1,34 @@
import moment from 'moment'; import moment from 'moment';
import { InfoSectionProps } from '../../model/types'; import { InfoSectionProps } from '../../model/types';
import { useTranslation } from 'react-i18next';
export const BillingInfoSection = ({ export const BillingInfoSection = ({
billingInfo, billingInfo,
}: InfoSectionProps) => { }: InfoSectionProps) => {
const { t } = useTranslation();
const getInstallmentMonth = () => { const getInstallmentMonth = () => {
let rs = []; let rs = [];
if((!!billingInfo?.installmentMonth && parseInt(billingInfo?.installmentMonth) > 1)){ if((!!billingInfo?.installmentMonth && parseInt(billingInfo?.installmentMonth) > 1)){
rs.push( rs.push(
<li <li
key={ `key-installmentMonth`} key={ `key-installmentMonth`}
className="kv-row" className="kv-row"
> >
<span className="k">할부개월</span> <span className="k">{ t('transaction.fields.installmentMonth') }</span>
<span className="v">{ billingInfo?.installmentMonth }개월 할부</span> <span className="v">{ t('transaction.fields.installmentMonthly', { count: parseInt(billingInfo?.installmentMonth || '0') }) }</span>
</li> </li>
); );
} }
else{ else{
rs.push( rs.push(
<li <li
key={ `key-installmentMonth`} key={ `key-installmentMonth`}
className="kv-row" className="kv-row"
> >
<span className="k">할부개월</span> <span className="k">{ t('transaction.fields.installmentMonth') }</span>
<span className="v">일시불</span> <span className="v">{ t('transaction.fields.lumpSum') }</span>
</li> </li>
); );
} }
return rs; return rs;
@@ -34,43 +36,43 @@ export const BillingInfoSection = ({
return ( return (
<> <>
<div className="txn-section"> <div className="txn-section">
<div className="section-title">중요 정보</div> <div className="section-title">{ t('transaction.sections.importantInfo') }</div>
<ul className="kv-list"> <ul className="kv-list">
<li className="kv-row"> <li className="kv-row">
<span className="k">빌키</span> <span className="k">{ t('transaction.fields.billKey') }</span>
<span className="v">{ billingInfo?.billKey }</span> <span className="v">{ billingInfo?.billKey }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">TID</span> <span className="k">{ t('transaction.fields.tid') }</span>
<span className="v">{ billingInfo?.tid }</span> <span className="v">{ billingInfo?.tid }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">주분번호</span> <span className="k">{ t('transaction.fields.orderNumber') }</span>
<span className="v">{ billingInfo?.orderNumber }</span> <span className="v">{ billingInfo?.orderNumber }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">승인번호</span> <span className="k">{ t('transaction.fields.approvalNumber') }</span>
<span className="v">{ billingInfo?.approvalNumber }</span> <span className="v">{ billingInfo?.approvalNumber }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">승인일자</span> <span className="k">{ t('transaction.fields.approvalDate') }</span>
<span className="v">{ moment(billingInfo?.approvalDate).format('YYYY.MM.DD') }</span> <span className="v">{ moment(billingInfo?.approvalDate).format('YYYY.MM.DD') }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">요청상태</span> <span className="k">{ t('transaction.fields.requestStatus') }</span>
<span className="v">{ billingInfo?.requestStatus }</span> <span className="v">{ billingInfo?.requestStatus }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">처리결과</span> <span className="k">{ t('transaction.fields.processResult') }</span>
<span className="v">{ billingInfo?.processResult }</span> <span className="v">{ billingInfo?.processResult }</span>
</li> </li>
{ getInstallmentMonth() } { getInstallmentMonth() }
<li className="kv-row"> <li className="kv-row">
<span className="k">상품명</span> <span className="k">{ t('transaction.fields.productName') }</span>
<span className="v">{ billingInfo?.productName }</span> <span className="v">{ billingInfo?.productName }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">구매자</span> <span className="k">{ t('transaction.fields.buyer') }</span>
<span className="v">{ billingInfo?.buyerName }</span> <span className="v">{ billingInfo?.buyerName }</span>
</li> </li>
</ul> </ul>

24
src/entities/transaction/ui/section/detail-info-section.tsx
View File

@@ -1,4 +1,5 @@
import moment from 'moment'; import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoSectionKeys, InfoSectionProps } from '../../model/types'; import { InfoSectionKeys, InfoSectionProps } from '../../model/types';
import { SlideDown } from 'react-slidedown'; import { SlideDown } from 'react-slidedown';
@@ -10,6 +11,7 @@ export const DetailInfoSection = ({
isOpen, isOpen,
onClickToOpenInfo onClickToOpenInfo
}: InfoSectionProps) => { }: InfoSectionProps) => {
const { t } = useTranslation();
const onClickToSetOpenInfo = () => { const onClickToSetOpenInfo = () => {
if(!!onClickToOpenInfo){ if(!!onClickToOpenInfo){
@@ -20,49 +22,49 @@ export const DetailInfoSection = ({
return ( return (
<> <>
<div className="txn-section"> <div className="txn-section">
<div <div
className="section-title with-toggle" className="section-title with-toggle"
onClick={ () => onClickToSetOpenInfo() } onClick={ () => onClickToSetOpenInfo() }
> >
상세 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow> {t('transaction.sections.detailInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div> </div>
<SlideDown className={'my-dropdown-slidedown'}> <SlideDown className={'my-dropdown-slidedown'}>
{ !!isOpen && { !!isOpen &&
<ul className="kv-list"> <ul className="kv-list">
<li className="kv-row"> <li className="kv-row">
<span className="k">취소일자</span> <span className="k">{t('transaction.fields.cancelDate')}</span>
<span className="v">{ detailInfo?.cancelDate? moment(detailInfo?.cancelDate).format('YYYY.MM.DD'): '' }</span> <span className="v">{ detailInfo?.cancelDate? moment(detailInfo?.cancelDate).format('YYYY.MM.DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">취소승인번호</span> <span className="k">{t('transaction.fields.cancelApprovalNumber')}</span>
<span className="v">{ detailInfo?.cancelApprovalNumber }</span> <span className="v">{ detailInfo?.cancelApprovalNumber }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">현금영수증</span> <span className="k">{t('transaction.fields.receiptInfo')}</span>
<span className="v">{ detailInfo?.receiptInfo }</span> <span className="v">{ detailInfo?.receiptInfo }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">TID</span> <span className="k">{t('transaction.fields.tid')}</span>
<span className="v">{ detailInfo?.tid }</span> <span className="v">{ detailInfo?.tid }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">거래ID</span> <span className="k">{t('transaction.fields.transactionId')}</span>
<span className="v">{ detailInfo?.merchantTid }</span> <span className="v">{ detailInfo?.merchantTid }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">서브몰명</span> <span className="k">{t('transaction.fields.subMallName')}</span>
<span className="v">{ detailInfo?.subMallName }</span> <span className="v">{ detailInfo?.subMallName }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">서브몰 사업자 번호</span> <span className="k">{t('transaction.fields.subMallBusinessNumber')}</span>
<span className="v">{ detailInfo?.subMallBusinessNumber }</span> <span className="v">{ detailInfo?.subMallBusinessNumber }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">발행경로</span> <span className="k">{t('transaction.fields.issueChannel')}</span>
<span className="v">{ detailInfo?.issueChannel }</span> <span className="v">{ detailInfo?.issueChannel }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">실패사유</span> <span className="k">{t('transaction.fields.failureReason')}</span>
<span className="v">{ detailInfo?.failureReason }</span> <span className="v">{ detailInfo?.failureReason }</span>
</li> </li>
</ul> </ul>

26
src/entities/transaction/ui/section/escrow-info-section.tsx
View File

@@ -1,4 +1,5 @@
import moment from 'moment'; import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoSectionKeys, InfoSectionProps } from '../../model/types'; import { InfoSectionKeys, InfoSectionProps } from '../../model/types';
import { SlideDown } from 'react-slidedown'; import { SlideDown } from 'react-slidedown';
@@ -9,6 +10,7 @@ export const EscrowInfoSection = ({
isOpen, isOpen,
onClickToOpenInfo onClickToOpenInfo
}: InfoSectionProps) => { }: InfoSectionProps) => {
const { t } = useTranslation();
const onClickToSetOpenInfo = () => { const onClickToSetOpenInfo = () => {
if(!!onClickToOpenInfo){ if(!!onClickToOpenInfo){
@@ -19,53 +21,53 @@ export const EscrowInfoSection = ({
return ( return (
<> <>
<div className="txn-section"> <div className="txn-section">
<div <div
className="section-title with-toggle" className="section-title with-toggle"
onClick={ () => onClickToSetOpenInfo() } onClick={ () => onClickToSetOpenInfo() }
> >
에스크로 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow> {t('transaction.sections.escrowInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div> </div>
<SlideDown className={'my-dropdown-slidedown'}> <SlideDown className={'my-dropdown-slidedown'}>
{ !!isOpen && { !!isOpen &&
<ul className="kv-list"> <ul className="kv-list">
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;배송상태</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.deliveryStatus')}</span>
<span className="v">{ escrowInfo?.deliveryStatus }</span> <span className="v">{ escrowInfo?.deliveryStatus }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;배송등록</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.deliveryRegistration')}</span>
<span className="v">{ escrowInfo?.deliveryRegistrationDate? moment(escrowInfo?.deliveryRegistrationDate).format('YYYY.MM.DD'): '' }</span> <span className="v">{ escrowInfo?.deliveryRegistrationDate? moment(escrowInfo?.deliveryRegistrationDate).format('YYYY.MM.DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;배송완료</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.deliveryComplete')}</span>
<span className="v">{ escrowInfo?.deliveryCompleteDate? moment(escrowInfo?.deliveryCompleteDate).format('YYYY.MM.DD'): '' }</span> <span className="v">{ escrowInfo?.deliveryCompleteDate? moment(escrowInfo?.deliveryCompleteDate).format('YYYY.MM.DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;구매확인</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.purchaseConfirm')}</span>
<span className="v">{ escrowInfo?.purchaseConfirmDate? moment(escrowInfo?.purchaseConfirmDate).format('YYYY.MM.DD'): '' }</span> <span className="v">{ escrowInfo?.purchaseConfirmDate? moment(escrowInfo?.purchaseConfirmDate).format('YYYY.MM.DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;구매거절</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.purchaseReject')}</span>
<span className="v">{ escrowInfo?.purchaseRejectReason }</span> <span className="v">{ escrowInfo?.purchaseRejectReason }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;거절사유</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.rejectReason')}</span>
<span className="v">{ escrowInfo?.rejectReason }</span> <span className="v">{ escrowInfo?.rejectReason }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;에스크로인증번호</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.escrowCertNumber')}</span>
<span className="v">{ escrowInfo?.escrowCertNumber }</span> <span className="v">{ escrowInfo?.escrowCertNumber }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;택배사</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.deliveryCompany')}</span>
<span className="v">{ escrowInfo?.deliveryCompany }</span> <span className="v">{ escrowInfo?.deliveryCompany }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;운송장번호</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.trackingNumber')}</span>
<span className="v">{ escrowInfo?.trackingNumber }</span> <span className="v">{ escrowInfo?.trackingNumber }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;배송주소</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.deliveryAddress')}</span>
<span className="v">{ escrowInfo?.deliveryAddress }</span> <span className="v">{ escrowInfo?.deliveryAddress }</span>
</li> </li>
</ul> </ul>

61
src/entities/transaction/ui/section/important-info-section.tsx
View File

@@ -1,14 +1,16 @@
import moment from 'moment'; import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
import { InfoSectionProps, TransactionCategory } from '../../model/types'; import { InfoSectionProps, TransactionCategory } from '../../model/types';
import { useStore } from '@/shared/model/store'; import { useStore } from '@/shared/model/store';
import { AllTracsactionStatusCode } from '../../model/contant'; import { getAllTransactionStatusCode } from '../../model/contant';
export const ImportantInfoSection = ({ export const ImportantInfoSection = ({
transactionCategory, transactionCategory,
importantInfo, importantInfo,
serviceCode serviceCode
}: InfoSectionProps) => { }: InfoSectionProps) => {
const { t } = useTranslation();
let serviceCodes = useStore.getState().CommonStore.serviceCodes; let serviceCodes = useStore.getState().CommonStore.serviceCodes;
let serviceName = ''; let serviceName = '';
let statusName = ''; let statusName = '';
@@ -27,15 +29,16 @@ export const ImportantInfoSection = ({
const getStatusName = (serviceCode: string, statusCode: string) => { const getStatusName = (serviceCode: string, statusCode: string) => {
let str; let str;
if(transactionCategory === TransactionCategory.AllTransaction){ if(transactionCategory === TransactionCategory.AllTransaction){
Loop1: const allTransactionStatusCode = getAllTransactionStatusCode(t);
for(let i=0;i<AllTracsactionStatusCode.length;i++){ Loop1:
if(serviceCode === AllTracsactionStatusCode[i]?.serviceCode){ for(let i=0;i<allTransactionStatusCode.length;i++){
let list = AllTracsactionStatusCode[i]?.list; if(serviceCode === allTransactionStatusCode[i]?.serviceCode){
let list = allTransactionStatusCode[i]?.list;
if(!!list){ if(!!list){
Loop2: Loop2:
for(let j=0;j<list.length;j++){ for(let j=0;j<list.length;j++){
if(list[j]?.code === statusCode){ if(list[j]?.code === statusCode){
str = list[j]?.ko; str = list[j]?.name;
break Loop1; break Loop1;
} }
} }
@@ -60,15 +63,15 @@ export const ImportantInfoSection = ({
} }
const subItems: Record<string, Record<string, string>> = { const subItems: Record<string, Record<string, string>> = {
moid: {name: '주문번호', type: 'string'}, moid: {name: t('transaction.fields.orderNumber'), type: 'string'},
tid: {name: 'TID', type: 'string'}, tid: {name: t('transaction.fields.tid'), type: 'string'},
statusName: {name: '거래상태', type: 'string'}, statusName: {name: t('transaction.fields.transactionStatus'), type: 'string'},
serviceName: {name: '거래수단', type: 'string'}, serviceName: {name: t('transaction.fields.transactionMethod'), type: 'string'},
approvalDate: {name: '승인일', type: 'date'}, approvalDate: {name: t('transaction.fields.approvalDay'), type: 'date'},
transactionDate: {name: '거래일', type: 'date'}, transactionDate: {name: t('filter.date'), type: 'date'},
requestDate: {name: '요청일', type: 'date'}, requestDate: {name: t('filter.date'), type: 'date'},
cancelDate: {name: '취소일', type: 'date'}, cancelDate: {name: t('transaction.fields.cancelDate'), type: 'date'},
goodsName: {name: '상품명', type: 'string'} goodsName: {name: t('transaction.fields.productName'), type: 'string'}
}; };
const openSubItems: Record<string, Array<string>> = { const openSubItems: Record<string, Array<string>> = {
@@ -146,54 +149,54 @@ export const ImportantInfoSection = ({
return ( return (
<> <>
<div className="txn-section"> <div className="txn-section">
<div className="section-title">중요 정보</div> <div className="section-title">{t('transaction.sections.importantInfo')}</div>
<ul className="kv-list"> <ul className="kv-list">
{ (transactionCategory === TransactionCategory.AllTransaction) && { (transactionCategory === TransactionCategory.AllTransaction) &&
subLi() subLi()
} }
{ {
(transactionCategory === TransactionCategory.Escrow) && (transactionCategory === TransactionCategory.Escrow) &&
<> <>
<li className="kv-row"> <li className="kv-row">
<span className="k">주문번호</span> <span className="k">{t('transaction.fields.orderNumber')}</span>
<span className="v">{ importantInfo?.orderNumber }</span> <span className="v">{ importantInfo?.orderNumber }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">TID</span> <span className="k">{t('transaction.fields.tid')}</span>
<span className="v">{ importantInfo?.tid }</span> <span className="v">{ importantInfo?.tid }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">거래상태</span> <span className="k">{t('transaction.fields.transactionStatus')}</span>
<span className="v">{ importantInfo?.transactionStatus }</span> <span className="v">{ importantInfo?.transactionStatus }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">거래수단</span> <span className="k">{t('transaction.fields.transactionMethod')}</span>
<span className="v">{ importantInfo?.paymentMethod }</span> <span className="v">{ importantInfo?.paymentMethod }</span>
</li> </li>
{ serviceCode === '01' && { serviceCode === '01' &&
<li className="kv-row"> <li className="kv-row">
<span className="k">승인일</span> <span className="k">{t('transaction.fields.approvalDay')}</span>
<span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span> <span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span>
</li> </li>
} }
{ serviceCode === '02' && { serviceCode === '02' &&
<li className="kv-row"> <li className="kv-row">
<span className="k">거래일</span> <span className="k">{t('filter.date')}</span>
<span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span> <span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span>
</li> </li>
} }
{ serviceCode === '03' && { serviceCode === '03' &&
<li className="kv-row"> <li className="kv-row">
<span className="k">요청일</span> <span className="k">{t('filter.date')}</span>
<span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span> <span className="v">{ importantInfo?.approvalDate? moment(importantInfo?.approvalDate).format('YYYY-MM-DD'): '' }</span>
</li> </li>
} }
<li className="kv-row"> <li className="kv-row">
<span className="k">취소일</span> <span className="k">{t('transaction.fields.cancelDate')}</span>
<span className="v">{ importantInfo?.cancelDate? moment(importantInfo?.cancelDate).format('YYYY-MM-DD'): '' }</span> <span className="v">{ importantInfo?.cancelDate? moment(importantInfo?.cancelDate).format('YYYY-MM-DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">상품명</span> <span className="k">{t('transaction.fields.productName')}</span>
<span className="v">{ importantInfo?.productName }</span> <span className="v">{ importantInfo?.productName }</span>
</li> </li>
</> </>

20
src/entities/transaction/ui/section/issue-info-section.tsx
View File

@@ -1,3 +1,4 @@
import { useTranslation } from 'react-i18next';
import { InfoSectionProps } from '../../model/types'; import { InfoSectionProps } from '../../model/types';
import moment from 'moment'; import moment from 'moment';
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
@@ -7,6 +8,7 @@ export const IssueInfoSection = ({
issueInfo, issueInfo,
purposeType, purposeType,
}: InfoSectionProps) => { }: InfoSectionProps) => {
const { t } = useTranslation();
const [issueDateTime, setIssueDateTime] = useState<string>(''); const [issueDateTime, setIssueDateTime] = useState<string>('');
useEffect(() => { useEffect(() => {
@@ -22,38 +24,38 @@ export const IssueInfoSection = ({
return ( return (
<> <>
<div className="txn-section"> <div className="txn-section">
<div className="section-title">발급 정보</div> <div className="section-title">{t('transaction.sections.issueInfo')}</div>
<ul className="kv-list"> <ul className="kv-list">
<li className="kv-row"> <li className="kv-row">
<span className="k">승인번호</span> <span className="k">{t('transaction.fields.approvalNumber')}</span>
<span className="v">{ issueInfo?.approvalNumber }</span> <span className="v">{ issueInfo?.approvalNumber }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">발행번호</span> <span className="k">{t('transaction.fields.issueNumber')}</span>
<span className="v">{ issueInfo?.issueNumber }</span> <span className="v">{ issueInfo?.issueNumber }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">발행일시</span> <span className="k">{t('transaction.fields.issueDateTime')}</span>
<span className="v">{ moment(issueDateTime).format('YYYY.MM.DD HH:mm:ss') }</span> <span className="v">{ moment(issueDateTime).format('YYYY.MM.DD HH:mm:ss') }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">용도</span> <span className="k">{t('transaction.fields.purpose')}</span>
<span className="v">{ issueInfo?.purpose }</span> <span className="v">{ issueInfo?.purpose }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">결제수단</span> <span className="k">{t('transaction.fields.paymentMethod')}</span>
<span className="v">{ issueInfo?.paymentMethod }</span> <span className="v">{ issueInfo?.paymentMethod }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">상품명</span> <span className="k">{t('transaction.fields.productName')}</span>
<span className="v">{ issueInfo?.productName }</span> <span className="v">{ issueInfo?.productName }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">진행상태</span> <span className="k">{t('transaction.fields.processResult')}</span>
<span className="v">{ issueInfo?.processResult }</span> <span className="v">{ issueInfo?.processResult }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">거래구분</span> <span className="k">{t('transaction.fields.transactionType')}</span>
<span className="v">{ issueInfo?.transactionType }</span> <span className="v">{ issueInfo?.transactionType }</span>
</li> </li>
</ul> </ul>

12
src/entities/transaction/ui/section/merchant-info-section.tsx
View File

@@ -1,3 +1,4 @@
import { useTranslation } from 'react-i18next';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoSectionKeys, InfoSectionProps } from '../../model/types'; import { InfoSectionKeys, InfoSectionProps } from '../../model/types';
import { SlideDown } from 'react-slidedown'; import { SlideDown } from 'react-slidedown';
@@ -8,6 +9,7 @@ export const MerchantInfoSection = ({
isOpen, isOpen,
onClickToOpenInfo onClickToOpenInfo
}: InfoSectionProps) => { }: InfoSectionProps) => {
const { t } = useTranslation();
const onClickToSetOpenInfo = () => { const onClickToSetOpenInfo = () => {
if(!!onClickToOpenInfo){ if(!!onClickToOpenInfo){
@@ -18,25 +20,25 @@ export const MerchantInfoSection = ({
return ( return (
<> <>
<div className="txn-section"> <div className="txn-section">
<div <div
className="section-title with-toggle" className="section-title with-toggle"
onClick={ () => onClickToSetOpenInfo() } onClick={ () => onClickToSetOpenInfo() }
> >
상점 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow> {t('transaction.sections.merchantInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div> </div>
<SlideDown className={'my-dropdown-slidedown'}> <SlideDown className={'my-dropdown-slidedown'}>
{ !!isOpen && { !!isOpen &&
<ul className="kv-list"> <ul className="kv-list">
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;상호</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.companyName')}</span>
<span className="v">{ merchantInfo?.companyName }</span> <span className="v">{ merchantInfo?.companyName }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;GID</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.gid')}</span>
<span className="v">{ merchantInfo?.gid }</span> <span className="v">{ merchantInfo?.gid }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;AID</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.aid')}</span>
<span className="v">{ merchantInfo?.aid }</span> <span className="v">{ merchantInfo?.aid }</span>
</li> </li>
</ul> </ul>

18
src/entities/transaction/ui/section/part-cancel-info-section.tsx
View File

@@ -4,6 +4,7 @@ import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoSectionKeys, InfoSectionProps } from '../../model/types'; import { InfoSectionKeys, InfoSectionProps } from '../../model/types';
import { SlideDown } from 'react-slidedown'; import { SlideDown } from 'react-slidedown';
import 'react-slidedown/lib/slidedown.css'; import 'react-slidedown/lib/slidedown.css';
import { useTranslation } from 'react-i18next';
export const PartCancelInfoSection = ({ export const PartCancelInfoSection = ({
transactionCategory, transactionCategory,
@@ -12,13 +13,14 @@ export const PartCancelInfoSection = ({
isOpen, isOpen,
onClickToOpenInfo onClickToOpenInfo
}: InfoSectionProps) => { }: InfoSectionProps) => {
const { t } = useTranslation();
const subItems: Record<string, Record<string, string>> = { const subItems: Record<string, Record<string, string>> = {
originalTid: {name: '원거래 TID', type: 'string'}, originalTid: {name: t('transaction.fields.originalTid'), type: 'string'},
originalAmount: {name: '원거래 금액', type: 'number'}, originalAmount: {name: t('transaction.fields.originalAmount'), type: 'number'},
partCancelTid: {name: (serviceCode === '05')? '재승인 TID': '부분취소 TID', type: 'string'}, partCancelTid: {name: (serviceCode === '05')? t('transaction.fields.reApprovalTid'): t('transaction.fields.partCancelTid'), type: 'string'},
partCancelAmount: {name: '부분취소 금액', type: 'number'}, partCancelAmount: {name: t('transaction.fields.partCancelAmount'), type: 'number'},
remainingAmount: {name: (serviceCode === '05')? '재승인 금액': '부분취소 후 잔액', type: 'number'}, remainingAmount: {name: (serviceCode === '05')? t('transaction.fields.reApprovalAmount'): t('transaction.fields.remainingAmount'), type: 'number'},
}; };
const openSubItems: Record<string, Array<string>> = { const openSubItems: Record<string, Array<string>> = {
@@ -101,11 +103,11 @@ export const PartCancelInfoSection = ({
return ( return (
<> <>
<div className="txn-section"> <div className="txn-section">
<div <div
className="section-title with-toggle" className="section-title with-toggle"
onClick={ () => onClickToSetOpenInfo() } onClick={ () => onClickToSetOpenInfo() }
> >
부분취소 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow> { t('transaction.sections.partCancelInfo') } <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div> </div>
<SlideDown className={'my-dropdown-slidedown'}> <SlideDown className={'my-dropdown-slidedown'}>
{ !!isOpen && { !!isOpen &&
@@ -114,7 +116,7 @@ export const PartCancelInfoSection = ({
</ul> </ul>
} }
</SlideDown> </SlideDown>
</div> </div>
</> </>
) )

134
src/entities/transaction/ui/section/payment-info-section.tsx
View File

@@ -1,4 +1,5 @@
import moment from 'moment'; import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types'; import { InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types';
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
@@ -12,45 +13,46 @@ export const PaymentInfoSection = ({
isOpen, isOpen,
onClickToOpenInfo onClickToOpenInfo
}: InfoSectionProps) => { }: InfoSectionProps) => {
const { t } = useTranslation();
const subItems: Record<string, Record<string, string>> = { const subItems: Record<string, Record<string, string>> = {
approvalPurchase: {name: '승인매입', type: 'string'}, approvalPurchase: {name: t('transaction.fields.approvalPurchase'), type: 'string'},
approvalRejectCount: {name: '승인반송(횟수)', type: 'number', addString: '건'}, approvalRejectCount: {name: t('transaction.fields.approvalRejectCount'), type: 'number', addString: '건'},
approvalRepurchaseCount: {name: '승인재매입(횟수)', type: 'number', addString: '건'}, approvalRepurchaseCount: {name: t('transaction.fields.approvalRepurchaseCount'), type: 'number', addString: '건'},
approvalVAN: {name: '승인VAN', type: 'string'}, approvalVAN: {name: t('transaction.fields.approvalVAN'), type: 'string'},
cancelPurchase: {name: '취소매입', type: 'string'}, cancelPurchase: {name: t('transaction.fields.cancelPurchase'), type: 'string'},
cancelRejectCount: {name: '취소반송', type: 'number', addString: '건'}, cancelRejectCount: {name: t('transaction.fields.cancelRejectCount'), type: 'number', addString: '건'},
cancelRepurchaseCount: {name: '취소재매입', type: 'number', addString: '건'}, cancelRepurchaseCount: {name: t('transaction.fields.cancelRepurchaseCount'), type: 'number', addString: '건'},
purchaseVan: {name: '매입VAN', type: 'string'}, purchaseVan: {name: t('transaction.fields.purchaseVan'), type: 'string'},
purchaseCompany: {name: '매입사(발급사)', type: 'string'}, purchaseCompany: {name: t('transaction.fields.purchaseCompany'), type: 'string'},
cardNo: {name: '카드번호', type: 'string'}, cardNo: {name: t('transaction.fields.cardNo'), type: 'string'},
approvalNo: {name: '승인번호', type: 'string'}, approvalNo: {name: t('transaction.fields.approvalNo'), type: 'string'},
installmentMonth: {name: '할부기간', type: 'string', addString: '개월'}, installmentMonth: {name: t('transaction.fields.installmentPeriod'), type: 'string', addString: '개월'},
authentication: {name: '인증', type: 'string'}, authentication: {name: t('transaction.fields.authentication'), type: 'string'},
joinType: {name: '유형', type: 'string'}, joinType: {name: t('transaction.fields.joinType'), type: 'string'},
bankName: {name: '은행명', type: 'string'}, bankName: {name: t('transaction.fields.bankName'), type: 'string'},
accountNo: {name: '계좌번호', type: 'string'}, accountNo: {name: t('transaction.fields.accountNo'), type: 'string'},
refundCompleteDate: {name: '환불완료일', type: 'string'}, refundCompleteDate: {name: t('transaction.fields.refundCompleteDate'), type: 'string'},
customerId: {name: '고객ID', type: 'string'}, customerId: {name: t('transaction.fields.customerId'), type: 'string'},
culturelandId: {name: '컬처랜드ID', type: 'string'},
partner: {name: '제휴사', type: 'string'}, culturelandId: {name: t('transaction.fields.culturelandId'), type: 'string'},
cpid: {name: 'CPID', type: 'string'},
goodsCategory: {name: '상품구분', type: 'string'},
cellphoneNo: {name: '휴대폰번호', type: 'string'},
giftCardNumber: {name: '상품권번호', type: 'string'}, partner: {name: t('transaction.fields.partner'), type: 'string'},
cpid: {name: t('transaction.fields.cpid'), type: 'string'},
goodsCategory: {name: t('transaction.fields.goodsCategory'), type: 'string'},
cellphoneNo: {name: t('transaction.fields.cellphoneNo'), type: 'string'},
depositBankName: {name: '입금금융기관명', type: 'string'}, giftCardNumber: {name: t('transaction.fields.giftCardNumber'), type: 'string'},
depositorName: {name: '입금자명', type: 'string'},
depositDeadline: {name: '입금기한', type: 'date'}, depositBankName: {name: t('transaction.fields.depositBankName'), type: 'string'},
depositDate: {name: '입금일', type: 'date'}, depositorName: {name: t('transaction.fields.depositorName'), type: 'string'},
refundScheduleDate: {name: '환불예정일', type: 'date'}, depositDeadline: {name: t('transaction.fields.depositDeadline'), type: 'date'},
refundBankName: {name: '환불은행명', type: 'string'}, depositDate: {name: t('transaction.fields.depositDate'), type: 'date'},
refundAccountNo: {name: '환불계좌번호', type: 'string'}, refundScheduleDate: {name: t('transaction.fields.refundScheduleDate'), type: 'date'},
accountHolder: {name: '예금주', type: 'string'}, refundBankName: {name: t('transaction.fields.refundBankName'), type: 'string'},
refundAccountNo: {name: t('transaction.fields.refundAccountNo'), type: 'string'},
accountHolder: {name: t('transaction.fields.accountHolder'), type: 'string'},
}; };
const openSubItems: Record<string, Array<string>> = { const openSubItems: Record<string, Array<string>> = {
@@ -99,7 +101,7 @@ export const PaymentInfoSection = ({
<span className="v"> <span className="v">
{ (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'string') && { (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'string') &&
(k === 'installmentMonth' && newPaymentInfo[k] === '00') && (k === 'installmentMonth' && newPaymentInfo[k] === '00') &&
'일시불' t('transaction.fields.lumpSum')
} }
{ (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'string') && { (checkValue(newPaymentInfo[k]) && subItems[k]?.type === 'string') &&
(k === 'installmentMonth' && newPaymentInfo[k] !== '00') && (k === 'installmentMonth' && newPaymentInfo[k] !== '00') &&
@@ -138,11 +140,11 @@ export const PaymentInfoSection = ({
return ( return (
<> <>
<div className="txn-section"> <div className="txn-section">
<div <div
className="section-title with-toggle" className="section-title with-toggle"
onClick={ () => onClickToSetOpenInfo() } onClick={ () => onClickToSetOpenInfo() }
> >
결제 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow> {t('transaction.sections.paymentInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div> </div>
<SlideDown className={'my-dropdown-slidedown'}> <SlideDown className={'my-dropdown-slidedown'}>
{ !!isOpen && { !!isOpen &&
@@ -152,82 +154,82 @@ export const PaymentInfoSection = ({
} }
{ (transactionCategory === TransactionCategory.Escrow) && { (transactionCategory === TransactionCategory.Escrow) &&
<> <>
{ (serviceCode === '01') && { (serviceCode === '01') &&
<> <>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인매입일</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalPurchaseDate')}</span>
<span className="v">{ paymentInfo?.approvalPurchase? moment(paymentInfo?.approvalPurchase).format('YYYY-MM-DD'): '' }</span> <span className="v">{ paymentInfo?.approvalPurchase? moment(paymentInfo?.approvalPurchase).format('YYYY-MM-DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인반송(횟수)</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalRejectCount')}</span>
<span className="v"> <span className="v">
<NumericFormat <NumericFormat
value={ paymentInfo?.approvalRejectCount } value={ paymentInfo?.approvalRejectCount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</span> </span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인재매입(횟수)</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalRepurchaseCount')}</span>
<span className="v"> <span className="v">
<NumericFormat <NumericFormat
value={ paymentInfo?.approvalRepurchaseCount } value={ paymentInfo?.approvalRepurchaseCount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</span> </span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인VAN</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalVAN')}</span>
<span className="v">{ paymentInfo?.approvalVAN }</span> <span className="v">{ paymentInfo?.approvalVAN }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소매입</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelPurchaseDate')}</span>
<span className="v">{ paymentInfo?.cancelPurchase? moment(paymentInfo?.cancelPurchase).format('YYYY-MM-DD'): '' }</span> <span className="v">{ paymentInfo?.cancelPurchase? moment(paymentInfo?.cancelPurchase).format('YYYY-MM-DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소반송(횟수)</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelRejectCount')}</span>
<span className="v"> <span className="v">
<NumericFormat <NumericFormat
value={ paymentInfo?.cancelRejectCount } value={ paymentInfo?.cancelRejectCount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</span> </span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소재매입(횟수)</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelRepurchaseCount')}</span>
<span className="v"> <span className="v">
<NumericFormat <NumericFormat
value={ paymentInfo?.cancelRepurchaseCount } value={ paymentInfo?.cancelRepurchaseCount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
></NumericFormat> ></NumericFormat>
</span> </span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;매입VAN</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.purchaseVan')}</span>
<span className="v">{ paymentInfo?.purchaseVan }</span> <span className="v">{ paymentInfo?.purchaseVan }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;매입사(발급사)</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.purchaseCompany')}</span>
<span className="v">{ paymentInfo?.purchaseCompany }</span> <span className="v">{ paymentInfo?.purchaseCompany }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;카드번호</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cardNo')}</span>
<span className="v">{ paymentInfo?.cardNo }</span> <span className="v">{ paymentInfo?.cardNo }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인번호</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalNo')}</span>
<span className="v">{ paymentInfo?.approvalNo }</span> <span className="v">{ paymentInfo?.approvalNo }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;할부기간</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.installmentPeriod')}</span>
<span className="v">{ (paymentInfo?.installmentMonth === '00')? '일시불': paymentInfo?.installmentMonth }</span> <span className="v">{ (paymentInfo?.installmentMonth === '00')? t('transaction.fields.lumpSum'): paymentInfo?.installmentMonth }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;인증</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.authentication')}</span>
<span className="v">{ paymentInfo?.authentication }</span> <span className="v">{ paymentInfo?.authentication }</span>
</li> </li>
</> </>
@@ -235,7 +237,7 @@ export const PaymentInfoSection = ({
{ (serviceCode === '02') && { (serviceCode === '02') &&
<> <>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;유형</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.joinType')}</span>
<span className="v">{ paymentInfo?.joinType }</span> <span className="v">{ paymentInfo?.joinType }</span>
</li> </li>
</> </>
@@ -243,43 +245,43 @@ export const PaymentInfoSection = ({
{ (serviceCode === '02' || serviceCode === '03') && { (serviceCode === '02' || serviceCode === '03') &&
<> <>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;은행명</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.bankName')}</span>
<span className="v">{ paymentInfo?.bankName || paymentInfo?.depositBankName }</span> <span className="v">{ paymentInfo?.bankName || paymentInfo?.depositBankName }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;계좌번호</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.accountNo')}</span>
<span className="v">{ paymentInfo?.accountNo || paymentInfo?.virtualAccountNo }</span> <span className="v">{ paymentInfo?.accountNo || paymentInfo?.virtualAccountNo }</span>
</li> </li>
</> </>
} }
{ (serviceCode === '03') && { (serviceCode === '03') &&
<> <>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;입금자명</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.depositorName')}</span>
<span className="v">{ paymentInfo?.depositorName }</span> <span className="v">{ paymentInfo?.depositorName }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;입금기한</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.depositDeadline')}</span>
<span className="v">{ paymentInfo?.depositDeadline? moment(paymentInfo?.depositDeadline).format('YYYY-MM-DD'): '' }</span> <span className="v">{ paymentInfo?.depositDeadline? moment(paymentInfo?.depositDeadline).format('YYYY-MM-DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;입금일</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.depositDate')}</span>
<span className="v">{ paymentInfo?.depositDate? moment(paymentInfo?.depositDate).format('YYYY-MM-DD'): '' }</span> <span className="v">{ paymentInfo?.depositDate? moment(paymentInfo?.depositDate).format('YYYY-MM-DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;환불예정일</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.refundScheduleDate')}</span>
<span className="v">{ paymentInfo?.refundScheduleDate? moment(paymentInfo?.refundScheduleDate).format('YYYY-MM-DD'): '' }</span> <span className="v">{ paymentInfo?.refundScheduleDate? moment(paymentInfo?.refundScheduleDate).format('YYYY-MM-DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;환불은행명</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.refundBankName')}</span>
<span className="v">{ paymentInfo?.refundBankName }</span> <span className="v">{ paymentInfo?.refundBankName }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;환불계좌번호</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.refundAccountNo')}</span>
<span className="v">{ paymentInfo?.refundAccountNo }</span> <span className="v">{ paymentInfo?.refundAccountNo }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;예금주</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.accountHolder')}</span>
<span className="v">{ paymentInfo?.accountHolder }</span> <span className="v">{ paymentInfo?.accountHolder }</span>
</li> </li>
</> </>

34
src/entities/transaction/ui/section/settlement-info-section.tsx
View File

@@ -1,4 +1,5 @@
import moment from 'moment'; import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types'; import { InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types';
@@ -12,12 +13,13 @@ export const SettlementInfoSection = ({
isOpen, isOpen,
onClickToOpenInfo onClickToOpenInfo
}: InfoSectionProps) => { }: InfoSectionProps) => {
const { t } = useTranslation();
const subItems: Record<string, Record<string, string>> = { const subItems: Record<string, Record<string, string>> = {
approvalSettlementDate: {name: '승인정산일', type: 'date'}, approvalSettlementDate: {name: t('transaction.fields.approvalSettlementDate'), type: 'date'},
approvalSettlementAmount: {name: '승인정산금액', type: 'number'}, approvalSettlementAmount: {name: t('transaction.fields.approvalSettlementAmount'), type: 'number'},
cancelSettlementDate: {name: '취소정산일', type: 'date'}, cancelSettlementDate: {name: t('transaction.fields.cancelSettlementDate'), type: 'date'},
cancelSettlementAmount: {name: '취소정산금액', type: 'number'}, cancelSettlementAmount: {name: t('transaction.fields.cancelSettlementAmount'), type: 'number'},
}; };
const openSubItems: Record<string, Array<string>> = { const openSubItems: Record<string, Array<string>> = {
@@ -100,30 +102,30 @@ export const SettlementInfoSection = ({
return ( return (
<> <>
<div className="txn-section"> <div className="txn-section">
<div <div
className="section-title with-toggle" className="section-title with-toggle"
onClick={ () => onClickToSetOpenInfo() } onClick={ () => onClickToSetOpenInfo() }
> >
정산 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow> {t('transaction.sections.settlementInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div> </div>
<SlideDown className={'my-dropdown-slidedown'}> <SlideDown className={'my-dropdown-slidedown'}>
{ !!isOpen && { !!isOpen &&
<ul className="kv-list"> <ul className="kv-list">
{ (transactionCategory === TransactionCategory.AllTransaction) && { (transactionCategory === TransactionCategory.AllTransaction) &&
subLi() subLi()
} }
{ (transactionCategory === TransactionCategory.Escrow) && { (transactionCategory === TransactionCategory.Escrow) &&
<> <>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인정산일</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalSettlementDate')}</span>
<span className="v">{ settlementInfo?.approvalSettlementDate? moment(settlementInfo?.approvalSettlementDate).format('YYYY.MM.DD'): '' }</span> <span className="v">{ settlementInfo?.approvalSettlementDate? moment(settlementInfo?.approvalSettlementDate).format('YYYY.MM.DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;승인정산금액</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.approvalSettlementAmount')}</span>
<span className="v"> <span className="v">
<NumericFormat <NumericFormat
value={ settlementInfo?.approvalSettlementAmount } value={ settlementInfo?.approvalSettlementAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
suffix='원' suffix='원'
@@ -131,14 +133,14 @@ export const SettlementInfoSection = ({
</span> </span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소정산일</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelSettlementDate')}</span>
<span className="v">{ settlementInfo?.cancelSettlementDate? moment(settlementInfo?.cancelSettlementDate).format('YYYY.MM.DD'): '' }</span> <span className="v">{ settlementInfo?.cancelSettlementDate? moment(settlementInfo?.cancelSettlementDate).format('YYYY.MM.DD'): '' }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소정산금액</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelSettlementAmount')}</span>
<span className="v"> <span className="v">
<NumericFormat <NumericFormat
value={ settlementInfo?.cancelSettlementAmount } value={ settlementInfo?.cancelSettlementAmount }
thousandSeparator thousandSeparator
displayType="text" displayType="text"
suffix='원' suffix='원'

40
src/entities/transaction/ui/section/transaction-info-section.tsx
View File

@@ -1,4 +1,5 @@
import moment from 'moment'; import moment from 'moment';
import { useTranslation } from 'react-i18next';
import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow'; import { SectionTitleArrow } from '@/entities/common/ui/section-title-arrow';
import { InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types'; import { InfoSectionKeys, InfoSectionProps, TransactionCategory } from '../../model/types';
import { NumericFormat } from 'react-number-format'; import { NumericFormat } from 'react-number-format';
@@ -12,15 +13,16 @@ export const TransactionInfoSection = ({
isOpen, isOpen,
onClickToOpenInfo onClickToOpenInfo
}: InfoSectionProps) => { }: InfoSectionProps) => {
const { t } = useTranslation();
const subItems: Record<string, Record<string, string>> = { const subItems: Record<string, Record<string, string>> = {
buyerName: {name: '구매자명', type: 'string'}, buyerName: {name: t('transaction.fields.buyerName'), type: 'string'},
buyerEmail: {name: '이메일', type: 'string'}, buyerEmail: {name: t('transaction.fields.buyerEmail'), type: 'string'},
buyerTel: {name: '전화번호', type: 'string'}, buyerTel: {name: t('transaction.fields.buyerTel'), type: 'string'},
cancelReason: {name: '취소사유', type: 'string'}, cancelReason: {name: t('transaction.fields.cancelReason'), type: 'string'},
cancelRequestor: {name: '취소요청자', type: 'string'}, cancelRequestor: {name: t('transaction.fields.cancelRequestor'), type: 'string'},
partialCancel: {name: '부분취소', type: 'string'}, partialCancel: {name: t('transaction.fields.partialCancel'), type: 'string'},
cashReceiptIssue: {name: '현금영수증발행', type: 'string'}, cashReceiptIssue: {name: t('transaction.fields.cashReceiptIssue'), type: 'string'},
}; };
const openSubItems: Record<string, Array<string>> = { const openSubItems: Record<string, Array<string>> = {
@@ -106,47 +108,47 @@ export const TransactionInfoSection = ({
return ( return (
<> <>
<div className="txn-section"> <div className="txn-section">
<div <div
className="section-title with-toggle" className="section-title with-toggle"
onClick={ () => onClickToSetOpenInfo() } onClick={ () => onClickToSetOpenInfo() }
> >
거래 정보 <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow> {t('transaction.sections.transactionInfo')} <SectionTitleArrow isOpen={ isOpen }></SectionTitleArrow>
</div> </div>
<SlideDown className={'my-dropdown-slidedown'}> <SlideDown className={'my-dropdown-slidedown'}>
{ !!isOpen && { !!isOpen &&
<ul className="kv-list"> <ul className="kv-list">
{ (transactionCategory === TransactionCategory.AllTransaction) && { (transactionCategory === TransactionCategory.AllTransaction) &&
subLi() subLi()
} }
{ (transactionCategory === TransactionCategory.Escrow) && { (transactionCategory === TransactionCategory.Escrow) &&
<> <>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;구매자명</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.buyerName')}</span>
<span className="v">{ transactionInfo?.buyerName }</span> <span className="v">{ transactionInfo?.buyerName }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;이메일</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.buyerEmail')}</span>
<span className="v">{ transactionInfo?.buyerEmail }</span> <span className="v">{ transactionInfo?.buyerEmail }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;전화번호</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.buyerTel')}</span>
<span className="v">{ transactionInfo?.buyerTel }</span> <span className="v">{ transactionInfo?.buyerTel }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소사유</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelReason')}</span>
<span className="v">{ transactionInfo?.cancelReason }</span> <span className="v">{ transactionInfo?.cancelReason }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;취소요청자</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cancelRequestor')}</span>
<span className="v">{ transactionInfo?.cancelRequestor }</span> <span className="v">{ transactionInfo?.cancelRequestor }</span>
</li> </li>
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;부분취소</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.partialCancel')}</span>
<span className="v">{ transactionInfo?.partialCancel }</span> <span className="v">{ transactionInfo?.partialCancel }</span>
</li> </li>
{ (serviceCode === '02' || serviceCode === '03') && { (serviceCode === '02' || serviceCode === '03') &&
<li className="kv-row"> <li className="kv-row">
<span className="k">·&nbsp;&nbsp;현금영수증발행</span> <span className="k">·&nbsp;&nbsp;{t('transaction.fields.cashReceiptIssue')}</span>
<span className="v">{ transactionInfo?.cashReceiptIssue }</span> <span className="v">{ transactionInfo?.cashReceiptIssue }</span>
</li> </li>
} }

25
src/entities/vat-return/model/contant.ts
View File

@@ -1,19 +1,20 @@
import { TFunction } from 'i18next';
import { VatReturnPayTax, VatReturnReceiptType, VatReturnTargetType } from './types'; import { VatReturnPayTax, VatReturnReceiptType, VatReturnTargetType } from './types';
export const VatReturnReceiptTypeBtnGroup = [ export const getVatReturnReceiptTypeBtnGroup = (t: TFunction) => [
{name: '전체', value: VatReturnReceiptType.ALL }, {name: t('transaction.constants.all'), value: VatReturnReceiptType.ALL },
{name: '영수', value: VatReturnReceiptType.RECEIPT }, {name: t('vatReturn.receipt'), value: VatReturnReceiptType.RECEIPT },
{name: '청구', value: VatReturnReceiptType.BILL } {name: t('vatReturn.bill'), value: VatReturnReceiptType.BILL }
]; ];
export const VatReturnTargetTypeBtnGroup = [ export const getVatReturnTargetTypeBtnGroup = (t: TFunction) => [
{name: '전체', value: VatReturnTargetType.ALL }, {name: t('transaction.constants.all'), value: VatReturnTargetType.ALL },
{name: '일반', value: VatReturnTargetType.GENERAL }, {name: t('vatReturn.general'), value: VatReturnTargetType.GENERAL },
{name: '차액정산', value: VatReturnTargetType.DIFFERENCE_COLLECTION }, {name: t('vatReturn.differenceSettlement'), value: VatReturnTargetType.DIFFERENCE_COLLECTION },
{name: '환급정산', value: VatReturnTargetType.REFUND_SETTLEMENT } {name: t('vatReturn.refundSettlement'), value: VatReturnTargetType.REFUND_SETTLEMENT }
]; ];
export const VatReturnTaxBtnGroups = [ export const getVatReturnTaxBtnGroups = (t: TFunction) => [
{name: '과세', value: VatReturnPayTax.TAX }, {name: t('vatReturn.taxable'), value: VatReturnPayTax.TAX },
{name: '면세', value: VatReturnPayTax.NOTAX }, {name: t('vatReturn.taxExempt'), value: VatReturnPayTax.NOTAX },
]; ];

32
src/entities/vat-return/ui/filter/list-filter.tsx
View File

@@ -1,11 +1,12 @@
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 { VatReturnReceiptType, VatReturnTargetType } from '../../model/types'; import { VatReturnReceiptType, VatReturnTargetType } from '../../model/types';
import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant'; import { FilterMotionDuration, FilterMotionStyle, FilterMotionVariants } from '@/entities/common/model/constant';
import { FilterSelect } from '@/shared/ui/filter/select'; import { FilterSelect } from '@/shared/ui/filter/select';
import { useState } from 'react'; import { useState } from 'react';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { VatReturnReceiptTypeBtnGroup, VatReturnTargetTypeBtnGroup } from '../../model/contant'; import { getVatReturnReceiptTypeBtnGroup, getVatReturnTargetTypeBtnGroup } from '../../model/contant';
import { FilterCalendarMonth } from '@/shared/ui/filter/calendar-month'; import { FilterCalendarMonth } from '@/shared/ui/filter/calendar-month';
import { useStore } from '@/shared/model/store'; import { useStore } from '@/shared/model/store';
import { FilterSelectMid } from '@/shared/ui/filter/select-mid'; import { FilterSelectMid } from '@/shared/ui/filter/select-mid';
@@ -39,13 +40,14 @@ export const ListFilter = ({
setReceiptType, setReceiptType,
setTargetType setTargetType
}: ListFilterProps) => { }: ListFilterProps) => {
const { t } = useTranslation();
const [filterMid, setFilterMid] = useState<string>(mid); const [filterMid, setFilterMid] = useState<string>(mid);
const [filterStartMonth, setFilterStartMonth] = useState<string>(startMonth); const [filterStartMonth, setFilterStartMonth] = useState<string>(startMonth);
const [filterEndMonth, setFilterEndMonth] = useState<string>(endMonth); const [filterEndMonth, setFilterEndMonth] = useState<string>(endMonth);
const [filterReceiptType, setFIlterReceiptType] = useState<VatReturnReceiptType>(receiptType); const [filterReceiptType, setFIlterReceiptType] = useState<VatReturnReceiptType>(receiptType);
const [filterTargetType, setFilterTargetType] = useState<VatReturnTargetType>(targetType); const [filterTargetType, setFilterTargetType] = useState<VatReturnTargetType>(targetType);
const midOptions = useStore.getState().UserStore.selectOptionsMids; const midOptions = useStore.getState().UserStore.selectOptionsMids;
const onClickToClose = () => { const onClickToClose = () => {
@@ -73,51 +75,51 @@ export const ListFilter = ({
> >
<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
className="full-menu-close" className="full-menu-close"
onClick={ () => onClickToClose() } onClick={ () => onClickToClose() }
> >
<img <img
src={ IMAGE_ROOT + '/ico_close.svg' } src={ IMAGE_ROOT + '/ico_close.svg' }
alt="닫기" alt={t('common.close')}
/> />
</button> </button>
</div> </div>
</div> </div>
<div className="option-list pt-16"> <div className="option-list pt-16">
<FilterSelectMid <FilterSelectMid
title='가맹점' title={t('merchant.title')}
selectSetter={ setMid } selectSetter={ setMid }
showType={ 'GID' } showType={ 'GID' }
></FilterSelectMid> ></FilterSelectMid>
<FilterCalendarMonth <FilterCalendarMonth
title='발행월' title={t('vatReturn.issuanceMonth')}
startMonth={ filterStartMonth } startMonth={ filterStartMonth }
endMonth={ filterEndMonth } endMonth={ filterEndMonth }
setStartMonth={ setFilterStartMonth } setStartMonth={ setFilterStartMonth }
setEndMonth={ setFilterEndMonth } setEndMonth={ setFilterEndMonth }
></FilterCalendarMonth> ></FilterCalendarMonth>
<FilterButtonGroups <FilterButtonGroups
title='영수구분' title={t('vatReturn.receiptType')}
activeValue={ filterReceiptType } activeValue={ filterReceiptType }
btnGroups={ VatReturnReceiptTypeBtnGroup } btnGroups={ getVatReturnReceiptTypeBtnGroup(t) }
setter={ setFIlterReceiptType } setter={ setFIlterReceiptType }
></FilterButtonGroups> ></FilterButtonGroups>
<FilterButtonGroups <FilterButtonGroups
title='발행대상' title={t('vatReturn.issueTarget')}
activeValue={ filterTargetType } activeValue={ filterTargetType }
btnGroups={ VatReturnTargetTypeBtnGroup } btnGroups={ getVatReturnTargetTypeBtnGroup(t) }
setter={ setFilterTargetType } setter={ setFilterTargetType }
></FilterButtonGroups> ></FilterButtonGroups>
</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>

6
src/entities/vat-return/ui/reference-wrap.tsx
View File

@@ -6,7 +6,7 @@ import { FilterSelect } from '@/shared/ui/filter/select';
import { ReferenceRequestSuccess } from './reference-request-success'; import { ReferenceRequestSuccess } from './reference-request-success';
import { ReferenceRequestFail } from './reference-request-fail'; import { ReferenceRequestFail } from './reference-request-fail';
import { FilterButtonGroups } from '@/shared/ui/filter/button-groups'; import { FilterButtonGroups } from '@/shared/ui/filter/button-groups';
import { VatReturnTaxBtnGroups } from '../model/contant'; import { getVatReturnTaxBtnGroups } from '../model/contant';
import { VatReturnPayTax, VatReturnReferenceRequestParams, VatReturnReferenceRequestResponse } from '../model/types'; import { VatReturnPayTax, VatReturnReferenceRequestParams, VatReturnReferenceRequestResponse } from '../model/types';
import { useStore } from '@/shared/model/store'; import { useStore } from '@/shared/model/store';
import { useVatReturnReferenceRequestMutation } from '../api/use-vat-return-reference-request-mutation'; import { useVatReturnReferenceRequestMutation } from '../api/use-vat-return-reference-request-mutation';
@@ -41,7 +41,7 @@ export const ReferenceWrap = () => {
vatReturnReferenceRequest(params).then((rs: VatReturnReferenceRequestResponse) => { vatReturnReferenceRequest(params).then((rs: VatReturnReferenceRequestResponse) => {
setSuccessPageOn(true); setSuccessPageOn(true);
}).catch((error) => { }).catch((error) => {
setErrorMsg("[9997] 키인가맹점이 아닙니다.<br/>NICEPAY로 문의하세요."); setErrorMsg(t('vatReturn.keyInMerchantError'));
setFailPageOn(true); setFailPageOn(true);
}); });
}; };
@@ -58,7 +58,7 @@ export const ReferenceWrap = () => {
<FilterButtonGroups <FilterButtonGroups
title={t('vatReturn.taxExemptionType')} title={t('vatReturn.taxExemptionType')}
activeValue={ payTax } activeValue={ payTax }
btnGroups={ VatReturnTaxBtnGroups } btnGroups={ getVatReturnTaxBtnGroups(t) }
setter={ setPayTax } setter={ setPayTax }
addClassName='horizon' addClassName='horizon'
maxBtn={ 2 } maxBtn={ 2 }

439
src/locales/en.json
View File

@@ -17,7 +17,17 @@
"noData": "No data available", "noData": "No data available",
"next": "Next", "next": "Next",
"latest": "Latest", "latest": "Latest",
"oldest": "Oldest" "oldest": "Oldest",
"weekdays": {
"sun": "Sun",
"mon": "Mon",
"tue": "Tue",
"wed": "Wed",
"thu": "Thu",
"fri": "Fri",
"sat": "Sat"
},
"currencyUnit": ""
}, },
"menu": { "menu": {
"home": "Home", "home": "Home",
@@ -53,40 +63,45 @@
"close": "Close", "close": "Close",
"apply": "Apply", "apply": "Apply",
"merchant": "Merchant", "merchant": "Merchant",
"orderNumberTid": "OID/TID", "orderNumberTid": "Order No./TID",
"period": "Period", "period": "Period",
"issuanceDate": "Issuance Date", "issuanceDate": "Issue Date",
"transactionStatus": "Transaction Status", "transactionStatus": "Transaction Status",
"paymentMethod": "Payment Method", "paymentMethod": "Payment Method",
"transactionAmount": "Transaction Amount", "transactionAmount": "Transaction Amount",
"detailSearch": "Detail Search", "detailSearch": "Detailed Search",
"purpose": "Purpose", "purpose": "Purpose",
"transactionCategory": "Transaction Category", "transactionCategory": "Payment Type",
"progressStatus": "Progress Status", "progressStatus": "Payment Status",
"approvalIssuanceNumber": "Approval/Issuance Number", "approvalIssuanceNumber": "Approval/Issue Number",
"requestStatus": "Request Status", "requestStatus": "Request Status",
"processingResult": "Processing Result", "processingResult": "Result",
"deliveryStatus": "Delivery Status", "deliveryStatus": "Delivery Status",
"searchOptions": { "searchOptions": {
"cardNumber": "Card Number", "cardNumber": "Card Number",
"approvalNumber": "Approval Number", "approvalNumber": "Approval Number",
"buyerName": "Buyer Name", "buyerName": "Purchaser Name",
"virtualAccountNumber": "Virtual Account Number", "virtualAccountNumber": "Virtual Account Number",
"depositorName": "Depositor Name", "depositorName": "Depositor Name",
"phoneNumber": "Phone Number", "phoneNumber": "Phone Number",
"giftCardNumber": "Gift Card Number", "giftCardNumber": "Gift Card Number",
"customerId": "Customer ID", "customerId": "Customer ID",
"culturelandId": "Cultureland ID", "culturelandId": "Cultureland ID",
"tmoneyCardNumber": "T-money Card Number", "tmoneyCardNumber": "Tmoney Card Number",
"issueNumber": "Issue Number" "issueNumber": "Issue Number"
}, },
"periods": { "periods": {
"today": "Today",
"week": "1 Week",
"currentMonth": "Current Month",
"1month": "1 Month", "1month": "1 Month",
"2months": "2 Months",
"3months": "3 Months", "3months": "3 Months",
"6months": "6 Months", "6months": "6 Months",
"custom": "Custom" "custom": "Custom"
}, },
"transactionType": "Transaction Type", "selectDate": "Select Date",
"transactionType": "Payment Type",
"transactionTypes": { "transactionTypes": {
"all": "All", "all": "All",
"deposit": "Deposit", "deposit": "Deposit",
@@ -95,7 +110,8 @@
"sortOrder": "Sort Order", "sortOrder": "Sort Order",
"sortOrders": { "sortOrders": {
"latest": "Latest", "latest": "Latest",
"oldest": "Oldest" "oldest": "Oldest",
"highest": "Highest"
}, },
"startDate": "Start Date", "startDate": "Start Date",
"endDate": "End Date", "endDate": "End Date",
@@ -173,6 +189,8 @@
"merchant": "Merchant", "merchant": "Merchant",
"all": "All", "all": "All",
"inquiryButton": "Submit Inquiry", "inquiryButton": "Submit Inquiry",
"registrationDate": "Registered",
"status": "Status",
"categories": { "categories": {
"all": "All", "all": "All",
"choose": "Choose", "choose": "Choose",
@@ -314,7 +332,20 @@
"topSalesDays": "Top Sales Days", "topSalesDays": "Top Sales Days",
"topSalesHours": "Top Sales Hours", "topSalesHours": "Top Sales Hours",
"topPaymentMethods": "Top Payment Methods", "topPaymentMethods": "Top Payment Methods",
"noticesAndUpdates": "Notices & Updates" "noticesAndUpdates": "Notices & Updates",
"banner": {
"doNotShowToday": "Don't show today",
"close": "Close"
},
"biometricRegistration": {
"title": "Biometric Authentication Setup",
"description": "Register biometric authentication once,\nand log in conveniently without a password.",
"later": "Later",
"registerNow": "Register Now"
},
"notice": {
"goTo": "Go to Notice"
}
}, },
"settlement": { "settlement": {
"title": "Settlement", "title": "Settlement",
@@ -332,7 +363,7 @@
"amountInfo": "Amount Information", "amountInfo": "Amount Information",
"totalTransactionAmount": "Total Transaction Amount", "totalTransactionAmount": "Total Transaction Amount",
"creditCard": "Credit Card", "creditCard": "Credit Card",
"accountTransfer": "Account Transfer", "accountTransfer": "Bank Transfer",
"totalPgFee": "Total PG Fee", "totalPgFee": "Total PG Fee",
"paymentFee": "Payment Fee", "paymentFee": "Payment Fee",
"escrowFee": "Escrow Fee", "escrowFee": "Escrow Fee",
@@ -342,7 +373,35 @@
"offset": "Offset", "offset": "Offset",
"transactionAmount": "Transaction Amount", "transactionAmount": "Transaction Amount",
"expectedSettlementAmount": "Expected Settlement Amount", "expectedSettlementAmount": "Expected Settlement Amount",
"preSettlementCancelOffset": "Pre-Settlement Cancel Offset" "preSettlementCancelOffset": "Pre-Settlement Cancel Offset",
"periodType": {
"settlementDate": "Settlement Date",
"transactionDate": "Transaction Date"
},
"searchCriteria": "Search Criteria",
"searchPeriod": "Search Period",
"settlementCompleted": "Settlement Completed",
"depositScheduled": "Deposit Scheduled",
"previousMonth": "Previous Month",
"nextMonth": "Next Month",
"previous": "Previous",
"next": "Next",
"scheduled": "Scheduled",
"completed": "Completed",
"settlementScheduledAmount": "Settlement Scheduled Amount",
"settlementCompletedAmount": "Settlement Completed Amount",
"settlementInfo": "Settlement Information",
"transferStatus": "Transfer Status",
"transferId": "Transfer ID",
"transferTime": "Transfer Time",
"bankName": "Bank Name",
"accountNumber": "Account Number",
"depositorName": "Depositor Name",
"settlementDepositAmount": "Settlement Deposit Amount",
"errorReason": "Error Reason",
"transactionDetailInfo": "Transaction Detail Information",
"cardBankTelecom": "Card/Bank/Telecom",
"approvalAccountPhone": "Approval No./Account No./Phone No."
}, },
"transaction": { "transaction": {
"listTitle": "Transactions", "listTitle": "Transactions",
@@ -358,7 +417,254 @@
"searchOptions": "Search Options", "searchOptions": "Search Options",
"download": "Download", "download": "Download",
"cancelTransaction": "Cancel Transaction", "cancelTransaction": "Cancel Transaction",
"confirmCancel": "Do you want to cancel this transaction?" "confirmCancel": "Do you want to cancel this transaction?",
"bottomSheet": {
"escrowMailResend": {
"title": "Select Email Address",
"close": "Close",
"mailLabel": "Receive by Email",
"mail": "Mail",
"select": "Select",
"errorNoEmail": "No registered email information.\nPlease add email authentication information from the user management menu before applying."
},
"cashReceiptPurposeUpdate": {
"title": "Cash Receipt Purpose Change Notice",
"description": "When changing the purpose of a cash receipt, the existing issuance record will be cancelled and a new one will be issued according to the selected purpose.",
"expenseProof": "Expense Proof",
"incomeDeduction": "Income Deduction",
"expenseToIncome": "Expense Proof → Income Deduction",
"incomeToExpense": "Income Deduction → Expense Proof"
}
},
"sections": {
"importantInfo": "Important Information",
"billingInfo": "Billing Information",
"partCancelInfo": "Partial Cancel Information",
"detailInfo": "Detail Information",
"issueInfo": "Issue Information",
"escrowInfo": "Escrow Information",
"paymentInfo": "Payment Information",
"transactionInfo": "Transaction Information",
"settlementInfo": "Settlement Information",
"merchantInfo": "Merchant Information",
"amountDetail": "Amount Details"
},
"fields": {
"billKey": "Bill Key",
"tid": "TID",
"orderNumber": "Order No.",
"approvalNumber": "Approval Number",
"approvalDate": "Approval Date",
"approvalDay": "Approval Day",
"requestStatus": "Request Status",
"processResult": "Process Result",
"installmentMonth": "Installment Month",
"installmentPeriod": "Installment Period",
"installmentMonthly": "{{count}} Month Installment",
"lumpSum": "Lump Sum",
"productName": "Product Name",
"buyerName": "Purchaser Name",
"buyer": "Purchaser",
"originalTid": "Original Transaction TID",
"originalAmount": "Original Transaction Amount",
"partCancelTid": "Partial Cancel TID",
"reApprovalTid": "Re-approval TID",
"partCancelAmount": "Partial Cancel Amount",
"remainingAmount": "Remaining Amount",
"reApprovalAmount": "Re-approval Amount",
"cancelDate": "Cancel Date",
"cancelApprovalNumber": "Cancel Approval Number",
"receiptInfo": "Cash Receipt",
"transactionId": "Transaction ID",
"merchantTid": "Transaction ID",
"subMallName": "Sub-mall Name",
"subMallBusinessNumber": "Sub-mall Business Number",
"issueChannel": "Issue Channel",
"failureReason": "Failure Reason",
"issueNumber": "Issue Number",
"issueDate": "Issue Date",
"issueDateTime": "Issue Date Time",
"purpose": "Purpose",
"paymentMethod": "Payment Method",
"transactionStatus": "Payment Status",
"transactionMethod": "Payment Method",
"transactionType": "Transaction Type",
"deliveryStatus": "Delivery Status",
"deliveryRegistration": "Delivery Registration",
"deliveryComplete": "Delivery Complete",
"purchaseConfirm": "Purchase Confirm",
"purchaseReject": "Purchase Reject",
"rejectReason": "Reject Reason",
"escrowCertNumber": "Escrow Cert Number",
"deliveryCompany": "Delivery Company",
"trackingNumber": "Tracking Number",
"deliveryAddress": "Delivery Address",
"approvalPurchase": "Approval Purchase",
"approvalPurchaseDate": "Approval Purchase Date",
"approvalRejectCount": "Approval Reject (Count)",
"approvalRepurchaseCount": "Approval Repurchase (Count)",
"approvalVAN": "Approval VAN",
"cancelPurchase": "Cancel Purchase",
"cancelPurchaseDate": "Cancel Purchase",
"cancelRejectCount": "Cancel Reject (Count)",
"cancelRepurchaseCount": "Cancel Repurchase (Count)",
"purchaseVan": "Purchase VAN",
"purchaseCompany": "Purchase Company (Issuer)",
"cardNo": "Card Number",
"approvalNo": "Approval Number",
"authentication": "Authentication",
"joinType": "Type",
"bankName": "Bank Name",
"bank": "Bank",
"accountNo": "Account Number",
"refundCompleteDate": "Refund Complete Date",
"customerId": "Customer ID",
"culturelandId": "Cultureland ID",
"partner": "Partner",
"cpid": "CPID",
"goodsCategory": "Goods Category",
"cellphoneNo": "Cellphone Number",
"giftCardNumber": "Gift Card Number",
"depositBankName": "Deposit Bank Name",
"depositorName": "Depositor Name",
"depositDeadline": "Deposit Deadline",
"depositDate": "Deposit Date",
"refundScheduleDate": "Refund Schedule Date",
"refundBankName": "Refund Bank Name",
"refundAccountNo": "Refund Account Number",
"accountHolder": "Account Holder",
"buyerEmail": "Email",
"buyerTel": "Phone Number",
"cancelReason": "Cancel Reason",
"cancelRequestor": "Cancel Requestor",
"partialCancel": "Partial Cancel",
"cashReceiptIssue": "Cash Receipt Issue",
"approvalSettlementDate": "Approval Settlement Date",
"approvalSettlementAmount": "Approval Settlement Amount",
"cancelSettlementDate": "Cancel Settlement Date",
"cancelSettlementAmount": "Cancel Settlement Amount",
"companyName": "Company Name",
"gid": "GID",
"aid": "AID",
"mid": "MID",
"transactionRequestAmount": "Transaction Request Amount",
"approvalRequestAmount": "Approval Request Amount",
"transactionAmount": "Transaction Amount",
"creditCardAmount": "Credit Card Amount",
"cardAmount": "Credit Card Amount",
"pointAmount": "Point Amount",
"couponAmount": "Coupon Amount",
"escrowFee": "Escrow Fee",
"kakaoMoneyAmount": "Kakao Money",
"kakaoPointAmount": "Kakao Point",
"kakaoDiscountAmount": "Kakao Instant Discount",
"naverPointAmount": "Naver Point",
"tossMoneyAmount": "Toss Money",
"tossDiscountAmount": "Toss Discount",
"paycoPointAmount": "Payco Point",
"paycoCouponAmount": "Payco Coupon",
"supplyAmount": "Supply Amount",
"vat": "VAT",
"serviceAmount": "Service Charge",
"taxFreeAmount": "Tax Free Amount",
"amount": "Amount",
"totalBalance": "Total Balance",
"totalCancelAmount": "Total Cancel Amount",
"customerName": "Customer Name",
"transactionConfirmation": "Transaction Confirmation"
},
"constants": {
"all": "All",
"orderNumber": "Order No.",
"tid": "TID",
"approval": "Approval",
"approvalComplete": "Approval/Payment Complete",
"cancel": "Cancel",
"cancelShort": "Post-cancel",
"totalCancel": "Pre-cancel / Cancel",
"totalCancelShort": "Pre-cancel",
"refund": "Refund",
"deposit": "Deposit",
"waitingDeposit": "Waiting Deposit",
"issueCancel": "Serial Number Cancel",
"creditCard": "Credit Card",
"virtualAccount": "Virtual Account",
"accountTransfer": "Bank Transfer",
"accountSimpleTransfer": "Simple Account Payment",
"mobilePayment": "Mobile Phone",
"ssgMoney": "SSG Money",
"ssgBank": "SSG Bank Account",
"cultureLand": "Gift Voucher",
"tmoneyPay": "Tmoney Pay",
"request": "Request",
"requestCancel": "Request Cancel",
"requestComplete": "Request Complete",
"issueComplete": "Issue Complete",
"requestFail": "Request Failed",
"issueFail": "Issue Failed",
"paymentComplete": "Payment Complete",
"deliveryRegistration": "Delivery Registration",
"deliveryComplete": "Delivery Complete",
"purchaseConfirm": "Purchase Confirm",
"purchaseReject": "Purchase Reject",
"refundProcessing": "Refund Processing",
"depositComplete": "Deposit Complete",
"inProgress": "Progressing",
"success": "Success",
"failure": "Failure"
},
"handWrittenIssuance": {
"step1Title": "Enter Issue Information",
"step2Title": "Enter Issue Amount",
"businessNumber": "Business registration Number",
"incomeDeduction": "Income Tax Deduction",
"expenseProof": "Proof of Expenditure",
"productNamePlaceholder": "Product Name",
"buyerNamePlaceholder": "Buyer Name",
"issueNumberPlaceholder": "Business Number OR Phone Number",
"emailPlaceholder": "TEST123@nicepay.com",
"phoneNumberPlaceholder": "01012345678",
"issueAmount": "Issue Amount",
"vatAutoCalc": "VAT Automatic Calculation",
"errorMessage": "The issue amount must equal the sum of supply amount, VAT, tax-free amount, and service charge."
},
"list": {
"paymentRequest": "Payment Request",
"manualIssuance": "Manual Issuance",
"separator": "|"
},
"cancel": {
"bankGroup": {
"select": "Select",
"notice": "Refunds will be paid to the entered account information without separate verification.\nPlease check the entered information once more."
},
"passwordGroup": {
"cancelPassword": "Cancel Password",
"passwordMismatch": "Password Mismatch"
},
"afterDeposit": {
"title": "Transaction Cancel (After Deposit Cancel)",
"notice": "The requested transaction cancellation can be processed after deposit.",
"cancelTransactionTitle": "Cancel Transaction Details",
"approvalAmount": "Approval Amount",
"depositRequestAmount": "Deposit Request Amount",
"depositInfoTitle": "Deposit Information",
"guide1": "Cancellation must be submitted through the [Cancel Request] button.",
"guide2": "Please enter the merchant name as the depositor name.",
"guide3": "Cancellation will proceed only if the same amount as the deposit request amount is deposited.",
"guide4": "Cancellation details can be confirmed after up to 3 days.",
"guide5": "After Deposit Cancellation Process:\nMerchant Cancel Request -> Merchant Deposit -> Confirm Deposit -> Process Cancel",
"guide6": "For transactions that have not been settled, please send transaction details to service@nicepay.co.kr. (Only for transactions with more than 2 days remaining until the settlement date)"
},
"partCancel": {
"balance": "Balance",
"cancelAmount": "Cancel Amount",
"taxableAmount": "Taxable Amount",
"taxAmount": "Tax Amount",
"taxFree": "Tax Free",
"serviceFee": "Service Fee"
}
}
}, },
"cashReceipt": { "cashReceipt": {
"title": "Cash Receipt", "title": "Cash Receipt",
@@ -383,7 +689,7 @@
"notificationData": "Notification Data", "notificationData": "Notification Data",
"notificationDataInquiry": "Payment Notification Data Inquiry", "notificationDataInquiry": "Payment Notification Data Inquiry",
"serviceUsageCommissionAndSettlement": "Service Usage, Commission & Settlement Period", "serviceUsageCommissionAndSettlement": "Service Usage, Commission & Settlement Period",
"merchantNoInterestInfo": "Merchant No-Interest Info", "merchantNoInterestInfo": "Interest Free Payment",
"commissionAndSettlement": "Commission & Settlement", "commissionAndSettlement": "Commission & Settlement",
"settlementPeriod": "Settlement Period", "settlementPeriod": "Settlement Period",
"general": "General", "general": "General",
@@ -414,7 +720,30 @@
"accountTransfer": "Account Transfer", "accountTransfer": "Account Transfer",
"virtualAccount": "Virtual Account", "virtualAccount": "Virtual Account",
"mobilePayment": "Mobile Payment", "mobilePayment": "Mobile Payment",
"escrowPayment": "Escrow Payment" "escrowPayment": "Escrow Payment",
"kakaoPay": "Kakao Pay",
"naverPay": "Naver Pay",
"samsungPay": "Samsung Pay",
"mobilePaymentFull": "Mobile Payment",
"cultureLandGiftCard": "Gift Voucher",
"ssgMoney": "SSG Money",
"tvPay": "TV Pay",
"samsungPayCard": "Samsung Pay (Card)",
"applePay": "Apple Pay",
"tossPay": "Toss Pay",
"payco": "PAYCO",
"livePay": "Live Pay",
"taiwanPayment": "Taiwan Payment",
"tmoneyPay": "Tmoney Pay",
"lPay": "L.PAY",
"payU": "PAYU",
"twLinePay": "TW LINE Pay",
"ssgPay": "SSG Pay",
"kBankPay": "Kbank Pay",
"ssgBankAccount": "SSG Bank Account",
"accountSimplePayment": "Simple Account Payment",
"skPay": "SK PAY",
"bcCard": "BC Card"
} }
}, },
"additionalService": { "additionalService": {
@@ -477,6 +806,69 @@
"reason": "Reason", "reason": "Reason",
"accountError": "Payment Account Error", "accountError": "Payment Account Error",
"agreeOrReject": "Agree/Reject Settlement" "agreeOrReject": "Agree/Reject Settlement"
},
"ars": {
"paymentComplete": "Payment Complete",
"unpaid": "Unpaid",
"pendingPayment": "Pending Payment",
"paymentSuccess": "Payment Success",
"expired": "Expired",
"canceled": "Canceled"
},
"sms": {
"virtualAccountRequest": "Virtual Account Request",
"virtualAccountRequestDeposit": "Virtual Account Request + Deposit"
},
"linkPay": {
"sendRequest": "Send Request",
"sendCancel": "Send Cancel",
"incompleteActive": "Incomplete/Active",
"depositRequest": "Deposit Request",
"paymentComplete": "Payment Complete",
"paymentFail": "Payment Failed",
"paymentStopped": "Payment Stopped",
"paymentStoppedInactive": "Payment Stopped/Inactive",
"pending": "Pending",
"email": "Email",
"alimtalk": "Alimtalk"
},
"accountHolderAuth": {
"accountHolderNameMatch": "Account Holder Name Match",
"accountHolderNameMismatch": "Account Holder Name Mismatch",
"authFailedAccountError": "Authentication Failed (Account Error, etc.)"
},
"accountHolderSearch": {
"accountHolder": "Account Holder",
"accountNumber": "Account Number"
},
"faceAuth": {
"authentication": "Authentication",
"registration": "Registration"
},
"fundAccount": {
"registrationComplete": "Registration Complete",
"transferRequest": "Transfer Request",
"requestSuccess": "Request Success",
"requestFail": "Request Failed",
"requestDate": "Request Date",
"transferDate": "Transfer Date",
"recipient": "Recipient",
"accountNumber": "Account Number"
},
"alimtalk": {
"buyer": "Buyer",
"depositRequest": "Deposit Request",
"depositComplete": "Deposit Complete",
"kakaotalk": "KakaoTalk",
"fbSms": "FB SMS"
},
"payout": {
"requestDate": "Request Date",
"disbursementDate": "Disbursement Date"
},
"keyIn": {
"fullCancel": "Full Cancel",
"partialCancel": "Partial Cancel"
} }
}, },
"merchant": { "merchant": {
@@ -539,9 +931,17 @@
"issueInfo": "Issue Information", "issueInfo": "Issue Information",
"issueTargetDate": "Issue Target Date", "issueTargetDate": "Issue Target Date",
"issueDate": "Issue Date", "issueDate": "Issue Date",
"issuanceMonth": "Issue Month",
"subject": "Subject", "subject": "Subject",
"issueTarget": "Issue Target", "issueTarget": "Issue Target",
"receiptType": "Receipt Type", "receiptType": "Receipt Type",
"receipt": "Receipt",
"bill": "Bill",
"general": "General",
"differenceSettlement": "Difference Settlement",
"refundSettlement": "Refund Settlement",
"taxable": "Taxable",
"taxExempt": "Tax Exempt",
"supplierInfo": "Supplier Information", "supplierInfo": "Supplier Information",
"receiverInfo": "Receiver Information", "receiverInfo": "Receiver Information",
"taxExemptionType": "Tax/Exemption Type", "taxExemptionType": "Tax/Exemption Type",
@@ -555,6 +955,7 @@
"applicationDate": "Application Date", "applicationDate": "Application Date",
"emailAddress": "Email Address", "emailAddress": "Email Address",
"referenceDataNote": "Please compare with internal accounting data\nbefore using this reference material.", "referenceDataNote": "Please compare with internal accounting data\nbefore using this reference material.",
"result": "Result" "result": "Result",
"keyInMerchantError": "[9997] Not a Key-In merchant.<br/>Please contact NICEPAY."
} }
} }

415
src/locales/ko.json
View File

@@ -17,7 +17,17 @@
"noData": "데이터가 없습니다", "noData": "데이터가 없습니다",
"next": "다음", "next": "다음",
"latest": "최신순", "latest": "최신순",
"oldest": "오래된순" "oldest": "오래된순",
"weekdays": {
"sun": "일",
"mon": "월",
"tue": "화",
"wed": "수",
"thu": "목",
"fri": "금",
"sat": "토"
},
"currencyUnit": "원"
}, },
"menu": { "menu": {
"home": "홈", "home": "홈",
@@ -81,11 +91,16 @@
"issueNumber": "발행번호" "issueNumber": "발행번호"
}, },
"periods": { "periods": {
"today": "당일",
"week": "일주일",
"currentMonth": "당월",
"1month": "1개월", "1month": "1개월",
"2months": "2개월",
"3months": "3개월", "3months": "3개월",
"6months": "6개월", "6months": "6개월",
"custom": "직접입력" "custom": "직접입력"
}, },
"selectDate": "날짜 선택",
"transactionType": "거래구분", "transactionType": "거래구분",
"transactionTypes": { "transactionTypes": {
"all": "전체", "all": "전체",
@@ -95,7 +110,8 @@
"sortOrder": "정렬순서", "sortOrder": "정렬순서",
"sortOrders": { "sortOrders": {
"latest": "최신순", "latest": "최신순",
"oldest": "과거순" "oldest": "과거순",
"highest": "고액순"
}, },
"startDate": "시작일", "startDate": "시작일",
"endDate": "종료일", "endDate": "종료일",
@@ -178,6 +194,8 @@
"merchant": "가맹점", "merchant": "가맹점",
"all": "전체", "all": "전체",
"inquiryButton": "1:1 문의하기", "inquiryButton": "1:1 문의하기",
"registrationDate": "등록일",
"status": "상태",
"categories": { "categories": {
"all": "모두", "all": "모두",
"choose": "선택", "choose": "선택",
@@ -318,7 +336,20 @@
"topSalesDays": "매출이 가장 높은 요일", "topSalesDays": "매출이 가장 높은 요일",
"topSalesHours": "매출이 가장 높은 시간", "topSalesHours": "매출이 가장 높은 시간",
"topPaymentMethods": "가장 많이쓰인 결제 수단", "topPaymentMethods": "가장 많이쓰인 결제 수단",
"noticesAndUpdates": "공지 & 최신정보" "noticesAndUpdates": "공지 & 최신정보",
"banner": {
"doNotShowToday": "오늘 하루 보지 않기",
"close": "닫기"
},
"biometricRegistration": {
"title": "간편 인증 등록",
"description": "간편 인증 등록 한번으로,\n비밀번호 없이 편리하게 로그인하세요.",
"later": "다음에",
"registerNow": "지금 등록하기"
},
"notice": {
"goTo": "공지사항 바로가기"
}
}, },
"settlement": { "settlement": {
"title": "정산조회", "title": "정산조회",
@@ -346,7 +377,35 @@
"offset": "상계", "offset": "상계",
"transactionAmount": "거래금액", "transactionAmount": "거래금액",
"expectedSettlementAmount": "정산예정금액", "expectedSettlementAmount": "정산예정금액",
"preSettlementCancelOffset": "정산전 취소상계" "preSettlementCancelOffset": "정산전 취소상계",
"periodType": {
"settlementDate": "정산일자",
"transactionDate": "거래일자"
},
"searchCriteria": "조회기준",
"searchPeriod": "조회기간",
"settlementCompleted": "정산 완료",
"depositScheduled": "입금 예정",
"previousMonth": "이전 달",
"nextMonth": "다음 달",
"previous": "이전",
"next": "다음",
"scheduled": "예정",
"completed": "완료",
"settlementScheduledAmount": "정산 예정 금액",
"settlementCompletedAmount": "정산 완료 금액",
"settlementInfo": "정산 정보",
"transferStatus": "이체상태",
"transferId": "이체ID",
"transferTime": "이체시간",
"bankName": "은행명",
"accountNumber": "계좌번호",
"depositorName": "입금인자",
"settlementDepositAmount": "정상입금액",
"errorReason": "오류사유",
"transactionDetailInfo": "거래 상세 정보",
"cardBankTelecom": "카드/은행/이통사",
"approvalAccountPhone": "승인번호/계좌번호/휴대번호"
}, },
"transaction": { "transaction": {
"listTitle": "거래내역 조회", "listTitle": "거래내역 조회",
@@ -362,7 +421,254 @@
"searchOptions": "검색옵션", "searchOptions": "검색옵션",
"download": "다운로드", "download": "다운로드",
"cancelTransaction": "거래 취소", "cancelTransaction": "거래 취소",
"confirmCancel": "거래를 취소하시겠습니까?" "confirmCancel": "거래를 취소하시겠습니까?",
"bottomSheet": {
"escrowMailResend": {
"title": "이메일 주소를 선택하세요",
"close": "닫기",
"mailLabel": "메일로 받기",
"mail": "메일",
"select": "선택",
"errorNoEmail": "등록된 메일 정보가 없습니다.\n이메일 인증정보를 사용자관리 메뉴에서 추가 후 신청하세요."
},
"cashReceiptPurposeUpdate": {
"title": "현금영수증 용도 변경 안내",
"description": "현금영수증의 용도 변경 시 기존 발급 내역이 취소되며, 선택한 용도에 맞게 새로 발급됩니다.",
"expenseProof": "지출증빙용",
"incomeDeduction": "소득공제용",
"expenseToIncome": "지출증빙용 → 소득공제용",
"incomeToExpense": "소득공제용 → 지출증빙용"
}
},
"sections": {
"importantInfo": "중요 정보",
"billingInfo": "빌링 정보",
"partCancelInfo": "부분취소 정보",
"detailInfo": "상세 정보",
"issueInfo": "발급 정보",
"escrowInfo": "에스크로 정보",
"paymentInfo": "결제 정보",
"transactionInfo": "거래 정보",
"settlementInfo": "정산 정보",
"merchantInfo": "상점 정보",
"amountDetail": "금액상세"
},
"fields": {
"billKey": "빌키",
"tid": "TID",
"orderNumber": "주문번호",
"approvalNumber": "승인번호",
"approvalDate": "승인일자",
"approvalDay": "승인일",
"requestStatus": "요청상태",
"processResult": "처리결과",
"installmentMonth": "할부개월",
"installmentPeriod": "할부기간",
"installmentMonthly": "{{count}}개월 할부",
"lumpSum": "일시불",
"productName": "상품명",
"buyerName": "구매자명",
"buyer": "구매자",
"originalTid": "원거래 TID",
"originalAmount": "원거래 금액",
"partCancelTid": "부분취소 TID",
"reApprovalTid": "재승인 TID",
"partCancelAmount": "부분취소 금액",
"remainingAmount": "부분취소 후 잔액",
"reApprovalAmount": "재승인 금액",
"cancelDate": "취소일자",
"cancelApprovalNumber": "취소승인번호",
"receiptInfo": "현금영수증",
"transactionId": "거래ID",
"merchantTid": "거래ID",
"subMallName": "서브몰명",
"subMallBusinessNumber": "서브몰 사업자번호",
"issueChannel": "발행경로",
"failureReason": "실패사유",
"issueNumber": "발행번호",
"issueDate": "발행일자",
"issueDateTime": "발행일시",
"purpose": "용도",
"paymentMethod": "결제수단",
"transactionStatus": "거래상태",
"transactionMethod": "거래수단",
"transactionType": "거래구분",
"deliveryStatus": "배송상태",
"deliveryRegistration": "배송등록",
"deliveryComplete": "배송완료",
"purchaseConfirm": "구매확인",
"purchaseReject": "구매거절",
"rejectReason": "거절사유",
"escrowCertNumber": "에스크로인증번호",
"deliveryCompany": "택배사",
"trackingNumber": "운송장번호",
"deliveryAddress": "배송주소",
"approvalPurchase": "승인매입",
"approvalPurchaseDate": "승인매입일",
"approvalRejectCount": "승인반송(횟수)",
"approvalRepurchaseCount": "승인재매입(횟수)",
"approvalVAN": "승인VAN",
"cancelPurchase": "취소매입",
"cancelPurchaseDate": "취소매입",
"cancelRejectCount": "취소반송(횟수)",
"cancelRepurchaseCount": "취소재매입(횟수)",
"purchaseVan": "매입VAN",
"purchaseCompany": "매입사(발급사)",
"cardNo": "카드번호",
"approvalNo": "승인번호",
"authentication": "인증",
"joinType": "유형",
"bankName": "은행명",
"bank": "은행",
"accountNo": "계좌번호",
"refundCompleteDate": "환불완료일",
"customerId": "고객ID",
"culturelandId": "컬처랜드ID",
"partner": "제휴사",
"cpid": "CPID",
"goodsCategory": "상품구분",
"cellphoneNo": "휴대폰번호",
"giftCardNumber": "상품권번호",
"depositBankName": "입금금융기관명",
"depositorName": "입금자명",
"depositDeadline": "입금기한",
"depositDate": "입금일",
"refundScheduleDate": "환불예정일",
"refundBankName": "환불은행명",
"refundAccountNo": "환불계좌번호",
"accountHolder": "예금주",
"buyerEmail": "이메일",
"buyerTel": "전화번호",
"cancelReason": "취소사유",
"cancelRequestor": "취소요청자",
"partialCancel": "부분취소",
"cashReceiptIssue": "현금영수증발행",
"approvalSettlementDate": "승인정산일",
"approvalSettlementAmount": "승인정산금액",
"cancelSettlementDate": "취소정산일",
"cancelSettlementAmount": "취소정산금액",
"companyName": "상호",
"gid": "GID",
"aid": "AID",
"mid": "MID",
"transactionRequestAmount": "거래요청금액",
"approvalRequestAmount": "승인요청금액",
"transactionAmount": "거래금액",
"creditCardAmount": "신용카드금액",
"cardAmount": "신용카드금액",
"pointAmount": "포인트금액",
"couponAmount": "쿠폰금액",
"escrowFee": "에스크로수수료",
"kakaoMoneyAmount": "카카오머니",
"kakaoPointAmount": "카카오포인트",
"kakaoDiscountAmount": "카카오 즉시할인",
"naverPointAmount": "네이버포인트",
"tossMoneyAmount": "토스머니",
"tossDiscountAmount": "토스할인",
"paycoPointAmount": "페이코포인트",
"paycoCouponAmount": "페이코쿠폰",
"supplyAmount": "공급가액",
"vat": "VAT",
"serviceAmount": "봉사료",
"taxFreeAmount": "면세금액",
"amount": "금액",
"totalBalance": "총 잔액",
"totalCancelAmount": "총 취소금액",
"customerName": "고객명",
"transactionConfirmation": "거래 확인서"
},
"constants": {
"all": "전체",
"orderNumber": "주문번호",
"tid": "TID",
"approval": "승인",
"approvalComplete": "승인/입금완료",
"cancel": "취소",
"cancelShort": "후취소",
"totalCancel": "전취소/취소",
"totalCancelShort": "전취소",
"refund": "환불",
"deposit": "입금",
"waitingDeposit": "입금대기",
"issueCancel": "채번취소",
"creditCard": "신용카드",
"virtualAccount": "가상계좌",
"accountTransfer": "계좌이체",
"accountSimpleTransfer": "계좌간편결제",
"mobilePayment": "휴대폰",
"ssgMoney": "SSG 머니",
"ssgBank": "SSG 은행계좌",
"cultureLand": "문화상품권",
"tmoneyPay": "티머니페이",
"request": "요청",
"requestCancel": "요청취소",
"requestComplete": "요청완료",
"issueComplete": "발급완료",
"requestFail": "요청실패",
"issueFail": "발급실패",
"paymentComplete": "결제완료",
"deliveryRegistration": "배송등록",
"deliveryComplete": "배송완료",
"purchaseConfirm": "구매확인",
"purchaseReject": "구매거절",
"refundProcessing": "환불처리",
"depositComplete": "지급완료",
"inProgress": "진행중",
"success": "성공",
"failure": "실패"
},
"handWrittenIssuance": {
"step1Title": "발행 정보 입력",
"step2Title": "발행 금액 입력",
"businessNumber": "사업자번호",
"incomeDeduction": "소득공제",
"expenseProof": "지출증빙",
"productNamePlaceholder": "상품명",
"buyerNamePlaceholder": "구매자명",
"issueNumberPlaceholder": "사업자번호 OR 휴대폰번호",
"emailPlaceholder": "TEST123@nicepay.com",
"phoneNumberPlaceholder": "01012345678",
"issueAmount": "발행금액",
"vatAutoCalc": "VAT자동계산",
"errorMessage": "발행금액은 공급가액 VAT,면세금액, 봉사료의 총합과 같아야 합니다."
},
"list": {
"paymentRequest": "결제신청",
"manualIssuance": "수기발행",
"separator": "|"
},
"cancel": {
"bankGroup": {
"select": "선택",
"notice": "환불은 입력한 계좌정보로 별도 확인 절차없이 지급됩니다.\n입력 정보를 한번 더 확인해 주세요."
},
"passwordGroup": {
"cancelPassword": "취소 비밀번호",
"passwordMismatch": "비밀번호 불일치"
},
"afterDeposit": {
"title": "거래취소(입금 후 취소)",
"notice": "요청하신 거래취소는 입금 후 취소처리 가능합니다.",
"cancelTransactionTitle": "취소거래내역",
"approvalAmount": "승인금액",
"depositRequestAmount": "입금요청금액",
"depositInfoTitle": "입금 정보",
"guide1": "[취소요청] 버튼을 통해 취소 요청을 진행해야 접수됩니다.",
"guide2": "입금자명은 가맹점 상호로 입력해 주세요.",
"guide3": "입금요청금액과 동일한 금액을 입금해야 취소가 진행됩니다.",
"guide4": "취소내역은 최대 3일 이후 확인 가능합니다.",
"guide5": "입금 후 취소 프로세스 :\n가맹점의 취소요청 -> 가맹점의입금 -> 입금 확인 -> 취소 처리",
"guide6": "정산받지 않은 거래인 경우 service@nicepay.co.kr로 거래내역을 발송바랍니다. (단. 정산예정일이 2일 이상 남은 거래에 한함)"
},
"partCancel": {
"balance": "잔액",
"cancelAmount": "취소금액",
"taxableAmount": "과세액",
"taxAmount": "부가세",
"taxFree": "면세",
"serviceFee": "봉사료"
}
}
}, },
"cashReceipt": { "cashReceipt": {
"title": "현금영수증", "title": "현금영수증",
@@ -418,7 +724,30 @@
"accountTransfer": "계좌이체", "accountTransfer": "계좌이체",
"virtualAccount": "가상계좌", "virtualAccount": "가상계좌",
"mobilePayment": "휴대폰", "mobilePayment": "휴대폰",
"escrowPayment": "에스크로 결제" "escrowPayment": "에스크로 결제",
"kakaoPay": "카카오페이",
"naverPay": "네이버페이",
"samsungPay": "삼성페이",
"mobilePaymentFull": "휴대폰결제",
"cultureLandGiftCard": "문화상품권",
"ssgMoney": "SSG머니",
"tvPay": "TV페이",
"samsungPayCard": "삼성페이(카드)",
"applePay": "애플페이",
"tossPay": "토스페이",
"payco": "PAYCO",
"livePay": "리브페이",
"taiwanPayment": "대만결제",
"tmoneyPay": "티머니페이",
"lPay": "L.PAY",
"payU": "PAYU",
"twLinePay": "TW라인페이",
"ssgPay": "SSG페이",
"kBankPay": "케이뱅크페이",
"ssgBankAccount": "SSG은행계좌",
"accountSimplePayment": "계좌간편결제",
"skPay": "SK PAY",
"bcCard": "비씨"
} }
}, },
"additionalService": { "additionalService": {
@@ -481,6 +810,69 @@
"reason": "사유", "reason": "사유",
"accountError": "지급 계좌오류", "accountError": "지급 계좌오류",
"agreeOrReject": "정산 동의/거절" "agreeOrReject": "정산 동의/거절"
},
"ars": {
"paymentComplete": "결제완료",
"unpaid": "미결제",
"pendingPayment": "결제대기",
"paymentSuccess": "결제성공",
"expired": "기간만료",
"canceled": "취소완료"
},
"sms": {
"virtualAccountRequest": "가상계좌 요청",
"virtualAccountRequestDeposit": "가상계좌 요청 + 입금"
},
"linkPay": {
"sendRequest": "발송요청",
"sendCancel": "발송취소",
"incompleteActive": "미완료/활성화",
"depositRequest": "입금요청",
"paymentComplete": "결제완료",
"paymentFail": "결제실패",
"paymentStopped": "결제중단",
"paymentStoppedInactive": "결제중단/비활성화",
"pending": "대기중",
"email": "이메일",
"alimtalk": "알림톡"
},
"accountHolderAuth": {
"accountHolderNameMatch": "예금주명 일치",
"accountHolderNameMismatch": "예금주명 불일치",
"authFailedAccountError": "인증실패 (계좌 오류 등)"
},
"accountHolderSearch": {
"accountHolder": "예금주",
"accountNumber": "계좌번호"
},
"faceAuth": {
"authentication": "인증",
"registration": "등록"
},
"fundAccount": {
"registrationComplete": "등록완료",
"transferRequest": "이체요청",
"requestSuccess": "요청성공",
"requestFail": "요청실패",
"requestDate": "요청일자",
"transferDate": "이체일자",
"recipient": "수취인",
"accountNumber": "계좌번호"
},
"alimtalk": {
"buyer": "주문자",
"depositRequest": "입금요청",
"depositComplete": "입금완료",
"kakaotalk": "카카오톡",
"fbSms": "FB SMS"
},
"payout": {
"requestDate": "요청일자",
"disbursementDate": "지급일자"
},
"keyIn": {
"fullCancel": "전취소",
"partialCancel": "후취소"
} }
}, },
"merchant": { "merchant": {
@@ -543,9 +935,17 @@
"issueInfo": "발행 정보", "issueInfo": "발행 정보",
"issueTargetDate": "발행대상일자", "issueTargetDate": "발행대상일자",
"issueDate": "발행일자", "issueDate": "발행일자",
"issuanceMonth": "발행월",
"subject": "적요", "subject": "적요",
"issueTarget": "발행대상", "issueTarget": "발행대상",
"receiptType": "영수구분", "receiptType": "영수구분",
"receipt": "영수",
"bill": "청구",
"general": "일반",
"differenceSettlement": "차액정산",
"refundSettlement": "환급정산",
"taxable": "과세",
"taxExempt": "면세",
"supplierInfo": "공급자 정보", "supplierInfo": "공급자 정보",
"receiverInfo": "공급받는 자 정보", "receiverInfo": "공급받는 자 정보",
"taxExemptionType": "거래 과세/면세 구분", "taxExemptionType": "거래 과세/면세 구분",
@@ -559,6 +959,7 @@
"applicationDate": "신청일", "applicationDate": "신청일",
"emailAddress": "메일주소", "emailAddress": "메일주소",
"referenceDataNote": "참고용 자료이므로 반드시 내부 회계자료 등과\n비교 후 사용해 주세요.", "referenceDataNote": "참고용 자료이므로 반드시 내부 회계자료 등과\n비교 후 사용해 주세요.",
"result": "결과" "result": "결과",
"keyInMerchantError": "[9997] 키인가맹점이 아닙니다.<br/>NICEPAY로 문의하세요."
} }
} }

6
src/pages/additional-service/account-holder-auth/account-holder-auth-page.tsx
View File

@@ -162,9 +162,9 @@ export const AccountHolderAuthPage = () => {
sortType sortType
]); ]);
// if (!hasAccess) { if (!hasAccess) {
// return <AccessDeniedDialog />; return <AccessDeniedDialog />;
// } }
return ( return (
<> <>

6
src/pages/additional-service/account-holder-search/account-holder-search-page.tsx
View File

@@ -174,9 +174,9 @@ export const AccountHolderSearchPage = () => {
sortType sortType
]); ]);
// if (!hasAccess) { if (!hasAccess) {
// return <AccessDeniedDialog />; return <AccessDeniedDialog />;
// } }
return ( return (
<> <>

6
src/pages/additional-service/alimtalk/list-page.tsx
View File

@@ -228,9 +228,9 @@ export const AlimtalkListPage = () => {
sendCl sendCl
]); ]);
// if (!hasAccess) { if (!hasAccess) {
// return <AccessDeniedDialog />; return <AccessDeniedDialog />;
// } }
return ( return (
<> <>

6
src/pages/additional-service/ars/list-page.tsx
View File

@@ -226,9 +226,9 @@ export const ArsListPage = () => {
return rs; return rs;
} }
// if (!hasAccess) { if (!hasAccess) {
// return <AccessDeniedDialog />; return <AccessDeniedDialog />;
// } }
return ( return (
<> <>

6
src/pages/additional-service/face-auth/face-auth-page.tsx
View File

@@ -211,9 +211,9 @@ export const FaceAuthPage = () => {
sortType sortType
]); ]);
// if (!hasAccess) { if (!hasAccess) {
// return <AccessDeniedDialog />; return <AccessDeniedDialog />;
// } }
return ( return (
<> <>

6
src/pages/additional-service/fund-account/transfer-list-page.tsx
View File

@@ -28,9 +28,9 @@ export const FundAccountTransferListPage = () => {
navigate(PATHS.home); navigate(PATHS.home);
}); });
// if (!hasAccess) { if (!hasAccess) {
// return <AccessDeniedDialog />; return <AccessDeniedDialog />;
// } }
return ( return (
<> <>

6
src/pages/additional-service/key-in-payment/key-in-payment-page.tsx
View File

@@ -172,9 +172,9 @@ export const KeyInPaymentPage = () => {
sortType sortType
]); ]);
// if (!hasAccess) { if (!hasAccess) {
// return <AccessDeniedDialog />; return <AccessDeniedDialog />;
// } }
return ( return (

6
src/pages/additional-service/link-payment/link-payment-history-page.tsx
View File

@@ -35,9 +35,9 @@ export const LinkPaymentHistoryPage = () => {
navigate(PATHS.home); navigate(PATHS.home);
}); });
// if(!hasAccess){ if(!hasAccess){
// return <AccessDeniedDialog />; return <AccessDeniedDialog />;
// } }
return ( return (
<> <>

6
src/pages/additional-service/payout/list-page.tsx
View File

@@ -222,9 +222,9 @@ export const PayoutListPage = () => {
return rs; return rs;
}; };
// if (!hasAccess) { if (!hasAccess) {
// return <AccessDeniedDialog />; return <AccessDeniedDialog />;
// } }
return ( return (
<> <>

6
src/pages/additional-service/sms-payment/sms-payment-page.tsx
View File

@@ -178,9 +178,9 @@ export const SmsPaymentPage = () => {
smsCl smsCl
]); ]);
// if (!hasAccess) { if (!hasAccess) {
// return <AccessDeniedDialog />; return <AccessDeniedDialog />;
// } }
return ( return (
<> <>

6
src/pages/transaction/billing/list-page.tsx
View File

@@ -21,7 +21,7 @@ import { useDownloadExcelMutation } from '@/entities/transaction/api/use-downloa
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant'; import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { BillingFilter } from '@/entities/transaction/ui/filter/billing-filter'; import { BillingFilter } from '@/entities/transaction/ui/filter/billing-filter';
import { SortTypeBox } from '@/entities/common/ui/sort-type-box'; import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
import { BillingRequestStatusBtnGroup } from '@/entities/transaction/model/contant'; import { getBillingRequestStatusBtnGroup } from '@/entities/transaction/model/contant';
import { SortTypeKeys, HeaderType, DefaultRequestPagination } from '@/entities/common/model/types'; import { SortTypeKeys, HeaderType, DefaultRequestPagination } from '@/entities/common/model/types';
import { import {
useSetOnBack, useSetOnBack,
@@ -203,8 +203,8 @@ export const BillingListPage = () => {
<div className="excrow"> <div className="excrow">
<div className="full-menu-keywords no-padding"> <div className="full-menu-keywords no-padding">
{ {
BillingRequestStatusBtnGroup.map((value, index) => ( getBillingRequestStatusBtnGroup(t).map((value: any, index: number) => (
<span <span
key={ `key-service-code=${ index }` } key={ `key-service-code=${ index }` }
className={ `keyword-tag ${(requestStatus === value.value)? 'active': ''}` } className={ `keyword-tag ${(requestStatus === value.value)? 'active': ''}` }
onClick={ () => onClickToRequestStatus(value.value) } onClick={ () => onClickToRequestStatus(value.value) }

4
src/pages/transaction/cash-receipt/list-page.tsx
View File

@@ -30,7 +30,7 @@ import {
useSetHeaderType, useSetHeaderType,
useSetFooterMode useSetFooterMode
} from '@/widgets/sub-layout/use-sub-layout'; } from '@/widgets/sub-layout/use-sub-layout';
import { CashReceiptTransactionTypeBtnGroup } from '@/entities/transaction/model/contant'; import { getCashReceiptTransactionTypeBtnGroup } from '@/entities/transaction/model/contant';
import { useStore } from '@/shared/model/store'; import { useStore } from '@/shared/model/store';
import { useCashReceiptSummaryMutation } from '@/entities/transaction/api/use-cash-receipt-summary-mutation'; import { useCashReceiptSummaryMutation } from '@/entities/transaction/api/use-cash-receipt-summary-mutation';
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet'; import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
@@ -256,7 +256,7 @@ export const CashReceiptListPage = () => {
<div> <div>
<div className="full-menu-keywords no-padding"> <div className="full-menu-keywords no-padding">
{ {
CashReceiptTransactionTypeBtnGroup.map((value, index) => ( getCashReceiptTransactionTypeBtnGroup(t).map((value: any, index: number) => (
<span <span
key={`key-service-code=${index}`} key={`key-service-code=${index}`}
className={`keyword-tag ${(transactionType === value.value) ? 'active' : ''}`} className={`keyword-tag ${(transactionType === value.value) ? 'active' : ''}`}

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

@@ -19,7 +19,7 @@ import { useEscrowListMutation } from '@/entities/transaction/api/use-escrow-lis
import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation'; import { useDownloadExcelMutation } from '@/entities/transaction/api/use-download-excel-mutation';
import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant'; import { DEFAULT_PAGE_PARAM } from '@/entities/common/model/constant';
import { EscrowFilter } from '@/entities/transaction/ui/filter/escrow-filter'; import { EscrowFilter } from '@/entities/transaction/ui/filter/escrow-filter';
import { EscrowDeliveryStatusBtnGroup } from '@/entities/transaction/model/contant'; import { getEscrowDeliveryStatusBtnGroup } from '@/entities/transaction/model/contant';
import { SortTypeBox } from '@/entities/common/ui/sort-type-box'; import { SortTypeBox } from '@/entities/common/ui/sort-type-box';
import { SortTypeKeys, HeaderType, DefaultRequestPagination } from '@/entities/common/model/types'; import { SortTypeKeys, HeaderType, DefaultRequestPagination } from '@/entities/common/model/types';
import { import {
@@ -207,8 +207,8 @@ export const EscrowListPage = () => {
<div className="excrow"> <div className="excrow">
<div className="full-menu-keywords no-padding"> <div className="full-menu-keywords no-padding">
{ {
EscrowDeliveryStatusBtnGroup.map((value, index) => ( getEscrowDeliveryStatusBtnGroup(t).map((value: any, index: number) => (
<span <span
key={ `key-service-code=${ index }` } key={ `key-service-code=${ index }` }
className={ `keyword-tag ${(deliveryStatus === value.value)? 'active': ''}` } className={ `keyword-tag ${(deliveryStatus === value.value)? 'active': ''}` }
onClick={ () => onClickToDeliveryStatus(value.value) } onClick={ () => onClickToDeliveryStatus(value.value) }

10
src/shared/lib/hooks/use-extension-access-check.tsx
View File

@@ -3,6 +3,7 @@ import { useNavigate } from '@/shared/lib/hooks/use-navigate';
import { useExtensionCheckMutation } from '@/entities/additional-service/api/use-extension-check-mutation'; import { useExtensionCheckMutation } from '@/entities/additional-service/api/use-extension-check-mutation';
import { Dialog } from '@/shared/ui/dialogs/dialog'; import { Dialog } from '@/shared/ui/dialogs/dialog';
import { PATHS } from '@/shared/constants/paths'; import { PATHS } from '@/shared/constants/paths';
import { useTranslation } from 'react-i18next';
interface UseExtensionAccessCheckProps { interface UseExtensionAccessCheckProps {
extensionCode: string; extensionCode: string;
@@ -24,6 +25,7 @@ export const useExtensionAccessCheck = ({
enabled = true enabled = true
}: UseExtensionAccessCheckProps): UseExtensionAccessCheckReturn => { }: UseExtensionAccessCheckProps): UseExtensionAccessCheckReturn => {
const { navigate } = useNavigate(); const { navigate } = useNavigate();
const { t } = useTranslation();
const { mutateAsync: extensionCheck } = useExtensionCheckMutation(); const { mutateAsync: extensionCheck } = useExtensionCheckMutation();
const [hasAccess, setHasAccess] = useState<boolean | null>(null); const [hasAccess, setHasAccess] = useState<boolean | null>(null);
@@ -76,16 +78,16 @@ export const useExtensionAccessCheck = ({
return ( return (
<Dialog <Dialog
open={dialogOpen} open={dialogOpen}
onClose={() => {}} onClose={() => { }}
message={ message={
<> <>
이용 중이지 않은 서비스입니다.<br /> {t('additionalService.notActiveServiceMessage')}<br />
가입 문의는 영업 담당자 또는 고객센터로 문의해 주세요. {t('additionalService.contactSalesMessage')}
</> </>
} }
buttonLabel={['확인']} buttonLabel={['확인']}
onConfirmClick={handleConfirm} onConfirmClick={handleConfirm}
afterLeave={() => {}} afterLeave={() => { }}
/> />
); );
}; };

3
src/shared/ui/assets/css/style.css
View File

@@ -2090,12 +2090,13 @@ input[type="radio"] {
align-items: center; align-items: center;
padding: 15px 10px; padding: 15px 10px;
margin-bottom: 10px; margin-bottom: 10px;
gap: 10px;
} }
.sort-options { .sort-options {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 10px; gap: 4px;
} }
.sort-btn { .sort-btn {

32
src/shared/ui/filter/calendar-month.tsx
View File

@@ -4,6 +4,7 @@ import { CalendarType, FilterMonthOptions } from '@/entities/common/model/types'
import { IMAGE_ROOT } from '@/shared/constants/common'; import { IMAGE_ROOT } from '@/shared/constants/common';
import NiceCalendarMonth from '../calendar/nice-calendar-month'; import NiceCalendarMonth from '../calendar/nice-calendar-month';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
interface FilterCalendarMonthProps { interface FilterCalendarMonthProps {
title?: string; title?: string;
@@ -20,7 +21,8 @@ export const FilterCalendarMonth = ({
setStartMonth, setStartMonth,
setEndMonth setEndMonth
}: FilterCalendarMonthProps) => { }: FilterCalendarMonthProps) => {
const [filterTitle, setFilterTitle] = useState<string>(title || '조회기간'); const { t } = useTranslation();
const [filterTitle, setFilterTitle] = useState<string>(title || t('filter.period'));
const [monthReadOnly, setMonthReadyOnly] = useState<boolean>(false); const [monthReadOnly, setMonthReadyOnly] = useState<boolean>(false);
const [filterMonthOptionsBtn, setFilterMonthOptionsBtn] = useState<FilterMonthOptions>(FilterMonthOptions.Input); const [filterMonthOptionsBtn, setFilterMonthOptionsBtn] = useState<FilterMonthOptions>(FilterMonthOptions.Input);
const [calendarOpen, setCalendarOpen] = useState<boolean>(false); const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
@@ -83,22 +85,22 @@ export const FilterCalendarMonth = ({
<div className="opt-label">{ filterTitle }</div> <div className="opt-label">{ filterTitle }</div>
<div className="opt-controls col below h36"> <div className="opt-controls col below h36">
<div className="chip-row"> <div className="chip-row">
<span <span
className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Month1)? 'active': ''}` } className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Month1)? 'active': ''}` }
onClick={ () => setFilterMonth(FilterMonthOptions.Month1) } onClick={ () => setFilterMonth(FilterMonthOptions.Month1) }
>당월</span> >{t('filter.periods.currentMonth')}</span>
<span <span
className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Month2)? 'active': ''}` } className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Month2)? 'active': ''}` }
onClick={ () => setFilterMonth(FilterMonthOptions.Month2) } onClick={ () => setFilterMonth(FilterMonthOptions.Month2) }
>2개월</span> >{t('filter.periods.2months')}</span>
<span <span
className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Month3)? 'active': ''}` } className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Month3)? 'active': ''}` }
onClick={ () => setFilterMonth(FilterMonthOptions.Month3) } onClick={ () => setFilterMonth(FilterMonthOptions.Month3) }
>3개월</span> >{t('filter.periods.3months')}</span>
<span <span
className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Input)? 'active': ''}` } className={ `keyword-tag ${(filterMonthOptionsBtn === FilterMonthOptions.Input)? 'active': ''}` }
onClick={ () => setFilterMonth(FilterMonthOptions.Input) } onClick={ () => setFilterMonth(FilterMonthOptions.Input) }
>직접입력</span> >{t('filter.periods.custom')}</span>
</div> </div>
<div className="range-row"> <div className="range-row">
<div className="input-wrapper date"> <div className="input-wrapper date">
@@ -106,7 +108,7 @@ export const FilterCalendarMonth = ({
id="startDate" id="startDate"
className="date-input" className="date-input"
type="text" type="text"
placeholder="날짜 선택" placeholder={t('filter.selectDate')}
value={ moment(startMonth).format('YYYY.MM') } value={ moment(startMonth).format('YYYY.MM') }
onChange={ (e: ChangeEvent<HTMLInputElement>) => {} } onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
readOnly={ monthReadOnly } readOnly={ monthReadOnly }
@@ -118,7 +120,7 @@ export const FilterCalendarMonth = ({
> >
<img <img
src={ IMAGE_ROOT + '/ico_date.svg' } src={ IMAGE_ROOT + '/ico_date.svg' }
alt="날짜 선택" alt={t('filter.selectDate')}
/> />
</button> </button>
</div> </div>
@@ -128,19 +130,19 @@ export const FilterCalendarMonth = ({
id="endDate" id="endDate"
className="date-input" className="date-input"
type="text" type="text"
placeholder="날짜 선택" placeholder={t('filter.selectDate')}
value={ moment(endMonth).format('YYYY.MM') } value={ moment(endMonth).format('YYYY.MM') }
onChange={ (e: ChangeEvent<HTMLInputElement>) => {} } onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
readOnly={ monthReadOnly } readOnly={ monthReadOnly }
/> />
<button <button
type="button" type="button"
className="date-btn" className="date-btn"
onClick={ () => onClickToOpenCalendar(CalendarType.End) } onClick={ () => onClickToOpenCalendar(CalendarType.End) }
> >
<img <img
src={ IMAGE_ROOT + '/ico_date.svg' } src={ IMAGE_ROOT + '/ico_date.svg' }
alt="날짜 선택" alt={t('filter.selectDate')}
/> />
</button> </button>
</div> </div>

32
src/shared/ui/filter/calendar.tsx
View File

@@ -4,6 +4,7 @@ import { CalendarType, FilterDateOptions } from '@/entities/common/model/types';
import { IMAGE_ROOT } from '@/shared/constants/common'; import { IMAGE_ROOT } from '@/shared/constants/common';
import NiceCalendar from '../calendar/nice-calendar'; import NiceCalendar from '../calendar/nice-calendar';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';
interface FilterCalendarProps { interface FilterCalendarProps {
title?: string; title?: string;
@@ -20,7 +21,8 @@ export const FilterCalendar = ({
setStartDate, setStartDate,
setEndDate setEndDate
}: FilterCalendarProps) => { }: FilterCalendarProps) => {
const [filterTitle, setFilterTitle] = useState<string>(title || '조회기간'); const { t } = useTranslation();
const [filterTitle, setFilterTitle] = useState<string>(title || t('filter.period'));
const [dateReadOnly, setDateReadyOnly] = useState<boolean>(false); const [dateReadOnly, setDateReadyOnly] = useState<boolean>(false);
const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input); const [filterDateOptionsBtn, setFilterDateOptionsBtn] = useState<FilterDateOptions>(FilterDateOptions.Input);
const [calendarOpen, setCalendarOpen] = useState<boolean>(false); const [calendarOpen, setCalendarOpen] = useState<boolean>(false);
@@ -106,22 +108,22 @@ export const FilterCalendar = ({
<div className="opt-label">{ filterTitle }</div> <div className="opt-label">{ filterTitle }</div>
<div className="opt-controls col below h36"> <div className="opt-controls col below h36">
<div className="chip-row"> <div className="chip-row">
<span <span
className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Today)? 'active': ''}` } className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Today)? 'active': ''}` }
onClick={ () => setFilterDate(FilterDateOptions.Today) } onClick={ () => setFilterDate(FilterDateOptions.Today) }
>당일</span> >{t('filter.periods.today')}</span>
<span <span
className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Week)? 'active': ''}` } className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Week)? 'active': ''}` }
onClick={ () => setFilterDate(FilterDateOptions.Week) } onClick={ () => setFilterDate(FilterDateOptions.Week) }
>일주일</span> >{t('filter.periods.week')}</span>
<span <span
className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Month)? 'active': ''}` } className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Month)? 'active': ''}` }
onClick={ () => setFilterDate(FilterDateOptions.Month) } onClick={ () => setFilterDate(FilterDateOptions.Month) }
>1개월</span> >{t('filter.periods.1month')}</span>
<span <span
className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Input)? 'active': ''}` } className={ `keyword-tag ${(filterDateOptionsBtn === FilterDateOptions.Input)? 'active': ''}` }
onClick={ () => setFilterDate(FilterDateOptions.Input) } onClick={ () => setFilterDate(FilterDateOptions.Input) }
>직접입력</span> >{t('filter.periods.custom')}</span>
</div> </div>
<div className="range-row"> <div className="range-row">
<div className="input-wrapper date"> <div className="input-wrapper date">
@@ -129,7 +131,7 @@ export const FilterCalendar = ({
id="startDate" id="startDate"
className="date-input" className="date-input"
type="text" type="text"
placeholder="날짜 선택" placeholder={t('filter.selectDate')}
value={ newStartDate } value={ newStartDate }
onChange={ (e: ChangeEvent<HTMLInputElement>) => {} } onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
readOnly={ dateReadOnly } readOnly={ dateReadOnly }
@@ -141,7 +143,7 @@ export const FilterCalendar = ({
> >
<img <img
src={ IMAGE_ROOT + '/ico_date.svg' } src={ IMAGE_ROOT + '/ico_date.svg' }
alt="날짜 선택" alt={t('filter.selectDate')}
/> />
</button> </button>
</div> </div>
@@ -151,19 +153,19 @@ export const FilterCalendar = ({
id="endDate" id="endDate"
className="date-input" className="date-input"
type="text" type="text"
placeholder="날짜 선택" placeholder={t('filter.selectDate')}
value={ newEndDate } value={ newEndDate }
onChange={ (e: ChangeEvent<HTMLInputElement>) => {} } onChange={ (e: ChangeEvent<HTMLInputElement>) => {} }
readOnly={ dateReadOnly } readOnly={ dateReadOnly }
/> />
<button <button
type="button" type="button"
className="date-btn" className="date-btn"
onClick={ () => onClickToOpenCalendar(CalendarType.End) } onClick={ () => onClickToOpenCalendar(CalendarType.End) }
> >
<img <img
src={ IMAGE_ROOT + '/ico_date.svg' } src={ IMAGE_ROOT + '/ico_date.svg' }
alt="날짜 선택" alt={t('filter.selectDate')}
/> />
</button> </button>
</div> </div>