[고서영] Sprint4 #131
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,88 @@ | ||
| document.addEventListener("DOMContentLoaded", () => { | ||
| const emailInput = document.getElementById("email"); | ||
|
|
||
| const passwordInput = document.getElementById("password"); | ||
| const emailError = document.getElementById("email-error"); | ||
| const passwordError = document.getElementById("password-error"); | ||
| const form = document.querySelector(".login-form"); | ||
| const submitBtn = document.querySelector(".btn-large"); | ||
|
|
||
| submitBtn.disabled = true; // 초기 상태에서 버튼 비활성화 | ||
|
Collaborator
There was a problem hiding this comment. html 속성을 이용하실 수 있습니다~! <button disabled>로그인</button> |
||
|
|
||
| // 필드별로 touched 상태를 추적 | ||
| let emailTouched = false; | ||
| let passwordTouched = false; | ||
|
|
||
| // 유효성 검사 함수 | ||
| function validateEmail() { | ||
| if (!emailTouched) return true; | ||
| const emailValue = emailInput.value.trim(); | ||
| if (!emailValue) { | ||
| emailError.textContent = "이메일을 입력해 주세요."; | ||
|
Collaborator
There was a problem hiding this comment. 에러 UI 관련 부분이 반복되고 있네요! 이런 경우 함수로 묶어 주시면 유지보수, 가독성에 도움이 됩니다 :) |
||
| emailInput.classList.add("error"); | ||
| return false; | ||
| } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailValue)) { | ||
| emailError.textContent = "잘못된 이메일입니다."; | ||
| emailInput.classList.add("error"); | ||
| return false; | ||
| } | ||
| emailError.textContent = ""; // 에러 메시지 초기화 | ||
|
|
||
| emailInput.classList.remove("error"); | ||
| return true; | ||
| } | ||
|
|
||
| function validatePassword() { | ||
| if (!passwordTouched) return true; | ||
| const passwordValue = passwordInput.value.trim(); | ||
| if (!passwordValue) { | ||
| passwordError.textContent = "비밀번호를 입력해 주세요."; | ||
| passwordInput.classList.add("error"); | ||
| return false; | ||
| } else if (passwordValue.length < 8) { | ||
| passwordError.textContent = "비밀번호를 8자 이상 입력해 주세요."; | ||
| passwordInput.classList.add("error"); | ||
| return false; | ||
| } | ||
| passwordError.textContent = ""; // 에러 메시지 초기화 | ||
| passwordInput.classList.remove("error"); | ||
| return true; | ||
| } | ||
|
|
||
| function updateSubmitLoginState() { | ||
| const isEmailValid = validateEmail(); | ||
| const isPasswordValid = validatePassword(); | ||
| submitBtn.disabled = !( | ||
| emailTouched && | ||
| passwordTouched && | ||
| isEmailValid && | ||
| isPasswordValid | ||
| ); | ||
| } | ||
|
|
||
| // 폼 제출 시 유효성 검사 | ||
| form.addEventListener("submit", (event) => { | ||
| const isEmailValid = validateEmail(); | ||
| const isPasswordValid = validatePassword(); | ||
|
|
||
| if (!isEmailValid || !isPasswordValid) { | ||
| event.preventDefault(); // 폼 제출 방지 | ||
|
Collaborator
There was a problem hiding this comment. form 의 method=post 때문에 잘 동작이 안되서 event.preventDefault() 를 하고 /item으로 가도록 작성했는데 이에 문제점이 많을 것 같습니다. 여기에 대한 피드백 부탁드립니다. |
||
| } else { | ||
| event.preventDefault(); // 기본 제출 방지 | ||
| window.location.href = "/items"; | ||
| } | ||
| updateSubmitLoginState(); | ||
| }); | ||
|
|
||
| // 입력 필드에서 포커스가 벗어날 때 유효성 검사 | ||
| emailInput.addEventListener("blur", () => { | ||
| emailTouched = true; | ||
| validateEmail(); | ||
| }); | ||
| passwordInput.addEventListener("blur", () => { | ||
| passwordTouched = true; | ||
| validatePassword(); | ||
| }); | ||
| // 입력 필드에서 값이 변경될 때 버튼 상태 업데이트 | ||
| emailInput.addEventListener("input", updateSubmitLoginState); | ||
| passwordInput.addEventListener("input", updateSubmitLoginState); | ||
| }); | ||
| // 로그인 버튼 클릭 시 로그인 처리 | ||
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,146 @@ | ||
| document.addEventListener("DOMContentLoaded", () => { | ||
| const emailInput = document.getElementById("signup-email"); | ||
| const usernameInput = document.getElementById("signup-username"); | ||
| const passwordInput = document.getElementById("signup-password"); | ||
| const passwordConfirmInput = document.getElementById( | ||
| "signup-password-confirm" | ||
| ); | ||
| const emailError = document.getElementById("signup-email-error"); | ||
| const usernameError = document.getElementById("signup-username-error"); | ||
| const passwordError = document.getElementById("signup-password-error"); | ||
| const passwordConfirmInputError = document.getElementById( | ||
| "signup-password-confirm-error" | ||
| ); | ||
| const form = document.querySelector(".login-form"); | ||
| const submitBtn = document.querySelector(".btn-large"); | ||
|
|
||
| submitBtn.disabled = true; // 초기 상태에서 버튼 비활성화 | ||
|
|
||
| // 필드별로 touched 상태를 추적 | ||
| let emailTouched = false; | ||
| let usernameTouched = false; | ||
| let passwordTouched = false; | ||
| let passwordConfirmTouched = false; | ||
|
|
||
| // 유효성 검사 함수 | ||
| function validateEmail() { | ||
| if (!emailTouched) return true; | ||
| const emailValue = emailInput.value.trim(); | ||
| if (!emailValue) { | ||
| emailError.textContent = "이메일을 입력해 주세요."; | ||
| emailInput.classList.add("error"); | ||
| return false; | ||
| } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(emailValue)) { | ||
| emailError.textContent = "잘못된 이메일입니다."; | ||
| emailInput.classList.add("error"); | ||
| return false; | ||
| } | ||
| emailError.textContent = ""; // 에러 메시지 초기화 | ||
| emailInput.classList.remove("error"); | ||
| return true; | ||
| } | ||
|
|
||
| function vaildateUsername() { | ||
| if (!usernameTouched) return true; | ||
| const usernameValue = usernameInput.value.trim(); | ||
| if (!usernameValue) { | ||
| usernameError.textContent = "닉네임을 입력해 주세요."; | ||
| usernameInput.classList.add("error"); | ||
| return false; | ||
| } | ||
| usernameError.textContent = ""; // 에러 메시지 초기화 | ||
| usernameInput.classList.remove("error"); | ||
| return true; | ||
| } | ||
|
|
||
| function validatePassword() { | ||
| if (!passwordTouched) return true; | ||
| const passwordValue = passwordInput.value.trim(); | ||
| if (!passwordValue) { | ||
| passwordError.textContent = "비밀번호를 입력해 주세요."; | ||
| passwordInput.classList.add("error"); | ||
| return false; | ||
| } else if (passwordValue.length < 8) { | ||
| passwordError.textContent = "비밀번호를 8자 이상 입력해 주세요."; | ||
| passwordInput.classList.add("error"); | ||
| return false; | ||
| } | ||
| passwordError.textContent = ""; // 에러 메시지 초기화 | ||
| passwordInput.classList.remove("error"); | ||
| return true; | ||
| } | ||
|
|
||
| function validateConfirmPassword() { | ||
| if (!passwordConfirmTouched) return true; | ||
| const passwordConfirmValue = passwordConfirmInput.value.trim(); | ||
| const passwordValue = passwordInput.value.trim(); | ||
| if (!passwordConfirmValue) { | ||
| passwordConfirmInputError.textContent = | ||
| "비밀번호를 다시 입력해 주세요."; | ||
| passwordConfirmInput.classList.add("error"); | ||
| return false; | ||
| } else if (passwordConfirmValue !== passwordValue) { | ||
| passwordConfirmInputError.textContent = | ||
| "비밀번호가 일치하지 않습니다."; | ||
| passwordConfirmInput.classList.add("error"); | ||
| return false; | ||
| } | ||
| passwordConfirmInputError.textContent = ""; // 에러 메시지 초기화 | ||
| passwordConfirmInput.classList.remove("error"); | ||
| return true; | ||
| } | ||
| // 회원가입 상태 업데이트 | ||
| function updateSubmitSignupState() { | ||
| const isEmailVaild = validateEmail(); | ||
| const isUsernameValid = vaildateUsername(); | ||
| const isPasswordValid = validatePassword(); | ||
| const isPasswordConfirmValid = validateConfirmPassword(); | ||
| submitBtn.disabled = !( | ||
| emailTouched && | ||
| usernameTouched && | ||
| passwordTouched && | ||
| passwordConfirmTouched && | ||
| isEmailVaild && | ||
| isUsernameValid && | ||
| isPasswordValid && | ||
| isPasswordConfirmValid | ||
| ); | ||
| } | ||
| // 폼 제출 시 유효성 검사 | ||
| form.addEventListener("submit", (event) => { | ||
| const isEmailValid = validateEmail(); | ||
| const isPasswordValid = validatePassword(); | ||
|
|
||
| if (!isEmailValid || !isPasswordValid) { | ||
| event.preventDefault(); // 폼 제출 방지 | ||
| } else { | ||
| event.preventDefault(); // 폼 제출 방지 | ||
| window.location.href = "/login.html"; | ||
| } | ||
| updateSubmitLoginState(); | ||
| }); | ||
|
|
||
| // 입력 필드에서 포커스가 벗어날 때 유효성 검사 | ||
| emailInput.addEventListener("blur", () => { | ||
| emailTouched = true; | ||
| validateEmail(); | ||
| }); | ||
| usernameInput.addEventListener("blur", () => { | ||
| usernameTouched = true; | ||
| vaildateUsername(); | ||
| }); | ||
| passwordInput.addEventListener("blur", () => { | ||
| passwordTouched = true; | ||
| validatePassword(); | ||
| }); | ||
| passwordConfirmInput.addEventListener("blur", () => { | ||
| passwordConfirmTouched = true; | ||
|
Collaborator
There was a problem hiding this comment. 토글 아이콘 동작까지 만들고 다시 확인해보니 버튼 활성화가 원하는 대로 잘 안되었습니다. 어떤 코드에서 문제가 있는 지 궁금합니다. 이 요소들을 콘솔로 찍고 확인해 보시는거죠~!
Collaborator
There was a problem hiding this comment. +추가로, vscode쓰신다면 https://velog.io/@lgsgst5613/Vscode-Extension-%EC%B6%94%EC%B2%9CTurbo-console-log |
||
| validateConfirmPassword(); | ||
| }); | ||
| // 입력 필드에서 값이 변경될 때 버튼 상태 업데이트 | ||
| emailInput.addEventListener("input", updateSubmitSignupState); | ||
|
Collaborator
There was a problem hiding this comment. 이벤트 버블링을 이용해 form에 달아도 좋습니다~! |
||
| usernameInput.addEventListener("input", updateSubmitSignupState); | ||
| passwordInput.addEventListener("input", updateSubmitSignupState); | ||
| passwordConfirmInput.addEventListener("input", updateSubmitSignupState); | ||
| }); | ||
| // 로그인 버튼 클릭 시 로그인 처리 | ||
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.
signup.html 과 login.html에 같은 컴포넌트가 있어 동시 적용하려고 sign.js 하나의 파일에 작성하려고 했으나 잘 동작이 안되서 따로 만들었습니다. 혹시 같은 컴포넌트를 작성하고 임포트 하는 방법이 있나요?
-> 바닐라 자바스크립트에서 import를 쓰실려면
<script type="module" src="./login.js"></script>로 써주시거나 리엑트 쓰실 때 처럼 웹팩같은 번들러를 활용하셔야 합니다 :)https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Modules