Basic 진성진 sprint4 #43
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 |
|---|---|---|
|
|
@@ -33,7 +33,7 @@ | |
| /> | ||
| </picture> | ||
| </a> | ||
| <a class="login" href="signin.html">로그인</a> | ||
| </nav> | ||
| </header> | ||
|
|
||
|
|
||
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
File renamed without changes
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| function toggleInputType(e) { | ||
| const eventCurrentTarget = e.currentTarget; | ||
| const inputElement = eventCurrentTarget.parentElement.firstElementChild; | ||
| const [closeEye, openEye] = eventCurrentTarget.children; | ||
|
|
||
| openEye.classList.toggle("none"); | ||
| closeEye.classList.toggle("none"); | ||
| inputElement.setAttribute( | ||
| "type", | ||
| inputElement.type === "password" ? "text" : "password" | ||
| ); | ||
| } | ||
|
|
||
| export { toggleInputType }; |
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,65 @@ | ||
| function addErrorMessage(el, message) { | ||
| const target = el.parentElement.parentElement; | ||
| const pElement = document.createElement("p"); | ||
| pElement.classList.add("error-message"); | ||
| pElement.textContent = message; | ||
| target.append(pElement); | ||
| } | ||
|
|
||
| function onInputError(el, { message }) { | ||
| const parentElement = el.parentElement; | ||
| parentElement.classList.add("red-border"); | ||
| parentElement.classList.remove("gray-border"); | ||
|
|
||
| const hasError = | ||
| parentElement.parentElement.lastElementChild.classList.contains( | ||
| "error-message" | ||
| ); | ||
|
|
||
| if (!hasError) { | ||
| addErrorMessage(el, message); | ||
| } | ||
| } | ||
|
|
||
| function offInputError(el) { | ||
| el.parentElement.classList.add("gray-border"); | ||
| el.parentElement.classList.remove("red-border"); | ||
| } | ||
|
|
||
| function checkValidation({ el, isValidate, message }) { | ||
| if (isValidate === true) { | ||
| offInputError(el); | ||
| } else { | ||
| onInputError(el, { message }); | ||
| } | ||
| } | ||
|
|
||
| function validate(e, { targetEl, message, validator }) { | ||
|
Collaborator
There was a problem hiding this comment. 함수의 역할을 분명히 하면 더욱 좋겠습니다! dom 요소를 받아서 유효성을 검사하는 함수인데, 이벤트 객체를 받거나 targetEl이 들어오면서 복잡도가 증가된 거 같습니다! isMatch 때문인 거 같은데 관련 부분은 밖에서 처리 하는 것이 좀 더 나을 거 같아요. isMatch: (value1) => (value2) => value1 !== "" && value1 === value2,
//...
validate(e.target, {
validator: authValidator.isMatch($passwordInput.value),
message: ERROR_MESSAGE.IS_NOT_MATCH_PASSWORD,
});이런식으로 할 수도 있겠네요! (참고만 해주세요! 충분히 잘 하셨습니다~!) |
||
| const el = e?.target ? e.target : e; | ||
| const value1 = el.value; | ||
| const value2 = targetEl?.value; | ||
| const isValidate = validator(value1, value2); | ||
|
|
||
| checkValidation({ el, isValidate, message }); | ||
| } | ||
|
|
||
| function resetErrorMessage(e) { | ||
| const errorCandidateElement = | ||
| e.target.parentElement.parentElement.lastElementChild; | ||
| const hasError = errorCandidateElement.classList.contains("error-message"); | ||
|
|
||
| if (hasError) { | ||
| errorCandidateElement.remove(); | ||
| } | ||
| } | ||
|
|
||
| function changeButtonStatus(el, { checkEmptyInputElements }) { | ||
| const isEmpty = checkEmptyInputElements.some( | ||
| (inputElement) => inputElement.value === "" | ||
| ); | ||
| const isError = document.querySelectorAll(".error-message").length > 0; | ||
|
|
||
| el.disabled = isEmpty || isError; | ||
| } | ||
|
|
||
| export { resetErrorMessage, validate, changeButtonStatus }; | ||
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,12 @@ | ||
| const MINIMUM_PASSWORD_LENGTH = 8; | ||
| const EMAIL_REG_EXP = | ||
| /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; | ||
|
|
||
|
|
||
| const authValidator = { | ||
| isWrongEmailFormat: (value) => EMAIL_REG_EXP.test(value), | ||
| isEmptyInput: (value) => value !== "", | ||
| isMoreThanEight: (value) => value.length >= MINIMUM_PASSWORD_LENGTH, | ||
| isMatch: (value1, value2) => value1 !== "" && value1 === value2, | ||
| }; | ||
|
|
||
| export { authValidator }; | ||
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,11 @@ | ||
| const ERROR_MESSAGE = { | ||
|
|
||
| IS_EMPTY_EMAIL: "이메일을 입력해 주세요.", | ||
| IS_WRONG_EMAIL_FORMAT: "잘못된 이메일입니다.", | ||
| IS_EMPTY_NICKNAME: "닉네임을 입력해 주세요.", | ||
| IS_EMPTY_PASSWORD: "비밀번호를 입력해 주세요.", | ||
| IS_EMPTY_REPASSWORD: "비밀번호 확인을 입력해 주세요.", | ||
| IS_MORE_THAN_EIGHT_PASSWORD: "비밀번호를 8자 이상 입력해주세요.", | ||
| IS_NOT_MATCH_PASSWORD: "비밀번호가 일치하지 않습니다.", | ||
| }; | ||
|
|
||
| export { ERROR_MESSAGE }; | ||
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,53 @@ | ||
| import { | ||
| validate, | ||
| resetErrorMessage, | ||
| changeButtonStatus, | ||
| } from "./common/validate.mjs"; | ||
| import { toggleInputType } from "./common/auth.mjs"; | ||
| import { authValidator } from "./common/validator.mjs"; | ||
| import { ERROR_MESSAGE } from "./constants/contants.mjs"; | ||
|
|
||
| const $emailInput = document.querySelector("#email"); | ||
| const $passwordInput = document.querySelector("#password"); | ||
| const $submitButton = document.querySelector(".auth-button"); | ||
| const $eyeIcon = document.querySelector(".eye"); | ||
|
|
||
| const checkEmptyInputElements = [$emailInput, $passwordInput]; | ||
|
|
||
| function onFocusoutEmail(e) { | ||
| resetErrorMessage(e); | ||
|
Collaborator
There was a problem hiding this comment. 같은 목적을 가진 코드는 모아두는 게 좋습니다! (응집도) 에러를 초기화 하는 코드라면 offInputError 쪾으로 가는 게 조금 더 나을 거 같습니다 :) |
||
| validate(e, { | ||
| validator: authValidator.isEmptyInput, | ||
| message: ERROR_MESSAGE.IS_EMPTY_EMAIL, | ||
| }); | ||
| validate(e, { | ||
| validator: authValidator.isWrongEmailFormat, | ||
| message: ERROR_MESSAGE.IS_WRONG_EMAIL_FORMAT, | ||
| }); | ||
|
|
||
| changeButtonStatus($submitButton, { checkEmptyInputElements }); | ||
|
Collaborator
There was a problem hiding this comment. 이벤트 버블링을 활용해보셔도 좋을 거 같습니다 :) |
||
| } | ||
|
|
||
| function onFocusoutPassword(e) { | ||
| resetErrorMessage(e); | ||
| validate(e, { | ||
| validator: authValidator.isEmptyInput, | ||
| message: ERROR_MESSAGE.IS_EMPTY_PASSWORD, | ||
| }); | ||
| validate(e, { | ||
| validator: authValidator.isMoreThanEight, | ||
| message: ERROR_MESSAGE.IS_MORE_THAN_EIGHT_PASSWORD, | ||
| }); | ||
|
|
||
| changeButtonStatus($submitButton, { checkEmptyInputElements }); | ||
| } | ||
|
|
||
| function onClickButton(e) { | ||
| e.preventDefault(); | ||
| location.href = "/items.html"; | ||
| } | ||
|
|
||
| $emailInput.addEventListener("focusout", onFocusoutEmail); | ||
| $passwordInput.addEventListener("focusout", onFocusoutPassword); | ||
| $eyeIcon.addEventListener("click", toggleInputType); | ||
| $submitButton.addEventListener("click", onClickButton); | ||
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.
함수명에서 에러 UI를 다루는 것을 표현하면 더욱 좋을 거 같아요!