Basic 정태인 #85
There are no files selected for viewing
Binary file not shown.
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,166 @@ | ||
| document.addEventListener("DOMContentLoaded", () => { | ||
| const emailInput = document.querySelector(".email-input"); | ||
| const nicknameInput = document.querySelector(".nickname-input"); | ||
| const passwordInput = document.querySelector(".password-input"); | ||
| const passwordCheckInput = document.querySelector(".password-check-input"); | ||
| const signUpButton = document.querySelector(".signup-button"); | ||
| const loginButton = document.querySelector(".login-button"); | ||
|
|
||
| const emailError = document.getElementById("emailError"); | ||
| const passwordError = document.getElementById("passwordError"); | ||
| const passwordCheckError = document.getElementById("passwordCheckError"); | ||
| const nicknameError = document.getElementById("nicknameError"); | ||
|
|
||
| const state = { | ||
| email: false, | ||
| nickname: false, | ||
| password: false, | ||
| passwordCheck: false | ||
| }; | ||
|
|
||
| function isValidEmail(email) { | ||
| const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; | ||
| return emailRegex.test(email); | ||
| } | ||
|
Comment on lines
+21
to
+24
Collaborator
There was a problem hiding this comment. 굿굿 ! 순수함수를 작성하셨군요 !순수함수는 안정성 있는 함수로 꼽힙니다. 😊
|
||
|
|
||
| function validateInput(inputElement) { | ||
| const inputType = inputElement.getAttribute("type"); | ||
| const inputName = inputElement.getAttribute("name"); | ||
| let isValid = true; | ||
|
|
||
| if (inputType === "email") { | ||
| const emailValue = emailInput.value.trim(); | ||
|
|
||
| if (!emailValue) { | ||
| emailError.textContent = "이메일을 입력해주세요."; | ||
| inputElement.classList.add("error"); | ||
| isValid = false; | ||
| } else if (!isValidEmail(emailValue)) { | ||
| emailError.textContent = "잘못된 이메일 형식입니다."; | ||
| inputElement.classList.add("error"); | ||
| isValid = false; | ||
| } else { | ||
| emailError.textContent = ""; | ||
| inputElement.classList.remove("error"); | ||
| } | ||
|
|
||
| state.email = isValid; | ||
| } | ||
|
Comment on lines
+31
to
+48
Collaborator
There was a problem hiding this comment. (심화/의견/선택)
|
||
|
|
||
| if (inputType === "text") { | ||
| const nicknameValue = nicknameInput.value.trim(); | ||
|
|
||
| if (!nicknameValue) { | ||
| nicknameError.textContent = "닉네임을 입력해주세요."; | ||
| inputElement.classList.add("error"); | ||
| isValid = false; | ||
| } else { | ||
| nicknameError.textContent = ""; | ||
| inputElement.classList.remove("error"); | ||
| } | ||
|
|
||
| state.nickname = isValid; | ||
| } | ||
|
|
||
| if (inputType === "password" && inputName === "password") { | ||
| const passwordValue = passwordInput.value.trim(); | ||
|
|
||
| if (!passwordValue) { | ||
| passwordError.textContent = "비밀번호를 입력해주세요."; | ||
| inputElement.classList.add("error"); | ||
| isValid = false; | ||
| } else if (passwordValue.length < 8) { | ||
| passwordError.textContent = "비밀번호를 8자 이상 입력해주세요."; | ||
| inputElement.classList.add("error"); | ||
| isValid = false; | ||
| } else { | ||
| passwordError.textContent = ""; | ||
| inputElement.classList.remove("error"); | ||
| } | ||
|
|
||
| state.password = isValid; | ||
| } | ||
|
|
||
| if (inputType === "password" && inputName === "passwordDoubleCheck") { | ||
| const passwordValue = passwordInput.value.trim(); | ||
| const passwordCheckValue = passwordCheckInput.value.trim(); | ||
|
|
||
| if (!passwordCheckValue) { | ||
| passwordCheckError.textContent = "비밀번호를 입력해주세요."; | ||
| inputElement.classList.add("error"); | ||
| isValid = false; | ||
| } else if (passwordValue !== passwordCheckValue) { | ||
| passwordCheckError.textContent = "비밀번호가 일치하지 않습니다."; | ||
| inputElement.classList.add("error"); | ||
| isValid = false; | ||
| } else { | ||
| passwordCheckError.textContent = ""; | ||
| inputElement.classList.remove("error"); | ||
| } | ||
|
|
||
| state.passwordCheck = isValid; | ||
| } | ||
| updateButtonState(); | ||
| } | ||
|
|
||
| function updateButtonState() { | ||
| const isLoginValid = state.email && state.password; | ||
| const isSignUpValid = state.email && state.nickname && state.password && state.passwordCheck; | ||
|
|
||
| if (loginButton) { | ||
| if (isLoginValid) { | ||
| loginButton.classList.add("active"); | ||
| loginButton.removeAttribute("disabled"); | ||
| } else { | ||
| loginButton.classList.remove("active"); | ||
| loginButton.setAttribute("disabled", true); | ||
| } | ||
| } | ||
|
|
||
| if (signUpButton) { | ||
| if (isSignUpValid) { | ||
| signUpButton.classList.add("active"); | ||
| signUpButton.removeAttribute("disabled"); | ||
| } else { | ||
| signUpButton.classList.remove("active"); | ||
| signUpButton.setAttribute("disabled", true); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| if (emailInput) { | ||
| emailInput.addEventListener("focusout", () => validateInput(emailInput)); | ||
| } | ||
| if (passwordInput) { | ||
| passwordInput.addEventListener("focusout", () => validateInput(passwordInput)); | ||
| } | ||
| if (passwordCheckInput) { | ||
| passwordCheckInput.addEventListener("focusout", () => validateInput(passwordCheckInput)); | ||
| } | ||
| if (nicknameInput) { | ||
| nicknameInput.addEventListener("focusout", () => validateInput(nicknameInput)); | ||
| } | ||
|
|
||
| if (loginButton) { | ||
| loginButton.addEventListener("click", function(e) { | ||
| e.preventDefault(); | ||
| const isEmailValid = state.email; | ||
| const isPasswordValid = state.password; | ||
|
|
||
| if (isEmailValid && isPasswordValid) { | ||
| window.location.href = "items.html"; | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| if (signUpButton) { | ||
| signUpButton.addEventListener("click", function (e) { | ||
| e.preventDefault(); | ||
| const isFormValid = state.email && state.nickname && state.password && state.passwordCheck; | ||
|
|
||
| if (isFormValid) { | ||
| window.location.href = "signup.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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| document.addEventListener("DOMContentLoaded", () => { | ||
| const passwordInput = document.querySelector(".password-input"); | ||
| const passwordCheckInput = document.querySelector(".password-check-input"); | ||
| const visiblePasswordIcon = document.querySelector(".visibility-icon"); | ||
| const visiblePasswordCheckIcon = document.querySelector(".password-check-visibility-icon"); | ||
|
|
||
| let passwordVisible = true; | ||
| let passwordCheckVisible = true; | ||
|
|
||
| function togglePasswordType (type) { | ||
|
|
||
| if (type === "password") { | ||
| if (!passwordVisible) { | ||
| visiblePasswordIcon.classList.remove('on'); | ||
| visiblePasswordIcon.classList.add('off'); | ||
| passwordInput.setAttribute("type", "password"); | ||
| } else { | ||
| visiblePasswordIcon.classList.remove('off'); | ||
| visiblePasswordIcon.classList.add('on'); | ||
| passwordInput.setAttribute("type", "text"); | ||
| } | ||
|
|
||
| passwordVisible = !passwordVisible; | ||
| } | ||
|
Comment on lines
+12
to
+24
Collaborator
There was a problem hiding this comment. 다음과 같이 변경해볼 수 있어요 😊:visiblePasswordIcon.addEventListener("click", () => {
passwordVisible = !passwordVisible;
passwordInput.type = passwordVisible ? "text" : "password";
// ✅ 이미지 src 직접 변경
visiblePasswordIcon.src = passwordVisible
? "./assets/images/btn_visibility_on_24px.svg"
: "./assets/images/btn_visibility_off_24px.svg";
});클래스 이름을 설정하고, 클래스에 css 코드를 넣을 필요 없이 src를 직접 변경해볼 수 있습니다. 😊 |
||
|
|
||
| if (type === "passwordCheck") { | ||
| if (!passwordCheckVisible) { | ||
| visiblePasswordCheckIcon.classList.remove('on'); | ||
| visiblePasswordCheckIcon.classList.add('off'); | ||
| passwordCheckInput.setAttribute("type", "password"); | ||
| } else { | ||
| visiblePasswordCheckIcon.classList.remove('off'); | ||
| visiblePasswordCheckIcon.classList.add('on'); | ||
| passwordCheckInput.setAttribute("type", "text"); | ||
| } | ||
|
|
||
| passwordCheckVisible = !passwordCheckVisible; | ||
| } | ||
|
|
||
| } | ||
|
|
||
| if (visiblePasswordIcon) { | ||
| visiblePasswordIcon.addEventListener("click", () => togglePasswordType("password")); | ||
| } | ||
| if (visiblePasswordCheckIcon) { | ||
| visiblePasswordCheckIcon.addEventListener("click", () => togglePasswordType("passwordCheck")); | ||
| } | ||
| }); | ||
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.
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.
오호 background image로 on/off를 만드셨군요 ?