102 lines
3.5 KiB
TypeScript
102 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import * as React from "react";
|
|
import { cn } from "@/lib/utils";
|
|
import { formatCardNumber, parseCardNumber } from "@/lib/formatters";
|
|
|
|
export interface CardNumberInputProps
|
|
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value" | "type"> {
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
error?: boolean;
|
|
}
|
|
|
|
/**
|
|
* CardNumberInput - 카드번호 자동 포맷팅 입력 컴포넌트
|
|
*
|
|
* 특징:
|
|
* - 입력 시 자동 하이픈 삽입 (0000-0000-0000-0000)
|
|
* - 숫자만 입력 허용 (최대 16자리)
|
|
* - onChange에는 숫자만 전달 (DB 저장용)
|
|
* - 복사/붙여넣기 시 숫자만 추출
|
|
*
|
|
* @example
|
|
* <CardNumberInput
|
|
* value={cardNumber}
|
|
* onChange={setCardNumber}
|
|
* placeholder="카드번호를 입력하세요"
|
|
* />
|
|
*/
|
|
const CardNumberInput = React.forwardRef<HTMLInputElement, CardNumberInputProps>(
|
|
({ className, value, onChange, error, ...props }, ref) => {
|
|
// 마스킹된 값(****-****-****-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);
|
|
};
|
|
|
|
const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
|
|
// 숫자, 백스페이스, 탭, 화살표, 복사/붙여넣기 허용
|
|
const allowedKeys = [
|
|
"Backspace", "Delete", "Tab", "Escape", "Enter",
|
|
"ArrowLeft", "ArrowRight", "ArrowUp", "ArrowDown",
|
|
"Home", "End"
|
|
];
|
|
|
|
if (allowedKeys.includes(e.key)) return;
|
|
|
|
// Ctrl/Cmd + A, C, V, X 허용
|
|
if ((e.ctrlKey || e.metaKey) && ["a", "c", "v", "x"].includes(e.key.toLowerCase())) {
|
|
return;
|
|
}
|
|
|
|
// 숫자가 아니면 차단
|
|
if (!/^\d$/.test(e.key)) {
|
|
e.preventDefault();
|
|
}
|
|
};
|
|
|
|
const handlePaste = (e: React.ClipboardEvent<HTMLInputElement>) => {
|
|
e.preventDefault();
|
|
const pastedText = e.clipboardData.getData("text");
|
|
const numbersOnly = parseCardNumber(pastedText);
|
|
onChange(numbersOnly);
|
|
};
|
|
|
|
return (
|
|
<input
|
|
type="text"
|
|
inputMode="numeric"
|
|
ref={ref}
|
|
data-slot="input"
|
|
className={cn(
|
|
"file:text-foreground placeholder:text-muted-foreground/50 selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
|
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
|
error && "border-red-500 focus-visible:border-red-500 focus-visible:ring-red-500/20",
|
|
className
|
|
)}
|
|
value={displayValue}
|
|
onChange={handleChange}
|
|
onKeyDown={handleKeyDown}
|
|
onPaste={handlePaste}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
);
|
|
|
|
CardNumberInput.displayName = "CardNumberInput";
|
|
|
|
export { CardNumberInput };
|