구름톤 유니브 3기 연합 스터디 2차 프론트엔드 과제

🗓️ 과제 제출 기한 : ~ 10/31 (목)
💻 과제 제출 방법 : https://github.com/9oormthon-univ-3-study/FE-2-STUDY.git → 이슈 생성, 개인 브랜치에 제출
🖥️ 과제 스택 : Web - React
📌 과제 : 회원가입 폼 (React) → 모든 요구사항을 만족해주세요!
🔗 예시 배포 링크 : https://hanameee.github.io/mini-signup-form/src/

🐻 회원가입 폼 (React)

출처 : https://github.com/hanameee/mini-signup-form-react/tree/main?tab=readme-ov-file

📑 Get Started

보일러 플레이트 코드 확인하기

React 버전 사전 과제 작성을 위한 보일러 플레이트 코드는, 본 저장소의 main 브랜치에 업로드 되어 있습니다.
아래 단계를 통해 로컬에서 React App을 실행할 수 있습니다.

1. 이슈를 생성한 후 개인 브랜치를 생성하고 시작해주세요.
2. 아래 명령어로 의존성 라이브러리들을 설치해주세요.

npm install
# 또는
yarn install

3. 아래 명령어로 React 개발 서버를 띄울 수 있습니다.

npm start
# 또는
yarn start

❗️ 주의사항

1. HTML 태그의 class, id는 수정하지 않고 그대로 사용합니다.
2. CSS 파일은 수정하지 않습니다.
3. 기본 코드의 package.json에 명시된 라이브러리 외의 별도의 라이브러리 설치를 허용하지 않습니다.

👍 권장사항

1. 함수를 기능 별로 분리해주세요.
2. 일관성 있는 네이밍을 유지해주세요.
3. 반복되는 기능은 하나로 통일해주세요.
4. ES6(ES2015) 이후의 모던 자바스크립트 문법을 활용해주세요.

✅ 요구사항

1. autofocus

페이지가 로드 된 시점에 ID 입력 창에 Focus가 되어 있어야 합니다.

2. 유효성 검사 로직

ID, 비밀번호, 비밀번호 확인 필드에 대한 유효성 검사를 수행해야 합니다.

유효성 검사 시점

• input focus out 시 해당 input의 유효성을 검사합니다.
• 가입하기 버튼을 눌렀을 때 모든 필드의 유효성을 검사합니다.

유효성 검사 패턴

모든 필드의 값은 빠짐 없이 입력해야 합니다.
ID, 비밀번호, 비밀번호 확인 필드는 유효성 조건을 충족해야 합니다.

• ID: 5~20자. 영문 소문자, 숫자. 특수기호(_),(-)만 사용 가능
• 비밀번호: 8~16자. 영문 대/소문자, 숫자 사용 가능
• 비밀번호 확인: 비밀번호와 일치

3. 커스텀 에러 메세지

유효하지 않은 값일 경우, 각 경우에 맞는 에러 메시지를 보여주어야 합니다.
유효성 조건과 에러 메시지는 아래를 참고해주세요.

• (공통) 빈 값일 경우: 필수 정보입니다.
• [ID] 유효하지 않은 값일 경우: “5~20자의 영문 소문자, 숫자와 특수기호(_),(-)만 사용 가능합니다.”
• [비밀번호] 유효하지 않은 값일 경우: “8~16자 영문 대 소문자, 숫자를 사용하세요.”
• [비밀번호 확인] 유효하지 않은 값일 경우: “비밀번호가 일치하지 않습니다.”

4. 입력 확인 모달 창

가입하기 버튼 클릭 시, 모든 input의 값이 유효한 상태일 경우 입력한 아이디와 비밀번호를 확인할 수 있는 모달 창을 보여주어야 합니다.

• "취소하기" 버튼 클릭 시 모달 창이 닫혀야 합니다.
• "가입하기" 버튼 클릭 시 윈도우의 alert 창을 이용해 "가입되었습니다 🥳 " 라는 메시지를 출력해야 합니다.

5. 폰트 사이즈 조절 버튼

회원가입 폼에 사용된 기본 폰트 사이즈는 16px입니다.
기본 폰트 사이즈를 기준으로 1px씩 폰트 사이즈를 조절할 수 있는 기능을 구현해주세요.

(최소: 12px, 최대: 20px)

• 현재 폰트 사이즈가 20px일 경우 + 버튼 비활성화
• 현재 폰트 사이즈가 12px일 경우 - 버튼 비활성화

🖥 데모 페이지

• https://hanameee.github.io/mini-signup-form/src/