컴포넌트
Input Mask Phone
전화번호를 입력하면 그룹 패턴에 맞춰 하이픈을 자동으로 넣어주는 마스크 입력 컴포넌트. 숫자만 실제 값으로 유지하고, 붙여넣기·중간 편집 시에도 커서 위치를 숫자 기준으로 보존하며, 입력 진행도가 브랜드 컬러 프로그레스 바로 표시되고 모든 자리가 채워지면 완료 콜백을 호출한다.
- 분류
- 컴포넌트
- 난이도
- medium
- 변형
- TS-TW
설치
npx shadcn@latest add https://gasan.ai.kr/tools/effect/r/InputMaskPhone-TS-TW
Props
| 이름 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| preset | "kr-mobile" | "kr-seoul" | "us" | "kr-mobile" | 자릿수 그룹 프리셋 (010-1234-5678 / 02-123-4567 / 123-456-7890) |
| defaultValue | string | "" | 초기 값. 숫자나 하이픈 포함 문자열 모두 허용(내부에서 숫자만 추출) |
| separator | string | "-" | 그룹 사이에 삽입할 구분자 |
| label | string | "전화번호" | 필드 레이블 및 접근성 aria-label |
| showProgress | boolean | true | 하단 입력 진행도 바 및 상태 텍스트 표시 여부 |
| onComplete | (formatted: string) => void | undefined | 모든 자리가 채워졌을 때 포맷된 값과 함께 호출되는 콜백 |