[이수정] Sprint 4 #41
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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,103 @@ | ||
| /** | ||
| * 비밀번호 입력 보기 버튼 클릭 로직 | ||
| * @param {*} e - 클릭 이벤트 | ||
| */ | ||
| export function onVisibilityChange(e) { | ||
| if (e.target.localName !== "button") return; | ||
| const button = e.target; | ||
| const input = document.getElementById(button.id).previousElementSibling; | ||
| if (input.type === "password") { | ||
| button.classList.add("checked"); | ||
| input.setAttribute("type", "text"); | ||
| } else { | ||
| button.classList.remove("checked"); | ||
| input.setAttribute("type", "password"); | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * 포커스 아웃 시 입력값 체크 이벤트 | ||
| * @param {*} e | ||
| * @returns | ||
| */ | ||
| export function onInputFocusOut(e) { | ||
| if (e.target.localName !== "input") return; | ||
| const input = e.target; | ||
| if (!checkValidation(input)) input.classList.add("error"); | ||
| else input.classList.remove("error"); | ||
| } | ||
|
|
||
| /** | ||
| * 입력값 유효성 검사 | ||
| * @param {*} input | ||
| * @returns | ||
| */ | ||
| function checkValidation(input) { | ||
| const { id: type, value } = input; | ||
| let result = false, | ||
| className = "", | ||
| errorMsg = ""; | ||
|
|
||
| switch (type) { | ||
| case "email": | ||
| result = input.value.length > 0 && input.validity.valid; | ||
| className = "error-email"; | ||
| if (!result) | ||
| errorMsg = value.length === 0 ? "이메일을 입력해주세요." : "잘못된 이메일 형식입니다"; | ||
| break; | ||
| case "nickname": | ||
| result = value.length > 0; | ||
| className = "error-nickname"; | ||
| if (!result) errorMsg = "닉네임을 입력해주세요."; | ||
| break; | ||
| case "pwd": | ||
| result = value.length >= 8; | ||
| className = "error-pwd"; | ||
| if (!result) | ||
| errorMsg = | ||
| value.length === 0 ? "비밀번호를 입력해주세요." : "비밀번호를 8자 이상 입력해주세요"; | ||
| break; | ||
| case "pwd-check": | ||
| result = value === document.getElementById("pwd").value; | ||
| className = "error-pwd-check"; | ||
| if (!result) errorMsg = "비밀번호가 일치하지 않습니다."; | ||
| break; | ||
| default: | ||
| return; | ||
| } | ||
|
|
||
|
Collaborator
There was a problem hiding this comment. previousElementSibling, parentsElement 등을 사용해서 dom 접근하는 코드가 많이 보이는데 dataset, id 등을 좀 더 활용해 보셔도 좋을 거 같습니다 :) 기존에 사용하고 계시는 dom 접근법은 간단하게 사용하면 괜찮지만, 갈수록 유지 보수가 어려워집니다! 우선 참고만 해주세요~! |
||
| const inputField = input.parentElement?.parentElement; | ||
|
Collaborator
There was a problem hiding this comment. 이런 부분들은 가독성을 위해 함수로 추상화 하시면 좋습니다~! 나중에 에러 메세지 관련된 부분을 이해해야 하거나 수정해야 할 때는 해당 함수만 찾아가면 되구요! |
||
| const errorParagraph = document.getElementsByClassName(className)[0]; | ||
|
|
||
| if (result) errorParagraph && inputField?.removeChild(errorParagraph); | ||
|
Collaborator
There was a problem hiding this comment. 약간은 복잡한 느낌이 있는데, 미리 html에 정의하고 display, content만 수정할 수도 있을 거 같네요! |
||
| else if (errorParagraph) errorParagraph.textContent = errorMsg; | ||
| else { | ||
| const newErrorParagraph = document.createElement("p"); | ||
| newErrorParagraph.classList.add("text-error", "text-md", "text-semibold", className); | ||
| newErrorParagraph.textContent = errorMsg; | ||
| inputField?.append(newErrorParagraph); | ||
| } | ||
| return result; | ||
| } | ||
|
|
||
| /** | ||
| * input 값에 따른 form button 활성화/비활성화 처리 | ||
| * @param {*} btn - 활성화 처리할 버튼 엘리먼트 | ||
| */ | ||
| export function onFormInputChange(btn) { | ||
| let isEmptyInput = false; | ||
| const form = document.getElementsByTagName("form")[0]; | ||
| for (let inputField of form.children) { | ||
| if (!inputField.classList.value.includes("input-field")) break; | ||
|
Collaborator
There was a problem hiding this comment. 위와 마찬가지 입니다 :) 추상화로 가독성을 높여주세요! |
||
| const inputFieldWrapper = inputField.children[1]; | ||
| const inputElement = inputFieldWrapper.children[0]; | ||
| if (inputElement?.value.length === 0) { | ||
| isEmptyInput = true; | ||
| break; | ||
| } | ||
| checkValidation(inputElement); | ||
| } | ||
| const errorText = document.getElementsByClassName("text-error"); | ||
| if (errorText.length === 0 && !isEmptyInput) btn.removeAttribute("disabled"); | ||
| else btn.setAttribute("disabled", "true"); | ||
| } | ||
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 |
|---|---|---|
| @@ -1,36 +1,23 @@ | ||
| import { onFormInputChange, onInputFocusOut, onVisibilityChange } from "./common/members.js"; | ||
|
|
||
| const loginForm = document.getElementsByClassName("form-login")[0]; | ||
| const emailInputField = document.getElementById("input-wrapper-email"); | ||
| const pwdInputField = document.getElementById("input-wrapper-pwd"); | ||
| const visiblilityBtn = document.getElementById("visibility"); | ||
| const loginBtn = document.getElementById("btn-submit-login"); | ||
|
|
||
| // input 이벤트 핸들러를 통한 버튼 활성화 처리 | ||
| loginForm?.addEventListener("input", () => onFormInputChange(loginBtn)); | ||
|
|
||
| // focusout 이벤트 핸들러를 통한 에러 메세지 표시 | ||
| emailInputField.addEventListener("focusout", onInputFocusOut); | ||
| pwdInputField.addEventListener("focusout", onInputFocusOut); | ||
|
|
||
| // click 이벤트 핸들러를 통한 비밀번호 입력 확인 처리 | ||
| visiblilityBtn.addEventListener("click", onVisibilityChange); | ||
|
|
||
| // submit 이벤트 핸들러를 통한 페이지 이동 처리 | ||
| loginForm?.addEventListener("submit", (e) => { | ||
| e.preventDefault(); | ||
| window.location.href = "/items"; | ||
| }); |
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 |
|---|---|---|
| @@ -1,40 +1,23 @@ | ||
| import { onFormInputChange, onInputFocusOut, onVisibilityChange } from "./common/members.js"; | ||
|
|
||
| const signupForm = document.getElementsByClassName("form-signup")[0]; | ||
| const nicknameInputField = document.getElementById("input-wrapper-nickname"); | ||
| const pwdCheckInputField = document.getElementById("input-wrapper-pwd-check"); | ||
| const visiblilityAgainBtn = document.getElementById("visibility-again"); | ||
| const signupBtn = document.getElementById("btn-submit-signup"); | ||
|
|
||
| // input 이벤트 핸들러를 통한 버튼 활성화 처리 | ||
| signupForm.addEventListener("input", () => onFormInputChange(signupBtn)); | ||
|
|
||
| // focusout 이벤트 핸들러를 통한 에러 메세지 표시 | ||
| nicknameInputField.addEventListener("focusout", onInputFocusOut); | ||
| pwdCheckInputField.addEventListener("focusout", onInputFocusOut); | ||
|
|
||
| // click 이벤트 핸들러를 통한 비밀번호 입력 확인 처리 | ||
| visiblilityAgainBtn.addEventListener("click", onVisibilityChange); | ||
|
|
||
| // submit 이벤트 핸들러를 통한 페이지 이동 처리 | ||
| signupForm.addEventListener("submit", (e) => { | ||
| e.preventDefault(); | ||
| window.location.href = "/signin"; | ||
| }); |
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.
비밀번호 숨기는 로직을 하나의 함수로 처리 하셨군요! 👍
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.
html dataset을 이용해서 input id를 가져오는 방법도 있겠네요~! (참고만 해주세요!)