Skip to content

Commit

Permalink
Merge pull request #62 from mulddang2/Basic-이수지-sprint4
Browse files Browse the repository at this point in the history
[이수지] sprint4
  • Loading branch information
JaeSang1998 authored Sep 3, 2024
2 parents 91a29cd + bb47583 commit 5fbc820
Show file tree
Hide file tree
Showing 6 changed files with 208 additions and 7 deletions.
40 changes: 39 additions & 1 deletion css/auth.css
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ main {
.signup__field,
.login__field--password {
height: 5.6rem;
margin-bottom: 2.4rem;
margin-bottom: 2.6rem;
}

.signup__field--password,
Expand All @@ -56,6 +56,15 @@ main {
display: none;
}

.login__password-toggle-icon--inactive.visible,
.login__password-toggle-icon--active.visible {
display: block;
}

.login__password-toggle-icon--inactive {
display: none;
}

.signup__field--password button,
.login__field--password button {
position: absolute;
Expand Down Expand Up @@ -89,6 +98,16 @@ main {
background-color: var(--Primary-100);
}

.login__submit {
margin-top: 2.4rem;
}

.login__submit.enabled {
background-color: var(--Primary-100);
color: var(--Gray-100);
cursor: not-allowed;
}

.social-login {
display: flex;
justify-content: space-between;
Expand Down Expand Up @@ -149,9 +168,28 @@ main {
/* 로그인 영역만 해당부분 */
.login__field--id {
margin-bottom: 2.4rem;
}

.login__input {
height: 5.6rem;
}

.login__input.error,
.signup__input.error {
border: 1px solid var(--Error-red);
}

.login__error-message,
.signup__error-message {
color: var(--Error-red);
font-size: 1.4rem;
font-weight: 600;
margin-top: 0.8rem;
display: none;
position: relative;
left: 1.6rem;
}

/* Tablet: 768px ~ 1199px 이하 */
@media (min-width: 768px) and (max-width: 1199px) {
main {
Expand Down
9 changes: 7 additions & 2 deletions css/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -321,6 +321,7 @@ footer {
section:nth-of-type(3) .section__card {
flex-direction: column-reverse;
align-items: flex-end;
width: 100%;
}

.section__card--img {
Expand Down Expand Up @@ -357,8 +358,8 @@ footer {
}
}

/* Mobile: 375px ~ 767px 이하 */
@media (min-width: 375px) and (max-width: 767px) {
/* Mobile: 767px 이하 */
@media (max-width: 767px) {
.header__inner {
padding: 1rem 1.6rem;
}
Expand Down Expand Up @@ -417,6 +418,10 @@ footer {
gap: 2.4rem;
}

.section__card--text {
width: 100%;
}

.section__card--text p {
line-height: 2.6rem;
font-size: 1.6rem;
Expand Down
14 changes: 13 additions & 1 deletion index.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,21 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>판다마켓</title>
<meta property="og:title" content="판다 마켓" />
<meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
<meta
property="og:image"
content="https://images.unsplash.com/photo-1488459716781-31db52582fe9?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
<meta property="og:url" content="https://suzymarket.netlify.app/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="판다 마켓" />
<meta property="og:locale" content="ko_KR" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<link rel="stylesheet" href="css/common.css" />
<link rel="stylesheet" href="css/main.css" />
<title>판다마켓</title>
</head>
<body>
<header>
Expand Down
14 changes: 11 additions & 3 deletions pages/login.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content="판다 마켓" />
<meta property="og:title" content="로그인 | 판다 마켓" />
<meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
<meta
property="og:image"
Expand Down Expand Up @@ -38,6 +38,7 @@ <h2 class="login__header">
class="login__input"
required
/>
<span class="login__error-message" id="email-error"></span>
</div>
<label for="password" class="login__label login__label--password"
>비밀번호</label
Expand All @@ -51,24 +52,30 @@ <h2 class="login__header">
class="login__input"
required
/>
<span class="login__error-message" id="password-error"></span>
<button
type="button"
id="password-toggle"
class="login__password-toggle"
aria-label="비밀번호 보기"
>
<img
id="password-toggle-off"
src="/assets/images/ic-visibility-off.svg"
class="login__password-toggle-icon login__password-toggle-icon--inactive"
class="login__password-toggle-icon login__password-toggle-icon--inactive visible"
alt="비밀번호 숨기기 아이콘"
/>
<img
id="password-toggle-on"
class="login__password-toggle-icon login__password-toggle-icon--active"
src="/assets/images/ic-visibility-on.svg"
alt="비밀번호 보기 아이콘"
/>
</button>
</div>
<button type="submit" class="login__submit">로그인</button>
<button id="login-button" type="submit" class="login__submit">
로그인
</button>
</form>
</section>
<aside class="social-login">
Expand Down Expand Up @@ -97,5 +104,6 @@ <h3 class="social-login__header">간편 로그인하기</h3>
</p>
</section>
</main>
<script src="/scripts/login.js"></script>
</body>
</html>
12 changes: 12 additions & 0 deletions pages/signup.html
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,18 @@
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta property="og:title" content="회원가입 | 판다 마켓" />
<meta property="og:description" content="일상의 모든 물건을 거래해보세요" />
<meta
property="og:image"
content="https://images.unsplash.com/photo-1488459716781-31db52582fe9?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
/>
<meta property="og:url" content="https://suzymarket.netlify.app/" />
<meta property="og:type" content="website" />
<meta property="og:site_name" content="판다 마켓" />
<meta property="og:locale" content="ko_KR" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<link rel="stylesheet" href="/css/common.css" />
<link rel="stylesheet" href="/css/auth.css" />
<title>회원가입 | 판다마켓</title>
Expand Down
126 changes: 126 additions & 0 deletions scripts/login.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
document.addEventListener('DOMContentLoaded', function () {
const emailInput = document.getElementById('email');
const emailError = document.getElementById('email-error');
const passwordInput = document.getElementById('password');
const passwordError = document.getElementById('password-error');
const loginButton = document.getElementById('login-button');
const passwordToggle = document.getElementById('password-toggle');

emailInput.addEventListener('blur', handleEmailBlur);
passwordInput.addEventListener('keydown', handlePasswordKeydown);
passwordInput.addEventListener('blur', handlePasswordBlur);
loginButton.addEventListener('click', handleLogin);
emailInput.addEventListener('keydown', handleEnterKey);
passwordInput.addEventListener('keydown', handleEnterKey);
passwordToggle.addEventListener('click', handlePasswordToggle);

function handleEmailBlur() {
const emailValue = emailInput.value.trim();
if (emailValue === '') {
showError(emailInput, emailError, '이메일을 입력해주세요.');
} else if (!isValidEmail(emailValue)) {
showError(emailInput, emailError, '잘못된 이메일 형식입니다.');
} else {
hideError(emailInput, emailError);
}
toggleLoginButton();
}

function isValidEmail(email) {
// 간단한 이메일 형식 검사 정규식
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return emailPattern.test(email);
}

function handlePasswordBlur() {
const passwordValue = passwordInput.value.trim();
if (passwordValue === '') {
showError(passwordInput, passwordError, '비밀번호를 입력해주세요.');
} else if (passwordValue.length < 8) {
showError(
passwordInput,
passwordError,
'비밀번호를 8자 이상 입력해주세요.'
);
} else {
hideError(passwordInput, passwordError);
}
toggleLoginButton();
}

function handlePasswordKeydown(event) {
if (event.code === 'Space') {
event.preventDefault(); // 스페이스바 입력을 막음
}
toggleLoginButton();
}

function showError(inputElement, errorElement, message) {
inputElement.classList.add('error');
errorElement.textContent = message;
errorElement.style.display = 'block';
}

function hideError(inputElement, errorElement) {
inputElement.classList.remove('error');
errorElement.textContent = '';
errorElement.style.display = 'none';
}

function toggleLoginButton() {
const isEmailValid =
emailInput.value.trim() !== '' && emailError.textContent === '';

const isPasswordValid =
passwordInput.value.trim() !== '' && passwordError.textContent === '';

if (isEmailValid && isPasswordValid) {
loginButton.disabled = false;
loginButton.classList.add('enabled');
} else {
loginButton.disabled = true;
loginButton.classList.remove('enabled');
}
}

function handleLogin(event) {
event.preventDefault();

if (!loginButton.disabled) {
window.location.href = '/items';
}
}

function handleEnterKey(event) {
if (event.key === 'Enter' || event.code === 'NumpadEnter') {
if (event.target === emailInput) {
handleEmailBlur(); // 이메일 유효성 검사 수행
} else if (event.target === passwordInput) {
handlePasswordBlur(); // 비밀번호 유효성 검사 수행
}

toggleLoginButton(); // 로그인 버튼 상태 업데이트
if (!loginButton.disabled) {
handleLogin(event); // 로그인 처리
}
}
}

function handlePasswordToggle() {
const passwordInput = document.getElementById('password');
const passwordToggleOn = document.getElementById('password-toggle-on');
const passwordToggleOff = document.getElementById('password-toggle-off');

if (passwordInput.type === 'password') {
passwordInput.type = 'text';
passwordToggleOn.classList.add('visible');
passwordToggleOff.classList.remove('visible');
} else {
passwordInput.type = 'password';
passwordToggleOn.classList.remove('visible');
passwordToggleOff.classList.add('visible');
}
}

toggleLoginButton();
});

0 comments on commit 5fbc820

Please sign in to comment.