알림톡 상세 및 설정 페이지 다국어 지원 추가

알림톡 상세 페이지와 설정 페이지에 대한 다국어 지원을 추가했습니다.

변경사항:
- 상세 페이지: 페이지 타이틀, 거래 정보 레이블 다국어화
- 설정 페이지: 페이지 타이틀, 안내 문구, 폼 레이블, 서비스 종류, 버튼, 메시지 다국어화

번역 키 추가:
- detailTitle: 알림톡 발송 상세 / Alimtalk Send Detail
- transactionInfo: 거래 정보 / Transaction Information
- serviceName, sendKind, buyerName, paymentService, notificationDivision, sendDivision
- settingNotice1, settingNotice2: 설정 안내 문구
- merchant, sendToMerchant, sendToCustomer
- 서비스 종류: creditCardApproval, creditCardCancel, bankTransferApproval, bankTransferCancel, virtualAccountDepositRequest, virtualAccountDepositComplete, virtualAccountRefund
- saveSuccess, saveFailed, unknownError

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

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

src/locales/en.json

@@ -1056,6 +1056,7 @@
         },
         "alimtalk": {
             "title": "Alimtalk Payment Notification",
+            "detailTitle": "Alimtalk Send Detail",
             "buyer": "Buyer",
             "depositRequest": "Deposit Request",
             "depositComplete": "Deposit Complete",
@@ -1065,7 +1066,29 @@
             "notificationCategory": "Notification Category",
             "sendType": "Send Type",
             "sendCategory": "Send Category",
-            "serviceSetting": "Service Settings"
+            "serviceSetting": "Service Settings",
+            "transactionInfo": "Transaction Information",
+            "serviceName": "Service Name",
+            "sendKind": "Send Type",
+            "buyerName": "Buyer Name",
+            "paymentService": "Payment Service",
+            "notificationDivision": "Notification Division",
+            "sendDivision": "Send Division",
+            "settingNotice1": "You can set the recipients for Alimtalk notifications.",
+            "settingNotice2": "Please configure the recipients and types for Alimtalk notifications.",
+            "merchant": "Merchant",
+            "sendToMerchant": "Send to Merchant",
+            "sendToCustomer": "Send to Customer",
+            "creditCardApproval": "Credit Card (Approval)",
+            "creditCardCancel": "Credit Card (Cancel)",
+            "bankTransferApproval": "Bank Transfer (Approval)",
+            "bankTransferCancel": "Bank Transfer (Cancel)",
+            "virtualAccountDepositRequest": "Virtual Account (Deposit Request)",
+            "virtualAccountDepositComplete": "Virtual Account (Deposit Complete)",
+            "virtualAccountRefund": "Virtual Account (Refund)",
+            "saveSuccess": "Saved successfully.",
+            "saveFailed": "Save failed.",
+            "unknownError": "Unknown error"
         },
         "payout": {
             "title": "Payout",

src/pages/additional-service/alimtalk/detail-page.tsx

@@ -38,7 +38,7 @@ export const AlimtalkDetailPage = () => {
     });
   };
 
