🗓️ 과제 제출 기한 : ~ 10/31 (목)
💻 과제 제출 방법 : https://github.com/9oormthon-univ-3-study/FE-2-STUDY.git → 이슈 생성, 개인 브랜치에 제출
🖥️ 과제 스택 : Web - React
📌 과제 : 회원가입 폼 (React) → 모든 요구사항을 만족해주세요!
🔗 예시 배포 링크 : https://hanameee.github.io/mini-signup-form/src/
출처 : https://github.com/hanameee/mini-signup-form-react/tree/main?tab=readme-ov-file
React 버전 사전 과제 작성을 위한 보일러 플레이트 코드는, 본 저장소의 main 브랜치에 업로드 되어 있습니다.
아래 단계를 통해 로컬에서 React App을 실행할 수 있습니다.
- 이슈를 생성한 후 개인 브랜치를 생성하고 시작해주세요.
- 아래 명령어로 의존성 라이브러리들을 설치해주세요.
npm install
# 또는
yarn install- 아래 명령어로 React 개발 서버를 띄울 수 있습니다.
npm start
# 또는
yarn start- HTML 태그의 class, id는 수정하지 않고 그대로 사용합니다.
- CSS 파일은 수정하지 않습니다.
- 기본 코드의 package.json에 명시된 라이브러리 외의 별도의 라이브러리 설치를 허용하지 않습니다.
- 함수를 기능 별로 분리해주세요.
- 일관성 있는 네이밍을 유지해주세요.
- 반복되는 기능은 하나로 통일해주세요.
- ES6(ES2015) 이후의 모던 자바스크립트 문법을 활용해주세요.
페이지가 로드 된 시점에 ID 입력 창에 Focus가 되어 있어야 합니다.
ID, 비밀번호, 비밀번호 확인 필드에 대한 유효성 검사를 수행해야 합니다.
유효성 검사 시점
- input
focus out시 해당 input의 유효성을 검사합니다. 가입하기버튼을 눌렀을 때 모든 필드의 유효성을 검사합니다.
유효성 검사 패턴
모든 필드의 값은 빠짐 없이 입력해야 합니다.
ID, 비밀번호, 비밀번호 확인 필드는 유효성 조건을 충족해야 합니다.
- ID: 5~20자. 영문 소문자, 숫자. 특수기호(_),(-)만 사용 가능
- 비밀번호: 8~16자. 영문 대/소문자, 숫자 사용 가능
- 비밀번호 확인: 비밀번호와 일치
유효하지 않은 값일 경우, 각 경우에 맞는 에러 메시지를 보여주어야 합니다.
유효성 조건과 에러 메시지는 아래를 참고해주세요.
- (공통) 빈 값일 경우: 필수 정보입니다.
- [ID] 유효하지 않은 값일 경우: “5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.”
- [비밀번호] 유효하지 않은 값일 경우: “8~16자 영문 대 소문자, 숫자를 사용하세요.”
- [비밀번호 확인] 유효하지 않은 값일 경우: “비밀번호가 일치하지 않습니다.”
가입하기 버튼 클릭 시, 모든 input의 값이 유효한 상태일 경우 입력한 아이디와 비밀번호를 확인할 수 있는 모달 창을 보여주어야 합니다.
- "취소하기" 버튼 클릭 시 모달 창이 닫혀야 합니다.
- "가입하기" 버튼 클릭 시 윈도우의 alert 창을 이용해 "가입되었습니다 🥳 " 라는 메시지를 출력해야 합니다.
회원가입 폼에 사용된 기본 폰트 사이즈는 16px입니다.
기본 폰트 사이즈를 기준으로 1px씩 폰트 사이즈를 조절할 수 있는 기능을 구현해주세요.
(최소: 12px, 최대: 20px)
- 현재 폰트 사이즈가 20px일 경우
+버튼 비활성화 - 현재 폰트 사이즈가 12px일 경우
-버튼 비활성화
