From 352171c0192099726cb03afcf3569d816f1ba6cd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=B3=B4=EA=B3=A4?=
 <lightone2017@codebridge-x.com>
Date: Sat, 21 Feb 2026 00:56:53 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20[card]=20=EC=B9=B4=EB=93=9C=EB=B2=88?=
 =?UTF-8?q?=ED=98=B8=20=EC=9E=85=EB=A0=A5=EB=9E=80=EC=97=90=EC=84=9C=20?=
 =?UTF-8?q?=EB=A7=88=EC=8A=A4=ED=82=B9=EB=90=9C=20=EB=B2=88=ED=98=B8=20?=
 =?UTF-8?q?=EC=A0=95=EC=83=81=20=ED=91=9C=EC=8B=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 마스킹 값(****-****-****-1234) 포함 시 formatCardNumber 우회
- 사용자 입력 시 마스킹 자동 제거 후 새 번호 입력 가능
---
 src/components/ui/card-number-input.tsx | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/components/ui/card-number-input.tsx b/src/components/ui/card-number-input.tsx
index 9a44120a..70a14f99 100644
--- a/src/components/ui/card-number-input.tsx
+++ b/src/components/ui/card-number-input.tsx
@@ -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);
     };