Conversation
| if (e.key === "Enter") { | ||
| submit.click(); | ||
| } |
There was a problem hiding this comment.
사용성을 고려한 구현 좋네요 💯
다만 확인해보니 form 내에 type="submit"인 버튼이 있을 때 input 요소에서 엔터키를 누르면 브라우저가 알아서 폼을 전송해주긴 하는데, 관련하여 표준 문서 등을 찾기가 어렵네요.
그리고 keyupHandler가 document에 추가되어 있어서 아무데서나 엔터 키를 눌러도 폼이 전송되네요. 이부분은 개선될 여지가 있어 보입니다! (의도하신게 아니라면)
| @@ -26,21 +26,25 @@ | |||
| </p> | |||
| </header> | |||
| <div class="sign-box"> | |||
| <form class="sign-form"> | |||
| <form action="/folder.html" class="sign-form" novalidate> | |||
There was a problem hiding this comment.
자체 유효성 검사를 사용하고 있으니 novalidate 속성 사용 좋네요!
| } | ||
| }; | ||
|
|
||
| form.addEventListener("focusout", focusHandler); |
There was a problem hiding this comment.
focusoutHandler로 조금 더 명확하게 이름을 지어보면 어떨까요?
(지금 상황에서는 focusout 이벤트만 처리하고 있으니 크게 이해하는데 어려움이 없지만 엄밀히 말하면 focus, focusout 이벤트는 별도의 이벤트이니깐요)
| const focusHandler = (e) => { | ||
| if (e.target.tagName === "INPUT") { | ||
| const errorMessage = validateInput(e.target); | ||
| displayError(e.target, errorMessage); | ||
| } | ||
| }; |
There was a problem hiding this comment.
저는 mousedown, focusout, mouseup, click 이벤트의 처리 순서를 이용한 방법을 생각해봤습니다. (링크)
focusout 이벤트를 핸들러를 폼에 추가하고, 타겟이 input일 때만 처리하도록 구현하셨군요 👍
포커스를 받을 수 없는 form 요소에 focusout 핸들러가 추가되어 있다는게 조금은 어색해 보이지만 제가 생각한 방법보다 훨씬 간결하다는 장점이 있네요!
| if (input.type === "password") { | ||
| input.type = "text"; | ||
| img.src = "../images/eye-on.svg"; | ||
| } else { | ||
| input.type = "password"; | ||
| img.src = "../images/eye-off.svg"; |
There was a problem hiding this comment.
요구사항 잘 구현해주셨습니다 👍
다만... type=password인 input 요소에는 영어 알파벳만 입력할 수 있습니다.
패스워드를 보여주기 위해 type=text로 변경하면 일시적으로 영어 이외의 문자도 입력할 수 있게 됩니다.
한글 문자열은 정의하신 비밀번호 패턴에 맞지 않기도 하고, 일반적으로도 영어 문자열만 패스워드로 사용하니 개선할 여지가 있어 보입니다!
| import { user } from "./utill/db.js"; | ||
|
|
||
| const form = document.querySelector(".sign-form"); | ||
| const inputs = form.querySelectorAll("input"); |
There was a problem hiding this comment.
input 태그로만 요소를 선택하면 추후에 다른 input 요소가 문서에 추가되었을 때 의도하지 않은 동작이 발생할 가능성이 있어 보입니다.
조금 더 구체적인 셀렉터를 사용하는건 어떨까요?
| account[name] = value; | ||
| }); | ||
|
|
||
| let isSubmit = false; |
There was a problem hiding this comment.
(지극히 개인적인 의견) shouldSubmit이 의미를 더 명확하게 나타내는 이름 같아요.
boolean 변수 네이밍 관련해서 읽어보면 좋은 글:
|
이번 주도 고생 많으셨습니다 👍 다만 코드를 처음 접하는 사람은 아래와 같은 생각을 가질 수도 있다는 정도로 한번 읽어보시면 좋겠습니다.
|
요구사항
기본
[기본]이메일 input에서 focus out 할 때, 값이 없을 경우 input에 빨강색 테두리와 아래에 “이메일을 입력해주세요.” 빨강색 에러 메세지가 보이나요?
[기본]이메일 input에서 focus out 할 때, 이메일 형식에 맞지 않는 값이 있는 경우 input에 빨강색 테두리와 아래에 “올바른 이메일 주소가 아닙니다.” 빨강색 에러 메세지가 보이나요?
[기본]이메일 input에서 focus out 일 때, input 값이 [email protected] 일 경우 input에 빨강색 테두리와 아래에 “이미 사용 중인 이메일입니다.” 빨강색 에러 메세지가 보이나요?
[기본]비밀번호 input에서 focus out 할 때, 값이 8자 미만으로 있거나 문자열만 있거나 숫자만 있는 경우, input에 빨강색 테두리와 아래에 “비밀번호는 영문, 숫자 조합 8자 이상 입력해 주세요.” 빨강색 에러 메세지가 보이나요?
[기본]비밀번호 input과 비밀번호 확인 input의 값이 다른 경우, 비밀번호 확인 input에 빨강색 테두리와 아래에 “비밀번호가 일치하지 않아요.” 빨강색 에러 메세지가 보이나요?
[기본]회원가입을 실행할 경우, 문제가 있는 경우 문제가 있는 input에 빨강색 테두리와 에러 메세지가 보이나요?
[기본]이외의 유효한 회원가입 시도의 경우, “/folder”로 이동하나요?
[기본]이메일: [email protected], 비밀번호: codeit101 으로 로그인 시도할 경우, “/folder” 페이지로 이동하나요?
[기본]비밀번호 input에서 focus out 할 때, 값이 없을 경우 아래에 “비밀번호를 입력해주세요.” 에러 메세지가 보이나요?
[기본]이외의 로그인 시도의 경우 이메일, 비밀번호 input에 빨강색 테두리와 각각의 input아래에 “이메일을 확인해주세요.”, “비밀번호를 확인해주세요.” 빨강색 에러 메세지가 보이나요?
[기본]회원가입 버튼 클릭 또는 Enter키 입력으로 회원가입 되나요?
[기본]이메일, 비밀번호 input에 에러 관련 디자인을 Components 영역의 에러 케이스로 적용했나요?
심화
[심화]눈 모양 아이콘 클릭시 비밀번호의 문자열이 보이기도 하고, 가려지기도 하나요?
[심화]비밀번호의 문자열이 가려질 때는 눈 모양 아이콘에는 사선이 그어져있고, 비밀번호의 문자열이 보일 때는 사선이 없는 눈 모양 아이콘이 보이나요?
[심화]로그인, 회원가입 페이지에 공통적으로 사용하는 로직이 있다면, 반복하지 않고 공통된 로직을 모듈로 분리해 사용했나요?
주요 변경사항
배포사이트
링크
멘토에게