Merge branch 'main' of https://gitea.bpsoft.co.kr/nicepayments/nice-app-web

src/entities/additional-service/ui/info-wrap/detail-info-wrap.tsx

@@ -1,4 +1,5 @@
 import moment from 'moment';
+import { useTranslation } from 'react-i18next';
 import { AdditionalServiceCategory, DetailInfoSectionProps } from '../../model/types';
 import 'react-slidedown/lib/slidedown.css';
 
@@ -6,29 +7,50 @@ export const DetailInfoWrap = ({
     additionalServiceCategory,
     detailInfo
 }: DetailInfoSectionProps) => {
+    const { t } = useTranslation();
+
+    // 전화번호 마스킹
+    const getMaskedPhoneNumber = (phone?: string) => {
+        if (!phone) return '';
+        if (phone.length <= 7) return phone;
+        const visiblePart = phone.slice(0, -4);
+        return visiblePart + '****';
+    };
+
+    // 이메일 마스킹
+    const getMaskedEmail = (email?: string) => {
+        if (!email) return '';
+        const atIndex = email.indexOf('@');
+        if (atIndex === -1 || atIndex <= 2) return email;
+        const visiblePart = email.slice(0, 2);
+        const domainPart = email.slice(atIndex);
+        const maskedLength = atIndex - 2;
+        const masked = '*'.repeat(maskedLength);
+        return visiblePart + masked + domainPart;
+    };
 
     return (
         <>
             <div className="txn-section">
-                <div className="section-title">상세 정보</div>
+                <div className="section-title">{t('additionalService.infoWrap.detailInfo')}</div>
                 <ul className="kv-list">
                     {/*링크결제_발송내역*/}
                     {(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) &&
                         <>
                             < li className="kv-row">
-                                <span className="k">이메일</span>
+                                <span className="k">{t('additionalService.infoWrap.email')}</span>
-                                <span className="v">{detailInfo?.email}</span>
+                                <span className="v">{getMaskedEmail(detailInfo?.email)}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">휴대폰 번호</span>
+                                <span className="k">{t('additionalService.infoWrap.phoneNumber')}</span>
-                                <span className="v">{detailInfo?.phoneNumber}</span>
+                                <span className="v">{getMaskedPhoneNumber(detailInfo?.phoneNumber)}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">상품명</span>
+                                <span className="k">{t('additionalService.infoWrap.productName')}</span>
                                 <span className="v">{detailInfo?.goodsName && detailInfo?.goodsName}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">주문번호</span>
+                                <span className="k">{t('additionalService.infoWrap.orderNumber')}</span>
                                 <span className="v">{detailInfo?.moid}</span>
                             </li>
                         </>
@@ -37,27 +59,27 @@ export const DetailInfoWrap = ({
                     {(additionalServiceCategory === AdditionalServiceCategory.AccountHolderSearch) &&
                         <>
                             <li className="kv-row">
-                                <span className="k">조회 일시</span>
+                                <span className="k">{t('additionalService.infoWrap.inquiryDateTime')}</span>
                                 <span className="v">{detailInfo?.requestDate && moment(detailInfo.requestDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss')}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">결과</span>
+                                <span className="k">{t('additionalService.infoWrap.result')}</span>
                                 <span className="v">{detailInfo?.resultStatus}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">실패사유</span>
+                                <span className="k">{t('additionalService.infoWrap.failureReason')}</span>
                                 <span className="v">{detailInfo?.failureReason}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">은행</span>
+                                <span className="k">{t('additionalService.infoWrap.bank')}</span>
                                 <span className="v">{detailInfo?.bankName}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">계좌번호</span>
+                                <span className="k">{t('additionalService.infoWrap.accountNumber')}</span>
                                 <span className="v">{detailInfo?.accountNo}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">요청 구분</span>
+                                <span className="k">{t('additionalService.infoWrap.requestCategory')}</span>
                                 <span className="v">{detailInfo?.requestWay}</span>
                             </li>
                         </>
@@ -67,35 +89,35 @@ export const DetailInfoWrap = ({
                     {(additionalServiceCategory === AdditionalServiceCategory.AccountHolderAuth) &&
                         <>
                             < li className="kv-row">
-                                <span className="k">가맹점상호</span>
+                                <span className="k">{t('additionalService.infoWrap.merchantName')}</span>
                                 <span className="v">{detailInfo?.companyName}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">MID</span>
+                                <span className="k">{t('additionalService.infoWrap.mid')}</span>
                                 <span className="v">{detailInfo?.mid}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">요청일시</span>
+                                <span className="k">{t('additionalService.infoWrap.requestDateTime')}</span>
                                 <span className="v">{detailInfo?.requestDate && moment(detailInfo.requestDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD HH:mm:ss')}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">은행</span>
+                                <span className="k">{t('additionalService.infoWrap.bank')}</span>
                                 <span className="v">{detailInfo?.bankName}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">계좌번호</span>
+                                <span className="k">{t('additionalService.infoWrap.accountNumber')}</span>
                                 <span className="v">{detailInfo?.accountNo}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">예금주</span>
+                                <span className="k">{t('additionalService.infoWrap.accountHolder')}</span>
                                 <span className="v">{detailInfo?.accountName}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">결과</span>
+                                <span className="k">{t('additionalService.infoWrap.result')}</span>
                                 <span className="v">{detailInfo?.transferStatus}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">실패사유</span>
+                                <span className="k">{t('additionalService.infoWrap.failureReason')}</span>
                                 <span className="v">{detailInfo?.failureReason && detailInfo?.failureReason}</span>
                             </li>
                         </>

src/entities/additional-service/ui/info-wrap/payment-info-wrap.tsx

@@ -12,43 +12,77 @@ export const PaymentInfoWrap = ({
 
     console.log("PaymentInfo Check: ", paymentInfo)
 
+    // 이름 마스킹
+    const getMaskedName = (name?: string) => {
+        if (!name) return '';
+        const length = name.length;
+        if (length <= 1) return name;
+        if (length === 2) return name[0] + '*';
+        if (length === 3) return name[0] + '*' + name[2];
+        const firstChar = name[0];
+        const lastChar = name[length - 1];
+        const maskedLength = length - 2;
+        const masked = '*'.repeat(maskedLength);
+        return firstChar + masked + lastChar;
+    };
+
+    // 전화번호 마스킹
+    const getMaskedPhoneNumber = (phone?: string) => {
+        if (!phone) return '';
+        if (phone.length <= 7) return phone;
+        const visiblePart = phone.slice(0, -4);
+        return visiblePart + '****';
+    };
+
+    // 이메일 마스킹
+    const getMaskedEmail = (email?: string) => {
+        if (!email) return '';
+        const atIndex = email.indexOf('@');
+        if (atIndex === -1 || atIndex <= 2) return email;
+        const visiblePart = email.slice(0, 2);
+        const domainPart = email.slice(atIndex);
+        const maskedLength = atIndex - 2;
+        const masked = '*'.repeat(maskedLength);
+        return visiblePart + masked + domainPart;
+    };
+
     return (
         <>
             <div className="txn-section">
-                <div className="section-title">결제 정보</div>
+                <div className="section-title">{t('additionalService.infoWrap.paymentInfo')}</div>
                 <ul className="kv-list">
                     {(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory) &&
                         <>
                             <li className="kv-row">
-                                <span className="k">구매자명</span>
+                                <span className="k">{t('additionalService.infoWrap.buyerName')}</span>
-                                <span className="v">{paymentInfo?.buyerName}</span>
+                                <span className="v">{getMaskedName(paymentInfo?.buyerName)}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">발송수단</span>
+                                <span className="k">{t('additionalService.infoWrap.sendMethod')}</span>
                                 <span className="v">{getSendMethodText(t)(paymentInfo?.sendMethod)}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">발송일자</span>
+                                <span className="k">{t('additionalService.infoWrap.sendDate')}</span>
                                 <span className="v">
                                     {paymentInfo?.sendDate && moment(paymentInfo?.sendDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD')}
                                 </span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">결제상태(실패횟수)</span>
+                                <span className="k">{t('additionalService.infoWrap.paymentStatusFailCount')}</span>
                                 <span className="v">  {`${getPaymentStatusText(t)(paymentInfo?.paymentStatus)}(${paymentInfo?.failCount})`}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">결제수단</span>
+                                <span className="k">{t('transaction.fields.paymentMethod')}</span>
                                 <span className="v">{paymentInfo?.paymentMethod}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">결제일자</span>
+                                <span className="k">{t('additionalService.infoWrap.paymentDate')}</span>
                                 <span className="v">
                                     {paymentInfo?.paymentDate && moment(paymentInfo.paymentDate,'YYYYMMDDHHmmss').format('YYYY.MM.DD')}
                                 </span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">결제유효일자</span>
+                                <span className="k">{t('additionalService.infoWrap.paymentValidDate')}</span>
                                 <span className="v">
                                     {paymentInfo?.paymentLimitDate && moment(paymentInfo.paymentLimitDate).format('YYYY.MM.DD')}
                                 </span>
@@ -57,47 +91,47 @@ export const PaymentInfoWrap = ({
                     }{(additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait) &&
                         <>
                             <li className="kv-row">
-                                <span className="k">진행상태</span>
+                                <span className="k">{t('additionalService.infoWrap.progressStatus')}</span>
                                 <span className="v">{getProcessStatusText(t)(paymentInfo?.processStatus)}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">요청일자</span>
+                                <span className="k">{t('additionalService.infoWrap.requestDate')}</span>
                                 <span className="v">{paymentInfo?.requestDate && moment(paymentInfo.requestDate,'YYYYMMDDHHmmss').format('YYYY.MM.DD')}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">결제유효일자</span>
+                                <span className="k">{t('additionalService.infoWrap.paymentValidDate')}</span>
                                 <span className="v">
                                     {paymentInfo?.paymentLimitDate && moment(paymentInfo.paymentLimitDate, 'YYYYMMDDHHmmss').format('YYYY.MM.DD')}
                                 </span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">발송수단</span>
+                                <span className="k">{t('additionalService.infoWrap.sendMethod')}</span>
                                 <span className="v">{paymentInfo?.sendMethod}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">구매자명</span>
+                                <span className="k">{t('additionalService.infoWrap.buyerName')}</span>
-                                <span className="v">{paymentInfo?.buyerName}</span>
+                                <span className="v">{getMaskedName(paymentInfo?.buyerName)}</span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">이메일</span>
+                                <span className="k">{t('additionalService.infoWrap.email')}</span>
                                 <span className="v">
-                                    {paymentInfo?.email && paymentInfo.email}
+                                    {getMaskedEmail(paymentInfo?.email)}
                                 </span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">휴대폰번호</span>
+                                <span className="k">{t('additionalService.infoWrap.phoneNumber')}</span>
                                 <span className="v">
-                                    {paymentInfo?.phoneNumber && paymentInfo.phoneNumber}
+                                    {getMaskedPhoneNumber(paymentInfo?.phoneNumber)}
                                 </span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">상품명</span>
+                                <span className="k">{t('additionalService.infoWrap.productName')}</span>
                                 <span className="v">
                                     {paymentInfo?.goodsName && paymentInfo.goodsName}
                                 </span>
                             </li>
                             <li className="kv-row">
-                                <span className="k">주문번호</span>
+                                <span className="k">{t('additionalService.infoWrap.orderNumber')}</span>
                                 <span className="v">
                                     {paymentInfo?.moid && paymentInfo?.moid}
                                 </span>

src/entities/additional-service/ui/link-payment/apply/link-payment-step2.tsx

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ProcessStep } from "@/entities/transaction/model/types";
 import { useSetOnBack } from "@/widgets/sub-layout/use-sub-layout";
@@ -17,6 +18,7 @@ export const LinkPaymentStep2 = ({
     setFormData
 }: LinkPaymentStep2Props) => {
     const { t } = useTranslation();
+    const [isComposing, setIsComposing] = useState<boolean>(false);
 
     useSetOnBack(() => {
         setProcessStep(ProcessStep.One);
@@ -28,6 +30,43 @@ export const LinkPaymentStep2 = ({
         return phoneRegex.test(phone);
     };
 
+    // 이메일 형식 검증
+    const isValidEmail = (email: string) => {
+        const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+        return emailRegex.test(email);
+    };
+
+    // 전화번호 마스킹
+    const getMaskedPhoneNumber = (phone: string) => {
+        if (phone.length <= 7) return phone;
+        const visiblePart = phone.slice(0, -4);
+        return visiblePart + '****';
+    };
+
+    // 이메일 마스킹
+    const getMaskedEmail = (email: string) => {
+        const atIndex = email.indexOf('@');
+        if (atIndex === -1 || atIndex <= 2) return email;
+        const visiblePart = email.slice(0, 2);
+        const domainPart = email.slice(atIndex);
+        const maskedLength = atIndex - 2;
+        const masked = '*'.repeat(maskedLength);
+        return visiblePart + masked + domainPart;
+    };
+
+    // 이름 마스킹
+    const getMaskedName = (name: string) => {
+        const length = name.length;
+        if (length <= 1) return name;
+        if (length === 2) return name[0] + '*';
+        if (length === 3) return name[0] + '*' + name[2];
+        const firstChar = name[0];
+        const lastChar = name[length - 1];
+        const maskedLength = length - 2;
+        const masked = '*'.repeat(maskedLength);
+        return firstChar + masked + lastChar;
+    };
+
     const handleInputChange = (field: string, value: string) => {
         setFormData({ ...formData, [field]: value });
     };
@@ -56,9 +95,43 @@ export const LinkPaymentStep2 = ({
                     <div className="issue-field">
                         <input
                             type="text"
-                            placeholder=""
+                            value={isComposing ? formData.buyerName : getMaskedName(formData.buyerName)}
-                            value={formData.buyerName}
+                            onKeyDown={(e) => {
-                            onChange={(e) => handleInputChange('buyerName', e.target.value)}
+                                // 스페이스바 입력 차단
+                                if (e.key === ' ') {
+                                    e.preventDefault();
+                                }
+                                // 백스페이스 처리 (composition 중이 아닐 때만)
+                                else if (e.key === 'Backspace' && !isComposing) {
+                                    e.preventDefault();
+                                    handleInputChange('buyerName', formData.buyerName.slice(0, -1));
+                                }
+                                // 영문자 입력 처리 (composition 중이 아닐 때만)
+                                else if (!isComposing && e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+                                    if (/^[a-zA-Z]$/.test(e.key)) {
+                                        e.preventDefault();
+                                        handleInputChange('buyerName', formData.buyerName + e.key);
+                                    }
+                                    // 한글이 아닌 다른 문자는 차단
+                                    else if (!/^[ㄱ-ㅎㅏ-ㅣ가-힣]$/.test(e.key)) {
+                                        e.preventDefault();
+                                    }
+                                }
+                            }}
+                            onCompositionStart={() => setIsComposing(true)}
+                            onCompositionEnd={(e: any) => {
+                                setIsComposing(false);
+                                // 스페이스 제거 후 저장
+                                const valueWithoutSpace = e.target.value.replace(/\s/g, '');
+                                handleInputChange('buyerName', valueWithoutSpace);
+                            }}
+                            onChange={(e) => {
+                                if (isComposing) {
+                                    // composition 중에는 스페이스 제거
+                                    const valueWithoutSpace = e.target.value.replace(/\s/g, '');
+                                    handleInputChange('buyerName', valueWithoutSpace);
+                                }
+                            }}
                         />
                     </div>
                 </div>
@@ -69,9 +142,38 @@ export const LinkPaymentStep2 = ({
                         <div className="issue-field">
                             <input
                                 type="text"
-                                placeholder="test@nicepay.co.kr"
+                                placeholder="te**@nicepay.co.kr"
-                                value={formData.email}
+                                value={getMaskedEmail(formData.email)}
-                                onChange={(e) => handleInputChange('email', e.target.value)}
+                                onKeyDown={(e) => {
+                                    // 백스페이스 처리
+                                    if (e.key === 'Backspace') {
+                                        e.preventDefault();
+                                        handleInputChange('email', formData.email.slice(0, -1));
+                                    }
+                                    // 영문, 숫자, @, ., - 등 이메일에 허용되는 문자만 입력 가능
+                                    else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+                                        if (/^[a-zA-Z0-9@._-]$/.test(e.key)) {
+                                            e.preventDefault();
+                                            handleInputChange('email', formData.email + e.key);
+                                        } else {
+                                            e.preventDefault();
+                                        }
+                                    }
+                                }}
+                                onChange={(e) => {
+                                    // 복사/붙여넣기 등 특수 입력 대비
+                                    const input = e.target.value;
+                                    const filteredInput = input.replace(/[^a-zA-Z0-9@._-]/g, '');
+                                    const atIndex = filteredInput.indexOf('@');
+                                    if (atIndex !== -1) {
+                                        const beforeAt = filteredInput.slice(0, atIndex).replace(/\*/g, '');
+                                        const afterAt = filteredInput.slice(atIndex);
+                                        handleInputChange('email', beforeAt + afterAt);
+                                    } else {
+                                        handleInputChange('email', filteredInput.replace(/\*/g, ''));
+                                    }
+                                }}
+                                className={formData.email && !isValidEmail(formData.email) ? 'error' : ''}
                             />
                         </div>
                     </div>
@@ -83,16 +185,33 @@ export const LinkPaymentStep2 = ({
                         <div className="issue-field">
                             <input
                                 type="tel"
-                                placeholder="01012345678"
+                                value={getMaskedPhoneNumber(formData.phoneNumber)}
-                                value={formData.phoneNumber}
+                                onKeyDown={(e) => {
+                                    // 백스페이스 처리
+                                    if (e.key === 'Backspace') {
+                                        e.preventDefault();
+                                        handleInputChange('phoneNumber', formData.phoneNumber.slice(0, -1));
+                                    }
+                                    // 숫자 입력 처리
+                                    else if (/^[0-9]$/.test(e.key)) {
+                                        e.preventDefault();
+                                        if (formData.phoneNumber.length < 11) {
+                                            handleInputChange('phoneNumber', formData.phoneNumber + e.key);
+                                        }
+                                    }
+                                }}
                                 onChange={(e) => {
-                                    const onlyNumbers = e.target.value.replace(/[^0-9]/g, '');
+                                    // Android 등에서 한글 키보드로 입력 시 대비
-                                    handleInputChange('phoneNumber', onlyNumbers);
+                                    const input = e.target.value;
+                                    const digitsOnly = input.replace(/\*/g, '').replace(/[^0-9]/g, '');
+                                    if (digitsOnly.length <= 11) {
+                                        handleInputChange('phoneNumber', digitsOnly);
+                                    }
                                 }}
                                 className={formData.phoneNumber && !isValidPhoneNumber(formData.phoneNumber) ? 'error' : ''}
                                 inputMode="numeric"
                                 pattern="[0-9]*"
-                                maxLength={11}
+                                maxLength={15}
                             />
                         </div>
                     </div>

src/entities/additional-service/ui/link-payment/filter/link-payment-history-filter.tsx

@@ -128,7 +128,7 @@ export const LinkPaymentHistoryFilter = ({
 							selectValue={filterSearchCl}
 							selectSetter={setFilterSearchCl}
 							selectOptions={searchTypeOption}
-							inputValue={searchValue}
+							inputValue={filterSearchValue}
 							inputSetter={setFilterSearchValue}
 						></FilterSelectInput>
 						<FilterCalendar

src/entities/additional-service/ui/list-item.tsx

@@ -40,6 +40,31 @@ export const ListItem = ({
 }: ListItemProps) => {
   const { navigate } = useNavigate();
   const { t, i18n } = useTranslation();
+
+  // 이름 마스킹
+  const getMaskedName = (name?: string) => {
+    if (!name) return '';
+    const length = name.length;
+    if (length <= 1) return name;
+    if (length === 2) return name[0] + '*';
+    if (length === 3) return name[0] + '*' + name[2];
+    const firstChar = name[0];
+    const lastChar = name[length - 1];
+    const maskedLength = length - 2;
+    const masked = '*'.repeat(maskedLength);
+    return firstChar + masked + lastChar;
+  };
+
+  // 계좌번호 마스킹 (마지막 5자리 제외)
+  const getMaskedAccountNumber = (accountNo?: string) => {
+    if (!accountNo) return '';
+    if (accountNo.length <= 5) return accountNo;
+    const visiblePart = accountNo.slice(-5);
+    const maskedLength = accountNo.length - 5;
+    const masked = '*'.repeat(maskedLength);
+    return masked + visiblePart;
+  };
+
   const getItemClass = () => {
     let rs = '';
     if (paymentStatus === '') {
@@ -351,18 +376,20 @@ export const ListItem = ({
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentHistory
     ) {
-      str = `${buyerName}`;
+      str = `${getMaskedName(buyerName)}`;
     } else if (additionalServiceCategory === AdditionalServiceCategory.LinkPaymentWait) {
-      str = `${buyerName}(${receiverInfo})`;
+      str = `${getMaskedName(buyerName)}(${receiverInfo})`;
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.Payout) {
       str = companyName;
     }
-    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer ||
+    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer
-      additionalServiceCategory === AdditionalServiceCategory.FundAccountResult
     ) {
       str = `${accountName}(${accountNo})`;
     }
+    else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountResult) {
+      str = `${getMaskedName(accountName)}(${getMaskedAccountNumber(accountNo)})`;
+    }
     else if (additionalServiceCategory === AdditionalServiceCategory.SMSPayment) {
       if (buyerPhoneLast4) {
         str = `${buyerName}(${buyerPhoneLast4})`
@@ -372,10 +399,10 @@ export const ListItem = ({
 
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.Ars) {
-      str = `${buyerName}(${tid})`;
+      str = `${getMaskedName(buyerName)}(${tid})`;
     }
     else if (additionalServiceCategory === AdditionalServiceCategory.Alimtalk) {
-      str = `${receiverName}(${getAlimtalkSendTypeText(t)(sendType)})`;
+      str = `${getMaskedName(receiverName)}(${getAlimtalkSendTypeText(t)(sendType)})`;
     }
 
     return str;

src/pages/additional-service/account-holder-search/account-holder-search-page.tsx

@@ -213,9 +213,9 @@ export const AccountHolderSearchPage = () => {
     sortType
   ]);
 
-  // if (!hasAccess) {
+  if (!hasAccess) {
-  //   return <AccessDeniedDialog />;
+    return <AccessDeniedDialog />;
-  // }
+  }
 
   return (
     <>

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

@@ -300,9 +300,9 @@ export const AlimtalkListPage = () => {
     };
   }, []);
 
-  // if (!hasAccess) {
+  if (!hasAccess) {
-  //   return <AccessDeniedDialog />;
+    return <AccessDeniedDialog />;
-  // }
+  }
 
   return (
     <>

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

@@ -37,6 +37,7 @@ export const ArsRequestPage = () => {
   const [amount, setAmount] = useState<number>(0);
   const [instmntMonth, setInstmntMonth] = useState<string>('00');
   const [buyerName, setBuyerName] = useState<string>('');
+  const [isComposing, setIsComposing] = useState<boolean>(false);
   const [phoneNumber, setPhoneNumber] = useState<string>('');
   const [email, setEamil] = useState<string>('');
   const [arsPaymentMethod, setArsPaymentMethod] = useState<ArsPaymentMethod>(ArsPaymentMethod.SMS);
@@ -110,6 +111,60 @@ export const ArsRequestPage = () => {
     );
   };
 
+  const getMaskedPhoneNumber = (phone: string) => {
+    // 7자리 이하면 그대로 표시
+    if (phone.length <= 7) {
+      return phone;
+    }
+    // 7자리 초과면 마지막 4자리 마스킹
+    const visiblePart = phone.slice(0, -4);
+    return visiblePart + '****';
+  };
+
+  const getMaskedEmail = (email: string) => {
+    const atIndex = email.indexOf('@');
+
+    // @가 없거나 앞부분이 2자리 이하면 그대로 표시
+    if (atIndex === -1 || atIndex <= 2) {
+      return email;
+    }
+
+    // 앞 2자리만 보이고 나머지는 마스킹
+    const visiblePart = email.slice(0, 2);
+    const domainPart = email.slice(atIndex);
+    const maskedLength = atIndex - 2;
+    const masked = '*'.repeat(maskedLength);
+
+    return visiblePart + masked + domainPart;
+  };
+
+  const getMaskedName = (name: string) => {
+    const length = name.length;
+
+    // 1글자면 그대로 표시
+    if (length <= 1) {
+      return name;
+    }
+
+    // 2글자면 첫 글자만 표시 (한글: 홍*, 영문: j*)
+    if (length === 2) {
+      return name[0] + '*';
+    }
+
+    // 3글자면 가운데 마스킹 (한글: 홍*동, 영문: j*n)
+    if (length === 3) {
+      return name[0] + '*' + name[2];
+    }
+
+    // 4글자 이상이면 첫글자와 마지막글자만 표시, 나머지는 마스킹 (한글: 선**녀, 영문: j***n)
+    const firstChar = name[0];
+    const lastChar = name[length - 1];
+    const maskedLength = length - 2;
+    const masked = '*'.repeat(maskedLength);
+
+    return firstChar + masked + lastChar;
+  };
+
   const getArsPaymentMethodBtns = () => {
     let rs = [];
     rs.push(
@@ -215,8 +270,44 @@ export const ArsRequestPage = () => {
                   <div className="billing-field">
                     <input
                       type="text"
-                      value={buyerName}
+                      value={isComposing ? buyerName : getMaskedName(buyerName)}
-                      onChange={(e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value)}
+                      placeholder='홍*동'
+                      onKeyDown={(e) => {
+                        // 스페이스바 입력 차단
+                        if (e.key === ' ') {
+                          e.preventDefault();
+                        }
+                        // 백스페이스 처리 (composition 중이 아닐 때만)
+                        else if (e.key === 'Backspace' && !isComposing) {
+                          e.preventDefault();
+                          setBuyerName(buyerName.slice(0, -1));
+                        }
+                        // 영문자 입력 처리 (composition 중이 아닐 때만)
+                        else if (!isComposing && e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+                          if (/^[a-zA-Z]$/.test(e.key)) {
+                            e.preventDefault();
+                            setBuyerName(buyerName + e.key);
+                          }
+                          // 한글이 아닌 다른 문자는 차단
+                          else if (!/^[ㄱ-ㅎㅏ-ㅣ가-힣]$/.test(e.key)) {
+                            e.preventDefault();
+                          }
+                        }
+                      }}
+                      onCompositionStart={() => setIsComposing(true)}
+                      onCompositionEnd={(e: any) => {
+                        setIsComposing(false);
+                        // 스페이스 제거 후 저장
+                        const valueWithoutSpace = e.target.value.replace(/\s/g, '');
+                        setBuyerName(valueWithoutSpace);
+                      }}
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                        // composition 중에는 스페이스 제거
+                        if (isComposing) {
+                          const valueWithoutSpace = e.target.value.replace(/\s/g, '');
+                          setBuyerName(valueWithoutSpace);
+                        }
+                      }}
                       onFocus={handleInputFocus}
                     />
                   </div>
@@ -227,16 +318,35 @@ export const ArsRequestPage = () => {
                   <div className="billing-field">
                     <input
                       type="tel"
-                      value={phoneNumber}
+                      value={getMaskedPhoneNumber(phoneNumber)}
-                      placeholder='01012345678'
+                      placeholder='0101234****'
+                      onKeyDown={(e) => {
+                        // 백스페이스 처리
+                        if (e.key === 'Backspace') {
+                          e.preventDefault();
+                          setPhoneNumber(phoneNumber.slice(0, -1));
+                        }
+                        // 숫자 입력 처리
+                        else if (/^[0-9]$/.test(e.key)) {
+                          e.preventDefault();
+                          if (phoneNumber.length < 11) {
+                            setPhoneNumber(phoneNumber + e.key);
+                          }
+                        }
+                      }}
                       onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                        const onlyNumbers = e.target.value.replace(/[^0-9]/g, '');
+                        // Android 등에서 한글 키보드로 입력 시 대비
-                        setPhoneNumber(onlyNumbers);
+                        const input = e.target.value;
+                        const digitsOnly = input.replace(/\*/g, '').replace(/[^0-9]/g, '');
+
+                        if (digitsOnly.length <= 11) {
+                          setPhoneNumber(digitsOnly);
+                        }
                       }}
                       className={phoneNumber && !isValidPhoneNumber(phoneNumber) ? 'error' : ''}
                       inputMode="numeric"
                       pattern="[0-9]*"
-                      maxLength={11}
+                      maxLength={15}
                       onFocus={handleInputFocus}
                     />
                   </div>
@@ -247,9 +357,45 @@ export const ArsRequestPage = () => {
                   <div className="billing-field">
                     <input
                       type="text"
-                      value={email}
+                      value={getMaskedEmail(email)}
-                      placeholder='test@nicepay.co.kr'
+                      placeholder='te**@nicepay.co.kr'
-                      onChange={(e: ChangeEvent<HTMLInputElement>) => setEamil(e.target.value)}
+                      onKeyDown={(e) => {
+                        // 백스페이스 처리
+                        if (e.key === 'Backspace') {
+                          e.preventDefault();
+                          setEamil(email.slice(0, -1));
+                        }
+                        // 영문, 숫자, @, ., - 등 이메일에 허용되는 문자만 입력 가능
+                        else if (e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+                          // 한글 및 특수문자 차단 (이메일에 사용 가능한 문자만 허용)
+                          if (/^[a-zA-Z0-9@._-]$/.test(e.key)) {
+                            e.preventDefault();
+                            setEamil(email + e.key);
+                          } else {
+                            // 한글 등 허용되지 않는 문자는 입력 차단
+                            e.preventDefault();
+                          }
+                        }
+                      }}
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                        // 복사/붙여넣기 등 특수 입력 대비
+                        const input = e.target.value;
+
+                        // 한글 및 허용되지 않는 문자 제거 (영문, 숫자, @, ., -, _ 만 허용)
+                        const filteredInput = input.replace(/[^a-zA-Z0-9@._-]/g, '');
+
+                        const atIndex = filteredInput.indexOf('@');
+
+                        if (atIndex !== -1) {
+                          // @ 이후 부분은 그대로, @ 이전 부분은 * 제거
+                          const beforeAt = filteredInput.slice(0, atIndex).replace(/\*/g, '');
+                          const afterAt = filteredInput.slice(atIndex);
+                          setEamil(beforeAt + afterAt);
+                        } else {
+                          // @가 없으면 * 제거
+                          setEamil(filteredInput.replace(/\*/g, ''));
+                        }
+                      }}
                       className={email && !isValidEmail(email) ? 'error' : ''}
                       onFocus={handleInputFocus}
                     />

src/pages/additional-service/face-auth/face-auth-page.tsx

@@ -256,9 +256,9 @@ export const FaceAuthPage = () => {
 		};
 	}, []);
 
-	// if (!hasAccess) {
+	if (!hasAccess) {
-	//     return <AccessDeniedDialog />;
+	    return <AccessDeniedDialog />;
-	// }
+	}
     
 	return (
 		<>

src/pages/additional-service/fund-account/transfer-request-page.tsx

@@ -32,6 +32,7 @@ export const FundAccountTransferRequestPage = () => {
   const [amount, setAmount] = useState<number>(0);
   const [moid, setMoid] = useState<string>('');
   const [depositParameter, setDepositParameter] = useState<string>('');
+  const [isComposing, setIsComposing] = useState<boolean>(false);
   const { handleInputFocus, keyboardAwarePadding } = useKeyboardAware();
 
   const { mutateAsync: extensionFundAccountRegist } = useExtensionFundAccountTransferRegistMutation();
@@ -105,6 +106,28 @@ export const FundAccountTransferRequestPage = () => {
     )
   }
 
+  // 계좌번호 마스킹 (마지막 5자리 제외)
+  const getMaskedAccountNumber = (accountNo: string) => {
+    if (accountNo.length <= 5) return accountNo;
+    const visiblePart = accountNo.slice(-5);
+    const maskedLength = accountNo.length - 5;
+    const masked = '*'.repeat(maskedLength);
+    return masked + visiblePart;
+  };
+
+  // 이름 마스킹
+  const getMaskedName = (name: string) => {
+    const length = name.length;
+    if (length <= 1) return name;
+    if (length === 2) return name[0] + '*';
+    if (length === 3) return name[0] + '*' + name[2];
+    const firstChar = name[0];
+    const lastChar = name[length - 1];
+    const maskedLength = length - 2;
+    const masked = '*'.repeat(maskedLength);
+    return firstChar + masked + lastChar;
+  };
+
   return (
     <>
       <main>
@@ -150,16 +173,33 @@ export const FundAccountTransferRequestPage = () => {
                 <div className="billing-row">
                   <div className="billing-label">{t('additionalService.fundAccount.accountNumber')}<span>*</span></div>
                   <div className="billing-field">
-                    <NumericFormat
+                    <input
-                      value={accountNo}
+                      type="tel"
-                      valueIsNumericString
+                      value={getMaskedAccountNumber(accountNo)}
-                      allowNegative={false}
+                      onKeyDown={(e) => {
-                      decimalScale={0}
+                        // 백스페이스 처리
-                      isAllowed={(values) => {
+                        if (e.key === 'Backspace') {
-                        const { value } = values;
+                          e.preventDefault();
-                        return !value || value.length <= 14;
+                          setAccountNo(accountNo.slice(0, -1));
+                        }
+                        // 숫자 입력 처리
+                        else if (/^[0-9]$/.test(e.key)) {
+                          e.preventDefault();
+                          if (accountNo.length < 14) {
+                            setAccountNo(accountNo + e.key);
+                          }
+                        }
                       }}
-                      onValueChange={(values) => setAccountNo(values.value)}
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                        // Android 등에서 한글 키보드로 입력 시 대비
+                        const input = e.target.value;
+                        const digitsOnly = input.replace(/\*/g, '').replace(/[^0-9]/g, '');
+                        if (digitsOnly.length <= 14) {
+                          setAccountNo(digitsOnly);
+                        }
+                      }}
+                      inputMode="numeric"
+                      pattern="[0-9]*"
                       onFocus={handleInputFocus}
                     />
                   </div>
@@ -169,8 +209,43 @@ export const FundAccountTransferRequestPage = () => {
                   <div className="billing-field">
                     <input
                       type="text"
-                      value={accountName}
+                      value={isComposing ? accountName : getMaskedName(accountName)}
-                      onChange={(e: ChangeEvent<HTMLInputElement>) => setAccountName(e.target.value)}
+                      onKeyDown={(e) => {
+                        // 스페이스바 입력 차단
+                        if (e.key === ' ') {
+                          e.preventDefault();
+                        }
+                        // 백스페이스 처리 (composition 중이 아닐 때만)
+                        else if (e.key === 'Backspace' && !isComposing) {
+                          e.preventDefault();
+                          setAccountName(accountName.slice(0, -1));
+                        }
+                        // 영문자 입력 처리 (composition 중이 아닐 때만)
+                        else if (!isComposing && e.key.length === 1 && !e.ctrlKey && !e.metaKey) {
+                          if (/^[a-zA-Z]$/.test(e.key)) {
+                            e.preventDefault();
+                            setAccountName(accountName + e.key);
+                          }
+                          // 한글이 아닌 다른 문자는 차단
+                          else if (!/^[ㄱ-ㅎㅏ-ㅣ가-힣]$/.test(e.key)) {
+                            e.preventDefault();
+                          }
+                        }
+                      }}
+                      onCompositionStart={() => setIsComposing(true)}
+                      onCompositionEnd={(e: any) => {
+                        setIsComposing(false);
+                        // 스페이스 제거 후 저장
+                        const valueWithoutSpace = e.target.value.replace(/\s/g, '');
+                        setAccountName(valueWithoutSpace);
+                      }}
+                      onChange={(e: ChangeEvent<HTMLInputElement>) => {
+                        if (isComposing) {
+                          // composition 중에는 스페이스 제거
+                          const valueWithoutSpace = e.target.value.replace(/\s/g, '');
+                          setAccountName(valueWithoutSpace);
+                        }
+                      }}
                       onFocus={handleInputFocus}
                     />
                   </div>

src/pages/additional-service/key-in-payment/key-in-payment-page.tsx

@@ -196,9 +196,9 @@ export const KeyInPaymentPage = () => {
     sortType
   ]);
 
-  // if (!hasAccess) {
+  if (!hasAccess) {
-  //   return <AccessDeniedDialog />;
+    return <AccessDeniedDialog />;
-  // }
+  }
 
 
   return (

src/pages/transaction/cash-receipt/list-page.tsx

@@ -236,7 +236,7 @@ export const CashReceiptListPage = () => {
 		setTransactionType(val);
 	};
 	const onClickToNavigate = () => {
-		if(checkGrant(menuId, 'W')){
+		if(checkGrant(menuId, 'X')){
     	navigate(PATHS.transaction.cashReceipt.handWrittenIssuance);
 		}
 		else{