[이준영] sprint4 #153
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,175 @@ | ||
| // 각 필드의 유효성 검사 상태를 전역변수로 저정함 | ||
| let isEmailValid = false; | ||
| let isNicknameValid = false; | ||
| let isPasswordValid = false; | ||
| let isPasswordCheckValid = false; | ||
|
|
||
| const emailInput = document.getElementById('email'); | ||
| const nicknameInput = document.getElementById('nickname'); | ||
| const passwordInput = document.getElementById('password'); | ||
| const passwordCheckInput = document.getElementById('passwordCheck'); | ||
|
|
||
| // 에러 표시 함수 | ||
| function showError(input, errorId) { | ||
| const errorElement = document.getElementById(errorId); | ||
| errorElement.style.display = 'block'; | ||
| input.style.border = '1px solid #f74747'; | ||
| } | ||
|
|
||
| // 상태 초기화 함수(에러 메세지를 숨기고 입력 필드의 테두리를 원상태로 초기화) | ||
| function hideError(input, errorId) { | ||
| const errorElement = document.getElementById(errorId); | ||
| errorElement.style.display = 'none'; | ||
| input.style.border = 'none'; | ||
|
Collaborator
There was a problem hiding this comment. 조금더 개선한다고 하면 이러한 부분들을 직접 스타일 조정하기보단 class로 처리해주시는게 좀더 좋긴 해요...! inline style이 그다지 좋진 않거든요ㅠ 나중에 규모가 커지면 어디서 어떻게 바뀐건지 추적하기가 어려워져요ㅠ |
||
| } | ||
|
Comment on lines
+19
to
+24
Collaborator
There was a problem hiding this comment. 와 이거 너무 잘하셨는데여ㅋㅋㅋ 공통적으로 반복되는 부분들을 이런식으로 뺴고 재사용을 많이 합니다...! |
||
|
|
||
| // 정규 표현식을 통한 이메일 유효성 검증 | ||
| function emailValidation(email) { | ||
| const emailRegex = /^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/; | ||
| return emailRegex.test(email); | ||
| } | ||
|
|
||
| // 이메일 필드의 유효성 검사 | ||
| function checkEmailValidity() { | ||
| const emailValue = emailInput.value; | ||
|
|
||
| // 에러 메세지 및 입력 필드의 상태를 먼저 초기화 | ||
| isEmailValid = false; | ||
| hideError(emailInput, 'emailEmptyError'); | ||
| hideError(emailInput, 'emailInvalidError'); | ||
|
|
||
| if (!emailValue) { | ||
| showError(emailInput, 'emailEmptyError'); | ||
| } else if (!emailValidation(emailValue)) { | ||
| showError(emailInput, 'emailInvalidError'); | ||
| } else { | ||
| isEmailValid = true; | ||
| hideError(emailInput, 'emailEmptyError'); | ||
| hideError(emailInput, 'emailInvalidError'); | ||
| } | ||
|
|
||
| authBtnStatusChange(); | ||
| } | ||
| // emailInput이 존재한다면 이벤트 발생 / 존재하지 않으면 발생시키지 않음 | ||
| if (emailInput) { | ||
| emailInput.addEventListener('focusout', checkEmailValidity); | ||
| } | ||
|
|
||
| // 닉네임 필드의 유효성 검사 | ||
| function checkNicknameValidity() { | ||
| const nicknameValue = nicknameInput.value; | ||
|
|
||
| isNicknameValid = false; | ||
| hideError(nicknameInput, 'nicknameEmptyError'); | ||
|
|
||
| if (!nicknameValue) { | ||
| showError(nicknameInput, 'nicknameEmptyError'); | ||
| } else { | ||
| isNicknameValid = true; | ||
| hideError(nicknameInput, 'nicknameEmptyError'); | ||
| } | ||
|
|
||
| authBtnStatusChange(); | ||
| } | ||
| if (nicknameInput) { | ||
| nicknameInput.addEventListener('focusout', checkNicknameValidity); | ||
| } | ||
|
|
||
| // 비밀번호 필드의 유효성 검사 | ||
| function checkPasswordValidity() { | ||
| const passwordValue = passwordInput.value; | ||
|
|
||
| isPasswordValid = false; | ||
| hideError(passwordInput, 'passwordEmptyError'); | ||
| hideError(passwordInput, 'passwordLengthError'); | ||
|
|
||
| if (!passwordValue) { | ||
| showError(passwordInput, 'passwordEmptyError'); | ||
| } else if (passwordValue.length < 8) { | ||
| showError(passwordInput, 'passwordLengthError'); | ||
| } else { | ||
| isPasswordValid = true; | ||
| hideError(passwordInput, 'passwordEmptyError'); | ||
| hideError(passwordInput, 'passwordLengthError'); | ||
| } | ||
|
|
||
| authBtnStatusChange(); | ||
| } | ||
| if (passwordInput) { | ||
| passwordInput.addEventListener('focusout', checkPasswordValidity); | ||
| } | ||
|
|
||
| // 비밀번호 확인 필드의 유효성 검사 | ||
| function checkPasswordCheckValidity() { | ||
| const passwordValue = passwordInput.value; | ||
| const passwordCheckValue = passwordCheckInput.value; | ||
|
|
||
| isPasswordCheckValid = false; | ||
| hideError(passwordCheckInput, 'passwordCheckError'); | ||
|
|
||
| if (passwordValue !== passwordCheckValue) { | ||
| showError(passwordCheckInput, 'passwordCheckError'); | ||
| } else { | ||
| isPasswordCheckValid = true; | ||
| hideError(passwordCheckInput, 'passwordCheckError'); | ||
| } | ||
|
|
||
| authBtnStatusChange(); | ||
| } | ||
| if (passwordCheckInput) { | ||
| passwordCheckInput.addEventListener('focusout', checkPasswordCheckValidity); | ||
| } | ||
|
|
||
| // auth 버튼 비활성화/활성화 상태 변경 | ||
| function authBtnStatusChange() { | ||
|
Collaborator
There was a problem hiding this comment. authBtnStatusChange 를 위쪽에서 사용하는데 authBtnStatusChange 함수는 아래에 정의가 되어있어요. 컴퓨터는 코드를 위에서부터 아래로 코드를 읽는데 authBtnStatusChange 가 정의되지 않은 상태에서도 authBtnStatusChange 함수를 찾아갔어요...! 이런 현상을 만약 function () 으로 함수를 생성하지 않고 const = () => {} 로 생성하셨으면 문제가 생겼을 수 있어요ㅠ |
||
| const authBtn = document.querySelector('.auth-btn'); | ||
|
|
||
| // 회원가입 페이지일때 | ||
| if (nicknameInput && passwordCheckInput) { | ||
| if ( | ||
| isEmailValid && | ||
| isNicknameValid && | ||
| isPasswordValid && | ||
| isPasswordCheckValid | ||
| ) { | ||
| authBtn.setAttribute('href', '/html/signin.html'); | ||
| authBtn.style.backgroundColor = '#3692ff'; | ||
| } else { | ||
| authBtn.setAttribute('href', '#'); | ||
| authBtn.style.backgroundColor = '#9ca3af'; | ||
| } | ||
| } | ||
| // 로그인 페이지일때 | ||
| else { | ||
| if (isEmailValid && isPasswordValid) { | ||
| authBtn.setAttribute('href', '/html/items.html'); | ||
| authBtn.style.backgroundColor = '#3692ff'; | ||
| } else { | ||
| authBtn.setAttribute('href', '#'); | ||
| authBtn.style.backgroundColor = '#9ca3af'; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| // 비밀번호 숨기기 버튼 구현 | ||
| const pwEyeBtn = document.querySelector('.pw-eye-btn'); | ||
| const pwCkEyeBtn = document.querySelector('.pw-ck-eye-btn'); | ||
|
|
||
| function passwordEyeBtnChange(e) { | ||
| const pwInput = e.target.parentElement.querySelector('input'); | ||
|
|
||
| if (e.target.getAttribute('src') === '/images/login/pw-eye-btn-off.png') { | ||
| e.target.setAttribute('src', '/images/login/pw-eye-btn-on.png'); | ||
| pwInput.setAttribute('type', 'text'); | ||
| } else { | ||
| e.target.setAttribute('src', '/images/login/pw-eye-btn-off.png'); | ||
| pwInput.setAttribute('type', 'password'); | ||
| } | ||
|
Comment on lines
+161
to
+167
Collaborator
There was a problem hiding this comment. 물론 src 에 있는 값을 통해 현재 상태를 구분해서 처리할 수 있어요ㅎㅎ! 틀린코드는 아닌데, 관리하기가 어려울것같아요. ex) 이미지 아이콘이 변경된경우나 이미지 파일명이 변경된 경우에 까먹지 않고 auth.js 파일에 와서 변경된 부분을 같이 수정해주어야 하거든요. 만약 if (pwInput.type === "text") {
e.target.setAttribute('src', '/images/login/pw-eye-btn-on.png');
pwInput.setAttribute('type', 'text');
} else {
e.target.setAttribute('src', '/images/login/pw-eye-btn-off.png');
pwInput.setAttribute('type', 'password');
}이렇게 해주면 굳이 이미지 경로를 알 필요까진 없을거에요ㅎㅎ! |
||
| } | ||
|
|
||
| if (pwEyeBtn) { | ||
| pwEyeBtn.addEventListener('click', passwordEyeBtnChange); | ||
| } | ||
| if (pwCkEyeBtn) { | ||
| pwCkEyeBtn.addEventListener('click', passwordEyeBtnChange); | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
네이밍도 좀더 좋은것같네요ㅎㅎ