[김승민] Sprint4 #54
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,44 @@ | ||
| import { showInputError, hideInputError, regEmail } from "/sign.js"; | ||
|
|
||
| const email = document.querySelector('#email'); | ||
| const password = document.querySelector('#password'); | ||
| const showPassword = document.querySelector('.show-password'); | ||
|
|
||
| email.addEventListener('focusout', (e) => { | ||
| const value = e.target.value; | ||
|
|
||
| if (!value) { showInputError('email', '이메일을 입력해주세요'); } | ||
|
Collaborator
There was a problem hiding this comment. 이왕 분리하신 거 공통으로 사용되는 유효성 검사, 메세지 등도 따로 관리해 보시는 것도 좋겠네요 🤣 (참고만 해주세요!) |
||
| else if (!regEmail.test(value)){ showInputError('email', '잘못된 이메일 형식입니다'); } | ||
| else { hideInputError('email'); }; | ||
| }); | ||
|
|
||
| password.addEventListener('focusout', (e) => { | ||
| const value = e.target.value; | ||
|
|
||
| if (!value) { showInputError('password', '비밀번호를 입력해주세요'); } | ||
| else if (value.length < 8){ showInputError('password', '비밀번호를 8자 이상 입력해주세요'); } | ||
| else { hideInputError('password'); }; | ||
| }); | ||
|
|
||
| showPassword.addEventListener('mousedown', (e) => { | ||
| const sibling = e.target.previousElementSibling; | ||
| e.target.classList.remove('password-hide'); | ||
| sibling.type = 'text'; | ||
| }); | ||
|
|
||
| showPassword.addEventListener('mouseup', (e) => { | ||
| const sibling = e.target.previousElementSibling; | ||
| e.target.classList.add('password-hide'); | ||
| sibling.type = 'password'; | ||
| }); | ||
|
|
||
| showPassword.addEventListener('mouseleave', (e) => { | ||
| const sibling = e.target.previousElementSibling; | ||
| e.target.classList.add('password-hide'); | ||
| sibling.type = 'password'; | ||
| }); | ||
|
|
||
| document.querySelector('.sign-form').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 |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| const errorClass = 'sign-form__input--error'; | ||
|
Collaborator
There was a problem hiding this comment. 상수는 보통 대문자를 사용합니다! const ERROR_CLASS = 'sign-form__input--error'; |
||
| export const regEmail = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*\.[a-zA-Z]{2,3}$/i; | ||
|
|
||
|
|
||
| export function showInputError(id, text) { | ||
| const input = document.querySelector(`#${id}`); | ||
| const inputMsg = document.querySelector(`#msg-${id}`); | ||
|
|
||
| input.classList.add(errorClass); | ||
| inputMsg.classList.remove('hide'); | ||
| inputMsg.innerHTML = text; | ||
|
|
||
| checkValidity(); | ||
|
Collaborator
There was a problem hiding this comment. 언제나 그럴 수는 없지만 함수는 단일 책임을 가지는 것이 좋습니다~! 또한 이름을 명확하게 지어주는 것이 좋아요. 지금은 충분히 잘하셨고 간단한 코드라 괜찮습니다 :) 참고만 해주세요~! |
||
| } | ||
|
|
||
| export function hideInputError(id) { | ||
| const input = document.querySelector(`#${id}`); | ||
| const inputMsg = document.querySelector(`#msg-${id}`); | ||
|
|
||
| input.classList.remove(errorClass); | ||
| inputMsg.classList.add('hide'); | ||
|
|
||
| checkValidity(); | ||
| } | ||
|
|
||
| function checkValidity() { | ||
| const confirm = document.querySelector('#submit'); | ||
| let empty = false; | ||
| document.querySelectorAll(`.sign-form__input`).forEach((input) => { | ||
| if (!input.value) { empty = true; }; | ||
| }); | ||
| confirm.disabled = empty || (document.querySelectorAll(`.${errorClass}`).length > 0); | ||
| } | ||
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,69 @@ | ||
| import { showInputError, hideInputError, regEmail } from "/sign.js"; | ||
|
|
||
| const email = document.querySelector('#email'); | ||
| const password = document.querySelector('#password'); | ||
| const confirmPassword = document.querySelector('#confirm-password'); | ||
| const showPasswords = document.querySelectorAll('.show-password'); | ||
| const nickname = document.querySelector('#nickname'); | ||
|
|
||
| email.addEventListener('focusout', (e) => { | ||
| const value = e.target.value; | ||
|
|
||
| if (!value) { showInputError('email', '이메일을 입력해주세요'); } | ||
| else if (!regEmail.test(value)){ showInputError('email', '잘못된 이메일 형식입니다'); } | ||
| else { hideInputError('email'); }; | ||
| }); | ||
|
|
||
| nickname.addEventListener('focusout', (e) => { | ||
| const value = e.target.value; | ||
|
|
||
| if (!value) { showInputError('nickname', '닉네임을 입력해주세요'); } | ||
| else { hideInputError('nickname'); }; | ||
| }); | ||
|
|
||
| password.addEventListener('focusout', (e) => { | ||
| const value = e.target.value; | ||
|
|
||
| if (!value) { showInputError('password', '비밀번호를 입력해주세요'); } | ||
| else if (value.length < 8){ showInputError('password', '비밀번호를 8자 이상 입력해주세요'); } | ||
| else { hideInputError('password'); }; | ||
|
|
||
| //Check confirm password again | ||
| if ((value != confirmPassword.value) && (document.querySelector('.activated'))) { showInputError('confirm-password', '비밀번호가 일치하지 않습니다'); } | ||
| else { hideInputError('confirm-password'); }; | ||
| }); | ||
|
|
||
| showPasswords.forEach((showPassword) => { | ||
| showPassword.addEventListener('mousedown', (e) => { | ||
| const sibling = e.target.previousElementSibling; | ||
| e.target.classList.remove('password-hide'); | ||
| sibling.type = 'text'; | ||
| }); | ||
|
|
||
| showPassword.addEventListener('mouseup', (e) => { | ||
| const sibling = e.target.previousElementSibling; | ||
| e.target.classList.add('password-hide'); | ||
| sibling.type = 'password'; | ||
| }); | ||
|
|
||
| showPassword.addEventListener('mouseleave', (e) => { | ||
| const sibling = e.target.previousElementSibling; | ||
| e.target.classList.add('password-hide'); | ||
| sibling.type = 'password'; | ||
| }); | ||
| }); | ||
|
|
||
| confirmPassword.addEventListener('focusout', (e) => { | ||
| const value = e.target.value; | ||
| e.target.classList.add('activated'); | ||
|
|
||
|
|
||
| if (value != password.value) { showInputError('confirm-password', '비밀번호가 일치하지 않습니다'); } | ||
| else { hideInputError('confirm-password'); }; | ||
| }); | ||
|
|
||
| document.querySelector('.sign-form').addEventListener('submit', (e) => { | ||
| e.preventDefault(); | ||
|
|
||
| //회원가입을 끝냈는데 다시 회원가입으로 가는 게 이상해서 로그인으로 변경했습니다. | ||
| window.location.href = '/login.html'; | ||
| }); | ||
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.
혹시나 싶어 남겨드립니다!
절대 경로 말씀드렸던 것은 og:url 부분이었습니다 🤣
해당 부분은 유저가 공유 카드를 클릭했을 때 이동할 url 입니다. 배포를 아직 안 하셨다면 안 넣으셔도 돼요! 참고만 해주세요 :)