컴포넌트/Formatted Input

Formatted Input

자동 포맷팅이 적용된 특수 입력 컴포넌트입니다.
카드 번호, OTP, 전화번호, 금액 등 다양한 형식을 지원합니다.

설치

Terminal

npx @msub-core/ui-cli add formatted-input

카드 번호

카드 번호를 자동으로 4자리씩 포맷팅하고, 카드 브랜드를 자동 인식합니다.

카드 번호

TSX

import { CardInput } from "@msub-core/ui/components/formatted-input"

function PaymentForm() {
  const [cardNumber, setCardNumber] = useState("")

  return (
    <CardInput
      label="카드 번호"
      value={cardNumber}
      onChange={setCardNumber}
      showCardType={true}
    />
  )
}

Prop	Type	Default	Required	Description
label	string	-	No	입력 필드 레이블
value	string	-	No	입력값 (숫자와 공백 포함)
onChange	(value: string) => void	-	No	값 변경 시 호출되는 콜백
error	string	-	No	에러 메시지
showCardType	boolean	true	No	우측에 카드사 로고 표시 여부

OTP / 인증번호

개별 입력칸으로 구성된 인증번호 입력 컴포넌트입니다. 자동 포커스 이동과 붙여넣기를 지원합니다.

인증번호 6자리

Prop	Type	Default	Required	Description
length	number	6	No	OTP 자리수
value	string	-	No	입력값
onChange	(value: string) => void	-	No	값 변경 시 호출되는 콜백
onComplete	(value: string) => void	-	No	모든 자리가 입력되었을 때 호출되는 콜백
label	string	-	No	입력 필드 레이블
error	string	-	No	에러 메시지
disabled	boolean	false	No	비활성화 여부
autoFocus	boolean	false	No	마운트 시 자동 포커스

전화번호

한국(010-1234-5678) 또는 미국((123) 456-7890) 형식을 지원합니다.

전화번호 (한국)

Prop	Type	Default	Required	Description
label	string	-	No	입력 필드 레이블
value	string	-	No	입력값
onChange	(value: string) => void	-	No	값 변경 시 호출되는 콜백
format	"kr" \| "us"	"kr"	No	전화번호 포맷 국가
error	string	-	No	에러 메시지

금액

자동으로 천 단위 구분자를 추가하고 통화 기호를 표시합니다.

결제 금액

₩

Prop	Type	Default	Required	Description
label	string	-	No	입력 필드 레이블
value	string \| number	-	No	입력값
onChange	(value: number) => void	-	No	값 변경 시 호출되는 콜백. 숫자값이 전달됩니다.
currency	string	"₩"	No	통화 기호
showFormattedValue	boolean	false	No	하단에 포맷팅된 값 표시 여부
helperText	string	-	No	하단 도움말 텍스트
error	string	-	No	에러 메시지
locale	string	"ko-KR"	No	숫자 포맷팅 로케일

날짜

YYYY.MM.DD 형식으로 자동 포맷팅됩니다. 구분자를 변경할 수 있습니다.

생년월일

Prop	Type	Default	Required	Description
label	string	-	No	입력 필드 레이블
value	string	-	No	입력값
onChange	(value: string) => void	-	No	값 변경 시 호출되는 콜백
separator	"." \| "-" \| "/"	"."	No	날짜 구분자
error	string	-	No	에러 메시지

주민등록번호

000000-0000000 형식으로 자동 포맷팅됩니다. 포커스 해제 시 뒷자리가 마스킹됩니다.

주민등록번호

Prop	Type	Default	Required	Description
label	string	-	No	입력 필드 레이블
value	string	-	No	입력값
onChange	(value: string) => void	-	No	값 변경 시 호출되는 콜백
maskBackDigits	boolean	true	No	뒷자리 마스킹 여부
error	string	-	No	에러 메시지

사업자등록번호

000-00-00000 형식으로 자동 포맷팅됩니다.

사업자등록번호

Prop	Type	Default	Required	Description
label	string	-	No	입력 필드 레이블
value	string	-	No	입력값
onChange	(value: string) => void	-	No	값 변경 시 호출되는 콜백
error	string	-	No	에러 메시지

우편번호

한국(00000) 또는 미국(00000-0000) 형식을 지원합니다.

우편번호

Prop	Type	Default	Required	Description
label	string	-	No	입력 필드 레이블
value	string	-	No	입력값
onChange	(value: string) => void	-	No	값 변경 시 호출되는 콜백
format	"kr" \| "us"	"kr"	No	우편번호 포맷 국가
error	string	-	No	에러 메시지

기간 (날짜 범위)

시작일과 종료일을 입력받는 날짜 범위 컴포넌트입니다.

조회 기간

Prop	Type	Default	Required	Description
label	string	-	No	입력 필드 레이블
startValue	string	-	No	시작일 값
endValue	string	-	No	종료일 값
onStartChange	(value: string) => void	-	No	시작일 변경 콜백
onEndChange	(value: string) => void	-	No	종료일 변경 콜백
separator	"." \| "-" \| "/"	"."	No	날짜 구분자
error	string	-	No	에러 메시지
disabled	boolean	false	No	비활성화 여부

카드 결제 폼 예시

실제 결제 폼에서 사용하는 것처럼 카드 정보 입력 컴포넌트를 조합한 예시입니다.
결제 버튼을 클릭하면 결제 완료 애니메이션을 확인할 수 있습니다.

컴포넌트 목록

CardInput

카드 번호 (0000 0000 0000 0000)

OTPInput

OTP/인증번호 (개별 입력칸)

PhoneInput

전화번호 (010-1234-5678)

AmountInput

금액 (₩1,234,567)

DateInput

날짜 (YYYY.MM.DD)

ExpiryInput

카드 유효기간 (MM / YY)

CVCInput

CVC 번호 (3-4자리)

SSNInput

주민등록번호 (000000-0******)

BusinessNumberInput

사업자등록번호 (000-00-00000)

PostalCodeInput

우편번호 (00000)

DateRangeInput

기간 (시작일 ~ 종료일)