nicepayments/nice-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- 부가서비스 마스킹정책 적용

Browse Source
This commit is contained in:
HyeonJongKim
2025-11-17 18:24:35 +09:00
parent a9943150ad
commit 571c530df8
12 changed files with 517 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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="v">{detailInfo?.email}</span>
<span className="k">{t('additionalService.infoWrap.email')}</span>
<span className="v">{getMaskedEmail(detailInfo?.email)}</span>
</li>
<li className="kv-row">
<span className="k">휴대폰 번호</span>
<span className="v">{detailInfo?.phoneNumber}</span>
<span className="k">{t('additionalService.infoWrap.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>
</>

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

@@ -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="v">{paymentInfo?.buyerName}</span>
<span className="k">{t('additionalService.infoWrap.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="v">{paymentInfo?.buyerName}</span>
<span className="k">{t('additionalService.infoWrap.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>

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

@@ -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={formData.buyerName}
onChange={(e) => handleInputChange('buyerName', e.target.value)}
value={isComposing ? formData.buyerName : getMaskedName(formData.buyerName)}
onKeyDown={(e) => {
// 스페이스바 입력 차단
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"
value={formData.email}
onChange={(e) => handleInputChange('email', e.target.value)}
placeholder="te**@nicepay.co.kr"
value={getMaskedEmail(formData.email)}
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={formData.phoneNumber}
value={getMaskedPhoneNumber(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, '');
handleInputChange('phoneNumber', onlyNumbers);
// Android 등에서 한글 키보드로 입력 시 대비
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>

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

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

39
src/entities/additional-service/ui/list-item.tsx
View File

@@ -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 ||
additionalServiceCategory === AdditionalServiceCategory.FundAccountResult
else if (additionalServiceCategory === AdditionalServiceCategory.FundAccountTransfer
) {
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;

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

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

6
src/pages/additional-service/alimtalk/list-page.tsx
View File

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

166
src/pages/additional-service/ars/request-page.tsx
View File

@@ -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}
onChange={(e: ChangeEvent<HTMLInputElement>) => setBuyerName(e.target.value)}
value={isComposing ? buyerName : getMaskedName(buyerName)}
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}
placeholder='01012345678'
value={getMaskedPhoneNumber(phoneNumber)}
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, '');
setPhoneNumber(onlyNumbers);
// Android 등에서 한글 키보드로 입력 시 대비
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}
placeholder='test@nicepay.co.kr'
onChange={(e: ChangeEvent<HTMLInputElement>) => setEamil(e.target.value)}
value={getMaskedEmail(email)}
placeholder='te**@nicepay.co.kr'
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}
/>

6
src/pages/additional-service/face-auth/face-auth-page.tsx
View File

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

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

@@ -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
value={accountNo}
valueIsNumericString
allowNegative={false}
decimalScale={0}
isAllowed={(values) => {
const { value } = values;
return !value || value.length <= 14;
<input
type="tel"
value={getMaskedAccountNumber(accountNo)}
onKeyDown={(e) => {
// 백스페이스 처리
if (e.key === 'Backspace') {
e.preventDefault();
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}
onChange={(e: ChangeEvent<HTMLInputElement>) => setAccountName(e.target.value)}
value={isComposing ? accountName : getMaskedName(accountName)}
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>

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

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

2
src/pages/transaction/cash-receipt/list-page.tsx
View File

@@ -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{