회원가입, 로그인 창을 많이 만들어 본 것 같다. (내 기준 ..🤫)
그래서 이번 BOOKREST에서는 안 해봤던 기능도 추가해서 업그레이드된 버전으로 만들어보려고 노력했다.
전에는 항상 입력받는 폼만 만들었었는데 실제 서비스라 생각해보니 이용약관이 있는 게 더 좋을 것 같다는 생각이 들었다. 🤔🤔
이용약관 기본 내용을 구글링해 보니 내용이 다 나와 있었다.
회사 이름을 BOOKREST로 바꾸고 개인정보 항목을 BOOKREST에서 입력받는 것들로 바꾸어 사용했다.
<div class="signupBoxTool__signupBox__terms__title">
<h3>개인정보 수집 및 이용</h3>
</div>
<div class="signupBoxTool__signupBox__terms__summary">
<dl>
<dt>
시행일자: 2021년 08월 14일
</dt>
<br>
<dd>
BOOKREST(이하 "회사" 또는 "BOOKREST"이라고 함)은 통신비밀보호법, 전기통신사업법, 정보통신망 이용촉진 및 정보보호 등에 관한
법률 등 정보통신서비스제공자가 준수하여야 할 관련
법령상의 개인정보보호 규정을 준수하며, 관련 법령에 의거한 개인정보취급방침을 정하여 이용자 권익 보호에 최선을 다하고
있습니다.<br /><br />
본 개인정보취급방침은 다음과 같은 내용을 담고 있습니다.<br /><br />
</dd>
.signupBoxTool__signupBox__terms__summary {
height: 150px;
overflow: auto;
padding: 7px;
margin-bottom: 0;
}
html dl태그는 설명 목록을 나타낸다.
dl은 dt로 표기한 용어와 dd 요소로 표기한 설명 그룹의 목록을 감싸서 설명 목록을 생성해 이용약관을 쓸 때 이를 이용하였다.
css를 이용해 틀을 잡아주어 안에서 스크롤 되게 만들었다.
이렇게 완성이 되었다. 😉
이제 checkbox를 두어 이용약관 두개 모두 동의를 안할 시 넘어가지 못하도록 설정해보러 가자 👀
const termsCheckbox = (event) => {
event.preventDefault();
const agreement1 = document.querySelector(".js-agreement1");
const agreement2 = document.querySelector(".js-agreement2");
if (!agreement1.checked) {
window.alert("이용약관 이용동의는 필수입니다.");
} else if (!agreement2.checked) {
window.alert("개인정보의 수집 및 이용동의는 필수입니다.");
} else {
signupAnimate();
}
};
동의, 동의 안 함 버튼을 두었고 먼저, 첫 번째 이용약관 (agreement1)을 체크 안 했다면 alert로 경고 메시지가 뜨도록 설정하였고 두 번째 이용약관(agreement2)도 마찬가지로 alert를 설정하였다.
const onNoregisterClick = (event) => {
event.preventDefault();
if (window.confirm("회원가입을 취소하고 BOOKREST 첫 화면으로 돌아가시겠습니까?")) {
location.replace("/");
}
};
동의 안 함 버튼을 눌렀을 시에는 회원가입을 못 하도록 설정하였다.
replace() 메소드는 Location현재 리소스를 제공된 URL의 리소스로 바꾸는 기능을 한다.
replace()는 현재 페이지를 새로운 페이지로 덮어씌우기 때문에 이전 페이지로 이동이 불가능하다.
이렇게 해서 모든 이용약관을 동의 후 동의 버튼을 누르면 정보입력 폼이 나오게 된다.
회원가입에서 받을 정보
그냥 입력폼만 있는 건 BOOKREST랑 안어울려 ... 😣 양식을 두자 !
학부 / 전공은 select 태그로 총 네 개의 학부 중 하나를 선택하도록 (우리 학교 기준)
전화번호는 그냥 입력받을지 막대기(-) 할지 아직 고민중이다.
<div class="signupBoxTool__signupBox__form-control">
<div class="signupBoxTool__signupBox__form-control__title">
<span>이름</span>
</div>
<input type="text" class="name input" placeholder="Enter username" />
<small>Error message</small>
</div>
input 태그로 입력을 받는 곳을 두고 아래에 error message가 들어갈 곳을 만들어 준다.
.signupBoxTool__signupBox__form-control small {
font-size: 11px;
font-weight: 500;
bottom: 0;
left: 0;
visibility: hidden;
}
.signupBoxTool__signupBox__form-control.error small {
visibility: visible;
}
visible - 요소가 보이고, hidden - 요소가 숨겨진다 (그려지지 않음).
css를 이렇게 설정해두고 Javascript로 코드만 짜면 된다.
const loadName = () => {
if (name.value.length === 0) {
errorRed(name, `사용자 이름은 2자 이상이어야 합니다`);
} else if (name.value.length >= 2) {
successLight(name);
} else {
errorRed(name, `사용자 이름은 2자 이상이어야 합니다`);
}
};
const signInit = () => {
name.addEventListener("input", loadName);
email.addEventListener("input", checkEmail);
password.addEventListener("input", checkPassword);
studentID.addEventListener("input", checkstudentID);
checkbox.addEventListener("change", handleCheckboxForm);
signupForm.addEventListener("submit", (e) => {
e.preventDefault();
checkPassword(password, 1, 6);
loadName();
checkEmail(email);
checkstudentID(studentID);
handleCheckboxForm();
});
};
signInit();
양식이 많아 이름만 기록해야겠다..
먼저 등록 버튼을 누를시 (submit) 아래 함수들이 실행되게 설정하였고 또한 input 창에 내용을 적을 때 위와 같은 함수가 실행되도록 하였다.
loadName 함수는 사용자가 입력한 길이가 0일 경우 아래와 같은 error메시지가 뜨도록 하였다.
``은 "백틱(backtick)" 이라고 하는데 자세한 내용은 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals 을 참고하면 좋을 것 같다.
사용자가 입력한 길이가 2 이상일 경우 successLight라는 함수를 실행하는데 successLight 함수는 아래와 같이 error를 classList에서 빼주는 기능이다. 즉 양식에 맞아 에러 메시지가 안 뜨도록 한 것이다.
const successLight = (input) => {
const formControl = input.parentElement;
formControl.classList.remove("error");
};
const checkEmail = () => {
const emailRule =
/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (emailRule.test(email.value.trim())) {
successLight(email);
} else {
errorRed(email, `이메일이 유효하지 않습니다`);
}
};
이메일 정규표현식은 구글링해보면 쉽게 나온다.
나중에 시간이 된다면 나머지 함수들도 적어보도록 하겠다.
에러 메시지가 안 떴을 때
아무것도 안 쓰고 등록 버튼을 눌렀을 때
실행해보면 input창에 정보양식에 맞게 입력하면 해당 오류 메시지가 사라진다.
이번 회원가입 개발을 통해 checkbox의 체크 여부를 확인할 때 checked라는 속성을 사용한 것, 매개변수를 받았는지 안 받았는지, 세미콜론 항상 주의하기, 변수명 카멜케이스로 동사형으로 지었는지 등등을 생각하며 Javascript 코드를 짜는 데 도움이 되었다.
구글링을 통해 다양한 속성들을 배울 수 있었고 코드를 보고 이해하면서 기능을 만들어 나가는 게 어렵고 시간도 걸렸지만, 결과물을 보니 뿌듯했고 뭘 더 배워야 하는지 느끼게 되었다.
다음에 회원가입 폼을 만들게 된다면 무엇을 해볼까 🤔😊
항상 배우고 노력하는 자세가 너무 좋네요 !! 저도 자극 받고 갑니다 🔥🔥🔥🔥🔥
좋은 정보 감사해용 ~~~