부가서비스 페이지 및 컴포넌트 다국어화 완료
- 부가서비스 메인 페이지 다국어화 * 헤더 타이틀, 사용중인 서비스/신청 가능한 서비스 섹션 * 비활성 서비스 안내 메시지 - 부가서비스 공통 컴포넌트 다국어화 * list-item: 11개 서비스의 상태 라벨 (성공, 실패, 요청, 재발송) * title-info-wrap: 서비스 정보 표시 - 정산대행 페이지 다국어화 (5개 페이지) * 관리, 입금, 회원, 상세 페이지 헤더 * 상세 페이지: 입금 확인, 정산 정보, 수수료 정보 등 17개 필드 * 상태 변경 이력: 출금 실패, 동의 완료, 동의 만료 등 - 서비스별 상세 페이지 통화 표기 개선 (4개 페이지) * ARS, 펀드계좌(이체/결과), 페이아웃 상세 페이지 - 전체 통화 표기 통일 (11개 인스턴스) * 한국어: 100,000원 (suffix) * 영어: ₩100,000 (prefix) - 번역 키 추가: additionalService 네임스페이스 51+ 키 * 공통 상태 라벨, 11개 서비스명 및 설명 * 정산대행 전용 21개 키 - 지원 서비스: SMS결제, ARS결제, KEY-IN결제, 계좌조회/인증, 페이아웃, 정산대행, 링크결제, 펀드계좌, 알림톡, 안면인증 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -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 { AdditionalServiceCategory, DetailInfoSectionKeys } from '../../model/types';
|
import { AdditionalServiceCategory, DetailInfoSectionKeys } from '../../model/types';
|
||||||
import { DetailInfoSectionProps } from '../../model/types';
|
import { DetailInfoSectionProps } from '../../model/types';
|
||||||
|
|
||||||
@@ -8,6 +9,7 @@ export const TitleInfoWrap = ({
|
|||||||
titleInfo,
|
titleInfo,
|
||||||
onClickToShowInfo
|
onClickToShowInfo
|
||||||
}: DetailInfoSectionProps) => {
|
}: DetailInfoSectionProps) => {
|
||||||
|
const { t, i18n } = useTranslation();
|
||||||
|
|
||||||
const onClickToSetShowInfo = () => {
|
const onClickToSetShowInfo = () => {
|
||||||
if (!!onClickToShowInfo) {
|
if (!!onClickToShowInfo) {
|
||||||
@@ -49,7 +51,8 @@ export const TitleInfoWrap = ({
|
|||||||
value={titleInfo?.amount}
|
value={titleInfo?.amount}
|
||||||
thousandSeparator
|
thousandSeparator
|
||||||
displayType="text"
|
displayType="text"
|
||||||
suffix={'원'}
|
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
|
||||||
|
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
|
||||||
></NumericFormat>
|
></NumericFormat>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
@@ -66,7 +69,8 @@ export const TitleInfoWrap = ({
|
|||||||
value={titleInfo?.amount}
|
value={titleInfo?.amount}
|
||||||
thousandSeparator
|
thousandSeparator
|
||||||
displayType="text"
|
displayType="text"
|
||||||
suffix={'원'}
|
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
|
||||||
|
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
|
||||||
></NumericFormat>
|
></NumericFormat>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
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 { ListItemProps, AdditionalServiceCategory } from '../model/types';
|
import { ListItemProps, AdditionalServiceCategory } from '../model/types';
|
||||||
@@ -36,6 +37,7 @@ export const ListItem = ({
|
|||||||
onResendClick
|
onResendClick
|
||||||
}: ListItemProps) => {
|
}: ListItemProps) => {
|
||||||
const { navigate } = useNavigate();
|
const { navigate } = useNavigate();
|
||||||
|
const { t, i18n } = useTranslation();
|
||||||
const getItemClass = () => {
|
const getItemClass = () => {
|
||||||
let rs = '';
|
let rs = '';
|
||||||
if (paymentStatus === '') {
|
if (paymentStatus === '') {
|
||||||
@@ -532,19 +534,19 @@ export const ListItem = ({
|
|||||||
if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
|
if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) {
|
||||||
rs.push(
|
rs.push(
|
||||||
<div className={`status-label ${resultStatus === 'SUCCESS' ? 'success' : 'fail'}`}>
|
<div className={`status-label ${resultStatus === 'SUCCESS' ? 'success' : 'fail'}`}>
|
||||||
{resultStatus === 'SUCCESS' ? '성공' : '실패'}
|
{resultStatus === 'SUCCESS' ? t('additionalService.common.success') : t('additionalService.common.fail')}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
|
else if (additionalServiceCategory === AdditionalServiceCategory.FaceAuth) {
|
||||||
rs.push(
|
rs.push(
|
||||||
<div className={`status-label ${authResult === 'SUCCESS' ? 'success' : 'fail'}`}>
|
<div className={`status-label ${authResult === 'SUCCESS' ? 'success' : 'fail'}`}>
|
||||||
{authResult === 'SUCCESS' ? '성공' : '실패'}
|
{authResult === 'SUCCESS' ? t('additionalService.common.success') : t('additionalService.common.fail')}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
|
else if (additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) {
|
||||||
const statusText = authStatus === 'REQUEST' ? '요청' : authStatus === 'SUCCESS' ? '성공' : '실패';
|
const statusText = authStatus === 'REQUEST' ? t('additionalService.common.request') : authStatus === 'SUCCESS' ? t('additionalService.common.success') : t('additionalService.common.fail');
|
||||||
const statusClass = authStatus === 'SUCCESS' || 'REQUEST' ? 'success' : 'fail';
|
const statusClass = authStatus === 'SUCCESS' || 'REQUEST' ? 'success' : 'fail';
|
||||||
rs.push(
|
rs.push(
|
||||||
<div className={`status-label ${statusClass}`}>
|
<div className={`status-label ${statusClass}`}>
|
||||||
@@ -559,7 +561,8 @@ export const ListItem = ({
|
|||||||
value={amount}
|
value={amount}
|
||||||
thousandSeparator
|
thousandSeparator
|
||||||
displayType="text"
|
displayType="text"
|
||||||
suffix='원'
|
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
|
||||||
|
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
|
||||||
></NumericFormat>
|
></NumericFormat>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -573,7 +576,8 @@ export const ListItem = ({
|
|||||||
value={amount}
|
value={amount}
|
||||||
thousandSeparator
|
thousandSeparator
|
||||||
displayType="text"
|
displayType="text"
|
||||||
suffix='원'
|
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
|
||||||
|
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
|
||||||
></NumericFormat>
|
></NumericFormat>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -588,7 +592,8 @@ export const ListItem = ({
|
|||||||
value={amount}
|
value={amount}
|
||||||
thousandSeparator
|
thousandSeparator
|
||||||
displayType="text"
|
displayType="text"
|
||||||
suffix='원'
|
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
|
||||||
|
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
|
||||||
></NumericFormat>
|
></NumericFormat>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -605,7 +610,8 @@ export const ListItem = ({
|
|||||||
value={amount}
|
value={amount}
|
||||||
thousandSeparator
|
thousandSeparator
|
||||||
displayType="text"
|
displayType="text"
|
||||||
suffix='원'
|
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
|
||||||
|
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
|
||||||
></NumericFormat>
|
></NumericFormat>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -620,7 +626,8 @@ export const ListItem = ({
|
|||||||
value={amount}
|
value={amount}
|
||||||
thousandSeparator
|
thousandSeparator
|
||||||
displayType="text"
|
displayType="text"
|
||||||
suffix='원'
|
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
|
||||||
|
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
|
||||||
></NumericFormat>
|
></NumericFormat>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@@ -637,7 +644,7 @@ export const ListItem = ({
|
|||||||
key="sms-payment-amount"
|
key="sms-payment-amount"
|
||||||
className={`status-label success`}
|
className={`status-label success`}
|
||||||
onClick={() => mid && onResendClick(mid, tid || '')}
|
onClick={() => mid && onResendClick(mid, tid || '')}
|
||||||
>{'재발송'}</div>
|
>{t('additionalService.common.resend')}</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
return rs;
|
return rs;
|
||||||
|
|||||||
@@ -384,6 +384,68 @@
|
|||||||
"escrowPayment": "Escrow Payment"
|
"escrowPayment": "Escrow Payment"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"additionalService": {
|
||||||
|
"title": "Additional Services",
|
||||||
|
"activeServices": "Active Services",
|
||||||
|
"availableServices": "Available Services",
|
||||||
|
"notActiveServiceMessage": "This service is not currently active.",
|
||||||
|
"contactSalesMessage": "Please contact your sales representative or customer service for inquiries.",
|
||||||
|
"common": {
|
||||||
|
"success": "Success",
|
||||||
|
"fail": "Fail",
|
||||||
|
"request": "Request",
|
||||||
|
"resend": "Resend"
|
||||||
|
},
|
||||||
|
"services": {
|
||||||
|
"sms": "SMS Payment Notification",
|
||||||
|
"smsDesc": "Automatic SMS sending from deposit request to completion",
|
||||||
|
"ars": "Credit Card ARS Payment",
|
||||||
|
"arsDesc": "Convenient and secure payment service with just one phone call",
|
||||||
|
"keyIn": "KEY-IN Payment",
|
||||||
|
"keyInDesc": "Simple payment support by entering card information during consultation",
|
||||||
|
"accountHolderSearch": "Account Holder Search",
|
||||||
|
"accountHolderSearchDesc": "Instant account holder verification with account holder information",
|
||||||
|
"payout": "Payout Service",
|
||||||
|
"payoutDesc": "Quick settlement payment service for sub-merchants",
|
||||||
|
"settlementAgency": "Settlement Agency",
|
||||||
|
"settlementAgencyDesc": "Automated settlement calculation and payment service for sub-merchants",
|
||||||
|
"linkPayment": "Link Payment",
|
||||||
|
"linkPaymentDesc": "Payment service available anywhere with just a payment link",
|
||||||
|
"fundAccount": "Fund Transfer",
|
||||||
|
"fundAccountDesc": "Instant transfer with deposits, multiple transfers with file registration",
|
||||||
|
"accountHolderAuth": "Account Holder Authentication",
|
||||||
|
"accountHolderAuthDesc": "Account ownership verification with 1 KRW transfer",
|
||||||
|
"alimtalk": "Alimtalk Payment Notification",
|
||||||
|
"alimtalkDesc": "Easy and fast payment status notifications via Alimtalk",
|
||||||
|
"faceAuth": "Face Authentication",
|
||||||
|
"faceAuthDesc": "Secure payment service with face recognition for easy identity verification"
|
||||||
|
},
|
||||||
|
"settlementAgency": {
|
||||||
|
"title": "Settlement Agency",
|
||||||
|
"depositConfirmation": "Deposit Confirmation",
|
||||||
|
"settlementInfo": "Settlement Information",
|
||||||
|
"settlementId": "Settlement ID",
|
||||||
|
"settlementDate": "Settlement Date",
|
||||||
|
"settlementStatus": "Settlement Status",
|
||||||
|
"totalTransactionAmount": "Total Transaction Amount",
|
||||||
|
"settlementAmount": "Settlement Amount",
|
||||||
|
"settlementStoreInfo": "Settlement Store Information",
|
||||||
|
"settlementStoreId": "Settlement Store ID",
|
||||||
|
"settlementStoreName": "Settlement Store Name",
|
||||||
|
"businessNumber": "Business Number",
|
||||||
|
"feeInfo": "Fee Information",
|
||||||
|
"taxStatus": "Tax Status",
|
||||||
|
"bank": "Bank",
|
||||||
|
"accountNumber": "Account Number",
|
||||||
|
"statusChangeHistory": "Status Change History",
|
||||||
|
"withdrawalFailed": "Withdrawal Failed",
|
||||||
|
"agreementCompleted": "Agreement Completed",
|
||||||
|
"agreementExpired": "Agreement Expired",
|
||||||
|
"reason": "Reason",
|
||||||
|
"accountError": "Payment Account Error",
|
||||||
|
"agreeOrReject": "Agree/Reject Settlement"
|
||||||
|
}
|
||||||
|
},
|
||||||
"merchant": {
|
"merchant": {
|
||||||
"title": "Merchant Management",
|
"title": "Merchant Management",
|
||||||
"info": "Merchant Info",
|
"info": "Merchant Info",
|
||||||
|
|||||||
@@ -388,6 +388,68 @@
|
|||||||
"escrowPayment": "에스크로 결제"
|
"escrowPayment": "에스크로 결제"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"additionalService": {
|
||||||
|
"title": "부가서비스 소개",
|
||||||
|
"activeServices": "사용중인 서비스",
|
||||||
|
"availableServices": "신청 가능한 서비스",
|
||||||
|
"notActiveServiceMessage": "이용 중이지 않은 서비스입니다.",
|
||||||
|
"contactSalesMessage": "가입 문의는 영업 담당자 또는 고객센터로 문의해 주세요.",
|
||||||
|
"common": {
|
||||||
|
"success": "성공",
|
||||||
|
"fail": "실패",
|
||||||
|
"request": "요청",
|
||||||
|
"resend": "재발송"
|
||||||
|
},
|
||||||
|
"services": {
|
||||||
|
"sms": "SMS 결제 통보",
|
||||||
|
"smsDesc": "입금 요청부터 완료까지 SMS 자동 전송",
|
||||||
|
"ars": "신용카드 ARS 결제",
|
||||||
|
"arsDesc": "전화 한 통으로 결제 성공 편리하고 안전한 서비스",
|
||||||
|
"keyIn": "KEY-IN 결제",
|
||||||
|
"keyInDesc": "상담 중 카드정보 입력으로 간편한 결제 지원",
|
||||||
|
"accountHolderSearch": "계좌성명조회",
|
||||||
|
"accountHolderSearchDesc": "예금주 정보 입력으로 즉시 예금주 확인",
|
||||||
|
"payout": "지급대행",
|
||||||
|
"payoutDesc": "하위 가맹점에 빠른 정산금 지급 지급대행 서비스",
|
||||||
|
"settlementAgency": "정산대행",
|
||||||
|
"settlementAgencyDesc": "하위 가맹점 정산금 계산부터 지급까지 자동 해결 서비스",
|
||||||
|
"linkPayment": "링크 결제",
|
||||||
|
"linkPaymentDesc": "결제 링크 전송만으로 어디서든 결제 가능 서비스",
|
||||||
|
"fundAccount": "자금이체",
|
||||||
|
"fundAccountDesc": "예치금으로 즉시 송금, 파일 등록만으로 다중 송금 가능",
|
||||||
|
"accountHolderAuth": "계좌점유인증",
|
||||||
|
"accountHolderAuthDesc": "1원 송금으로 실제 계좌 점유 확인 여부",
|
||||||
|
"alimtalk": "알림톡 결제통보",
|
||||||
|
"alimtalkDesc": "결제 상태를 알림톡으로 쉽고 빠른 안내",
|
||||||
|
"faceAuth": "얼굴인증",
|
||||||
|
"faceAuthDesc": "얼굴 인식으로 간편 본인확인과 결제 가능한 안전 결제 서비스"
|
||||||
|
},
|
||||||
|
"settlementAgency": {
|
||||||
|
"title": "정산대행",
|
||||||
|
"depositConfirmation": "입금확인서",
|
||||||
|
"settlementInfo": "정산 정보",
|
||||||
|
"settlementId": "정산ID",
|
||||||
|
"settlementDate": "정산일",
|
||||||
|
"settlementStatus": "정산 상태",
|
||||||
|
"totalTransactionAmount": "총 거래금액",
|
||||||
|
"settlementAmount": "정산금액",
|
||||||
|
"settlementStoreInfo": "정산 매장 정보",
|
||||||
|
"settlementStoreId": "정산매장 ID",
|
||||||
|
"settlementStoreName": "정산매장 명",
|
||||||
|
"businessNumber": "사업자 번호",
|
||||||
|
"feeInfo": "수수료 정보",
|
||||||
|
"taxStatus": "과세 여부",
|
||||||
|
"bank": "은행",
|
||||||
|
"accountNumber": "계좌번호",
|
||||||
|
"statusChangeHistory": "상태 변경 이력",
|
||||||
|
"withdrawalFailed": "출금실패",
|
||||||
|
"agreementCompleted": "동의완료",
|
||||||
|
"agreementExpired": "동의기한 초과",
|
||||||
|
"reason": "사유",
|
||||||
|
"accountError": "지급 계좌오류",
|
||||||
|
"agreeOrReject": "정산 동의/거절"
|
||||||
|
}
|
||||||
|
},
|
||||||
"merchant": {
|
"merchant": {
|
||||||
"title": "가맹점 관리",
|
"title": "가맹점 관리",
|
||||||
"info": "가맹점 정보",
|
"info": "가맹점 정보",
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
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 { useTranslation } from 'react-i18next';
|
||||||
import { HeaderType } from '@/entities/common/model/types';
|
import { HeaderType } from '@/entities/common/model/types';
|
||||||
import {
|
import {
|
||||||
useSetHeaderTitle,
|
useSetHeaderTitle,
|
||||||
@@ -25,6 +26,7 @@ import { useExtensionArsResendMutation } from '@/entities/additional-service/api
|
|||||||
import { getArsOrderStatusName, getArsPaymentStatusName } from '@/entities/additional-service/model/ars/constant';
|
import { getArsOrderStatusName, getArsPaymentStatusName } from '@/entities/additional-service/model/ars/constant';
|
||||||
|
|
||||||
export const ArsDetailPage = () => {
|
export const ArsDetailPage = () => {
|
||||||
|
const { t, i18n } = useTranslation();
|
||||||
const { navigate } = useNavigate();
|
const { navigate } = useNavigate();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
|
||||||
@@ -88,7 +90,8 @@ export const ArsDetailPage = () => {
|
|||||||
value={ detail?.amount }
|
value={ detail?.amount }
|
||||||
thousandSeparator
|
thousandSeparator
|
||||||
displayType="text"
|
displayType="text"
|
||||||
suffix='원'
|
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
|
||||||
|
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
|
||||||
></NumericFormat>
|
></NumericFormat>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
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 { useTranslation } from 'react-i18next';
|
||||||
import { HeaderType } from '@/entities/common/model/types';
|
import { HeaderType } from '@/entities/common/model/types';
|
||||||
import {
|
import {
|
||||||
useSetHeaderTitle,
|
useSetHeaderTitle,
|
||||||
@@ -22,6 +23,7 @@ import { useExtensionFundAccountDownloadReceiptMutation } from '@/entities/addit
|
|||||||
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
|
import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
|
||||||
|
|
||||||
export const FundAccountResultDetailPage = () => {
|
export const FundAccountResultDetailPage = () => {
|
||||||
|
const { t, i18n } = useTranslation();
|
||||||
const { navigate } = useNavigate();
|
const { navigate } = useNavigate();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
|
||||||
@@ -88,7 +90,8 @@ export const FundAccountResultDetailPage = () => {
|
|||||||
value={detail?.amount}
|
value={detail?.amount}
|
||||||
thousandSeparator
|
thousandSeparator
|
||||||
displayType="text"
|
displayType="text"
|
||||||
suffix='원'
|
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
|
||||||
|
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
|
||||||
></NumericFormat>
|
></NumericFormat>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
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 { useTranslation } from 'react-i18next';
|
||||||
import { HeaderType } from '@/entities/common/model/types';
|
import { HeaderType } from '@/entities/common/model/types';
|
||||||
import {
|
import {
|
||||||
useSetHeaderTitle,
|
useSetHeaderTitle,
|
||||||
@@ -18,6 +19,7 @@ import { snackBar } from '@/shared/lib';
|
|||||||
import { useExtensionFundAccountTransferRequestMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-request-mutation';
|
import { useExtensionFundAccountTransferRequestMutation } from '@/entities/additional-service/api/fund-account/use-extension-fund-account-transfer-request-mutation';
|
||||||
|
|
||||||
export const FundAccountTransferDetailPage = () => {
|
export const FundAccountTransferDetailPage = () => {
|
||||||
|
const { t, i18n } = useTranslation();
|
||||||
const { navigate } = useNavigate();
|
const { navigate } = useNavigate();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
|
||||||
@@ -81,7 +83,8 @@ export const FundAccountTransferDetailPage = () => {
|
|||||||
value={detail?.amount}
|
value={detail?.amount}
|
||||||
thousandSeparator
|
thousandSeparator
|
||||||
displayType="text"
|
displayType="text"
|
||||||
suffix='원'
|
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
|
||||||
|
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
|
||||||
></NumericFormat>
|
></NumericFormat>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { ChangeEvent, useEffect, useState } from 'react';
|
import { ChangeEvent, useEffect, useState } from 'react';
|
||||||
|
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 { HeaderType } from '@/entities/common/model/types';
|
import { HeaderType } from '@/entities/common/model/types';
|
||||||
@@ -14,6 +15,7 @@ import { useStore } from '@/shared/model/store';
|
|||||||
import { Dialog } from '@/shared/ui/dialogs/dialog';
|
import { Dialog } from '@/shared/ui/dialogs/dialog';
|
||||||
|
|
||||||
export const ListPage = () => {
|
export const ListPage = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
const { navigate } = useNavigate();
|
const { navigate } = useNavigate();
|
||||||
const midOptions = useStore.getState().UserStore.selectOptionsMids;
|
const midOptions = useStore.getState().UserStore.selectOptionsMids;
|
||||||
const userMid = useStore.getState().UserStore.mid;
|
const userMid = useStore.getState().UserStore.mid;
|
||||||
@@ -25,7 +27,7 @@ export const ListPage = () => {
|
|||||||
|
|
||||||
const { mutateAsync: extensionList } = useExtensionListMutation();
|
const { mutateAsync: extensionList } = useExtensionListMutation();
|
||||||
|
|
||||||
useSetHeaderTitle('부가서비스 소개');
|
useSetHeaderTitle(t('additionalService.title'));
|
||||||
useSetHeaderType(HeaderType.LeftArrow);
|
useSetHeaderType(HeaderType.LeftArrow);
|
||||||
useSetFooterMode(false);
|
useSetFooterMode(false);
|
||||||
useSetOnBack(() => {
|
useSetOnBack(() => {
|
||||||
@@ -115,9 +117,9 @@ export const ListPage = () => {
|
|||||||
}
|
}
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<h3 className="ing-title">사용중인 서비스</h3>
|
<h3 className="ing-title">{t('additionalService.activeServices')}</h3>
|
||||||
{getActiveExtensionList()}
|
{getActiveExtensionList()}
|
||||||
<h3 className="ing-title">신청 가능한 서비스</h3>
|
<h3 className="ing-title">{t('additionalService.availableServices')}</h3>
|
||||||
{getAvailableExtensionList()}
|
{getAvailableExtensionList()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -128,11 +130,11 @@ export const ListPage = () => {
|
|||||||
onClose={() => setDialogOpen(false)}
|
onClose={() => setDialogOpen(false)}
|
||||||
message={
|
message={
|
||||||
<>
|
<>
|
||||||
이용 중이지 않은 서비스입니다.<br />
|
{t('additionalService.notActiveServiceMessage')}<br />
|
||||||
가입 문의는 영업 담당자 또는 고객센터로 문의해 주세요.
|
{t('additionalService.contactSalesMessage')}
|
||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
buttonLabel={['확인']}
|
buttonLabel={[t('common.confirm')]}
|
||||||
onConfirmClick={() => setDialogOpen(false)}
|
onConfirmClick={() => setDialogOpen(false)}
|
||||||
afterLeave={() => { }}
|
afterLeave={() => { }}
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -1,5 +1,6 @@
|
|||||||
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 { useTranslation } from 'react-i18next';
|
||||||
import { HeaderType } from '@/entities/common/model/types';
|
import { HeaderType } from '@/entities/common/model/types';
|
||||||
import {
|
import {
|
||||||
useSetHeaderTitle,
|
useSetHeaderTitle,
|
||||||
@@ -18,6 +19,7 @@ import { EmailBottomSheet } from '@/entities/common/ui/email-bottom-sheet';
|
|||||||
import { DownloadTypeBottomSheet } from '@/entities/common/ui/download-type-bottom-sheet';
|
import { DownloadTypeBottomSheet } from '@/entities/common/ui/download-type-bottom-sheet';
|
||||||
|
|
||||||
export const PayoutDetailPage = () => {
|
export const PayoutDetailPage = () => {
|
||||||
|
const { t, i18n } = useTranslation();
|
||||||
const { navigate } = useNavigate();
|
const { navigate } = useNavigate();
|
||||||
const location = useLocation();
|
const location = useLocation();
|
||||||
|
|
||||||
@@ -110,7 +112,8 @@ export const PayoutDetailPage = () => {
|
|||||||
value={ detail?.disbursementAmount }
|
value={ detail?.disbursementAmount }
|
||||||
thousandSeparator
|
thousandSeparator
|
||||||
displayType="text"
|
displayType="text"
|
||||||
suffix='원'
|
prefix={i18n.language === 'en' ? t('home.currencySymbol') : ''}
|
||||||
|
suffix={i18n.language === 'en' ? '' : t('home.currencyWon')}
|
||||||
></NumericFormat>
|
></NumericFormat>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
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 { SettlementAgencyTab } from '@/entities/additional-service/ui/settlement-agency/settlement-agency-tab';
|
import { SettlementAgencyTab } from '@/entities/additional-service/ui/settlement-agency/settlement-agency-tab';
|
||||||
@@ -13,11 +14,12 @@ import {
|
|||||||
} from '@/widgets/sub-layout/use-sub-layout';
|
} from '@/widgets/sub-layout/use-sub-layout';
|
||||||
|
|
||||||
export const SettlementAgencyDepositPage = () => {
|
export const SettlementAgencyDepositPage = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
const { navigate } = useNavigate();
|
const { navigate } = useNavigate();
|
||||||
|
|
||||||
const [activeTab, setActiveTab] = useState<SettlementAgencyTabKeys>(SettlementAgencyTabKeys.Deposit);
|
const [activeTab, setActiveTab] = useState<SettlementAgencyTabKeys>(SettlementAgencyTabKeys.Deposit);
|
||||||
|
|
||||||
useSetHeaderTitle('정산대행');
|
useSetHeaderTitle(t('additionalService.settlementAgency.title'));
|
||||||
useSetHeaderType(HeaderType.LeftArrow);
|
useSetHeaderType(HeaderType.LeftArrow);
|
||||||
useSetFooterMode(false);
|
useSetFooterMode(false);
|
||||||
useSetOnBack(() => {
|
useSetOnBack(() => {
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
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 { IMAGE_ROOT } from '@/shared/constants/common';
|
import { IMAGE_ROOT } from '@/shared/constants/common';
|
||||||
@@ -12,11 +13,12 @@ import {
|
|||||||
} from '@/widgets/sub-layout/use-sub-layout';
|
} from '@/widgets/sub-layout/use-sub-layout';
|
||||||
|
|
||||||
export const SettlementAgencyDetailPage = () => {
|
export const SettlementAgencyDetailPage = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
const { navigate } = useNavigate();
|
const { navigate } = useNavigate();
|
||||||
|
|
||||||
const [bottomAgreeOn, setBottomAgreeOn] = useState<boolean>(false);
|
const [bottomAgreeOn, setBottomAgreeOn] = useState<boolean>(false);
|
||||||
|
|
||||||
useSetHeaderTitle('정산대행');
|
useSetHeaderTitle(t('additionalService.settlementAgency.title'));
|
||||||
useSetHeaderType(HeaderType.LeftArrow);
|
useSetHeaderType(HeaderType.LeftArrow);
|
||||||
useSetFooterMode(false);
|
useSetFooterMode(false);
|
||||||
useSetOnBack(() => {
|
useSetOnBack(() => {
|
||||||
@@ -40,7 +42,7 @@ export const SettlementAgencyDetailPage = () => {
|
|||||||
<div className="receipt-row">
|
<div className="receipt-row">
|
||||||
<button type="button" className="receipt-btn">
|
<button type="button" className="receipt-btn">
|
||||||
<span className="icon-24 download"></span>
|
<span className="icon-24 download"></span>
|
||||||
<span>입금확인서</span>
|
<span>{t('additionalService.settlementAgency.depositConfirmation')}</span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -48,84 +50,84 @@ export const SettlementAgencyDetailPage = () => {
|
|||||||
<div className="detail-divider"></div>
|
<div className="detail-divider"></div>
|
||||||
|
|
||||||
<div className="pay-detail">
|
<div className="pay-detail">
|
||||||
<div className="detail-title">정산 정보</div>
|
<div className="detail-title">{t('additionalService.settlementAgency.settlementInfo')}</div>
|
||||||
<ul className="kv-list">
|
<ul className="kv-list">
|
||||||
<li className="kv-row">
|
<li className="kv-row">
|
||||||
<span className="k">정산ID</span>
|
<span className="k">{t('additionalService.settlementAgency.settlementId')}</span>
|
||||||
<span className="v">AB25061012</span>
|
<span className="v">AB25061012</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="kv-row">
|
<li className="kv-row">
|
||||||
<span className="k">정산일</span>
|
<span className="k">{t('additionalService.settlementAgency.settlementDate')}</span>
|
||||||
<span className="v">2025.06.08</span>
|
<span className="v">2025.06.08</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="kv-row">
|
<li className="kv-row">
|
||||||
<span className="k">정산 상태</span>
|
<span className="k">{t('additionalService.settlementAgency.settlementStatus')}</span>
|
||||||
<span className="v">동의완료</span>
|
<span className="v">동의완료</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="kv-row">
|
<li className="kv-row">
|
||||||
<span className="k">총 거래금액</span>
|
<span className="k">{t('additionalService.settlementAgency.totalTransactionAmount')}</span>
|
||||||
<span className="v">105,000,000 원</span>
|
<span className="v">105,000,000 원</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="kv-row bolder">
|
<li className="kv-row bolder">
|
||||||
<span className="k">정산금액</span>
|
<span className="k">{t('additionalService.settlementAgency.settlementAmount')}</span>
|
||||||
<span className="v">100,000,000원</span>
|
<span className="v">100,000,000원</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div className="detail-divider"></div>
|
<div className="detail-divider"></div>
|
||||||
<div className="detail-title">정산 매장 정보</div>
|
<div className="detail-title">{t('additionalService.settlementAgency.settlementStoreInfo')}</div>
|
||||||
<ul className="kv-list">
|
<ul className="kv-list">
|
||||||
<li className="kv-row">
|
<li className="kv-row">
|
||||||
<span className="k">정산매장 ID</span>
|
<span className="k">{t('additionalService.settlementAgency.settlementStoreId')}</span>
|
||||||
<span className="v">BACK01</span>
|
<span className="v">BACK01</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="kv-row">
|
<li className="kv-row">
|
||||||
<span className="k">정산매장 명</span>
|
<span className="k">{t('additionalService.settlementAgency.settlementStoreName')}</span>
|
||||||
<span className="v">뺵다방3</span>
|
<span className="v">뺵다방3</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="kv-row">
|
<li className="kv-row">
|
||||||
<span className="k">사업자 번호</span>
|
<span className="k">{t('additionalService.settlementAgency.businessNumber')}</span>
|
||||||
<span className="v">123456789</span>
|
<span className="v">123456789</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="kv-row">
|
<li className="kv-row">
|
||||||
<span className="k">수수료 정보</span>
|
<span className="k">{t('additionalService.settlementAgency.feeInfo')}</span>
|
||||||
<span className="v">3%, 반올림</span>
|
<span className="v">3%, 반올림</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="kv-row">
|
<li className="kv-row">
|
||||||
<span className="k">과세 여부</span>
|
<span className="k">{t('additionalService.settlementAgency.taxStatus')}</span>
|
||||||
<span className="v">과세, 반올림</span>
|
<span className="v">과세, 반올림</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="kv-row">
|
<li className="kv-row">
|
||||||
<span className="k">은행</span>
|
<span className="k">{t('additionalService.settlementAgency.bank')}</span>
|
||||||
<span className="v">기업</span>
|
<span className="v">기업</span>
|
||||||
</li>
|
</li>
|
||||||
<li className="kv-row">
|
<li className="kv-row">
|
||||||
<span className="k">계좌번호</span>
|
<span className="k">{t('additionalService.settlementAgency.accountNumber')}</span>
|
||||||
<span className="v">110-12-12-11111</span>
|
<span className="v">110-12-12-11111</span>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<div className="detail-divider"></div>
|
<div className="detail-divider"></div>
|
||||||
<div className="detail-title summary-amount divTop">
|
<div className="detail-title summary-amount divTop">
|
||||||
<span className="amount-text states-17"> 상태 변경 이력</span>
|
<span className="amount-text states-17"> {t('additionalService.settlementAgency.statusChangeHistory')}</span>
|
||||||
<button>
|
<button>
|
||||||
<img
|
<img
|
||||||
src={ IMAGE_ROOT + '/ico_divTop_arrow.svg' }
|
src={ IMAGE_ROOT + '/ico_divTop_arrow.svg' }
|
||||||
alt="화살표"
|
alt={t('settlement.arrow')}
|
||||||
/>
|
/>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div className="sd-history">
|
<div className="sd-history">
|
||||||
<div className="sd-history-item">
|
<div className="sd-history-item">
|
||||||
<div className="left">
|
<div className="left">
|
||||||
<div className="name">출금실패</div>
|
<div className="name">{t('additionalService.settlementAgency.withdrawalFailed')}</div>
|
||||||
<div className="time">2025/04/15 10:00:00</div>
|
<div className="time">2025/04/15 10:00:00</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="right">
|
<div className="right">
|
||||||
<div className="reason">사유 : 지급 계좌오류</div>
|
<div className="reason">{t('additionalService.settlementAgency.reason')} : {t('additionalService.settlementAgency.accountError')}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="sd-history-item">
|
<div className="sd-history-item">
|
||||||
<div className="left">
|
<div className="left">
|
||||||
<div className="name">동의완료</div>
|
<div className="name">{t('additionalService.settlementAgency.agreementCompleted')}</div>
|
||||||
<div className="time">2025/04/10 10:00:00</div>
|
<div className="time">2025/04/10 10:00:00</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="right">
|
<div className="right">
|
||||||
@@ -134,7 +136,7 @@ export const SettlementAgencyDetailPage = () => {
|
|||||||
</div>
|
</div>
|
||||||
<div className="sd-history-item">
|
<div className="sd-history-item">
|
||||||
<div className="left">
|
<div className="left">
|
||||||
<div className="name">동의기한 초과</div>
|
<div className="name">{t('additionalService.settlementAgency.agreementExpired')}</div>
|
||||||
<div className="time">2025/04/06 10:00:00</div>
|
<div className="time">2025/04/06 10:00:00</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="right">
|
<div className="right">
|
||||||
@@ -146,7 +148,7 @@ export const SettlementAgencyDetailPage = () => {
|
|||||||
<button
|
<button
|
||||||
className="btn-50 btn-blue flex-1"
|
className="btn-50 btn-blue flex-1"
|
||||||
onClick={ () => oncClickToOpenBottomAgree() }
|
onClick={ () => oncClickToOpenBottomAgree() }
|
||||||
>정산 동의/거절</button>
|
>{t('additionalService.settlementAgency.agreeOrReject')}</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
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 { SettlementAgencyTab } from '@/entities/additional-service/ui/settlement-agency/settlement-agency-tab';
|
import { SettlementAgencyTab } from '@/entities/additional-service/ui/settlement-agency/settlement-agency-tab';
|
||||||
@@ -13,11 +14,12 @@ import {
|
|||||||
} from '@/widgets/sub-layout/use-sub-layout';
|
} from '@/widgets/sub-layout/use-sub-layout';
|
||||||
|
|
||||||
export const SettlementAgencyManagePage = () => {
|
export const SettlementAgencyManagePage = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
const { navigate } = useNavigate();
|
const { navigate } = useNavigate();
|
||||||
|
|
||||||
const [activeTab, setActiveTab] = useState<SettlementAgencyTabKeys>(SettlementAgencyTabKeys.Manage);
|
const [activeTab, setActiveTab] = useState<SettlementAgencyTabKeys>(SettlementAgencyTabKeys.Manage);
|
||||||
|
|
||||||
useSetHeaderTitle('정산대행');
|
useSetHeaderTitle(t('additionalService.settlementAgency.title'));
|
||||||
useSetHeaderType(HeaderType.LeftArrow);
|
useSetHeaderType(HeaderType.LeftArrow);
|
||||||
useSetFooterMode(false);
|
useSetFooterMode(false);
|
||||||
useSetOnBack(() => {
|
useSetOnBack(() => {
|
||||||
|
|||||||
@@ -1,4 +1,5 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
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 { SettlementAgencyTab } from '@/entities/additional-service/ui/settlement-agency/settlement-agency-tab';
|
import { SettlementAgencyTab } from '@/entities/additional-service/ui/settlement-agency/settlement-agency-tab';
|
||||||
@@ -13,11 +14,12 @@ import {
|
|||||||
} from '@/widgets/sub-layout/use-sub-layout';
|
} from '@/widgets/sub-layout/use-sub-layout';
|
||||||
|
|
||||||
export const SettlementAgencyMemberPage = () => {
|
export const SettlementAgencyMemberPage = () => {
|
||||||
|
const { t } = useTranslation();
|
||||||
const { navigate } = useNavigate();
|
const { navigate } = useNavigate();
|
||||||
|
|
||||||
const [activeTab, setActiveTab] = useState<SettlementAgencyTabKeys>(SettlementAgencyTabKeys.Member);
|
const [activeTab, setActiveTab] = useState<SettlementAgencyTabKeys>(SettlementAgencyTabKeys.Member);
|
||||||
|
|
||||||
useSetHeaderTitle('정산대행');
|
useSetHeaderTitle(t('additionalService.settlementAgency.title'));
|
||||||
useSetHeaderType(HeaderType.LeftArrow);
|
useSetHeaderType(HeaderType.LeftArrow);
|
||||||
useSetFooterMode(false);
|
useSetFooterMode(false);
|
||||||
useSetOnBack(() => {
|
useSetOnBack(() => {
|
||||||
|
|||||||
Reference in New Issue
Block a user