Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[하신혜] Sprint 3 #45

Open
wants to merge 1 commit into
base: basic-하신혜
Choose a base branch
from
Open

[하신혜] Sprint 3 #45

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions 스프린트미션_1&2_하신혜/3-sprint-mission-fe
Open in desktop
Submodule 3-sprint-mission-fe added at fd5801
2 changes: 1 addition & 1 deletion 스프린트미션_1&2_하신혜/스프린트 미션_1&2_하신혜/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Expand Down
8 changes: 0 additions & 8 deletions 스프린트미션_1&2_하신혜/스프린트 미션_1&2_하신혜/join.js
View file
Open in desktop

This file was deleted.

23 changes: 18 additions & 5 deletions 스프린트미션_1&2_하신혜/스프린트 미션_1&2_하신혜/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="kr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Expand All @@ -19,19 +19,21 @@
<div class="input-group1">
<div class="putemail">
<input type="email" id="email" placeholder="이메일을 입력해주세요" required>
<span class="error-message-mail" id="emailError"></span>
</div>
</div>
<div class="tinyhead">비밀번호</div>
<div class="input-group2">
<input type="password" id="password" placeholder="비밀번호를 입력해주세요" required>
<span class="error-message-password" id="passwordError"></span>
<button type="button" class="toggle-password"> <img src="btn_visibility_on_24px.png" alt="토글패스워드">
</button>
</div>

<button type="submit" class="login-btn">로그인</button>
</div>

<button type="submit" class="login-btn" disabled>로그인</button>
<div class="easylogin">

</div>

<div class="social-login">
Expand All @@ -43,11 +45,22 @@

</div>



<p class="signup-link">
판다마켓 처음이신가요? <a href="join.html">회원가입</a>
판다마켓 처음이신가요? <a href="register.html">회원가입</a>
</p>
</form>
</div>
<div id="modal" class="modal">
<div class="modal-content">
<p id="modalMessage" class="modalmessage">모달 내용</p>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

클래스 이름은 하이픈 인데 id는 카멜 케이스인 이유가 있을까요? 그리고 id 를 사용하신 이유가 유일 요소로 사용하기 위해서가 맞을까요? css 를 적용을 위해서라면 범용으로 적용할 방법은 없는지 고민해 보시는 것도 좋을 것 같습니다

<div class="modal-footer">
<button class="close-modal-btn">확인</button>
</div>
</div>
</div>


<script src="login.js"></script>
</body>
Expand Down
171 changes: 171 additions & 0 deletions 스프린트미션_1&2_하신혜/스프린트 미션_1&2_하신혜/login.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,178 @@
//비밀번호 토글 버튼
document.querySelector('.toggle-password').addEventListener('click', function () {
const passwordInput = document.getElementById('password');
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);

this.querySelector('img').alt = type === 'password' ? '토글패스워드' : '비밀번호 숨기기';
});

//이메일 입력 칸
document.getElementById('email').addEventListener('focusout', function() {
const emailInput = document.getElementById('email');
const errorMessage = document.getElementById('emailError');
const emailValue = emailInput.value.trim();
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

if (emailValue === "") {
emailInput.classList.add('error');
errorMessage.textContent = '이메일을 입력해주세요.';
errorMessage.style.visibility = 'visible';
} else if (!emailPattern.test(emailValue)) {
emailInput.classList.add('error');
errorMessage.textContent = '잘못된 이메일 형식입니다.';
errorMessage.style.visibility = 'visible';
} else {
emailInput.classList.remove('error');
errorMessage.style.visibility = 'hidden';
}
});

//비밀번호 입력 칸
document.getElementById('password').addEventListener('focusout', function() {
const passwordInput = document.getElementById('password');
const errorMessage = document.getElementById('passwordError');
const passwordValue = passwordInput.value.trim();

// 비밀번호의 최소 길이를 검사 (8자 이상)
if (passwordValue === "") {
passwordInput.classList.add('error');
errorMessage.textContent = '비밀번호를 입력해주세요.';
errorMessage.style.visibility = 'visible';
} else if (passwordValue.length < 8) {
passwordInput.classList.add('error');
errorMessage.textContent = '비밀번호를 8자 이상 입력해주세요.';
errorMessage.style.visibility = 'visible';
} else {
passwordInput.classList.remove('error');
errorMessage.style.visibility = 'hidden';
}
});

