링크결제 분리승인 페이지 다국어 지원 추가

- 분리승인 상세, 성공, 실패 페이지 현지화
- 기간연장 및 링크중단 기능 텍스트 번역
- 에러 메시지 및 안내 문구 다국어 적용
- 거래금액, 결제상태, 유효기간 등 레이블 현지화

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/locales/en.json

@@ -1052,6 +1052,25 @@
             "merchantName": "Merchant Name",
             "customerGreeting": "Hello, {buyerName}!",
             "paymentGuideMessage": "NICEPAYMENTS Co., Ltd. is notifying you\nof the payment details.\nYou can check the details and proceed with payment by accessing the URL below.",
+            "separateApproval": "Link Payment_Separate Approval",
+            "extendPeriodNotice": "※ Extension Period: Up to 7 days, can be extended 3 times in total",
+            "linkBreakNotice": "※ Link Break: Function to close payment before expiration date, cannot be undone once broken",
+            "transactionAmount": "Transaction Amount",
+            "paymentStatus": "Payment Status",
+            "validityPeriod": "Validity Period",
+            "extendCount": "Extension Count",
+            "extendPeriod": "Extension Period",
+            "unset": "Not Set",
+            "extendPeriodAction": "Extend Period",
+            "linkBreakAction": "Break Link",
+            "noItemsSelected": "No items selected.",
+            "pleaseSelectExtendPeriod": "Please select extension period for all selected items.",
+            "allRequestSuccess": "All requests successful.",
+            "extendPeriodFailed": "Failed to extend validity period. Please check individual status.",
+            "extendPeriodFailedGeneric": "Failed to extend validity period.",
+            "linkBreakFailed": "Failed to break link. Please check individual status.",
+            "linkBreakFailedGeneric": "Failed to break link.",
+            "pleaseRetry": "Please try again",
             "resendSuccess": "Resend successful.",
             "resendFailed": "Resend failed.",
             "resendError": "An error occurred during resend.",

src/locales/ko.json

@@ -1052,6 +1052,25 @@
             "merchantName": "가맹점 상호",
             "customerGreeting": "{buyerName} 고객님, 안녕하세요?",
             "paymentGuideMessage": "나이스페이먼츠 주식회사에서\n결제하실 내역 안내드립니다.\n아래 URL로 접속하시면 상세 내역 확인과 결제 진행이 가능합니다.",
+            "separateApproval": "링크결제_분리승인",
+            "extendPeriodNotice": "※ 연장 기간: 최대 7일, 총 3번 연장 가능",
+            "linkBreakNotice": "※ 링크 중단: 유효기간 전, 결제를 마감하는 기능, 링크중단 시 원복 불가",
+            "transactionAmount": "거래금액",
+            "paymentStatus": "결제상태",
+            "validityPeriod": "유효기간",
+            "extendCount": "연장횟수",
+            "extendPeriod": "연장기간",
+            "unset": "미설정",
+            "extendPeriodAction": "기간연장",
+            "linkBreakAction": "링크중단",
+            "noItemsSelected": "선택된 항목이 없습니다.",
+            "pleaseSelectExtendPeriod": "모든 선택된 항목의 연장 기간을 선택해주세요.",
+            "allRequestSuccess": "전체요청 성공했습니다.",
+            "extendPeriodFailed": "유효기간 연장에 실패했습니다. 개별 상태를 확인해주세요.",
+            "extendPeriodFailedGeneric": "유효기간 연장에 실패했습니다.",
+            "linkBreakFailed": "링크중단 요청에 실패했습니다. 개별 상태를 확인해주세요.",
+            "linkBreakFailedGeneric": "링크중단 요청에 실패했습니다.",
+            "pleaseRetry": "다시 시도해 주세요",
             "resendSuccess": "재발송을 성공하였습니다.",
             "resendFailed": "재발송을 실패하였습니다.",
             "resendError": "재발송 중 오류가 발생했습니다.",

src/pages/additional-service/link-payment/separate-approval/link-payment-separate-approval-fail.tsx