-  useSetHeaderTitle('알림톡 발송 상세');
+  useSetHeaderTitle(t('additionalService.alimtalk.detailTitle'));
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
   useSetOnBack(() => {
@@ -67,7 +67,7 @@ export const AlimtalkDetailPage = () => {
             </div>
             <div className="detail-divider"></div>
             <div className="pay-detail">
-              <div className="detail-title">거래 정보</div>
+              <div className="detail-title">{t('additionalService.alimtalk.transactionInfo')}</div>
               <ul className="kv-list">
                 <li className="kv-row">
                   <span className="k">MID</span>
@@ -78,27 +78,27 @@ export const AlimtalkDetailPage = () => {
                   <span className="v">{ detail?.tid }</span>
                 </li>
                 <li className="kv-row">
-                  <span className="k">서비스명</span>
+                  <span className="k">{t('additionalService.alimtalk.serviceName')}</span>
                   <span className="v">{ detail?.extensionServiceName }</span>
                 </li>
                 <li className="kv-row">
-                  <span className="k">발송 종류</span>
+                  <span className="k">{t('additionalService.alimtalk.sendKind')}</span>
                   <span className="v">{ getAlimtalkSendTypeText(t)(detail?.sendType) }</span>
                 </li>
                 <li className="kv-row">
-                  <span className="k">주문자명</span>
+                  <span className="k">{t('additionalService.alimtalk.buyerName')}</span>
                   <span className="v">{detail?.receiverName }</span>
                 </li>
                 <li className="kv-row">
-                  <span className="k">결제서비스</span>
+                  <span className="k">{t('additionalService.alimtalk.paymentService')}</span>
                   <span className="v">{ getAlimtalkServiceCodeText(t)(detail?.serviceCode) }</span>
                 </li>
                 <li className="kv-row">
-                  <span className="k">알림구분</span>
+                  <span className="k">{t('additionalService.alimtalk.notificationDivision')}</span>
                   <span className="v">{ getAlimtalkAlimClText(t)(detail?.alimCl) }</span>
                 </li>
                 <li className="kv-row">
-                  <span className="k">발송구분</span>
+                  <span className="k">{t('additionalService.alimtalk.sendDivision')}</span>
                   <span className="v">{ getAlimtalkSendClTypeText(t)(detail?.sendCl) }</span>
                 </li>
               </ul>

src/pages/additional-service/alimtalk/setting-page.tsx

@@ -23,8 +23,10 @@ import { useEffect, useState } from 'react';
 import { AlimTalkSettingServiceRow } from '@/entities/additional-service/ui/alimtalk/setting-service-row';
 import { useStore } from '@/shared/model/store';
 import { snackBar } from '@/shared/lib';
+import { useTranslation } from 'react-i18next';
 
 export const AlimtalkSettingPage = () => {
+  const { t } = useTranslation();
   const { navigate } = useNavigate();
   const midOptionsWithoutGids = useStore.getState().UserStore.selectOptionsMidsWithoutGids;
   const userMid = useStore.getState().UserStore.mid;
@@ -104,15 +106,15 @@ export const AlimtalkSettingPage = () => {
     };
     alimtalkSettingSave(params)
       .then((rs) => {
-        snackBar("저장을 성공하였습니다.");
+        snackBar(t('additionalService.alimtalk.saveSuccess'));
       })
       .catch((error) => {
-        const failReason = error?.response?.data?.message || error?.message || "알 수 없는 오류";
+        const failReason = error?.response?.data?.message || error?.message || t('additionalService.alimtalk.unknownError');
-        snackBar(`[실패] ${failReason}`);
+        snackBar(`[${t('common.failed')}] ${failReason}`);
       });
   };
 
-  useSetHeaderTitle('알림톡 결제통보');
+  useSetHeaderTitle(t('additionalService.alimtalk.title'));
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
   useSetOnBack(() => {
@@ -150,12 +152,12 @@ export const AlimtalkSettingPage = () => {
             <div className="option-list">
               <div className="service-settings">
                 <div className="service-notice">
-                  <div>알림톡을 발송할 대상을 설정할 수 있습니다.</div>
+                  <div>{t('additionalService.alimtalk.settingNotice1')}</div>
-                  <div>알림톡 발송 대상과 유형을 설정해 주세요.</div>
+                  <div>{t('additionalService.alimtalk.settingNotice2')}</div>
                 </div>
 
                 <div className="service-merchant">
-                  <div className="service-title">가맹점</div>
+                  <div className="service-title">{t('additionalService.alimtalk.merchant')}</div>
                   <div className="service-select">
                     <select
                       value={mid}
@@ -175,56 +177,56 @@ export const AlimtalkSettingPage = () => {
 
                 <div className="service-section">
                   <div className="service-row align-right">
-                    <span>가맹점에 발송</span>
+                    <span>{t('additionalService.alimtalk.sendToMerchant')}</span>
-                    <span>고객에게 발송</span>
+                    <span>{t('additionalService.alimtalk.sendToCustomer')}</span>
                   </div>
                 </div>
 
                 <div className="service-section">
                   <AlimTalkSettingServiceRow
-                    title='신용카드(승인)'
+                    title={t('additionalService.alimtalk.creditCardApproval')}
                     merchantFlag={merchantCardApprovalFlag}
                     userFlag={userCardApprovalFlag}
                     setMerchantFlag={setMerchantCardApprovalFlag}
                     setUserFlag={setUserCardApprovalFlag}
                   ></AlimTalkSettingServiceRow>
                   <AlimTalkSettingServiceRow
-                    title='신용카드(취소)'
+                    title={t('additionalService.alimtalk.creditCardCancel')}
                     merchantFlag={merchantCardCancelFlag}
                     userFlag={userCardCancelFlag}
                     setMerchantFlag={setMerchantCardCancelFlag}
                     setUserFlag={setUserCardCancelFlag}
                   ></AlimTalkSettingServiceRow>
                   <AlimTalkSettingServiceRow
-                    title='계좌이체(승인)'
+                    title={t('additionalService.alimtalk.bankTransferApproval')}
                     merchantFlag={merchantBankApprovalFlag}
                     userFlag={userBankApprovalFlag}
                     setMerchantFlag={setMerchantBankApprovalFlag}
                     setUserFlag={setUserBankApprovalFlag}
                   ></AlimTalkSettingServiceRow>
                   <AlimTalkSettingServiceRow
-                    title='계좌이체(취소)'
+                    title={t('additionalService.alimtalk.bankTransferCancel')}
                     merchantFlag={merchantBankCancelFlag}
                     userFlag={userBankCancelFlag}
                     setMerchantFlag={setMerchantBankCancelFlag}
                     setUserFlag={setUserBankCancelFlag}
                   ></AlimTalkSettingServiceRow>
                   <AlimTalkSettingServiceRow
-                    title='가상계좌(입금요청)'
+                    title={t('additionalService.alimtalk.virtualAccountDepositRequest')}
                     merchantFlag={merchantVirtureAccountDepositRequestFlag}
                     userFlag={userVirtureAccountDepositRequestFlag}
                     setMerchantFlag={setMerchantVirtureAccountDepositRequestFlag}
                     setUserFlag={setUserVirtureAccountDepositRequestFlag}
                   ></AlimTalkSettingServiceRow>
                   <AlimTalkSettingServiceRow
-                    title='가상계좌(입금완료)'
+                    title={t('additionalService.alimtalk.virtualAccountDepositComplete')}
                     merchantFlag={merchantVirtureAccountDepositCompleteFlag}
                     userFlag={userVirtureAccountDepositCompleteFlag}
                     setMerchantFlag={setMerchantVirtureAccountDepositCompleteFlag}
                     setUserFlag={setUserVirtureAccountDepositCompleteFlag}
                   ></AlimTalkSettingServiceRow>
                   <AlimTalkSettingServiceRow
-                    title='가상계좌(환불)'
+                    title={t('additionalService.alimtalk.virtualAccountRefund')}
                     merchantFlag={merchantVirtureAccountRefundFlag}
                     userFlag={userVirtureAccountRefundFlag}
                     setMerchantFlag={setMerchantVirtureAccountRefundFlag}
@@ -237,7 +239,7 @@ export const AlimtalkSettingPage = () => {
               <button
                 className="btn-50 btn-blue flex-1"
                 onClick={() => onClickToSave()}
-              >저장</button>
+              >{t('common.save')}</button>
             </div>
           </div>
         </div>