Add permission checks and localization to ARS pages

- Add grant check (52, 'D') to ARS list download button
- Add grant check (52, 'X') to ARS payment request button
- Add grant check (52, 'X') to ARS detail SMS resend button
- Refactor inline onClick handlers to method references
- Replace hardcoded Korean text with i18n translation keys in ARS detail page

Changes:
- ars/list-page: Add permission checks for download and payment request
- ars/detail-page: Add permission check for SMS resend, localize all UI text

Localized fields:
- Page title, transaction info, payment method, payment status, order status
- Order date/time, product name, order number, buyer, phone number, email
- Verification code, SMS resend button and success/error messages

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

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

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

@@ -25,6 +25,8 @@ import { ArsResendSmsBottomSheet } from '@/entities/additional-service/ui/ars/re
 import { useExtensionArsResendMutation } from '@/entities/additional-service/api/ars/use-extension-ars-resend-mutation';
 import { getArsOrderStatusName, getArsPaymentStatusName } from '@/entities/additional-service/model/ars/constant';
 import { snackBar } from '@/shared/lib';
+import { checkGrant } from '@/shared/lib/check-grant';
+import { showAlert } from '@/widgets/show-alert';
 
 export const ArsDetailPage = () => {
   const { t, i18n } = useTranslation();
@@ -50,7 +52,7 @@ export const ArsDetailPage = () => {
     });
   };
 
-  useSetHeaderTitle('ARS 결제 상세');
+  useSetHeaderTitle(t('additionalService.ars.detailTitle'));
   useSetHeaderType(HeaderType.LeftArrow);
   useSetFooterMode(false);
   useSetOnBack(() => {
@@ -62,6 +64,10 @@ export const ArsDetailPage = () => {
   }, []);
 
   const onClickToOpenResendBottomSheet = () => {
+    if (!checkGrant(52, 'X')) {
+      showAlert(t('common.nopermission'));
+      return;
+    }
     setBottomSheetOn(true);
   };
 
@@ -76,18 +82,18 @@ export const ArsDetailPage = () => {
     }
     extensionArsResend(params).then((rs: ExtensionArsResendResponse) => {
       if (rs.status) {
-        snackBar("SMS 재전송을 성공하였습니다.");
+        snackBar(t('additionalService.ars.smsResendSuccess'));
         setBottomSheetOn(false);
         callDetail(); // 상세 정보 갱신
       } else {
-        const errorMessage = rs.error?.message || 'SMS 재전송이 실패하였습니다.';
+        const errorMessage = rs.error?.message || t('additionalService.ars.smsResendFailed');
-        snackBar(`[실패] ${errorMessage}`);
+        snackBar(`[${t('common.failed')}] ${errorMessage}`);
       }
     }).catch((error) => {
       const errorMessage = error?.response?.data?.error?.message ||
         error?.message ||
-        'SMS 재전송 중 오류가 발생했습니다.';
+        t('additionalService.ars.smsResendError');
-      snackBar(`[실패] ${errorMessage}`);
+      snackBar(`[${t('common.failed')}] ${errorMessage}`);
     });
   };
 