@@ -1,4 +1,5 @@
 import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
 import { PATHS } from "@/shared/constants/paths";
 import {
@@ -25,6 +26,7 @@ export const LinkPaymentApplyFailPage = ({
     errorMessage,
     onClose
 }: LinkPaymentApplyFailPageProps) => {
+    const { t } = useTranslation();
 
     const onClickToClose = () => {
         setPageOn(false);
@@ -51,7 +53,7 @@ export const LinkPaymentApplyFailPage = ({
                                 aria-hidden="true"
                             ></div>
                             <h1 className="success-title">
-                                <span>링크결제_분리승인</span>
+                                <span>{t('additionalService.linkPayment.separateApproval')}</span>
                             </h1>
 
                             {resultMessage && (
@@ -62,8 +64,8 @@ export const LinkPaymentApplyFailPage = ({
 
                             <div className="success-result">
                                 <p className="result-text align-left position_label">
-                                    <span>결과 :</span>
-                                    <span>{errorMessage || '다시 시도해 주세요'}</span>
+                                    <span>{t('common.result')} :</span>
+                                    <span>{errorMessage || t('additionalService.linkPayment.pleaseRetry')}</span>
                                 </p>
                             </div>
                         </div>
@@ -71,7 +73,7 @@ export const LinkPaymentApplyFailPage = ({
                             <button
                                 className="btn-50 btn-blue flex-1"
                                 onClick={onClickToClose}
-                            >확인</button>
+                            >{t('common.confirm')}</button>
                         </div>
                     </div>
                 </div>

src/pages/additional-service/link-payment/separate-approval/link-payment-separate-approval-page.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
 import { PATHS } from '@/shared/constants/paths';
 import { useLocation } from 'react-router';
 import { useNavigate } from '@/shared/lib/hooks/use-navigate';
@@ -20,6 +21,7 @@ import { useStore } from '@/shared/model/store';
 import moment from 'moment';
 
 export const LinkPaymentSeparateApprovalPage = () => {
+    const { t } = useTranslation();
     const { navigate } = useNavigate();
     const location = useLocation();
     const userMid = useStore.getState().UserStore.mid;
@@ -43,7 +45,7 @@ export const LinkPaymentSeparateApprovalPage = () => {
     const { mutateAsync: callItems } = useExtensionLinkPaySeparateDetail();
     const { mutateAsync: linkPaySeparateAction } = useExtensionLinkPaySeparateAction();
 
-    useSetHeaderTitle('분리승인 상세');
+    useSetHeaderTitle(t('additionalService.linkPayment.separateApprovalTitle'));
     useSetHeaderType(HeaderType.RightClose);
     useSetOnBack(() => {
         navigate(PATHS.additionalService.linkPayment.shippingHistory);
@@ -189,7 +191,7 @@ export const LinkPaymentSeparateApprovalPage = () => {
 
         // 선택된 항목이 없으면 리턴
         if (selectedItems.length === 0) {
-            setErrorMessage('선택된 항목이 없습니다.');
+            setErrorMessage(t('additionalService.linkPayment.noItemsSelected'));
             setFailPageOn(true);
             return;
         }
@@ -203,7 +205,7 @@ export const LinkPaymentSeparateApprovalPage = () => {
         const allHaveExtendPeriod = selectedSubItems.every(id => extendPeriods[id]);
 
         if (!allHaveExtendPeriod) {
-            setErrorMessage('모든 선택된 항목의 연장 기간을 선택해주세요.');
+            setErrorMessage(t('additionalService.linkPayment.pleaseSelectExtendPeriod'));
             setFailPageOn(true);
             return;
         }
@@ -237,16 +239,16 @@ export const LinkPaymentSeparateApprovalPage = () => {
             setTotalCount(response.totalCount);
 
             if (response.success) {
-                setResultMessage(`전체요청 성공했습니다.`);
+                setResultMessage(t('additionalService.linkPayment.allRequestSuccess'));
                 setSuccessPageOn(true);
             } else {
-                setResultMessage(`유효기간 연장에 실패했습니다. 개별 상태를 확인해주세요.`);
+                setResultMessage(t('additionalService.linkPayment.extendPeriodFailed'));
                 setErrorMessage('');
                 setFailPageOn(true);
             }
         }).catch((error) => {
             console.error('기간연장 실패:', error);
-            setResultMessage('유효기간 연장에 실패했습니다.');
+            setResultMessage(t('additionalService.linkPayment.extendPeriodFailedGeneric'));
             setFailPageOn(true);
         });
     };
@@ -257,7 +259,7 @@ export const LinkPaymentSeparateApprovalPage = () => {
 
         // 선택된 항목이 없으면 리턴
         if (selectedItems.length === 0) {
-            setErrorMessage('선택된 항목이 없습니다.');
+            setErrorMessage(t('additionalService.linkPayment.noItemsSelected'));
             setFailPageOn(true);
             return;
         }
@@ -287,16 +289,16 @@ export const LinkPaymentSeparateApprovalPage = () => {
             setFailCount(response.failCount);
             setTotalCount(response.totalCount);
             if (response.success) {
-                setResultMessage(`전체요청 성공했습니다.`);
+                setResultMessage(t('additionalService.linkPayment.allRequestSuccess'));
                 setSuccessPageOn(true);
             } else {
-                setResultMessage('링크중단 요청에 실패했습니다. 개별 상태를 확인해주세요.');
+                setResultMessage(t('additionalService.linkPayment.linkBreakFailed'));
                 setErrorMessage('');
                 setFailPageOn(true);
             }
         }).catch((error) => {
             console.error('링크중단 실패:', error);
-            setResultMessage('링크중단 요청에 실패했습니다.');
+            setResultMessage(t('additionalService.linkPayment.linkBreakFailedGeneric'));
             setFailPageOn(true);
         });
     };
@@ -334,8 +336,8 @@ export const LinkPaymentSeparateApprovalPage = () => {
                     <div className="tab-pane sub active">
                         <div className="separate-approval-section">
                             <div className="approval-notice-box">
-                                <p>※ 연장 기간: 최대 7일, 총 3번 연장 가능</p>
-                                <p>※ 링크 중단: 유효기간 전, 결제를 마감하는 기능, 링크중단 시 원복 불가</p>
+                                <p>{t('additionalService.linkPayment.extendPeriodNotice')}</p>
+                                <p>{t('additionalService.linkPayment.linkBreakNotice')}</p>
                             </div>
 
                             <div className="approval-cards-wrapper">
@@ -360,17 +362,17 @@ export const LinkPaymentSeparateApprovalPage = () => {
                                             <div className="card-body">
                                                 <ul className="info-list">
                                                     <li>
-                                                        <span className="label">• 거래금액:</span>
+                                                        <span className="label">• {t('additionalService.linkPayment.transactionAmount')}:</span>
                                                         <span className="value">{item.amount.toLocaleString()}</span>
                                                     </li>
                                                     <li>
-                                                        <span className="label">• 결제상태:</span>
+                                                        <span className="label">• {t('additionalService.linkPayment.paymentStatus')}:</span>
                                                         <span className="value">{item.paymentStatusName}</span>
                                                     </li>
                                                     {item.type !== LinkPaymentSeparateType.MAIN && (
                                                         <>
                                                             <li>
-                                                                <span className="label">• 유효기간:</span>
+                                                                <span className="label">• {t('additionalService.linkPayment.validityPeriod')}:</span>
                                                                 <span className="value">
                                                                     {item.paymentLimitDate
                                                                         ? moment(item.paymentLimitDate, 'YYYYMMDD').format('YYYY/MM/DD')
@@ -379,7 +381,7 @@ export const LinkPaymentSeparateApprovalPage = () => {
                                                                 </span>
                                                             </li>
                                                             <li>
-                                                                <span className="label">• 연장횟수:</span>
+                                                                <span className="label">• {t('additionalService.linkPayment.extendCount')}:</span>
                                                                 <span className="value">{item.paymentLimitCount}</span>
                                                             </li>
                                                         </>
@@ -388,7 +390,7 @@ export const LinkPaymentSeparateApprovalPage = () => {
                                             </div>
                                             <div className="card-footer">
                                                 <div className="period-selector">
-                                                    <label>연장기간</label>
+                                                    <label>{t('additionalService.linkPayment.extendPeriod')}</label>
                                                     <select
                                                         value={extendPeriods[itemId] || ''}
                                                         onChange={(e) => handleExtendPeriodChange(itemId, e.target.value)}
@@ -399,7 +401,7 @@ export const LinkPaymentSeparateApprovalPage = () => {
                                                                 ? '-'
                                                                 : !canExtendPeriod(item)
                                                                 ? '-'
-                                                                : '미설정'}
+                                                                : t('additionalService.linkPayment.unset')}
                                                         </option>
                                                         {canExtendPeriod(item) && [1, 2, 3, 4, 5, 6, 7].map(days => {
                                                             const baseDate = moment(item.paymentLimitDate, 'YYYYMMDD');
@@ -420,13 +422,13 @@ export const LinkPaymentSeparateApprovalPage = () => {
                                 className="btn-50 btn-blue flex-1"
                                 onClick={onClickToValidityPeriod}
                                 disabled={!isExtendButtonEnabled()}
-                            >기간연장
+                            >{t('additionalService.linkPayment.extendPeriodAction')}
                             </button>
                             <button
                                 className="btn-50 btn-blue flex-1"
                                 onClick={onClickToSendLink}
                                 disabled={!isLinkBreadkEnabled()}
-                            >링크중단
+                            >{t('additionalService.linkPayment.linkBreakAction')}
                             </button>
                         </div>
                     </div>

src/pages/additional-service/link-payment/separate-approval/link-payment-separate-approval-success-page.tsx

@@ -1,4 +1,5 @@
 import { motion } from 'framer-motion';
+import { useTranslation } from 'react-i18next';
 import {
     FilterMotionDuration,
     FilterMotionStyle,
@@ -24,6 +25,7 @@ export const LinkPaymentApplySuccessPage = ({
     totalCount,
     onClose
 }: LinkPaymentApplySuccessPageProps) => {
+    const { t } = useTranslation();
 
     const onClickToClose = () => {
         setPageOn(false);
@@ -50,13 +52,13 @@ export const LinkPaymentApplySuccessPage = ({
                                 aria-hidden="true"
                             ></div>
                             <h1 className="success-title">
-                                <span>링크결제_분리승인</span>
+                                <span>{t('additionalService.linkPayment.separateApproval')}</span>
                             </h1>
 
                             <div className="success-result">
                                 <p className="result-text align-left position_label">
-                                    <span>결과 :</span>
-                                    <span>{resultMessage || '전체요청 성공했습니다.'}</span>
+                                    <span>{t('common.result')} :</span>
+                                    <span>{resultMessage || t('additionalService.linkPayment.allRequestSuccess')}</span>
                                 </p>
                             </div>
                         </div>
@@ -64,7 +66,7 @@ export const LinkPaymentApplySuccessPage = ({
                             <button
                                 className="btn-50 btn-blue flex-1"
                                 onClick={onClickToClose}
-                            >확인</button>
+                            >{t('common.confirm')}</button>
                         </div>
                     </div>
                 </div>