React js 정규식으로 핸드폰 번호 입력시 자동 하이픈 생성 (tel과number 차이)

💡 목표

기존 회사 내 전산에서 신규사원 정보를 입력할때 , 핸드폰 번호 입력 시 자동으로 하이픈을 생성하도록 하고자 한다.

이때 핸드폰 번호의 input의 타입을 number, tel 중에 어떤것으로 해야할까. (text도 가능하지만 평소 tel과 number의 차이를 확실히 알지못하였기에 이 둘 중심으로 알아보았다. )

type = "tel"

숫자뿐만 아니라 일반 문자까지도 입력이 가능하기 때문에 이런 방법으로는 숫자만 입력할수있도록 제한을 둬야하며, 문자열의 길이조정에 문제가 있다.

type = "number"

type을 number로 두면 문자가 입력되지 않는다는 장점이 있으나 아래의 이미지와 같이 숫자 증감의 ui가 브라우저에서 지원이 되는데 이를 원치않는다면 pass

import { number } from "prop-types";
import { oneOfType } from "prop-types";
import { object, string } from "prop-types";
import styled from "styled-components";
import { useEffect, useState } from "react";

BasicInput.propTypes = {
  width: string,
  type: string,
  placeholder: string,
  register: object,
  defaultValue: oneOfType([string, number]),
};

function BasicInput({
  placeholder,
  defaultValue,
  register,
  disabled,
  onFocus,
  alignRight,
  required,
}) {
  const [phoneNumberString, setPhoneNumberString] = useState("");

  const parsingPhoneNumber = (num) => {
    return num
      .replace(/[^0-9]/g, "")
      .replace(/^(\d{0,3})(\d{0,4})(\d{0,4})$/g, "$1-$2-$3")
      .replace(/(-{1,2})$/g, "");
  };
  return (
    <Container>
      <TextInputContainer
        autoSave="off"
        autoComplete="off"
        autoCorrect="off"
        autoCapitalize="off"
        placeholder={placeholder}
        defaultValue={defaultValue}
        disabled={disabled}
        onFocus={onFocus}
        alignRight={alignRight}
        {...register}
        
        value={phoneNumberString}
        onChange={(e) =>
          setPhoneNumberString(parsingPhoneNumber(e.currentTarget.value))
        }
        required={required}
      />
    </Container>
  );
}

export const Container = styled.div``;

export default BasicInput;

---

<SettingForm title={'연락처'}>
	<NumInput
   	 register={register("cs_phone", {
     required: true,
     minLength: "13",
     maxLength: "13",
   })}
  />
</SettingForm>