장지현) 과제 제출 #1

[doreming16]

Pull Request #1

배포 링크

Outline

회원가입 페이지 구현 과제

• 개발언어: JavaScript
• 프레임워크: React
• CSS in JS: Styled-component

Key Changes

• Created 2 Pages ( Home / SignUp )
• 페이지 이동
  • react-router-dom : { Link } 활용(새로고침 없이 페이지 이동)
  • Home(Page) 회원가입 버튼을 누르면 SignUp 페이지로 이동
• CSS 완성
  • Header 분리, 모든 페이지에 고정
• 필드 포커스되면 테두리 색 변경
  • outline-color 변경 ( not border-color )
• 유효성 검사 ( 이메일, 비밀번호, 비밀번호 확인 )
  • react-hook-form : { useForm } 활용
  • 유효하지 않은 값을 입력하면 각각의 필드 하단에 실시간으로 에러메세지 출력
    • 이메일 정규식으로 이메일 필드 유효성 검사
    • 비밀번호는 8자 이상 16자 이하의 문자열
      • 그 외 구성되어야 하는 문자 조건은 아직 입력하지 않았습니다
  • 데이터 맞게 입력하고 회원가입 버튼 눌렀을 때 console에 data 출력되는 것 확인

Inquiries

• Page.SignUp) 처음 회원가입 버튼을 누를 때 제가 설정한 에러메세지가 아니라 자체적으로 email을 판단하는 안내 창이 먼저 뜨는 건 없앨 수 있는 기능일까요?
  • • 이메일을 한 번 맞게 입력한 후에 틀린 값을 입력해야 에러메세지가 뜹니다. .
• 'Header' 컴포넌트는 엄밀히 말하면 Page가 아닌데 Directory를 따로 만드는 게 나을까요?
• CSS 더 정리가 필요할까요 ? ( 너무 복잡한 부분이 있는지 )

Still Working . . .

Sign Page

• 회원가입 완료되면 알람을 띄우고, Home으로 이동합니다.
• 유효한 값이 입력되면 입력받은 데이터를 alert로 띄우고 메인페이지로 이동합니다.

PassWord

• 하나 이상의 영문자와 하나 이상의 숫자, 하나 이상의 특수문자로 구성되어야합니다.
• 비밀번호 확인은 비밀번호와 일치해야합니다.

Options

• 비밀번호 필드는 ‘뜬 눈 아이콘’을 누르면 작성한 값이 보입니다. ‘감은 눈 아이콘’을 누르면 입력한 비밀번호가 암호로 표시됩니다.
• 모두 유효한 값을 입력하면 비활성화 되어있던 하단의 회원가입 버튼의 색깔이 변하고 활성화됩니다.

[moong23]

배포해서 배포 사이트까지 포함해서 올려주세요!!
https://vercel.com/
https://www.netlify.com/