-
Notifications
You must be signed in to change notification settings - Fork 15
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
jhaemin
merged 2 commits into
codeit-sprint-fullstack:basic-이현서
from
dlgustj321:basic-이현서-스프린트3
Nov 13, 2024
The head ref may contain hidden characters: "basic-\uC774\uD604\uC11C-\uC2A4\uD504\uB9B0\uD2B83"
Merged
[스프린트 미션3] 이현서 #25
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | ||
|
||
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
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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%; | ||
} | ||
|
||
|
||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | ||
} |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
각각의 항목을 검증하는 함수를 분리한 점 좋습니다! 그런데 input마다 폼 전체를 검증하고 있어서 입력마다 불필요한 동작이 많이 일어나고 있어요. 어떻게 하면 사용자가 더 매끄럽게 사용할 수 있을지 고민해 보면 좋겠습니다.