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

[나승엽] sprint4 #64

Merged
merged 2 commits into from
Sep 3, 2024
Merged

[나승엽] sprint4 #64

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
393a4bf
로그인&회원가입페이지 반응형 적용
naseungyeop Aug 30, 2024
2960558
스프린트미션4 에러메시지넣기
naseungyeop Aug 31, 2024
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 index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓</title>
<link rel="stylesheet" href="스프린트미션.css" />
<link rel="stylesheet" href="반응형디자인적용.css" />
</head>
<body>
<header>
Expand Down
12 changes: 11 additions & 1 deletion login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>로그인</title>
<link rel="stylesheet" href="로그인&회원가입.css" />
<link rel="stylesheet" href="로그인&회원가입반응형.css" />
</head>
<body id="body">
<header id="main_header">
Expand All @@ -15,13 +16,21 @@
</header>
<main id="content">
<label class="label">이메일</label>
<input type="email" class="input" placeholder="이메일을 입력해주세요" />
<input
id="email"
type="email"
class="input"
placeholder="이메일을 입력해주세요"
/>
<p id="error_email" class="error_message"></p>
<label class="label">비밀번호</label>
<input
id="password"
type="password"
class="input"
placeholder="비밀번호를 입력해주세요"
/>
<p id="error_password" class="error_message"></p>
<div id="login_box">로그인</div>
<div id="nav_footer_box">
<p id="nav_footer_p"><b>간편 로그인하기</b></p>
Expand All @@ -36,5 +45,6 @@
<footer id="footer">
판다마켓이 처음이신가요? <a href="sign_up.html" id="gaip">회원가입</a>
</footer>
<script src="로그인&회원가입.js"></script>
Copy link
Collaborator

Choose a reason for hiding this comment

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

P2:
HTML 문서 다운로드 후 JS가 다운로드 되게 하단에 배치하신 것 같은데

하단에 배치된 스크립트는 구문분석 순서상 추후에 다운로드 되게 만들어주지만 일반적으로 스크립트 태그가 위치되는 head 요소가 아니므로 가독성 측면에서 단점이 있고 이러한 동작은 스크립트 자체 속성을 통해 이끌어 낼 수 있으므로 script async, defer 속성 사용을 추천드립니다.

https://developer.mozilla.org/ko/docs/Web/HTML/Element/script#defer
https://ko.javascript.info/script-async-defer

</body>
</html>
10 changes: 9 additions & 1 deletion sign_up.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>회원가입</title>
<link rel="stylesheet" href="로그인&회원가입.css" />
<link rel="stylesheet" href="로그인&회원가입반응형.css" />
</head>
<body id="body">
<header id="main_header">
Expand All @@ -15,21 +16,27 @@
</header>
<main id="content">
<label class="label">이메일</label>
<input type="email" class="input" placeholder="이메일을 입력해주세요" />
<input id="email" class="input" placeholder="이메일을 입력해주세요" />
<p id="error_email" class="error_message"></p>
<label class="label">닉네임</label>
<input type="text" class="input" placeholder="닉네임을 입력해주세요" />
<label class="label">비밀번호</label>
<input
id="password"
type="password"
class="input"
placeholder="비밀번호를 입력해주세요"
/>
<p id="error_password" class="error_message"></p>
<label class="label">비밀번호 확인</label>
<input
id="verifypassword"
type="password"
class="input"
placeholder="비밀번호를 다시 한 번 입력해주세요"
/>
<p id="error_verifypassword" class="error_message"></p>

<div id="login_box">회원가입</div>
<div id="nav_footer_box">
<p id="nav_footer_p"><b>간편 로그인하기</b></p>
Expand All @@ -45,4 +52,5 @@
판다마켓이 처음이신가요? <a href="login.html" id="gaip">로그인</a>
</footer>
</body>
<script src="로그인&회원가입.js"></script>
</html>
16 changes: 16 additions & 0 deletions 로그인&회원가입.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
color: #f3f4f6;
font-size: 20px;
line-height: 32px;
cursor: pointer;
}
#nav_footer_box {
display: flex;
Expand Down Expand Up @@ -102,3 +103,18 @@
#gaip {
color: #3692ff;
}
.error_message {
color: #f74747;
font-size: 14px;
margin-bottom: 10px;
margin-left: 10px;
}

.input-error {
border: 1px solid #f74747;
}

