[김태욱] sprint4 #152
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| const emailInput = document.getElementById("emailInput"); | ||
| const emailError = document.getElementById("emailError"); | ||
| const passwordInput = document.getElementById("passwardinput"); | ||
| const passwordError = document.getElementById("passwordError"); | ||
| const loginButton = document.getElementById("loginButton"); | ||
| const togglePassword = document.getElementById("togglePassword"); | ||
|
|
||
| /* 이미지 파일 경로 설정 */ | ||
| const eyeOpenSrc = "./images/anyicons/passwardeye.svg"; | ||
| const eyeSlashSrc = "./images/anyicons/passwardcancel.svg"; | ||
|
|
||
| /* 초기 상태 설정 */ | ||
| let isPasswordVisible = false; | ||
|
|
||
| /* 이메일 정규표현식 */ | ||
| const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | ||
|
|
||
|
|
||
| /* 유효성 검사 상태 변수 */ | ||
| let isEmailValid = false; | ||
| let isPasswordValid = false; | ||
|
|
||
| /* 📌 유효성 검사 후 버튼 활성화 체크 */ | ||
| const updateButtonState = () => { | ||
| if (isEmailValid && isPasswordValid) { | ||
| loginButton.disabled = false; | ||
| } else { | ||
| loginButton.disabled = true; | ||
| } | ||
| }; | ||
|
|
||
| /* 📌 이메일 Focus Out 체크 */ | ||
| emailInput.addEventListener("focusout", () => { | ||
| const value = emailInput.value.trim(); | ||
|
|
||
| if (!value) { | ||
| emailInput.classList.add("error"); | ||
|
Collaborator
There was a problem hiding this comment. 에러를 추가하고 제거하는 로직이 반복되고 있네요! 이런 경우 함수로 정의해 주시면 재사용도 쉽고 가독성도 높일 수 있습니다 :)
Collaborator
There was a problem hiding this comment. function addError(id, message) {
const $emailInput = document.getElementById(`${id}Input`);
const $emailError = document.getElementById(`${id}Error`);
//..
} |
||
| emailError.textContent = "이메일을 입력해주세요."; | ||
| emailError.style.display = "block"; | ||
| isEmailValid = false; | ||
| } else if (!emailPattern.test(value)) { | ||
| emailInput.classList.add("error"); | ||
| emailError.textContent = "잘못된 이메일 형식입니다."; | ||
| emailError.style.display = "block"; | ||
| isEmailValid = false; | ||
| } else { | ||
| emailInput.classList.remove("error"); | ||
| emailError.style.display = "none"; | ||
| isEmailValid = true; | ||
| } | ||
| updateButtonState(); | ||
| }); | ||
|
|
||
| /* 📌 비밀번호 Focus Out 체크 */ | ||
| passwordInput.addEventListener("focusout", () => { | ||
| const value = passwordInput.value.trim(); | ||
|
|
||
| if (!value) { | ||
| passwordInput.classList.add("error"); | ||
| passwordError.textContent = "비밀번호를 입력해주세요."; | ||
| passwordError.style.display = "block"; | ||
| isPasswordValid = false; | ||
| } else if (value.length < 8) { | ||
| passwordInput.classList.add("error"); | ||
| passwordError.textContent = "비밀번호를 8자 이상 입력해주세요."; | ||
| passwordError.style.display = "block"; | ||
| isPasswordValid = false; | ||
| } else { | ||
| passwordInput.classList.remove("error"); | ||
| passwordError.style.display = "none"; | ||
| isPasswordValid = true; | ||
| } | ||
| updateButtonState(); | ||
| }); | ||
|
|
||
| /* 📌 버튼 클릭 시 페이지 이동 */ | ||
| loginButton.addEventListener("click", () => { | ||
| if (isEmailValid && isPasswordValid) { | ||
| window.location.href = "/items"; | ||
| } | ||
| }); | ||
|
|
||
| /* 클릭 이벤트 */ | ||
| togglePassword.addEventListener("click", () => { | ||
| isPasswordVisible = !isPasswordVisible; | ||
| if (isPasswordVisible) { | ||
| passwordInput.type = "text"; | ||
| togglePassword.src = eyeOpenSrc; | ||
| } else { | ||
| passwordInput.type = "password"; | ||
| togglePassword.src = eyeSlashSrc; | ||
| } | ||
| }); | ||
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,158 @@ | ||
| const emailInput = document.getElementById("emailInput"); | ||
| const nicknameInput = document.getElementById("nicknameInput"); | ||
| const passwordInput = document.getElementById("passwordInput"); | ||
| const passwordConfirmInput = document.getElementById("passwordConfirmInput"); | ||
| const signupButton = document.getElementById("signup-button"); | ||
|
|
||
| const emailError = document.getElementById("emailError"); | ||
| const nicknameError = document.getElementById("nicknameError"); | ||
| const passwordError = document.getElementById("passwordError"); | ||
| const passwordConfirmError = document.getElementById("passwordConfirmError"); | ||
|
|
||
| const togglePassword = document.getElementById("togglePassword"); | ||
| const togglePasswordConfirm = document.getElementById("togglePasswordConfirm"); | ||
|
|
||
| /* 이미지 파일 경로 설정 */ | ||
| const eyeOpenSrc = "./images/anyicons/passwardeye.svg"; | ||
| const eyeSlashSrc = "./images/anyicons/passwardcancel.svg"; | ||
|
|
||
| /* 초기 상태 */ | ||
| let isPasswordVisible = false; | ||
| let isPasswordConfirmVisible = false; | ||
|
|
||
| /* 이메일 정규표현식 */ | ||
| const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | ||
|
Collaborator
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 |
||
|
|
||
| /* 유효성 상태 */ | ||
| let isEmailValid = false; | ||
| let isNicknameValid = false; | ||
| let isPasswordValid = false; | ||
| let isPasswordMatch = false; | ||
|
|
||
| /* 비밀번호 보이기/숨기기 토글 */ | ||
| togglePassword.addEventListener("click", () => { | ||
| isPasswordVisible = !isPasswordVisible; | ||
| if (isPasswordVisible) { | ||
| passwordInput.type = "text"; | ||
| togglePassword.src = eyeOpenSrc; | ||
| } else { | ||
| passwordInput.type = "password"; | ||
| togglePassword.src = eyeSlashSrc; | ||
| } | ||
| }); | ||
|
|
||
| /* 비밀번호 확인 보이기/숨기기 토글 */ | ||
| togglePasswordConfirm.addEventListener("click", () => { | ||
| isPasswordConfirmVisible = !isPasswordConfirmVisible; | ||
| if (isPasswordConfirmVisible) { | ||
| passwordConfirmInput.type = "text"; | ||
| togglePasswordConfirm.src = eyeOpenSrc; | ||
| } else { | ||
| passwordConfirmInput.type = "password"; | ||
| togglePasswordConfirm.src = eyeSlashSrc; | ||
| } | ||
| }); | ||
|
|
||
| /* 📌 유효성 검사 함수 */ | ||
| const validateEmail = () => { | ||
| const value = emailInput.value.trim(); | ||
| if (!value) { | ||
| emailInput.classList.add("error"); | ||
| emailError.textContent = "이메일을 입력해주세요."; | ||
| emailError.style.display = "block"; | ||
| isEmailValid = false; | ||
| } else if (!emailPattern.test(value)) { | ||
| emailInput.classList.add("error"); | ||
| emailError.textContent = "잘못된 이메일 형식입니다."; | ||
| emailError.style.display = "block"; | ||
| isEmailValid = false; | ||
| } else { | ||
| emailInput.classList.remove("error"); | ||
| emailError.style.display = "none"; | ||
| isEmailValid = true; | ||
| } | ||
| }; | ||
|
|
||
| const validateNickname = () => { | ||
| const value = nicknameInput.value.trim(); | ||
| if (!value) { | ||
| nicknameInput.classList.add("error"); | ||
| nicknameError.textContent = "닉네임을 입력해주세요."; | ||
| nicknameError.style.display = "block"; | ||
| isNicknameValid = false; | ||
| } else { | ||
| nicknameInput.classList.remove("error"); | ||
| nicknameError.style.display = "none"; | ||
| isNicknameValid = true; | ||
| } | ||
| }; | ||
|
|
||
| const validatePassword = () => { | ||
| const value = passwordInput.value.trim(); | ||
| if (!value) { | ||
| passwordInput.classList.add("error"); | ||
| passwordError.textContent = "비밀번호를 입력해주세요."; | ||
| passwordError.style.display = "block"; | ||
| isPasswordValid = false; | ||
| } else if (value.length < 8) { | ||
| passwordInput.classList.add("error"); | ||
| passwordError.textContent = "비밀번호를 8자 이상 입력해주세요."; | ||
| passwordError.style.display = "block"; | ||
| isPasswordValid = false; | ||
| } else { | ||
| passwordInput.classList.remove("error"); | ||
| passwordError.style.display = "none"; | ||
| isPasswordValid = true; | ||
| } | ||
| }; | ||
|
|
||
| const validatePasswordConfirm = () => { | ||
| const value = passwordConfirmInput.value.trim(); | ||
| if (value !== passwordInput.value.trim()) { | ||
| passwordConfirmInput.classList.add("error"); | ||
| passwordConfirmError.textContent = "비밀번호가 일치하지 않습니다."; | ||
| passwordConfirmError.style.display = "block"; | ||
| isPasswordMatch = false; | ||
| } else { | ||
| passwordConfirmInput.classList.remove("error"); | ||
| passwordConfirmError.style.display = "none"; | ||
| isPasswordMatch = true; | ||
| } | ||
| }; | ||
|
|
||
| /* 📌 입력 변경 시 실시간 검증 */ | ||
| emailInput.addEventListener("focusout", () => { | ||
| validateEmail(); | ||
| updateButtonState(); | ||
| }); | ||
|
|
||
| nicknameInput.addEventListener("focusout", () => { | ||
| validateNickname(); | ||
| updateButtonState(); | ||
| }); | ||
|
|
||
| passwordInput.addEventListener("focusout", () => { | ||
| validatePassword(); | ||
| updateButtonState(); | ||
| }); | ||
|
|
||
| passwordConfirmInput.addEventListener("focusout", () => { | ||
| validatePasswordConfirm(); | ||
| updateButtonState(); | ||
| }); | ||
|
|
||
| /* 📌 유효성 검사 후 버튼 활성화 체크 */ | ||
| const updateButtonState = () => { | ||
| if (isEmailValid && isNicknameValid && isPasswordValid && isPasswordMatch) { | ||
|
Collaborator
There was a problem hiding this comment. 크게 상관 없지만.. 이렇게 나타낼 수도 있겠네요! signupButton.disabled = !(isEmailValid && isNicknameValid && isPasswordValid && isPasswordMatch); |
||
| signupButton.disabled = false; | ||
| } else { | ||
| signupButton.disabled = true; | ||
| } | ||
| }; | ||
|
|
||
| /* 📌 회원가입 버튼 클릭 시 페이지 이동 */ | ||
| signupButton.addEventListener("click", () => { | ||
| if (isEmailValid && isNicknameValid && isPasswordValid && isPasswordMatch) { | ||
| window.location.href = "./login.html"; | ||
| } | ||
| }); | ||
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
Oops, something went wrong.
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.
대체로 변수, 함수명이 직관적이고 명확합니다 👍 👍