function validateForm() {
const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const loginButton = document.querySelector('.login-btn');

const emailValue = emailInput.value.trim();
const passwordValue = passwordInput.value.trim();

const emailError = document.getElementById('emailError');
const passwordError = document.getElementById('passwordError');

const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

사소한 정보를 전달드리자면 정규 표현식은 정규 표현식이라 바로 알 수 있도록 regex 를 붙여주시면 좋습니다.


let isValid = true;

// 이메일 유효성 검사
if (emailValue === "") {
emailInput.classList.add('error');
emailError.textContent = '이메일을 입력해주세요.';
emailError.style.visibility = 'visible';
isValid = false;
} else if (!emailPattern.test(emailValue)) {
emailInput.classList.add('error');
emailError.textContent = '잘못된 이메일 형식입니다.';
emailError.style.visibility = 'visible';
isValid = false;
} else {
emailInput.classList.remove('error');
emailError.style.visibility = 'hidden';
}

// 비밀번호 유효성 검사
if (passwordValue === "") {
passwordInput.classList.add('error');
passwordError.textContent = '비밀번호를 입력해주세요.';
passwordError.style.visibility = 'visible';
isValid = false;
} else if (passwordValue.length < 8) {
passwordInput.classList.add('error');
passwordError.textContent = '비밀번호를 8자 이상 입력해주세요.';
passwordError.style.visibility = 'visible';
isValid = false;
} else {
passwordInput.classList.remove('error');
passwordError.style.visibility = 'hidden';
}
Comment on lines +67 to +97
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

보시면 이메일, 패스워드 정보를 가져와서 검사를 합니다.
이 때 validateForm 내부에서는 이메일인지, 비밀번호인지 구분하지 않고 한 번에 모두 검사를 진행하고 있습니다.
이는 예측하지 못한 결과를 불러올 수 있습니다. 예컨데 비밀번호 검수를 진행하려고 했는데 이메일 검사 로직을 같이 진행해서 이메일 관련한 오류 문구가 뜰 수 도 있습니다.
이는 공통 로직이 아니기 때문에 분리가 필요한 사안입니다. 개발의 컨셉과 디자인 패턴마다 다르지만 기본적으로 함수는 하나의 일만 하는 걸로 생각하고 코드를 작성해 보시는 연습을 해 보시면 좋을 것 같습니다.
아래는 참고 자료입니다.


// 로그인 버튼 활성화/비활성화
loginButton.disabled = !isValid;
}

// 이메일과 비밀번호 입력 필드에서 입력할 때마다 유효성 검사를 호출
document.getElementById('email').addEventListener('input', validateForm);
document.getElementById('password').addEventListener('input', validateForm);

// focusout 이벤트 시에도 유효성 검사 호출
document.getElementById('email').addEventListener('focusout', validateForm);
document.getElementById('password').addEventListener('focusout', validateForm);

// 로그인 버튼 클릭 이벤트 추가
document.querySelector('.login-btn').addEventListener('click', function() {
const loginButton = document.querySelector('.login-btn'); // 클래스 선택자로 변경

// 버튼이 활성화되어 있을 때만 이동
if (!loginButton.disabled) {
window.location.href = '/items'; // '/items'로 페이지 이동
}
});


// 유저 데이터베이스 (이미 존재하는 이메일과 비밀번호)
const USER_DATA = [
{ email: '[email protected]', password: 'codeit101!' },
{ email: '[email protected]', password: 'codeit202!' },
{ email: '[email protected]', password: 'codeit303!' },
{ email: '[email protected]', password: 'codeit404!' },
{ email: '[email protected]', password: 'codeit505!' },
{ email: '[email protected]', password: 'codeit606!' }
];
Comment on lines +123 to +130
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

다음에는 상수는 별도의 파일로 분리해서 사용해 보시는 걸 추천드립니다.


// 로그인 처리 함수
function handleLogin() {
const emailInput = document.getElementById('email').value.trim();
const passwordInput = document.getElementById('password').value.trim();

// 유저 데이터베이스에서 이메일과 비밀번호 찾기
const user = USER_DATA.find(user => user.email === emailInput);

if (!user) {
// 이메일이 데이터베이스에 없는 경우
openModal('비밀번호가 일치하지 않습니다.');
} else if (user.password !== passwordInput) {
// 이메일은 있지만 비밀번호가 틀린 경우
openModal('비밀번호가 일치하지 않습니다.');
} else {
// 이메일과 비밀번호가 모두 일치하는 경우
window.location.href = '/login'; // 페이지 이동
}
}
// 모달 요소 가져오기
const modal = document.getElementById('modal');
const modalMessage = document.getElementById('modalMessage');
const closeModalButton = document.querySelector('.close-modal-btn');

// 모달 열기 함수
function openModal(message) {
modalMessage.textContent = message;
modal.style.display = 'block'; // 모달을 보이게 설정
}
Comment on lines +157 to +160
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

모달의 경우 잘 구현하신것 같습니다. 최근에는 dialog 라는 html 태그가 있어 더욱 쉽게 모달을 구현할 수 있는 방법이 있으니 참고해 보시면 좋을 것 같습니다


// 모달 닫기 함수 (확인 버튼 클릭 시)
closeModalButton.addEventListener('click', function () {
modal.style.display = 'none';
});

// 배경 클릭으로 모달 닫기
window.addEventListener('click', function (event) {
if (event.target === modal) {
modal.style.display = 'none';
}
});




// 로그인 버튼 클릭 시 실행
document.querySelector('.login-btn').addEventListener('click', handleLogin);
Loading