Skip to content

[맹은빈]Sprint4 #146

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

Merged
GANGYIKIM merged 7 commits into from
Mar 27, 2025
Merged

[맹은빈]Sprint4 #146

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
6164c0b
login , signup html수정 / 로그인검증,회원가입검증 js파일 초안
evaain706 Mar 21, 2025
26a0490
에러border css수정/ 비밀번호 아이콘 변경js
evaain706 Mar 22, 2025
e935a30
수정사항 적용
evaain706 Mar 22, 2025
74237f4
메타태그 수정
evaain706 Mar 22, 2025
977643c
메타태그 수정
evaain706 Mar 22, 2025
76c748f
css 수정
evaain706 Mar 22, 2025
1c871fb
url수정
evaain706 Mar 22, 2025
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
Binary file added images/icons/eyeOpen.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
36 changes: 34 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,43 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- HTML Meta Tags -->
<title>판다마켓</title>
<meta name="description" content="일상의 모든 물건을 거래해보세요" />

<!-- Facebook Meta Tags -->
<meta
property="og:url"
content="https://bespoke-sfogliatella-a26ba3.netlify.app/"
/>
<meta property="og:type" content="website" />
<meta property="og:title" content="판다마켓" />
<meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
<meta property="og:image" content="images\metaImage.png" />
<title>판다마켓</title>
<meta
property="og:image"
content="https://opengraph.b-cdn.net/production/images/869c2051-4ad6-4f97-803d-3c1ad1612f77.png?token=r7V4-zkwA3TCODl5ab_EX_ELI2D29Y1-oWtczyUAuYI&height=623&width=1200&expires=33278639894"
/>

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image" />
<meta
property="twitter:domain"
content="bespoke-sfogliatella-a26ba3.netlify.app"
/>
<meta
property="twitter:url"
content="https://bespoke-sfogliatella-a26ba3.netlify.app/"
/>
<meta name="twitter:title" content="판다마켓" />
<meta
name="twitter:description"
content="일상의 모든 물건을 거래해보세요"
/>
<meta
name="twitter:image"
content="https://opengraph.b-cdn.net/production/images/869c2051-4ad6-4f97-803d-3c1ad1612f77.png?token=r7V4-zkwA3TCODl5ab_EX_ELI2D29Y1-oWtczyUAuYI&height=623&width=1200&expires=33278639894"
/>

<link rel="stylesheet" href="style.css" />
</head>
<body>
Expand Down
18 changes: 17 additions & 1 deletion login.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
--secondary-font-color: #e5e7eb;
--button-hover-color: #1967d6;
--button-active-color: #1251aa;
--cool-gray-100: #f3f4f6;
}

@font-face {
Expand Down Expand Up @@ -81,7 +82,7 @@ body p {
padding: 1.6rem 2.4rem;
font-weight: 400;
border: 0.1rem solid var(--cool-gray-100);
background-color: #f3f4f6;
background-color: var(--cool-gray-100);
font-size: 1.6rem;
}

Expand Down Expand Up @@ -297,3 +298,18 @@ body p {
color: var(--button-color);
}
}

.errDiv {
margin-top: 0.8rem;
font-size: 1.4rem;
color: #f74747;
padding-left: 1.6rem;
}

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

.login-button.activate {
background-color: var(--button-color);
}
9 changes: 7 additions & 2 deletions pages/login.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
<link rel="stylesheet" href="/login.css" />
</head>
<body>

<div class="container">
<div class="content-box">
<div class="header-logo">
Expand All @@ -29,6 +28,7 @@
class="input-box"
placeholder="이메일을 입력해주세요"
/>
<div id="emailErrDiv" class="errDiv"></div>
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 27, 2025

Choose a reason for hiding this comment

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

💊 제안
클래스명에 태그명이 들어갈 필요가 없어보여요~
또한 클래스명 규칙도 하나로 통일해주시는 것을 추천드려요!
emailErrorDiv는 카멜케이스 방식, email-error-div는 케밥케이스 방식인데 지금의 경우 혼용되고 있으니 하나로 통일해주세요~
추가로 아이디와 클래스명의 규칙을 구분하시는 것은 괜찮습니다~

</div>

<div class="input-box-container">
Expand All @@ -41,17 +41,19 @@
class="input-box"
placeholder="비밀번호를 입력해주세요"
/>

