From 8529f501c7f63aef7d97f972f81e2d98e6b0b517 Mon Sep 17 00:00:00 2001 From: Jay Sheen Date: Wed, 29 Oct 2025 17:56:37 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B2=B0=EC=A0=9C=20=EA=B4=80=EB=A6=AC=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B0=8F=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=8B=A4=EA=B5=AD=EC=96=B4=ED=99=94=20?= =?UTF-8?q?=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 결제 관리 페이지 다국어화 (결제 정보, 통보 데이터) * 헤더 타이틀 및 탭 버튼 다국어화 - 결제 엔티티 컴포넌트 전체 다국어화 * payment-tab: 결제 정보/결제데이터 통보 탭 * info-wrap: 서비스 이용, 수수료 및 정산주기 섹션 * notification-data-wrap: 결제데이터 통보 조회 (신용카드, 계좌이체 등 5개 결제수단) * info-item: 수수료 및 정산주기 버튼 * notify-row: 통보 상세 정보 (시작일자, 관리자 메일, URL/IP 등) - 결제 바텀시트 컴포넌트 다국어화 * card-commission-bottom-sheet: 카드 수수료 (일반/무이자/머니포인트 탭, 할부개월) * transfer-commission-bottom-sheet: 계좌이체 수수료 (통화 표기 포함) * credit-card-list-bottom-sheet: 카드사 목록 * no-interest-info-bottom-sheet: 무이자 정보 (통화 표기 포함) - 통화 표기 개선 (한국어: 원 suffix / 영어: ₩ prefix) - 번역 키 추가: payment 네임스페이스 32개 키 - 계정 관리 페이지 헤더 타이틀 다국어화 적용 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .../ui/card-commission-bottom-sheet.tsx | 58 ++++++++++--------- .../ui/credit-card-list-bottom-sheet.tsx | 18 +++--- src/entities/payment/ui/info-item.tsx | 12 ++-- src/entities/payment/ui/info-wrap.tsx | 8 ++- .../ui/no-interest-info-bottom-sheet.tsx | 28 +++++---- .../payment/ui/notification-data-wrap.tsx | 18 +++--- src/entities/payment/ui/payment-tab.tsx | 16 ++--- .../payment/ui/section/notify-row.tsx | 16 ++--- .../ui/transfer-commission-bottom-sheet.tsx | 34 ++++++----- src/locales/en.json | 40 +++++++++++++ src/locales/ko.json | 40 +++++++++++++ src/pages/account/password/manage-page.tsx | 2 +- src/pages/payment/info/info-page.tsx | 8 ++- .../notification-data-page.tsx | 6 +- 14 files changed, 204 insertions(+), 100 deletions(-) diff --git a/src/entities/payment/ui/card-commission-bottom-sheet.tsx b/src/entities/payment/ui/card-commission-bottom-sheet.tsx index dc8e989..6d59d3b 100644 --- a/src/entities/payment/ui/card-commission-bottom-sheet.tsx +++ b/src/entities/payment/ui/card-commission-bottom-sheet.tsx @@ -1,4 +1,5 @@ import { motion } from 'framer-motion'; +import { useTranslation } from 'react-i18next'; import { IMAGE_ROOT } from '@/shared/constants/common'; import { BottomSheetMotionDuration, BottomSheetMotionVaiants } from '@/entities/common/model/constant'; import { BankFees, CategoryFees, FeeRanges, GeneralTabItems, InstallmentTabItems, MoneyPointTabItems, PaymentFees } from '../model/types'; @@ -34,6 +35,7 @@ export const CardCommissionBottomSheet = ({ categoryFees, feeRate }: CardCommissionBottomSheetProps) => { + const { t } = useTranslation(); const cardList = useStore.getState().CommonStore.creditCardList; const [selectedCard, setSelectedCard] = useState(cardList[0].desc1); @@ -56,14 +58,14 @@ export const CardCommissionBottomSheet = ({ >
-

수수료 및 정산주기

- @@ -72,31 +74,31 @@ export const CardCommissionBottomSheet = ({
-
정산주기 : { settlementPeriod }
+
{t('payment.settlementPeriod')} : { settlementPeriod }
- { (payType === 2 || payType === 3) && - + >{t('payment.general')} } { (payType === 2 || payType === 3) && - + >{t('payment.noInterest')} } { (payType === 3) && - + >{t('payment.moneyPoint')} }
- 카드사 + {t('payment.cardCompany')}
@@ -87,24 +89,26 @@ export const NoInterestInfoBottomSheet = ({ && installmentDetails.length > 0 && installmentDetails.map((value, index) => ( <> - { (index > 0) && + { (index > 0) &&
}
- 할부개월 : + {t('payment.installmentMonths')} : { value.installmentMonths }
- 적용기간 : + {t('payment.applicationPeriod')} : { value.applicationPeriod }
- 적용금액 : + {t('payment.applicationAmount')} :
diff --git a/src/entities/payment/ui/notification-data-wrap.tsx b/src/entities/payment/ui/notification-data-wrap.tsx index 223867c..51c2e50 100644 --- a/src/entities/payment/ui/notification-data-wrap.tsx +++ b/src/entities/payment/ui/notification-data-wrap.tsx @@ -1,10 +1,12 @@ import { ChangeEvent, useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { NotifyRowKeys } from '../model/types'; import { usePaymentNotificationDataMutation } from '../api/use-payment-notification-data-mutation'; import { useStore } from '@/shared/model/store'; import { NotifyRow } from './section/notify-row'; export const NotificationDataWrap = () => { + const { t } = useTranslation(); const midOptions = useStore.getState().UserStore.selectOptionsMids; const userMid = useStore.getState().UserStore.mid; @@ -60,12 +62,12 @@ export const NotificationDataWrap = () => {
-

결제데이터 통보 조회

+

{t('payment.notificationDataInquiry')}

  • {
  • {
  • {
  • {
  • {
- 결제데이터 통보 설정은 PC에서 가능합니다. - 전송 설정한 지불수단만 노출됩니다. + {t('payment.notificationDataSettingInfo')} + {t('payment.onlyConfiguredPaymentMethodsShown')}
diff --git a/src/entities/payment/ui/payment-tab.tsx b/src/entities/payment/ui/payment-tab.tsx index 201c75c..dedf522 100644 --- a/src/entities/payment/ui/payment-tab.tsx +++ b/src/entities/payment/ui/payment-tab.tsx @@ -1,6 +1,7 @@ +import { useTranslation } from 'react-i18next'; import { PATHS } from '@/shared/constants/paths'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; -import { +import { PaymentTabKeys, PaymentTabProps } from '../model/types'; @@ -8,6 +9,7 @@ import { export const PaymentTab = ({ activeTab }: PaymentTabProps) => { + const { t } = useTranslation(); const { navigate } = useNavigate(); const onClickToNavigation = (tab: PaymentTabKeys) => { @@ -23,14 +25,14 @@ export const PaymentTab = ({ return( <>
- - + + onClick={ () => onClickToNavigation(PaymentTabKeys.NotificationData) } + >{t('payment.notificationData')}
); diff --git a/src/entities/payment/ui/section/notify-row.tsx b/src/entities/payment/ui/section/notify-row.tsx index 113b424..ec988bf 100644 --- a/src/entities/payment/ui/section/notify-row.tsx +++ b/src/entities/payment/ui/section/notify-row.tsx @@ -1,5 +1,6 @@ import moment from 'moment'; import { useEffect, useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { SlideDown } from 'react-slidedown'; import 'react-slidedown/lib/slidedown.css'; import { NotifyRowKeys } from '../../model/types'; @@ -31,6 +32,7 @@ export const NotifyRow = ({ openChild, setOpenChild }: NotifyRowProps) => { + const { t } = useTranslation(); const [isOpen, setIsOpen] = useState(false); const openNotifyRow = () => { @@ -63,13 +65,13 @@ export const NotifyRow = ({ { isOpen &&
    -
  • 시작일자 : { (!!startDate)? moment(startDate).format('YYYY-MM-DD'): '' }
    • -
  • 관리자 메일 : { adminEmail }
    • -
  • URL/IP : { urlIp }
    • -
  • 재전송 간격 : { retransmissionInterval }
    • -
  • 재전송 횟수 : { retransmissionCount }
    • -
  • OK 체크 : { okCheck }
    • -
  • 암호화 전송여부 : { encryptionStatus }
    • +
  • {t('payment.startDate')} : { (!!startDate)? moment(startDate).format('YYYY-MM-DD'): '' }
    • +
  • {t('payment.adminEmail')} : { adminEmail }
    • +
  • {t('payment.urlIp')} : { urlIp }
    • +
  • {t('payment.retransmissionInterval')} : { retransmissionInterval }
    • +
  • {t('payment.retransmissionCount')} : { retransmissionCount }
    • +
  • {t('payment.okCheck')} : { okCheck }
    • +
  • {t('payment.encryptionStatus')} : { encryptionStatus }
} diff --git a/src/entities/payment/ui/transfer-commission-bottom-sheet.tsx b/src/entities/payment/ui/transfer-commission-bottom-sheet.tsx index 35e3fbb..c1a6078 100644 --- a/src/entities/payment/ui/transfer-commission-bottom-sheet.tsx +++ b/src/entities/payment/ui/transfer-commission-bottom-sheet.tsx @@ -1,6 +1,8 @@ +import { useTranslation } from 'react-i18next'; import { IMAGE_ROOT } from '@/shared/constants/common'; export const TransferCommissionBottomSheet = () => { + const { t, i18n } = useTranslation(); return ( <> @@ -8,43 +10,43 @@ export const TransferCommissionBottomSheet = () => {
-

수수료 및 정산주기

-
-
정산주기 : 일일(+3일)
-
수수료
+
{t('payment.settlementPeriod')} : {t('payment.dailyPlus3Days')}
+
{t('payment.commission')}
  • - 결제수수료(최저수수료) - 1원 + {t('payment.paymentFeeMinimum')} + 1{i18n.language === 'en' ? '' : t('home.currencyWon')}
  • - 결제수수료(1원~) - 1원 + {t('payment.paymentFeeFrom1Won')} + 1{i18n.language === 'en' ? '' : t('home.currencyWon')}
  • - 취소수수료 - 1원 + {t('payment.cancellationFee')} + 1{i18n.language === 'en' ? '' : t('home.currencyWon')}
- + >{t('common.confirm')}
diff --git a/src/locales/en.json b/src/locales/en.json index 4ea605c..4a9deb1 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -293,5 +293,45 @@ "title": "Billing", "detailTitle": "Billing Details", "charge": "Billing Charge" + }, + "payment": { + "title": "Payment Management", + "info": "Payment Info", + "notificationData": "Notification Data", + "notificationDataInquiry": "Payment Notification Data Inquiry", + "serviceUsageCommissionAndSettlement": "Service Usage, Commission & Settlement Period", + "merchantNoInterestInfo": "Merchant No-Interest Info", + "commissionAndSettlement": "Commission & Settlement", + "settlementPeriod": "Settlement Period", + "general": "General", + "noInterest": "No Interest", + "moneyPoint": "Money/Point", + "cardCompany": "Card Company", + "installmentMonths": "Installment Months", + "commission": "Commission", + "months": "{{count}} Months", + "dailyPlus3Days": "Daily (+3 days)", + "paymentFeeMinimum": "Payment Fee (Minimum)", + "paymentFeeFrom1Won": "Payment Fee (From ₩1)", + "cancellationFee": "Cancellation Fee", + "noInterestInfo": "No-Interest Info", + "applicationPeriod": "Application Period", + "applicationAmount": "Application Amount", + "notificationDataSettingInfo": "Payment notification data settings are available on PC.", + "onlyConfiguredPaymentMethodsShown": "Only configured payment methods are shown.", + "startDate": "Start Date", + "adminEmail": "Admin Email", + "urlIp": "URL/IP", + "retransmissionInterval": "Retransmission Interval", + "retransmissionCount": "Retransmission Count", + "okCheck": "OK Check", + "encryptionStatus": "Encryption Status", + "paymentMethods": { + "creditCard": "Credit Card", + "accountTransfer": "Account Transfer", + "virtualAccount": "Virtual Account", + "mobilePayment": "Mobile Payment", + "escrowPayment": "Escrow Payment" + } } } \ No newline at end of file diff --git a/src/locales/ko.json b/src/locales/ko.json index 1764335..2b93eb1 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -297,5 +297,45 @@ "title": "빌링", "detailTitle": "빌링 상세", "charge": "빌링 청구" + }, + "payment": { + "title": "결제 관리", + "info": "결제 정보", + "notificationData": "결제데이터 통보", + "notificationDataInquiry": "결제데이터 통보 조회", + "serviceUsageCommissionAndSettlement": "서비스 이용, 수수료 및 정산주기", + "merchantNoInterestInfo": "가맹점 분담 무이자 정보", + "commissionAndSettlement": "수수료 및 정산주기", + "settlementPeriod": "정산주기", + "general": "일반", + "noInterest": "무이자", + "moneyPoint": "머니/포인트", + "cardCompany": "카드사", + "installmentMonths": "할부개월", + "commission": "수수료", + "months": "{{count}} 개월", + "dailyPlus3Days": "일일(+3일)", + "paymentFeeMinimum": "결제수수료(최저수수료)", + "paymentFeeFrom1Won": "결제수수료(1원~)", + "cancellationFee": "취소수수료", + "noInterestInfo": "무이자 정보", + "applicationPeriod": "적용기간", + "applicationAmount": "적용금액", + "notificationDataSettingInfo": "결제데이터 통보 설정은 PC에서 가능합니다.", + "onlyConfiguredPaymentMethodsShown": "전송 설정한 지불수단만 노출됩니다.", + "startDate": "시작일자", + "adminEmail": "관리자 메일", + "urlIp": "URL/IP", + "retransmissionInterval": "재전송 간격", + "retransmissionCount": "재전송 횟수", + "okCheck": "OK 체크", + "encryptionStatus": "암호화 전송여부", + "paymentMethods": { + "creditCard": "신용카드", + "accountTransfer": "계좌이체", + "virtualAccount": "가상계좌", + "mobilePayment": "휴대폰", + "escrowPayment": "에스크로 결제" + } } } \ No newline at end of file diff --git a/src/pages/account/password/manage-page.tsx b/src/pages/account/password/manage-page.tsx index 88f6825..70c5016 100644 --- a/src/pages/account/password/manage-page.tsx +++ b/src/pages/account/password/manage-page.tsx @@ -16,7 +16,7 @@ export const PasswordManagePage = () => { const { navigate } = useNavigate(); const [activeTab, setActiveTab] = useState(AccountTabKeys.PasswordManage); - useSetHeaderTitle('계정 관리'); + useSetHeaderTitle(t('account.manage')); useSetHeaderType(HeaderType.LeftArrow); useSetFooterMode(false); useSetOnBack(() => { diff --git a/src/pages/payment/info/info-page.tsx b/src/pages/payment/info/info-page.tsx index cfb87e7..e7b03ce 100644 --- a/src/pages/payment/info/info-page.tsx +++ b/src/pages/payment/info/info-page.tsx @@ -1,11 +1,12 @@ import { useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { PATHS } from '@/shared/constants/paths'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { PaymentTab } from '@/entities/payment/ui/payment-tab'; import { InfoWrap } from '@/entities/payment/ui/info-wrap'; import { PaymentTabKeys } from '@/entities/payment/model/types'; import { HeaderType } from '@/entities/common/model/types'; -import { +import { useSetHeaderTitle, useSetHeaderType, useSetFooterMode, @@ -13,11 +14,12 @@ import { } from '@/widgets/sub-layout/use-sub-layout'; export const InfoPage = () => { + const { t } = useTranslation(); const { navigate } = useNavigate(); const [activeTab, setActiveTab] = useState(PaymentTabKeys.Info); - - useSetHeaderTitle('결제 관리'); + + useSetHeaderTitle(t('payment.title')); useSetHeaderType(HeaderType.LeftArrow); useSetFooterMode(false); useSetOnBack(() => { diff --git a/src/pages/payment/notification-data/notification-data-page.tsx b/src/pages/payment/notification-data/notification-data-page.tsx index 10257da..65840fe 100644 --- a/src/pages/payment/notification-data/notification-data-page.tsx +++ b/src/pages/payment/notification-data/notification-data-page.tsx @@ -1,11 +1,12 @@ import { useState } from 'react'; +import { useTranslation } from 'react-i18next'; import { PATHS } from '@/shared/constants/paths'; import { useNavigate } from '@/shared/lib/hooks/use-navigate'; import { PaymentTab } from '@/entities/payment/ui/payment-tab'; import { NotificationDataWrap } from '@/entities/payment/ui/notification-data-wrap'; import { PaymentTabKeys } from '@/entities/payment/model/types'; import { HeaderType } from '@/entities/common/model/types'; -import { +import { useSetHeaderTitle, useSetHeaderType, useSetFooterMode, @@ -13,10 +14,11 @@ import { } from '@/widgets/sub-layout/use-sub-layout'; export const NotificationDataPage = () => { + const { t } = useTranslation(); const { navigate } = useNavigate(); const [activeTab, setActiveTab] = useState(PaymentTabKeys.NotificationData); - useSetHeaderTitle('결제 관리'); + useSetHeaderTitle(t('payment.title')); useSetHeaderType(HeaderType.LeftArrow); useSetFooterMode(false); useSetOnBack(() => {