Feature: 닉네임이 닉네임 규칙에 맞는지 확인한다.

[Byeonjin]

Feature Description

닉네임이 닉네임 규칙에 맞는지 확인한다 #10

To-Do

• 초기 정보 입력 페이지 UI 작업
• 닉네임 규칙 확인 정규표현식 작성
• 닉네임 규칙 여부에 따라 분기 처리
• 추가: 로그인 페이지 UI 수정
• 추가: 로그인 페이지와 메인 페이지 연결

추가 사항

로그인 페이지, 초기 정보 입력 페이지 UI 구성

메인 페이지와 더불어 초기 정보 입력 페이지의 UI를 구성하였습니다. 반응형을 고려하여 특정 너비를 기준으로 크기가 조절되도록 하였습니다. 또한 일부 UI와의 통일성을 고려하여 글자 크기를 수정하였습니다.

닉네임 규칙 확인

정규표현식을 작성하여 입력한 닉네임이 올바른지를 판단하였습니다. 닉네임의 규칙은 아래와 같습니다.

• 최소 1자리, 최대 10자리
• 영문, 한글, 숫자, -, _, . 사용 가능
• 숫자나 특수 문자만 단독으로 사용 불가능
• 영문 혹은 한글은 단독으로 사용 가능

const NICKNAME_REGEXP = /^(?![0-9-_.]+$)[가-힣A-Za-z0-9-_.]{1,10}$/;

• (?![0-9-_.]+$) : 숫자, -, _, .만으로 이루어진 문자열을 제외합니다.
• [가-힣A-Za-z0-9-_.] : 한글, 영문 대소문자, 숫자, -, _, . 중 하나를 의미합니다.
• {1,10} : 앞의 문자 집합이 최소 1번, 최대 10번 반복됨을 의미합니다.

해당 정규표현식을 기준으로 버튼이 활성화되도록 처리하였습니다.

로그인 페이지, 초기 정보 입력 페이지 UI 구성

2023-11-28.18-05-33.mp4

닉네임 규칙 확인

2023-11-28.18-05-53.mp4

페이지 이동

2023-11-28.18-06-49.mp4