<img
class="passwordIcon"
src="/images/icons/eyesIcon.png"
alt="비밀번호아이콘"
/>
</div>
<div id="passwordErrDiv" class="errDiv"></div>
</div>
</div>

<div class="button-container">
<button class="login-button">로그인</button>
<button id="loginButton" class="login-button">로그인</button>
</div>

<div class="simple-login-box">
Expand All @@ -77,5 +79,8 @@
</div>
</div>
</div>

<script src="/scripts/loginValidate.js"></script>
<script src="/scripts/passwordIcon.js"></script>
Comment on lines +83 to +84
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 27, 2025

Choose a reason for hiding this comment

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

💊 제안

아마 script 태그를 HTML의 하단에 배치하신 이유가 script가 문서의 렌더링을 막지 않도록 하기 위해서이실 것 같아요.
하지만, script 태그에 defer나 async 속성을 사용하면 이런 문제를 해결할 수 있기 때문에 반드시 하단에 배치할 필요는 없습니다!
또한 script 태그는 상단에 있는게 구조 파악에서도 유리하기 때문에 상단 head 태그에 두시는 것을 추천드려요~

script async
script defer

지금과 같은 경우 DOM을 조작하는 JS 이니 defer 속성을 추가하시면 되겠습니다~

</body>
</html>
10 changes: 8 additions & 2 deletions pages/signup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
class="input-box"
placeholder="이메일을 입력해주세요"
/>
<div id="emailErrDiv" class="errDiv"></div>
</div>

<div class="input-box-container">
Expand All @@ -38,6 +39,7 @@
class="input-box"
placeholder="닉네임을 입력해주세요"
/>
<div id="nicknameErrDiv" class="errDiv"></div>
</div>

<div class="input-box-container">
Expand All @@ -55,13 +57,14 @@
alt="비밀번호아이콘"
/>
</div>
<div id="passwordErrDiv" class="errDiv"></div>
</div>

<div class="input-box-container">
<label for="conFirmPassword">비밀번호확인</label>
<div class="wrapper-for-icon">
<input
id="conFirmPassword"
id="confirmPassword"
type="password"
class="input-box"
placeholder="비밀번호를 다시 한번 입력해주세요"
Expand All @@ -72,11 +75,12 @@
alt="비밀번호아이콘"
/>
</div>
<div id="confirmErrDiv" class="errDiv"></div>
</div>
</div>

<div class="button-container">
<button class="signup-button">회원가입</button>
<button id="signupButton" class="signup-button">회원가입</button>
</div>

<div class="simple-login-box">
Expand All @@ -102,5 +106,7 @@
</div>
</div>
</div>
<script src="/scripts/sigunupValidate.js"></script>
<script src="/scripts/passwordIcon.js"></script>
</body>
</html>
72 changes: 72 additions & 0 deletions scripts/loginValidate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
const email = document.getElementById('email');
const emailError = document.getElementById('emailErrDiv');
const password = document.getElementById('password');
const passwordError = document.getElementById('passwordErrDiv');
const loginButton = document.getElementById('loginButton');

let emailCheck = false;
let passwordCheck = false;
let isLoginPossible = false;

function validateEmail() {
const emailValue = email.value.trim();
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (emailValue === '') {
emailError.textContent = '이메일을 입력하세요.';
email.classList.add('invalid');
emailCheck = false;
} else if (!emailPattern.test(emailValue)) {
emailError.textContent = '잘못된 이메일 형식입니다.';
email.classList.add('invalid');
emailCheck = false;
} else {
emailError.textContent = '';
email.classList.remove('invalid');
emailCheck = true;
}

LoginCheck();
}

function validatePassword() {
const passwordValue = password.value.trim();

if (passwordValue === '') {
passwordError.textContent = '비밀번호를 입력해주세요.';
password.classList.add('invalid');
passwordCheck = false;
} else if (passwordValue.length < 8) {
passwordError.textContent = '비밀번호를 8자이상 입력해주세요.';
password.classList.add('invalid');
passwordCheck = false;
} else {
passwordError.textContent = '';
password.classList.remove('invalid');
passwordCheck = true;
}

LoginCheck();
}

