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.

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

[스프린트 미션3] 이현서 #25

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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 removed Frame 2609420.png
Binary file not shown.
Binary file removed Frame 2609448.jpg
Binary file not shown.
Binary file added SM1-2/Img_home_01.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added SM1-2/Img_home_02.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added SM1-2/Img_home_03.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added SM1-2/Img_home_bottom.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added SM1-2/Img_home_top.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
File renamed without changes
Binary file added SM1-2/google-logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added SM1-2/ic_facebook.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added SM1-2/ic_instagram.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added SM1-2/ic_twitter.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added SM1-2/ic_youtube.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
78 changes: 78 additions & 0 deletions SM1-2/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang ='ko'>
<head>
<meta charset="UTF-8">
<title>판다마켓</title>
<link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/variable/pretendardvariable.min.css" />
<link rel="stylesheet" href="style.css">
<link rel="reset" href="reset.css">
</head>
<body>
<header id="navbar">
<a href="/"><img id="logo" src="Property 1=lg.png" alt="logo"></a>
<nav>
<a href="login.html"><button class="login-button">로그인</button></a>
</nav>
</header>
<main>
<div id="home">
<section id="first-top">
<p id="top-p">일상의 모든 물건을 거래해보세요
<a href="/item" target="_blank">
<br><button type="button" class="btn-shopping">구경하러 가기</button>
</a></p>
</section>
<section id="top">
<img src="Img_home_top.png" alt="home-top">
</section>
<section id="home-01">
<img src="Img_home_01.png" alt="home-01">
<aside>
<p class="categori1-p">Hot item</p>
<p class="home1-p">인기 상품을<br>확인해보세요</p>
<p class="home2-p">가장 HOT한 중고거래 물품을<br>판다마켓에서 확인해보세요</p>
</aside>
</section>
<section id="home-02">
<img src="Img_home_02.png" alt="home-02">
<aside>
<p class="categori1-p">Search</p>
<p class="home1-p">구매를 원하는<br>상품을 검색하세요</p>
<p class="home2-p">구매하고 싶은 물품은 검색해서<br>쉽게 찾아보세요</p>
</aside>
</section>
<section id="home-03">
<img src="Img_home_03.png" alt="home-03">
<aside>
<p class="categori1-p">register</p>
<p class="home1-p">판매를 원하는<br> 상품을 등록하세요</p>
<p class="home2-p">어떤 물건이든 판매하고 싶은 상품을<br>쉽게 등록하세요</p>
</aside>
</section>
<section id="bottom">
<p id="bottom-p">믿을 수 있는<br>판다마켓 중고거래</p>
</section>
<section id="last-bottom">
<img src="Img_home_bottom.png" alt="Img-home-bottom">
</section>
</div>
</main>
<footer>
<div id="footer-nav">
<nav id="social-media">
<img class="social-ico" src="ic_instagram.png" alt="인스타그램 이동" onclick="window.open('https://www.instagram.com')">
<img class="social-ico" src="ic_youtube.png" alt="유튜브 이동" onclick="window.open('https://www.youtube.com')">
<img class="social-ico" src="ic_facebook.png" alt="페이스북 이동" onclick="window.open('https://www.facebook.com')">
<img class="social-ico" src="ic_twitter.png" alt="트위터 이동" onclick="window.open('https://www.twitter.com')">
</nav>
<nav id="require">
<a id ="text-1" href="/privacy" target="_blank">Privacy Policy</a>
<a id ="text-2" href="faq" target="_blank">FAQ</a>
</nav>
<nav id="maker">
<a href="https://www.codeit.com" target="_blank">@Codeit-2024</a>
</nav>
</div>
</footer>
</body>
</html>
Binary file added SM1-2/kakao-logo.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
167 changes: 167 additions & 0 deletions SM1-2/login.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>로그인 - 판다마켓</title>
<link rel="stylesheet" href="login_styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="reset" href="reset.css">
</head>
<body>
<div class="container">
<header>
<a href="/" class="logo">
<img src="Property 1=lg.png" style="width: 500px;" alt="로고">
</a>
</header>

<main>
<form id="login-form">
<div>
<h3>이메일</h3>
<input type="text" id="email" placeholder="이메일을 입력해주세요">
<div class="error-message" id="email-error"></div>
</div>
<div>
<h3>비밀번호</h3>
<div class="password-wrapper">
<input id="password" type="password" placeholder="비밀번호를 입력해주세요">
<span class="toggle-password" onclick="togglePasswordVisibility()"></span>
</div>
<div class="error-message" id="password-error"></div>
</div>
<!-- loginButton id 추가 -->
<input style="color:rgba(255, 255, 255, 1)" type="submit" value="로그인" class="btn" id="login-button" disabled>
<div class="social-login-container">
<p><b>간편 로그인하기</b></p>
<div class="social-buttons">
<button class="social-button" onclick="window.open('https://www.google.com/','_blank')">
<img src="google-logo.png" alt="google 로그인">
</button>
<button class="social-button" onclick="window.open('https://wwww.kakaocorp.com/page/','_blank')">
<img src="kakao-logo.png" alt="kakao 로그인">
</button>
</div>
</div>
</form>
</main>

<footer>
<p>판다마켓이 처음이신가요? <a href="signup.html">회원가입</a></p>
</footer>
</div>

<script>
const USER_DATA = [
{ email: '[email protected]', password: "codeit101!" },
{ email: '[email protected]', password: "codeit202!" },
{ email: '[email protected]', password: "codeit303!" },
{ email: '[email protected]', password: "alsgus4321@"},
{ email: '[email protected]', password: "dnflwlq951@"},
];

