fix: [card] 카드번호 입력란에서 마스킹된 번호 정상 표시
- 마스킹 값(****-****-****-1234) 포함 시 formatCardNumber 우회 - 사용자 입력 시 마스킹 자동 제거 후 새 번호 입력 가능
This commit is contained in:
@@ -29,12 +29,19 @@ export interface CardNumberInputProps
|
||||
*/
|
||||
const CardNumberInput = React.forwardRef<HTMLInputElement, CardNumberInputProps>(
|
||||
({ className, value, onChange, error, ...props }, ref) => {
|
||||
// 표시용 포맷된 값
|
||||
const displayValue = React.useMemo(() => formatCardNumber(value || ""), [value]);
|
||||
// 마스킹된 값(****-****-****-1234) 여부 판별
|
||||
const isMasked = value?.includes('*') ?? false;
|
||||
|
||||
// 표시용 포맷된 값: 마스킹이면 그대로, 숫자만이면 포맷팅
|
||||
const displayValue = React.useMemo(() => {
|
||||
if (!value) return "";
|
||||
if (isMasked) return value;
|
||||
return formatCardNumber(value);
|
||||
}, [value, isMasked]);
|
||||
|
||||
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const inputValue = e.target.value;
|
||||
// 숫자만 추출하여 전달
|
||||
// 숫자만 추출하여 전달 (마스킹 문자 자동 제거)
|
||||
const numbersOnly = parseCardNumber(inputValue);
|
||||
onChange(numbersOnly);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user