#login_box.disable {
background-color: gray;
pointer-events: none;
}
105 changes: 105 additions & 0 deletions 로그인&회원가입.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
document.addEventListener("DOMContentLoaded", function () {
const emailInput = document.getElementById("email");
const passwordInput = document.getElementById("password");
const verifypasswordInput = document.getElementById("verifypassword");
const loginButton = document.getElementById("login_box");

const emailError = document.getElementById("error_email");
Copy link
Collaborator

Choose a reason for hiding this comment

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

P2:
해당 변수는 errorMessage가 들어갈 요소이니 해당 변수의 타입이 잘보이도록 아래와 같은 이름이면 더 좋을 것 같습니다.

Suggested change
const emailError = document.getElementById("error_email");
const emailErrorContainer = document.getElementById("error_email");
const emailErrorElement = document.getElementById("error_email");

const passwordError = document.getElementById("error_password");
const verifypasswordError = document.getElementById("error_verifypassword");

// 이메일검증 이벤트
if (emailInput) {
emailInput.addEventListener("focusout", function () {
const emilStatus = emailInput.value.trim();
Copy link
Collaborator

Choose a reason for hiding this comment

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

P2:
emailStatus 라는 이름이 email input의 value를 나타내는지 잘 모르겠습니다.
아래와 같은 이름을 추천드립니다.

Suggested change
const emilStatus = emailInput.value.trim();
const emailValue = emailInput.value.trim();

if (emilStatus === "") {
showError(emailInput, emailError, "이메일을 입력해주세요.");
} else if (!emailValidate(emilStatus)) {
showError(emailInput, emailError, "잘못된 이메일 형식입니다.");
} else {
hideError(emailInput, emailError);
}
transLoginButton();
});
}
// 비밀번호 검증 이벤트
if (passwordInput) {
passwordInput.addEventListener("focusout", function () {
const passwordStatus = passwordInput.value.trim();
if (passwordStatus === "") {
showError(passwordInput, passwordError, "비밀번호를 입력해주세요.");
} else if (passwordStatus.length < 8) {
showError(
passwordInput,
passwordError,
"비밀번호를 8자리 이상으로 입력해주세요."
);
} else {
hideError(passwordInput, passwordError);
}
transLoginButton();
});
}
// 비밀번호 확인 검증 이벤트
if (verifypasswordInput) {
verifypasswordInput.addEventListener("focusout", function () {
const verifypasswordStatus = verifypasswordInput.value.trim();
Copy link
Collaborator

Choose a reason for hiding this comment

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

P1:

Suggested change
const verifypasswordStatus = verifypasswordInput.value.trim();
const verifyPasswordStatus = verifypasswordInput.value.trim();

const passwordStatus = passwordInput.value.trim();

if (verifypasswordStatus.length < 8) {
showError(
verifypasswordInput,
verifypasswordError,
"비밀번호를 8자리 이상으로 입력해주세요."
Copy link
Collaborator

Choose a reason for hiding this comment

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

P2:
에러 메시지가 반복사용되니 변수로 저장해두고 사용해도 좋을 것 같습니다.

);
} else if (verifypasswordStatus !== passwordStatus) {
showError(
verifypasswordInput,
verifypasswordError,
"비밀번호가 일치하지 않습니다."
);
} else {
hideError(verifypasswordInput, verifypasswordError);
}
transLoginButton();
});
}
// 로그인버튼 활성/비활성
function transLoginButton() {
const emilStatus = emailInput.value.trim();
const passwordStatus = passwordInput.value.trim();
const verifypasswordStatus = verifypasswordInput.value.trim();
if (
emilStatus !== "" &&
emailValidate(emilStatus) &&
passwordStatus !== "" &&
passwordStatus.length >= 8 &&
verifypasswordStatus === passwordStatus
) {
loginButton.classList.remove("disabled");
Comment on lines +72 to +79
Copy link
Collaborator

Choose a reason for hiding this comment

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

P3:
이렇게 if 문의 조건이 길때는 해당 조건을 변수에 저장하시면 조금 더 가독성에 좋습니다.

Suggested change
if (
emilStatus !== "" &&
emailValidate(emilStatus) &&
passwordStatus !== "" &&
passwordStatus.length >= 8 &&
verifypasswordStatus === passwordStatus
) {
loginButton.classList.remove("disabled");
const isValidForm = emilStatus !== "" &&
emailValidate(emilStatus) &&
passwordStatus !== "" &&
passwordStatus.length >= 8 &&
verifypasswordStatus === passwordStatus;
if ( isValidForm ) {
loginButton.classList.remove("disabled");

} else {
loginButton.classList.add("disabled");
}
}
// 이메일 형식 검증
function emailValidate(email) {
const re = /^[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.

P2:
어떤 값인지 알 수 있는 이름으로 해주세요~

Suggested change
const re = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
const regex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

return re.test(email);
}
// 에러 표시
function showError(input, errorElement, message) {
input.classList.add("input-error");
errorElement.textContent = message;
errorElement.style.visibility = "visible";
}
// 에러 숨김
function hideError(input, errorElement) {
input.classList.remove("input-error");
errorElement.style.visibility = "hidden";
}

document.getElementById("login_box").addEventListener("click", function () {
if (!loginButton.classList.contains("disabled"))
window.location.href = "/items";
});
});
6 changes: 6 additions & 0 deletions 로그인&회원가입반응형.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
@media (max-width: 767px) {
#content {
width: 100%;
margin: 0 16px;
}
}
33 changes: 33 additions & 0 deletions 반응형디자인적용.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/* PC: 1200px 이상 */
@media (min-width: 1200px) {
}
Comment on lines +1 to +3
Copy link
Collaborator

Choose a reason for hiding this comment

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

P2:
안쓰는 코드는 가독성에 좋지 않습니다.
가능하면 지워주세요.

Suggested change
/* PC: 1200px 이상 */
@media (min-width: 1200px) {
}


/* Tablet: 768px 이상 ~ 1199px 이하 */
@media (min-width: 768px) and (max-width: 1199px) {
#panda {
position: relative;
left: 24px;
}
.login {
position: relative;
right: 24px;
}
footer {
gap: 15px;
}
}

/* Mobile: 375px 이상 ~ 767px 이하 */
@media (min-width: 375px) and (max-width: 767px) {
#panda {
position: relative;
left: 16px;
}
.login {
position: relative;
right: 16px;
}
footer {
gap: 10px;
}
}
Loading