[김영호] sprint4

css/login.css

@@ -7,7 +7,7 @@ a {
 	flex-direction: column;
 	align-items: center;
 	margin: 8vh auto 0;
-	padding: 1rem;
+	padding: 16px;
 	max-width: 640px;
 	gap: 40px;
 }
@@ -18,7 +18,7 @@ a {
 	text-decoration: none;
 	font-family: 'ROKAF Sans';
 	font-weight: 700;
-	font-size: 4rem;
+	font-size: 64px;
 	color: var(--blue);
 	gap: 20px;
 }
@@ -29,7 +29,7 @@ a {
 		height: 50px;
 	}
 	.brand {
-		font-size: 2rem;
+		font-size: 16px;
 	}
 }
 
@@ -68,25 +68,28 @@ form {
 	outline: 2px solid var(--blue);
 }
 
-#eye-slash {
-	position: absolute;
-	width: 20px;
-	right: 16px;
-	bottom: 12px;
-	cursor: pointer;
+.input-box .error {
+	outline: 1px solid red;
+}
+
+.error-message {
+  color: red;
+  font-size: 14px;
+	margin-left: 16px;
 }
 
+#eye-slash,
 #eye-slash-confirm {
 	position: absolute;
 	width: 20px;
 	right: 16px;
-	bottom: 12px;
+	top: 50px;
 	cursor: pointer;
 }
 
 .signup-btn,
 .login-btn {
-	background-color: var(--gray-400);
+	background-color: var(--blue);
 	color: white;
 	font-weight: 400;
 	font-size: 20px;
@@ -96,8 +99,10 @@ form {
 	border-radius: 40px;
 }
 
-.valid {
-	background-color: var(--blue);
+.login-btn:disabled,
+.signup-btn:disabled {
+	background-color: var(--gray-400);
+	cursor: not-allowed;
 }
 
 .social-login {
@@ -120,7 +125,7 @@ form {
 	}
 
 	.brand {
-		font-size: 2rem;
+		font-size: 16px;
 	}
 
 	.logo {

css/style.css

@@ -20,6 +20,8 @@ footer {
   max-width: 1280px;
   height: 70px;
   margin: 0 auto;
+  padding: 0 200px;
+
 }
 
 
@@ -28,7 +30,7 @@ footer {
   display: flex;
   flex-shrink: 0;
   align-items: center;
-  gap: 0.5rem;
+  gap: 8px;
 }
 
 .logo {
@@ -40,7 +42,7 @@ footer {
   display: flex;
   align-items: center;
   flex-shrink: 0;
-  gap: 0.5rem;
+  gap: 8px;
   font-family: "ROKAF Sans";
   font-size: 26px;
   color: var(--blue);
@@ -62,6 +64,7 @@ footer {
   align-items: center;
   max-width: 1120px;
   margin: 0 auto;
+  padding: 0 16px;
 }
 
 .hero {
@@ -95,7 +98,7 @@ footer {
 .img-panda {
   flex: 1;
   height: auto;
-  margin-top: 2rem;
+  margin-top: 16px;
 }
 
 /* section */
@@ -137,14 +140,14 @@ footer {
 
 .title {
   margin: 12px 0 24px;
-  font-size: clamp(2rem, 3vw, 2.5rem);
+  font-size: clamp(16px, 3vw, 40px);
   font-weight: 700;
   text-overflow: ellipsis;
 }
 
 .details {
   margin: 0;
-  font-size: clamp(1rem, 3vw, 1.5rem);
+  font-size: clamp(16px, 3vw, 24px);
   font-weight: 500;
 }
 
@@ -195,15 +198,6 @@ footer {
   height: 20px;
 }
 
-@media (min-width: 1200px) {
-  .header {
-    padding: 0 200px;
-  }
-  .banner {
-    padding: 0 1rem;
-  }
-}
-
 @media (max-width: 1199px) {
   .header {
     padding: 0 24px;

index.html

@@ -25,7 +25,7 @@
 				<img class="logo" src="./images/logo.png" alt="logo">
 				판다마켓
 			</a>
-			<a class="login-button" href="/login.html">로그인</a>
+			<a class="login-button" href="/signin.html">로그인</a>
 		</div>
 	</nav>
 	<main>

js/signin.js

@@ -0,0 +1,38 @@
+import { checkEmailInput,checkPasswordInput, checkInputs } from './validate.js';
+
+const emailInput = document.getElementById("email");
+const passwordInput = document.getElementById("password");
+const eyeSlashImg = document.getElementById("eye-slash");
+const loginButton = document.querySelector(".login-btn");
+const form = document.getElementById('form');
+
+// 비밀번호 표시
+eyeSlashImg.addEventListener('click',toggleVisibility);
+
+function toggleVisibility() {
+  if (passwordInput.type === "password") {
+    passwordInput.type = "text";
+    eyeSlashImg.src = "/images/eye.svg";
+  } else {
+    passwordInput.type = "password";
+    eyeSlashImg.src = "/images/eye-slash.svg";
+  }
+}
+
+// 모든 필드 값 입력시 버튼 활성화
+form.addEventListener('input', () => checkInputs(form, loginButton));
+
+// 유효성 검사
+emailInput.addEventListener('focusout', (e) => {
+  checkEmailInput(e.target);
+  checkInputs(form, loginButton);
+});
+passwordInput.addEventListener('focusout', (e) => {
+  checkPasswordInput(e.target);
+  checkInputs(form, loginButton);
+})
+
+//로그인 버튼
+loginButton.addEventListener('click', () => {
+  window.location.href = '/items.html';
+});

js/signup.js

@@ -1,46 +1,60 @@
+import {  
+  checkEmailInput,
+  checkPasswordInput,
+  checkPasswordConfirmInput,
+  checkUsernameInput,
+  checkInputs,
+} from './validate.js';
+
 const emailInput = document.getElementById("email");
 const usernameInput = document.getElementById("username");
 const passwordInput = document.getElementById("password");
 const passwordConfirmInput = document.getElementById("password-confirm");
 const eyeSlashImg = document.getElementById("eye-slash");
 const eyeSlashConfirmImg = document.getElementById("eye-slash-confirm");
 const signupButton = document.querySelector(".signup-btn");
+const form = document.getElementById('form');
 
 // 비밀번호 표시
-function toggleVisibility() {
-  if (passwordInput.type === "password") {
-    passwordInput.type = "text";
-    eyeSlashImg.src = "/images/eye.svg";
-  } else {
-    passwordInput.type = "password";
-    eyeSlashImg.src = "/images/eye-slash.svg";
-  }
-}
-// 비밀번호 확인 표시
-function toggleConfirmVisibility() {
-  if (passwordConfirmInput.type === "password") {
-    passwordConfirmInput.type = "text";
-    eyeSlashConfirmImg.src = "/images/eye.svg";
+eyeSlashImg.addEventListener('click', () => {
+  toggleVisibility(passwordInput, eyeSlashImg);
+});
+eyeSlashConfirmImg.addEventListener('click', () => {
+  toggleVisibility(passwordConfirmInput, eyeSlashConfirmImg);
+});
+
+function toggleVisibility(inputElement, eyeElement) {
+  if (inputElement.type === "password") {
+    inputElement.type = "text";
+    eyeElement.src = "/images/eye.svg";
   } else {
-    passwordConfirmInput.type = "password";
-    eyeSlashConfirmImg.src = "/images/eye-slash.svg";
+    inputElement.type = "password";
+    eyeElement.src = "/images/eye-slash.svg";
   }
 }
 
 // 모든 필드 값 입력시 버튼 활성화
-emailInput.addEventListener("input", changeButtonState);
-usernameInput.addEventListener("input", changeButtonState);
-passwordInput.addEventListener("input", changeButtonState);
-passwordConfirmInput.addEventListener("input", changeButtonState);
-
-function changeButtonState() {
-  const isFormValid =
-    emailInput.value.trim() !== "" &&
-    passwordInput.value.trim() !== "" &&
-    usernameInput.value.trim() !== "" &&
-    passwordConfirmInput.value.trim() !== "";
+form.addEventListener('input', () => checkInputs(form, signupButton));
 
-  signupButton.disabled = !isFormValid;
+// 유효성 검사
+emailInput.addEventListener('focusout', (e) => {
+  checkEmailInput(e.target);
+  checkInputs(form, signupButton);
+});
+usernameInput.addEventListener('focusout', (e) => {
+  checkUsernameInput(e.target);
+  checkInputs(form, signupButton);
+})
+passwordInput.addEventListener('focusout', (e) => {
+  checkPasswordInput(e.target);
+  checkInputs(form, signupButton);
+})
+passwordConfirmInput.addEventListener('focusout', (e) => {
+  checkPasswordConfirmInput(e.target,passwordInput);
+  checkInputs(form, signupButton);
+})
 
-  signupButton.classList.toggle("valid", isFormValid);
-}
+// 회원가입 버튼
+signupButton.addEventListener('click', () => {
+  window.location.href = '/signin.html';
+});