.gif&blockId=743d12a5-f17c-4b91-a76d-8a3aa6fd4c06)
3.1.2 로그인
•
로그인은 로그인 메인 화면과 이메일 로그인 화면으로 나눠져 있습니다.
•
SNS(카카오톡, 구글, 페이스북) 로그인은 구현하지 않으며, 화면에 버튼만 배치하도록 합니다.
•
로그인 메인 화면에서 이메일로 로그인 을 클릭하면 이메일로 로그인할 수 있는 화면으로 이동합니다.
•
이메일과 비밀번호를 모두 입력하면 다음 버튼이 활성화 됩니다. 입력되지 않은 입력창이 있다면 버튼은 활성되지 않습니다.
•
로그인 버튼을 클릭하면 이메일 주소와 로그인에 대한 유효성 검사를 진행하며, 이메일 주소 또는 비밀번호가 일치하지 않을 경우에는 경고 문구가 나타납니다.
•
입력창에 focus 될 경우에는 선의 색이 변합니다.(회색, #DBDBDB → 주황색, #F26E22)
3.1.3 회원가입
•
로그인 메인 화면에서 회원가입 을 누르거나 이메일 로그인 화면에서 이메일로 회원가입 을 누르면 회원가입 화면이 나타납니다.
•
회원가입 페이지에서는 유효성 검사가 로그인 페이지와 조금 다르게 진행됩니다.
•
이메일 주소 또는 비밀번호를 입력하고 입력창에서 포커스를 잃으면 바로 유효성 검사가 진행되고 통과하지 못한 경우 경고 문구가 각 입력창 하단에 표시됩니다.
•
이메일 주소의 형식이 유효하지 않거나 이미 가입된 이메일일 경우, 또는 비밀번호가 6자 미만일 경우에는 각 입력창 하단에 경구 문구가 나타납니다.
•
입력창에 focus 될 경우에는 선의 색이 변합니다.(회색 #DBDBDB → 주황색 #F26E22)
•
작성이 완료된 후, 유효성 검사를 통과할 경우 다음 버튼이 활성화되며, 버튼을 클릭하면 프로필 설정 폼이 나타납니다.
•
프로필 설정에 필요한 프로필 사진, 사용자 이름(2~10자 이내), 계정 ID, 소개를 입력받습니다.
◦
프로필 사진은 등록하지 않을 경우 기본 이미지가 등록되게 합니다.
◦
사용자 이름과 소개는 다른 사용자와 중복될 수 있습니다.
◦
계정 ID는 중복이 불가합니다.
◦
프로필 설정에서도 같은 방식으로 유효성 검사가 진행됩니다. 계정 ID에 대한 중복 유무와 형식을 검사합니다.
1. form 유효성 검사
로그인 페이지
1.
이메일 주소와 로그인에 대한 유효성 검사를 진행
2.
진행 시점 : 로그인 버튼을 클릭했을 때 진행
3.
다음 버튼 활성화
•
이메일과 비밀번호를 모두 입력하면 다음 버튼이 활성화 됩니다.
•
입력되지 않은 입력창이 있다면 버튼은 활성되지 않습니다.
회원가입 페이지
1.
이메일 주소의 형식이 유효하지 않거나 이미 가입된 이메일일 경우, 또는 비밀번호가 6자 미만일 경우에는 각 입력창 하단에 경구 문구가 나타납니다.
2.
진행 시점 : 입력창에서 포커스를 잃으면 바로 유효성 검사가 진행되고 통과하지 못한 경우 경고 문구가 각 입력창 하단에 표시됩니다.
3.
다음 버튼 활성화
•
작성이 완료된 후, 유효성 검사를 통과할 경우 다음 버튼이 활성화되며,
•
다음 버튼을 클릭하면 프로필 설정 폼이 나타납니다.
2. 로그아웃 기능 구현
3. UI 구현
1.
SNS(카카오톡, 구글, 페이스북) 로그인은 구현하지 않으며, 화면에 버튼만 배치
•
로그인 메인 화면에서 이메일로 로그인 을 클릭하면 이메일로 로그인할 수 있는 화면으로 이동합니다.
•
로그인 메인 화면에서 회원가입 을 누르거나 이메일 로그인 화면에서 이메일로 회원가입 을 누르면 회원가입 화면이 나타납니다.
2.
입력창에 focus된 경우 선의 색이 변하도록
•
(회색 #DBDBDB → 주황색 #F26E22)
유효성 검사 참고(수업시간에 한 내용)
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>validation 메시지 조작</title>
<style>
label, input{
display: block;
}
</style>
</head>
<body>
<!-- 사용자가 입력한 비밀번호를 벨리데이션하는 폼을 만들어 봅시다.
input은 비밀번호, 비밀번호 확인 두 가지가 있어야하며
이때 만약
1. input에 아무것도 입력하지 않았거나
2. 비밀번호 input과 비밀번호 확인 input의 값이 동일하지 않거나,
3. 비밀번호의 패턴이 정규표현식과 일치하지 않은 경우
에러메시지를 출력하도록 만들어보세요 -->
<form>
<label for="pw">비밀번호 입력</label>
<input type="password" id="pw" pattern="(?=.*[!@#$%^&*()_+=-])(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}" required>
<label for="checkPw">비밀번호 확인</label>
<input type="password" id="checkPw" pattern="(?=.*[!@#$%^&*()_+=-])(?=.*[a-z])(?=.*[A-Z])(?=.*[a-zA-Z]).{8,}" required>
<button>제출</button>
</form>
<script>
const btn = document.querySelector('button')
const pw = document.querySelector('#pw')
const inps = document.querySelectorAll('input')
btn.addEventListener('click', ()=>{
inps.forEach(item =>{
validate(item);
});
})
function validate(target){
// 1. input에 아무것도 입력하지 않았거나
if (target.validity.valueMissing){
target.setCustomValidity('값을 입력해주세요.')
}
// 2. 비밀번호 input과 비밀번호 확인 input의 값이 동일하지 않거나,
else if (target.id =='checkPw'){
if (pw.value !== target.value){
target.setCustomValidity('비밀번호가 일치하지 않습니다. 동일한 비밀번호를 입력해주세요.')
}
else {
target.setCustomValidity('')
}
}
// 3. 비밀번호의 패턴이 정규표현식과 일치하지 않은 경우
else if (target.validity.patternMismatch){
target.setCustomValidity('대문자나 특수기호를 하나 이상 포함하는 비밀번호를 8글자 이상 입력해주세요')
}
else {
target.setCustomValidity('')
}
}
</script>
</body>
</html>
JavaScript
복사