function LoginCheck() {
if (emailCheck && passwordCheck) {
isLoginPossible = true;
loginButton.classList.add('activate');
} else {
loginButton.classList.remove('activate');
isLoginPossible = false;
}
}

function Login() {
if (isLoginPossible) {
location.href = '/pages/items.html';
} else {
window.alert('올바른 이메일/비밀번호를 입력해주세요.');
}
}

email.addEventListener('blur', validateEmail);
password.addEventListener('blur', validatePassword);
loginButton.addEventListener('click', Login);
15 changes: 15 additions & 0 deletions scripts/passwordIcon.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
const toggleIcons = document.querySelectorAll('.passwordIcon');

toggleIcons.forEach((icon) => {
icon.addEventListener('click', function () {
const passwordInput = this.parentElement.querySelector('input');

if (passwordInput.type === 'password') {
passwordInput.type = 'text';
this.src = '/images/icons/eyeOpen.png';
} else {
passwordInput.type = 'password';
this.src = '/images/icons/eyesIcon.png';
}
});
});
116 changes: 116 additions & 0 deletions scripts/sigunupValidate.js
View file
Open in desktop
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 27, 2025

Choose a reason for hiding this comment

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

💊 제안
로그인에서 사용하는 js 파일과 에러 메시지나 로직 측면에서 동일한 것이 많습니다~
이런 경우 중복을 줄이기 위해 반복 사용되는 함수, 정규식, 에러메시지들은 다른 파일로 분리하시고 각 js 파일에서 가져와서 사용하시는 것을 추천드려요!

Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
const email = document.getElementById('email');
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 27, 2025

Choose a reason for hiding this comment

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

💊 제안
email이라는 변수명은 어떤 값인지 알기 어려우므로 emailInput 같이 더 해당값을 잘 설명하는 이름으로 바꿔주시는 것을 추천드립니다.

const emailError = document.getElementById('emailErrDiv');
const nickname = document.getElementById('name');
const nicknameError = document.getElementById('nicknameErrDiv');
const password = document.getElementById('password');
const passwordError = document.getElementById('passwordErrDiv');
const confirmPassword = document.getElementById('confirmPassword');
const confirmError = document.getElementById('confirmErrDiv');
const signupButton = document.getElementById('signupButton');

let emailCheck = false;
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 27, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청
isSignUpPossible 처럼 boolean 값임으로 알 수 있도록 isEmailValid 같은 이름을 추천드립니다.

let nicknameCheck = false;
let passwordCheck = false;
let confirmPasswordCheck = false;
let isSignUpPossible = false;

function validateEmail() {
const emailValue = email.value.trim();
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 27, 2025

Choose a reason for hiding this comment

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

💊 제안
scripts/loginValidate.js 파일에서도 동일한 정규식을 사용하고 있는데 그때마다 선언해서 쓰면 문제가 있을 것 같아요.
정규식을 반복해서 선언하면 유지보수가 어려워지고, 코드의 일관성이 떨어질 수 있습니다. 만약 정규식을 수정해야 할 때 여러 곳에서 변경해야 하고 실수로 서로 다른 정규식을 사용할 위험도 커집니다.
이렇게 두개의 파일에서 사용하고 있으니 해당 정규식과 test 함수를 따른 파일로 분리해 사용하시는 것을 추천드려요!


if (emailValue === '') {
emailError.textContent = '이메일을 입력하세요.';
email.classList.add('invalid');
emailCheck = false;
} else if (!emailPattern.test(emailValue)) {
emailError.textContent = '잘못된 이메일 형식입니다.';
email.classList.add('invalid');
emailCheck = false;
} else {
emailError.textContent = '';
email.classList.remove('invalid');
emailCheck = true;
}
signUpCheck();
}

function validateNickname() {
const nicknameValue = nickname.value.trim();

if (nicknameValue === '') {
nicknameError.textContent = '닉네임을 입력해주세요.';
nickname.classList.add('invalid');
nicknameCheck = false;
} else {
nicknameError.textContent = '';
nicknameError.classList.remove('invalid');
nicknameCheck = true;
}
signUpCheck();
}

function validatePassword() {
const passwordValue = password.value.trim();

if (passwordValue === '') {
passwordError.textContent = '비밀번호를 입력해주세요.';
password.classList.add('invalid');
passwordCheck = false;
} else if (passwordValue.length < 8) {
passwordError.textContent = '비밀번호를 8자이상 입력해주세요.';
password.classList.add('invalid');
passwordCheck = false;
} else {
passwordError.textContent = '';
password.classList.remove('invalid');
passwordCheck = true;
}
signUpCheck();
}

