fix: [card] 카드번호 입력란에서 마스킹된 번호 정상 표시

- 마스킹 값(****-****-****-1234) 포함 시 formatCardNumber 우회
- 사용자 입력 시 마스킹 자동 제거 후 새 번호 입력 가능
This commit is contained in:
김보곤
2026-02-21 00:56:53 +09:00
parent 1b8a2d8127
commit 352171c019

View File

@@ -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);
};