[김태욱] sprint4 #152
[김태욱] sprint4 #152
Conversation
dongqui
left a comment
dongqui
left a comment
There was a problem hiding this comment.
태욱님 이번 미션도 고생 많으셨습니다~!
군더더기 없이 깔끔하게 잘 진행해 주셨네요 :)
재사용과 가독성을 위해 함수를 좀 더 활용해 주시면 더욱 좋을 거 같습니다~!
| const togglePassword = document.getElementById("togglePassword"); | ||
|
|
||
| /* 이미지 파일 경로 설정 */ | ||
| const eyeOpenSrc = "./images/anyicons/passwardeye.svg"; |
There was a problem hiding this comment.
대체로 변수, 함수명이 직관적이고 명확합니다 👍 👍
| let isPasswordVisible = false; | ||
|
|
||
| /* 이메일 정규표현식 */ | ||
| const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; |
| const value = emailInput.value.trim(); | ||
|
|
||
| if (!value) { | ||
| emailInput.classList.add("error"); |
There was a problem hiding this comment.
에러를 추가하고 제거하는 로직이 반복되고 있네요! 이런 경우 함수로 정의해 주시면 재사용도 쉽고 가독성도 높일 수 있습니다 :)
There was a problem hiding this comment.
function addError(id, message) {
const $emailInput = document.getElementById(`${id}Input`);
const $emailError = document.getElementById(`${id}Error`);
//..
}|
|
||
| /* 📌 유효성 검사 후 버튼 활성화 체크 */ | ||
| const updateButtonState = () => { | ||
| if (isEmailValid && isNicknameValid && isPasswordValid && isPasswordMatch) { |
There was a problem hiding this comment.
크게 상관 없지만.. 이렇게 나타낼 수도 있겠네요!
signupButton.disabled = !(isEmailValid && isNicknameValid && isPasswordValid && isPasswordMatch);| } | ||
|
|
||
| .logininput.error { | ||
| border: 1px solid #f74747 !important; |
There was a problem hiding this comment.
important는 관리하기가 힘들어, 지양하시는 것이 좋습니다 :)
그리고 지금 이미 .error 클래스로 특이성이 올라간 상태라 important를 안 써도 잘 적용될 거 같네요!
There was a problem hiding this comment.
important 를 사용 안하니깐 적용이 안되더라구요...그래서 임시방편으로 사용한거긴 합니다..ㅠㅠ
| src="./images/anyicons/passwardcancel.svg" | ||
| alt="비밀번호 보기 토글" | ||
| id="toggle-Password" | ||
| alt="passwardtoggle" |
There was a problem hiding this comment.
기능을 가진 아이콘이라면 버튼을 감싸주시거나 aria-label등을 활용해 주시는 것이 접근성에 좋습니다 :)
| let isPasswordConfirmVisible = false; | ||
|
|
||
| /* 이메일 정규표현식 */ | ||
| const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; |
There was a problem hiding this comment.
login 과 겹치는 부분이 많은데 이런 경우 공통 부분을 따로 정의하고 import 해서 쓰셔도 좋습니다 :)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules#applying_the_module_to_your_html
2 participants
요구사항
기본
로그인
회원가입
심화
주요 변경사항
스크린샷
로그인 페이지입니다.
회원가입 페이지입니다.
멘토에게