function validateConfirmPassword() {
const confirmValue = confirmPassword.value.trim();
const passwordValue = password.value.trim();

if (confirmValue === '') {
confirmError.textContent = '비밀번호를 입력해주세요.';
confirmPassword.classList.add('invalid');
confirmPasswordCheck = false;
}

if (confirmValue !== passwordValue) {
confirmError.textContent = '비밀번호가 일치하지 않습니다.';
confirmPassword.classList.add('invalid');
confirmPasswordCheck = false;
} else {
confirmError.textContent = '';
confirmPassword.classList.remove('invalid');
confirmPasswordCheck = true;
}
Comment on lines +75 to +89
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 27, 2025

Choose a reason for hiding this comment

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

❗️ 수정요청
지금 로직에 따르면 confirmValue와 passwordValue가 빈값일때 '비밀번호를 입력해주세요.' 라는 에러메시지가 나올 수가 없습니다.
아래의 if (confirmValue !== passwordValue) 에서 동일하기 때문에 else 문을 타서 valid하다고 판단되기 때문입니다.
아래처럼 작성하셔야 의도대로 동작할 것 같습니다~

Suggested change
if (confirmValue === '') {
confirmError.textContent = '비밀번호를 입력해주세요.';
confirmPassword.classList.add('invalid');
confirmPasswordCheck = false;
}
if (confirmValue !== passwordValue) {
confirmError.textContent = '비밀번호가 일치하지 않습니다.';
confirmPassword.classList.add('invalid');
confirmPasswordCheck = false;
} else {
confirmError.textContent = '';
confirmPassword.classList.remove('invalid');
confirmPasswordCheck = true;
}
if (confirmValue === '') {
confirmError.textContent = '비밀번호를 입력해주세요.';
confirmPassword.classList.add('invalid');
confirmPasswordCheck = false;
}else if (confirmValue !== passwordValue) {
confirmError.textContent = '비밀번호가 일치하지 않습니다.';
confirmPassword.classList.add('invalid');
confirmPasswordCheck = false;
} else {
confirmError.textContent = '';
confirmPassword.classList.remove('invalid');
confirmPasswordCheck = true;
}


signUpCheck();
}

function signUpCheck() {
if (emailCheck && nicknameCheck && passwordCheck && confirmPasswordCheck) {
isSignUpPossible = true;
signupButton.classList.add('activate');
} else {
signupButton.classList.remove('active');
isSignUpPossible = false;
}
}
Comment on lines +94 to +102
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 27, 2025

Choose a reason for hiding this comment

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

💬 여담
아래 코드도 동일동작합니다~

Suggested change
function signUpCheck() {
if (emailCheck && nicknameCheck && passwordCheck && confirmPasswordCheck) {
isSignUpPossible = true;
signupButton.classList.add('activate');
} else {
signupButton.classList.remove('active');
isSignUpPossible = false;
}
}
function signUpCheck() {
const isFormValid = emailCheck && nicknameCheck && passwordCheck && confirmPasswordCheck
isSignUpPossible = isFormValid;
signupButton.classList.toggle('activate', isFormValid);
}


function SignUp() {
Copy link
Collaborator

@GANGYIKIM GANGYIKIM Mar 27, 2025

Choose a reason for hiding this comment

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

💊 제안
js에서 일반적으로 함수는 대문자로 시작하지 않습니다. 주로 class(css 클래스가 아닙니다~)의 경우나 생성자를 가진 객체의 경우 대문자로 시작하게 작성합니다~
따라서 일반적인 함수의 경우 signUp, onSumbit과 같은 이름으로 변경하시는 것을 추천드립니다.

if (isSignUpPossible) {
location.href = '/pages/login.html';
} else {
window.alert('올바른 정보들을 입력해주세요');
}
}

email.addEventListener('blur', validateEmail);
nickname.addEventListener('blur', validateNickname);
password.addEventListener('blur', validatePassword);
confirmPassword.addEventListener('blur', validateConfirmPassword);
signupButton.addEventListener('click', SignUp);
Loading
Loading