전화번호 하이픈 자동으로 넣기

010·02·031·070·1588 을 구분해 입력하는 동안 하이픈을 넣고, +82 번호도 국내 번호로 바꿔요.

무엇이 어려운가요

전화번호는 지역마다 자릿수가 달라요. 서울은 02-123-4567·02-1234-5678, 휴대폰은 010-1234-5678, 대표번호는 1588-1234 처럼 하이픈이 하나뿐이에요.

정규식 하나로 3-4-4 를 끊으면 02 번호와 대표번호가 틀어지고, 입력 중인 값(010-123-4)에서는 하이픈이 갑자기 사라졌다 생겼다 해요.

직접 입력해 보세요

전화번호

010·02·031·070·1588·+82 로 바꿔 보세요

formatPhoneNumber(입력): '02-1234-5678'
phoneNumberDigits(입력): '0212345678'
phoneNumberMaxDigits(숫자): 10

코드

npm install @bestow-ui/korean-utils

import { formatPhoneNumber, phoneNumberDigits } from '@bestow-ui/korean-utils';

formatPhoneNumber('01012345678'); // '010-1234-5678'
formatPhoneNumber('0212345678');  // '02-1234-5678'
formatPhoneNumber('15881234');    // '1588-1234'
formatPhoneNumber('0101234');     // '010-123-4' (입력 중인 값)

phoneNumberDigits('+82 10-1234-5678'); // '01012345678' (저장용)

알아 둘 점

숫자가 아닌 글자는 무시해요. 붙여 넣은 값에 하이픈·공백·괄호가 섞여 있어도 돼요.
번호마다 최대 자릿수를 넘으면 잘라요(02 는 10자리, 대표번호는 8자리). 입력창 최대 길이는 phoneNumberMaxDigits 로 계산해요.
저장은 숫자만, 화면에는 서식을 입혀 보여 주는 방식을 권해요.

React 입력 컴포넌트

PhoneNumberInput( @bestow-ui/react)는 이 함수를 쓰는 입력 칸이에요. 입력 중에 하이픈 뒤에서 Backspace 를 눌러도 숫자가 지워지고, 중간을 고쳐도 커서가 끝으로 튀지 않아요.

PhoneNumberInput 문서 보기