Skip to content

[정해성] sprint4 #163

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: Basic-정해성
Choose a base branch
from

Conversation

Sea0Soda
Copy link
Collaborator

@Sea0Soda Sea0Soda commented May 19, 2025

기본 기능

  • 이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강 테두리와 아래에 “이메일을 입력해주세요.” 에러 메시지를 표시
  • 이메일 input에서 focus out 할 때, 이메일 형식이 잘못되었을 경우 “잘못된 이메일 형식입니다” 에러 메시지를 표시
  • 닉네임 input에서 focus out 할 때, 값이 없을 경우 “닉네임을 입력해주세요.” 에러 메시지를 표시
  • 비밀번호 input에서 focus out 할 때, 값이 없을 경우 “비밀번호를 입력해주세요.” 에러 메시지를 표시
  • 비밀번호 input에서 focus out 할 때, 8자 미만일 경우 “비밀번호를 8자 이상 입력해주세요.” 에러 메시지를 표시
  • 비밀번호 확인 input이 비밀번호와 다를 경우 “비밀번호가 일치하지 않습니다.” 에러 메시지를 표시
  • 하나라도 값이 비어있거나 에러가 있는 경우 ‘회원가입’ 버튼은 비활성화
  • 모든 입력이 유효한 경우 ‘회원가입’ 버튼이 활성화됨
  • 회원가입 버튼 클릭 시 로그인 페이지(/login/index.html)로 이동
  • 이메일 input focus out → 값 없음: “이메일을 입력해주세요.” 에러 표시
  • 이메일 형식이 잘못된 경우: “잘못된 이메일 형식입니다.” 에러 표시
  • 비밀번호 input focus out → 값 없음: “비밀번호를 입력해주세요.” 에러 표시
  • 비밀번호 8자 미만일 경우: “비밀번호를 8자 이상 입력해주세요.” 에러 표시
  • 하나라도 에러가 있으면 로그인 버튼 비활성화
  • 모든 입력이 유효하면 로그인 버튼 활성화
  • 로그인 버튼 클릭 시 /items 페이지로 이동

https://16sprintmission.netlify.app/

심화

  • 눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지기도 합니다.

  • 비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이도록 합니다.


주요 변경사항


스크린샷

screencapture-127-0-0-1-5500-login-signup-html-2025-05-19-23_36_54

screencapture-127-0-0-1-5500-login-index-html-2025-05-19-23_36_31


멘토에게

  • 셀프 코드 리뷰를 통해 질문 이어가겠습니다.

@Sea0Soda Sea0Soda requested a review from addiescode-sj May 19, 2025 14:38
@Sea0Soda Sea0Soda added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label May 19, 2025
Copy link
Collaborator

@addiescode-sj addiescode-sj left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고하셨습니다!
재사용 가능한 단위로 단일 책임을 가진 함수 만들고, 모듈화하는 팁 참고해보시고 리팩토링 진행해주시면 좋을것같아요.

주요 리뷰 포인트

  • 유지보수를 고려한 개발

- validateInput 함수와 validationRules 객체를 활용해 공통 로직 분리
- 이메일, 비밀번호, 닉네임 등 조건 검사를 모듈에서 관리하도록 개선
- 중복된 blur 이벤트 로직 간소화
- 함수 이름(getOrCreateErrorElement → validateErrorMessage) 통일로 가독성 향상
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants