상황

SOPT 지원서를 만들고 있는 중에 각 input들에 대한 에러 조건이 상이하여 이를 하나의 파일에서 관리하면 좋을 거 같다는 생각이 들었다. 따라서 constants 파일에 몰아넣고 한꺼번에 관리해주기로 하였다.

하지만 input들에 대한 조건 등이 아직 구체적으로 정해져있지 않아 그 전에 일단 각 input들에 대한 조건과 pattern 등을 모두 정리해보기로 하였다.

이름

조건

허용 글자

한글만 가능. 그 외의 값 입력 시 에러 메세지.

pattern

/^[가-힣]+$/

max length

10

min length

2

에러 처리

필수

필수 입력 항목이에요.

patter과 불일치

잘못된 이름(한글명) 형식이에요. 이름(한글명)을 정확하게 입력해주세요.

최소값

최소 2자 이상 입력해 주세요.

최댓값

최대 10자 까지 입력할 수 있어요

이메일

조건

허용 글자

영어와 한글, 숫자만. 그 외의 값 입력 시 에러 메세지.

pattern

‘최소 1자’ + @ + ‘뒤에 최소 1자’ + ‘.’ + ‘2-4자’
/^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/

max length

100

에러 처리

필수

필수 입력 항목이에요.

조건과 불일치

이메일 형식이 올바르지 않아요.

최댓값

최대 100자 까지 입력할 수 있어요.

항목 없음

존재하지 않는 이메일이에요.

인증 번호

조건

허용 글자

영어(대문자 → 소문자로 변환), 숫자.

pattern

영어 대소문자, 숫자
/^[a-zA-Z0-9]$/

max length

6

에러 처리

필수

필수 입력 항목이에요.

조건과 불일치, 인증번호 일치하지 않음

인증 번호가 일치하지 않아요.

최댓값

최대 6자 까지 입력할 수 있어요.

비밀번호

조건

허용 글자

영어, 숫자, 특수문자. 그 외 값 입력 시 에러 메세지.

pattern

A-Z a-z 0-9 키보드에 있는 모든 특수기호
/^[a-zA-Z0-9!@#$%^&*()_+[\]{};':="\\|,.<>/?`~-]{4,}$/

max length

100

min length

4

에러 처리

필수

필수 입력 항목이에요.

조건과 불일치

비밀번호는 영문 대소문자/숫자/특수 문자 조합, 4자리 이상으로 구성 해주세요.

최댓값

최대 100자 까지 입력할 수 있어요

비밀번호 확인

조건

허용 글자

위의 비밀번호와 동일한 비밀번호

max length

100

에러 처리

필수

필수 입력 항목이에요.

비밀번호 불일치

비밀번호가 일치하지 않아요.

생년월일

조건

허용 글자

숫자. 4/2/2에 자동으로 - 추가.

pattern

yyyy/mm/dd
/[0-9]{4}\/[0-9]{2}\/[0-9]{2}/

range

1990.01.01 - 현재

maxLength

10 (’-’ 포함.)

에러 처리

필수

필수 입력 항목이에요.

달력에 없는 값 (예. 24월 42일)

잘못된 생년월일 형식이에요. 생년월일을 정확하게 입력해주세요.

range 벗어남

1990년 이후부터 오늘 날짜까지 입력 가능해요.

월과 일이 매치가 안 됨 (예. 2월 31일)

2004년 9월은 30일까지만 유효해요.

2000년 2월은 29일까지만 유효해요. (윤년)

최댓값

최대 10자 까지 입력할 수 있어요.

휴대폰 번호

조건

허용 글자

숫자. 3/4/4에 자동으로 - 추가.

pattern

010-0000-0000
/^010-?\d{3,4}-?\d{4}$/

max length

13 (’-’ 포함.)

에러 처리

필수

필수 입력 항목이에요.

조건과 불일치

잘못된 휴대폰 번호 형식이에요. 휴대폰 번호를 정확하게 입력해주세요.

최댓값

최대 13자 까지 입력할 수 있어요.

포트폴리오

조건

허용 파일

.pdf, .pptx. 그 외의 파일들은 업로드 못하도록.

max size

50MB

에러 처리

size 초과

첨부파일 용량을 초과했어요.

증명 사진

조건

허용 파일

png, jpg, jpeg. 그 외의 파일들은 업로드 못하도록.

에러 처리

필수

필수 입력 항목이에요.

size 초과

파일 크기가 너무 커요. 10MB 이하로 선택해주세요.

url

조건

pattern

/[(http(s)?)://(www.)?a-zA-Z0-9@:%.*+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%*+.~#?&//=]\*)/

에러 처리

필수

필수 입력 항목이에요.

조건과 불일치

url 형식이 올바르지 않아요.

지하철역, 대학, 학과

조건

pattern

마침표, 쉼표, 가운뎃점(·), 괄호(), 하이픈(-), &, 띄어쓰기와 한글만 허용
/^[가-힣\s.,·()\-]&+$/

max length

30

에러 처리

필수

필수 입력 항목이에요.

조건과 불일치

입력 형식이 올바르지 않아요.

최댓값

최대 30자 까지 입력할 수 있어요.

특이 케이스

4.19 민주묘지역 → 마침표 사용
총신대입구(이수)역 → 괄호 사용
시청·용인대역 → 가운뎃점 사용
시청, 용인대역 → 쉼표 사용
시청-용인대역 → - 사용

적용

VALIDATION_CHECK constants 생성

constants에 하나의 객체를 만들어 관리해주었다.

export const VALIDATION_CHECK = {
  name: {
    pattern: /^[가-힣]+$/,
    maxLength: 10,
    minLength: 2,
    errorText:
      '잘못된 이름(한글명) 형식이에요. 이름(한글명)을 정확하게 입력해주세요.',
    errorTextNonexistence: '존재하지 않은 계정이에요.',
  },
  email: {
    pattern: /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/,
    maxLength: 100,
    errorText: '잘못된 이메일 형식이에요. 이메일을 정확하게 입력해주세요.',
    errorTextExistence: '이미 존재하는 계정이에요.',
    errorTextNonexistence: '존재하지 않은 계정이에요.',
    notMatchErrorText: '잘못된 이메일 혹은 비밀번호예요.',
  },
  // ...
};

실제 적용

onError: (error) => {
  if (error.response?.status === 400 || error.response?.status === 403) {
    setError('name', {
      type: 'non-existence',
      message: VALIDATION_CHECK.name.errorTextNonexistence,
    });
    setError('email', {
      type: 'non-existence',
      message: VALIDATION_CHECK.email.errorTextNonexistence,
    });
  }
},