const emailInput = document.getElementById('email');
const passwordInput = document.getElementById('password');
const loginButton = document.getElementById('login-button');
const emailError = document.getElementById('email-error');
const passwordError = document.getElementById('password-error');

emailInput.addEventListener('focusout', validateEmail);
passwordInput.addEventListener('focusout', validatePassword);
emailInput.addEventListener('input', validateForm);
passwordInput.addEventListener('input', validateForm);
Comment on lines +69 to +72
Copy link

Choose a reason for hiding this comment

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

각각의 항목을 검증하는 함수를 분리한 점 좋습니다! 그런데 input마다 폼 전체를 검증하고 있어서 입력마다 불필요한 동작이 많이 일어나고 있어요. 어떻게 하면 사용자가 더 매끄럽게 사용할 수 있을지 고민해 보면 좋겠습니다.


function validateEmail() {
const email = emailInput.value;
if (!email) {
emailError.innerText = '이메일을 입력해주세요.';
emailInput.classList.add('error');
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
emailError.innerText = '잘못된 이메일 형식입니다.';
emailInput.classList.add('error');
} else {
emailError.innerText = '';
emailInput.classList.remove('error');
}
}

function validatePassword() {
const password = passwordInput.value;
if (!password) {
passwordError.innerText = '비밀번호를 입력해주세요.';
passwordInput.classList.add('error');
} else if (password.length < 8) {
passwordError.innerText = '비밀번호를 8자 이상 입력해주세요.';
passwordInput.classList.add('error');
} else {
passwordError.innerText = '';
passwordInput.classList.remove('error');
}
}

function validateForm() {
validateEmail();
validatePassword();
checkFormValidity();
}

function checkFormValidity() {
if (emailInput.value && passwordInput.value &&
!emailInput.classList.contains('error') &&
!passwordInput.classList.contains('error')) {
loginButton.disabled = false;
} else {
loginButton.disabled = true;
}
}

function togglePasswordVisibility() {
const type = passwordInput.getAttribute("type") === "password" ? "text" : "password";
passwordInput.setAttribute("type", type);
}

document.getElementById('login-form').addEventListener('submit', function(event) {
event.preventDefault();
const email = emailInput.value;
const password = passwordInput.value;

if (!email) {
emailError.innerText = '이메일을 입력해주세요.';
emailInput.classList.add('error');
}
if (!password) {
passwordError.innerText = '비밀번호를 입력해주세요.';
passwordInput.classList.add('error');
}

loginButton.addEventListener('click', () => {
loginButton.classList.add('clicked');
setTimeout(() => {
loginButton.classList.remove('clicked');
}, 100);
});

document.getElementById('login-form').addEventListener('submit', function(event) {
event.preventDefault();
const email = emailInput.value;
const password = passwordInput.value;

if (!email || !password) {
return;
}

const user = USER_DATA.find(user => user.email === email);

if (!user) {
emailError.innerText = '이메일이 일치하지 않습니다.';
emailInput.classList.add('error');
} else if (user.password !== password) {
passwordError.innerText = '비밀번호가 일치하지 않습니다.';
passwordInput.classList.add('error');
} else {
window.location.href = "/items";
}
})});
</script>
Comment on lines +54 to +165
Copy link

Choose a reason for hiding this comment

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

signup.js 처럼 별도의 파일로 분리하면 어떨까요?

</body>
</html>
132 changes: 132 additions & 0 deletions SM1-2/login_styles.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
/* 페이지 전체를 가운데 정렬하는 컨테이너 */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

/* 텍스트 및 비밀번호 입력 스타일 */
input[type="text"], input[type="password"] {
width: 800px;
height: 60px;
font-size: 18px;
border: 0;
border-radius: 30px;
outline: none;
padding-left: 10px;
background-color: rgba(243, 244, 246, 1);
}

/* 테이블 스타일 */
table {
width: 280px;
height: 250px;
margin: auto;
font-size: 18px;
}

/* 버튼 스타일 */
.btn {
width: 800px;
height: 60px;
font-size: 25px;
border: 0;
border-radius: 30px;
outline: none;
padding-left: 10px;
margin-top: 30px;
margin-bottom: 0px;
background-color: rgba(54, 146, 255, 1);
}

/* 버튼이 클릭되었을 때 "클릭된" 효과를 적용 */
.btn.clicked {
transform: scale(0.95);
transition: transform 0.1s ease;
}

/* 비활성화 상태의 버튼 스타일 */
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: rgba(156, 163, 175, 1);
}

/* 버튼 활성화 시 스타일 */
.btn:active {
width: 800px;
height: 60px;
font-size: 25px;
border: 0;
border-radius: 30px;
outline: none;
padding-left: 10px;
transform: scale(0.95);
transition: transform 0.1s ease;
}


/* 오류 메시지 스타일 */
.error-message {
color: red;
font-size: 14px;
margin-top: 5px;
}

input.error {
border: 2px solid red;
}

footer{
text-align: center;
margin: 20px;

}

header {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px;
}

.social-login-container {
display:flex;
align-items: center;
background-color: #e3f2fd;
border-radius: 8px;
padding: 20px;
margin-top: 20px;

}

.social-login-container p {
margin: 0;
flex-grow: 1;
font-size: 18px;
color: #333;
}

.social-buttons {
display: flex;
gap: 10px;
}

.social-button {
background-color: transparent;
border: none;
padding:0;
cursor: pointer;
outline: none;
}

.social-button img {
width: 36px;
height: 36px;
border-radius: 50%;
}



10 changes: 10 additions & 0 deletions SM1-2/reset.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
/* reset.css */

/* 브라우저 기본 스타일 초기화 */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
Loading