- 이름,이메일,계좌번호 등 마스킹정책 적용

- 권한 체크 오 기입 수정
- 다국어 누락 부분 수정

src/pages/transaction/billing/charge-page.tsx

@@ -19,6 +19,7 @@ import { notiBar, snackBar } from '@/shared/lib';
 import { BillingChargeParams, BillingChargeResponse } from '@/entities/transaction/model/types';
 import { useKeyboardAware } from '@/shared/lib/hooks/use-keyboard-aware';
 import { checkGrant } from '@/shared/lib/check-grant';
+import { MaskedNameInput } from '@/shared/ui/masked-input';
 
 const menuId = 34;
 export const BillingChargePage = () => {
@@ -56,23 +57,23 @@ export const BillingChargePage = () => {
   const onClickToBillingCharge = () => {
     if(checkGrant(menuId, 'W')){
       if (!billKey) {
-        showAlert('빌키는 필수 입력 항목입니다.');
+        showAlert(t('billing.billKeyRequired'));
         return;
       }
       else if (!productName) {
-        showAlert('상품명은 필수 입력 항목입니다.');
+        showAlert(t('billing.productNameRequired'));
       }
       else if (!productAmount) {
-        showAlert('상품금액은 필수 입력 항목입니다.');
+        showAlert(t('billing.productAmountRequired'));
       }
       else if (productAmount <= 0) {
-        showAlert('상품금액은 0보다 커야 합니다.');
+        showAlert(t('billing.productAmountMinimum'));
       }
       else if (!orderNumber) {
-        showAlert('주문번호는 필수 입력 항목입니다.');
+        showAlert(t('billing.orderNumberRequired'));
       }
       else if (!buyerName) {
-        showAlert('구매자명은 필수 입력 항목입니다.');
+        showAlert(t('billing.buyerNameRequired'));
       }
 
       let params: BillingChargeParams = {
@@ -85,7 +86,7 @@ export const BillingChargePage = () => {
         installmentMonth: installmentMonth
       };
       billingCharge(params).then((rs: BillingChargeResponse) => {
-        snackBar('결제 신청을 성공하였습니다.', function () {
+        snackBar(t('billing.chargeSuccess'), function () {
           navigate(PATHS.transaction.billing.list);
         }, 3000);
 
@@ -98,8 +99,8 @@ export const BillingChargePage = () => {
     }
     else{
       showAlert(t('common.nopermission'));
-    } 
-    
+    }
+
   };
 
   const onChangeBillKey = (value: string) => {
@@ -116,13 +117,13 @@ export const BillingChargePage = () => {
       <option
         key={`key-installment`}
         value=''
-      >선택</option>
+      >{t('common.select')}</option>
     );
     rs.push(
       <option
         key={`key-installment-0`}
         value='00'
-      >일시불</option>
+      >{t('billing.lumpSum')}</option>
     );
     for (let i = 2; i <= 33; i++) {
       let val = (i < 10) ? '0' + i : '' + i;
@@ -130,7 +131,7 @@ export const BillingChargePage = () => {
         <option
           key={`key-installment-${i}`}
           value={val}
-        >{i}개월</option>
+        >{t('billing.months', { count: i })}</option>
       );
     };
     return rs;
@@ -142,10 +143,10 @@ export const BillingChargePage = () => {
         <div className="tab-content">
           <div className="tab-pane sub active">
             <div className="option-list">
-              <div className="billing-title">결제 정보 입력</div>
+              <div className="billing-title">{t('billing.paymentInfoInput')}</div>
               <div className="billing-form">
                 <div className="billing-row">
-                  <div className="billing-label">빌키 <span>*</span></div>
+                  <div className="billing-label">{t('billing.billKey')} <span>*</span></div>
                   <div className="billing-field">
                     <input
                       type="text"
@@ -156,7 +157,7 @@ export const BillingChargePage = () => {
                   </div>
                 </div>
                 <div className="billing-row">
-                  <div className="billing-label">상품명 <span>*</span></div>
+                  <div className="billing-label">{t('transaction.fields.productName')} <span>*</span></div>
                   <div className="billing-field">
                     <input
                       type="text"
@@ -167,7 +168,7 @@ export const BillingChargePage = () => {
                   </div>
                 </div>
                 <div className="billing-row">
-                  <div className="billing-label">상품금액 <span>*</span></div>
+                  <div className="billing-label">{t('billing.productAmount')} <span>*</span></div>
                   <div className="billing-field">
                     <NumericFormat
                       value={productAmount}
@@ -179,7 +180,7 @@ export const BillingChargePage = () => {
                   </div>
                 </div>
                 <div className="billing-row">
-                  <div className="billing-label">주문번호 <span>*</span></div>
+                  <div className="billing-label">{t('transaction.fields.orderNumber')} <span>*</span></div>
                   <div className="billing-field">
                     <input
                       type="text"
@@ -190,24 +191,24 @@ export const BillingChargePage = () => {
                   </div>
                 </div>
                 <div className="billing-row">
-                  <div className="billing-label">구매자명 <span>*</span></div>
+                  <div className="billing-label">{t('transaction.fields.buyer')} <span>*</span></div>
                   <div className="billing-field">
-                    <input
-                      type="text"
+                    <MaskedNameInput
                       value={buyerName}
-                      onChange={(e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value)}
+                      placeholder=''
+                      onChange={setBuyerName}
                       onFocus={handleInputFocus}
                     />
                   </div>
                 </div>
 
                 <div className="billing-row">
-                  <div className="billing-label">결제 요청일자</div>
+                  <div className="billing-label">{t('billing.paymentRequestDate')}</div>
                   <div className="billing-field">
                     <div className="input-wrapper date wid-100">
                       <input
                         type="text"
-                        placeholder="날짜 선택"
+                        placeholder={t('billing.selectDate')}
                         value={paymentRequestDate}
                         readOnly={true}
                       />
@@ -226,7 +227,7 @@ export const BillingChargePage = () => {
                 </div>
 
                 <div className="billing-row" style={keyboardAwarePadding}>
-                  <div className="billing-label">할부 개월</div>
+                  <div className="billing-label">{t('billing.installmentMonth')}</div>
                   <div className="billing-field">
                     <select
                       value={installmentMonth}
@@ -242,7 +243,7 @@ export const BillingChargePage = () => {
               <button
                 className="btn-50 btn-blue flex-1"
                 onClick={() => onClickToBillingCharge()}
-              >결제 신청</button>
+              >{t('billing.chargeRequest')}</button>
             </div>
           </div>
         </div>