@@ -107,52 +113,52 @@ export const ArsDetailPage = () => {
             </div>
             <div className="detail-divider"></div>
             <div className="pay-detail">
-              <div className="detail-title">거래 정보</div>
+              <div className="detail-title">{t('additionalService.ars.transactionInfo')}</div>
               <ul className="kv-list">
                 <li className="kv-row">
                   <span className="k">MID</span>
                   <span className="v">{ detail?.mid }</span>
                 </li>
                 <li className="kv-row">
-                  <span className="k">결제방식</span>
+                  <span className="k">{t('additionalService.ars.paymentMethod')}</span>
                   <span className="v">{ detail?.arsPaymentMethod }</span>
                 </li>
                 <li className="kv-row">
-                  <span className="k">결제상태</span>
+                  <span className="k">{t('additionalService.ars.paymentStatus')}</span>
                   <span className="v">{ getArsPaymentStatusName(t)(detail?.paymentStatus) }</span>
                 </li>
                 <li className="kv-row">
-                  <span className="k">주문상태</span>
+                  <span className="k">{t('additionalService.ars.orderStatus')}</span>
                   <span className="v">{ getArsOrderStatusName(t)(detail?.orderStatus) }</span>
                 </li>
                 <li className="kv-row">
-                  <span className="k">주문일시</span>
+                  <span className="k">{t('additionalService.ars.orderDateTime')}</span>
-                  <span className="v">{ 
+                  <span className="v">{
                     detail?.paymentDate ? moment(detail.paymentDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss') : '-'
                   }</span>
                 </li>
                 <li className="kv-row">
-                  <span className="k">상품명</span>
+                  <span className="k">{t('additionalService.ars.productName')}</span>
                   <span className="v">{ detail?.goodsName }</span>
                 </li>
                 <li className="kv-row">
-                  <span className="k">주문번호</span>
+                  <span className="k">{t('additionalService.ars.orderNumber')}</span>
                   <span className="v">{ detail?.tid }</span>
                 </li>
                 <li className="kv-row">
-                  <span className="k">구매자</span>
+                  <span className="k">{t('additionalService.ars.buyer')}</span>
                   <span className="v">{ detail?.buyerName }</span>
                 </li>
                 <li className="kv-row">
-                  <span className="k">휴대폰번호</span>
+                  <span className="k">{t('additionalService.ars.phoneNumber')}</span>
                   <span className="v">{ detail?.maskPhoneNumber }</span>
                 </li>
                 <li className="kv-row">
-                  <span className="k">이메일</span>
+                  <span className="k">{t('additionalService.ars.email')}</span>
                   <span className="v">{ detail?.email }</span>
                 </li>
                 <li className="kv-row">
-                  <span className="k">발송 인증번호</span>
+                  <span className="k">{t('additionalService.ars.sendVerificationCode')}</span>
                   <span className="v">{ detail?.smsVerificationCode }</span>
                 </li>
               </ul>
@@ -161,9 +167,9 @@ export const ArsDetailPage = () => {
               <div className="apply-row">
                 <button
                   className="btn-50 btn-blue flex-1"
-                  onClick={ () => onClickToOpenResendBottomSheet() }
+                  onClick={onClickToOpenResendBottomSheet}
                   //disabled={ detail?.orderStatus !== OrderStatus.PENDING }
-                >SMS 재전송</button>
+                >{t('additionalService.ars.smsResend')}</button>
               </div>
             )}
           </div>

src/pages/additional-service/ars/list-page.tsx

@@ -26,6 +26,8 @@ import { useExtensionAccessCheck } from '@/shared/lib/hooks/use-extension-access
 import useIntersectionObserver from '@/widgets/intersection-observer';
 import { ArsList } from '@/entities/additional-service/ui/ars/ars-list';
 import { ArsDetail } from '@/entities/additional-service/ui/ars/detail/ars-detail';
+import { checkGrant } from '@/shared/lib/check-grant';
+import { showAlert } from '@/widgets/show-alert';
 
 export const ArsListPage = () => {
   const { navigate } = useNavigate();
@@ -136,6 +138,10 @@ export const ArsListPage = () => {
   };
 
   const onClickToOpenEmailBottomSheet = () => {
+    if (!checkGrant(52, 'D')) {
+      showAlert(t('common.nopermission'));
+      return;
+    }
     setEmailBottomSheetOn(true);
   };
 
@@ -170,6 +176,10 @@ export const ArsListPage = () => {
   };
 
   const onClickToNavigate = () => {
+    if (!checkGrant(52, 'X')) {
+      showAlert(t('common.nopermission'));
+      return;
+    }
     navigate(PATHS.additionalService.ars.request, {
       state: { mid }
     });
@@ -230,7 +240,7 @@ export const ArsListPage = () => {
                 <button
                   className="download-btn"
                   aria-label={t('common.download')}
-                  onClick={() => onClickToOpenEmailBottomSheet()}
+                  onClick={onClickToOpenEmailBottomSheet}
                 >
                   <img
                     src={IMAGE_ROOT + '/ico_download.svg'}
@@ -272,7 +282,7 @@ export const ArsListPage = () => {
         <div className="apply-row">
           <button
             className="btn-50 btn-blue flex-1"
-            onClick={() => onClickToNavigate()}
+            onClick={onClickToNavigate}
           >{t('additionalService.ars.paymentRequest')}</button>
         </div>
       </main>