[김태일] Sprint4

index.html

@@ -24,8 +24,9 @@ <h1>일상의 모든 물건을<br>
     <div class="contents0">
        <img src="./image/Img_home_top.png">
     </div>
-  </div> 
 </div>
+</div>
+
      <!-- main 컨테이너 -->
  <div class="container1">
   <div class="contents">
@@ -34,35 +35,36 @@ <h1>일상의 모든 물건을<br>
   <div class="text-box">
     <p class="hot-item">Hot_item</p>
     <h1>
-      인기 상품을<br>
-       확인해 보세요
+      인기 상품을
+      확인해 보세요
     </h1>
     <p class="description">가장 HOT한 중고거래 물품을 판다 마켓에서 확인해 보세요</p>
   </div>
  </div>
     <!-- main 컨테이너 -->
-<div class="container1">
+<div class="container2">
      <div class="text-box2">
-        <h1>구매를 원하는<br> 상품을 검색하세요</h1>
+        <a class="Search">Search</a>
+        <h1>구매를 원하는 상품을 검색하세요</h1>
         <p class="description">구매하고 싶은 물품은 검색해서 쉽게 찾아보세요</p>
     </div>
     <div class="contents">
         <img src="./image/Img_home_02.png">
      </div>   
 </div>
     <!-- main 컨테이너 -->
-<div class="container1">
+<div class="container3">
     <div class="contents">
         <img src="./image/Img_home_03.png">
     </div>
     <div class="text-box3">
-        <p class="register">Register</p>
+        <a class="register">Register</a>
         <h1>판매를 원하는<br>상품을 등록하세요</h1>
         <p class="description">어떤 물건이든 판매하고 싶은 상품을 쉽게 등록하세요</p>
     </div>
 </div>
 
- <div class="container2">
+ <div class="container4">
       <!-- 텍스트와 사진  -->
   <div class="inner_box">
   <div text-box4>

sign-in.html

@@ -24,13 +24,18 @@ <h1>판다마켓</h1>
           <form>
           <div class="group">
             <label for="email">이메일</label>
-            <input type="email" id="email" name="email">
+            <input type="email" id="email" name="email" placeholder="이메일을 입력해주세요."
+            class="error-input">
+            <p id="emailErr" class="errMsg">잘못된 이메일 형식입니다</p>
+
           </div>
           <div class="group">
             <label for="password">비밀번호</label>
             <div class="password-input">
-              <input type="password" id="password" name="password">
+              <input type="password" id="password" name="password" placeholder="비밀번호를 입력해주세요.">
+
               <img src="./image/invisible_icon.png" class="password-icon" alt="비밀번호 보기">
+              <p id="passwordErr" class="errMsg">비밀번호를 8자 이상 입력해주세요.</p>
              </div>
           </div>
             <button type="submit">로그인</button>
@@ -51,12 +56,12 @@ <h1>간편 로그인하기</h1>
 
           </div>
           <div class="footer">
-             <h1>판다마켓이 처음이신가요?</h1>
+             <p>판다마켓이 처음이신가요?</p>
              <a href="./signup.html">회원가입</a>
           </div>
 
 
     </div>
-
+    <script src="./sign-in.js"></script>
   </body>
 </html>

sign-in.js

@@ -0,0 +1,85 @@
+/* login, signup 공통 */
+
+// 이메일 유효성 검사 함수
+function emailValidation(email) {
+  const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+  return emailRegex.test(email);
+}
+
+// 요소 가져오기
+const emailInput = document.getElementById("email");
+const passwordInput = document.getElementById("password");
+const emailErr = document.getElementById("emailErr");
+const passwordErr = document.getElementById("passwordErr");
+const passwordVisibility = document.getElementById("passwordVisibility");
+
+// 초기 오류 메시지 숨김
+emailErr.textContent = "";
+passwordErr.textContent = "";
+
+// 이메일 검증 
+function validateEmail() {
+  const emailValue = emailInput.value.trim();
+  if (emailValue === "") {
+      emailErr.textContent = "이메일을 입력해주세요.";
+      emailInput.classList.add("error-input");
+      emailInput.classList.remove("correct-input");
+  } else if (!emailValidation(emailValue)) {
+      emailErr.textContent = "잘못된 이메일 형식입니다.";
+      emailInput.classList.add("error-input");
+      emailInput.classList.remove("correct-input");
+  } else {
+      emailErr.textContent = "";
+      emailInput.classList.remove("error-input");
+      emailInput.classList.add("correct-input");
+  }
+  toggleButton();
+}
+
+// 비밀번호 검증
+function validatePassword() {
+  const passwordValue = passwordInput.value.trim();
+  if (passwordValue === "") {
+      passwordErr.textContent = "비밀번호를 입력해주세요.";
+      passwordInput.classList.add("error-input");
+      passwordInput.classList.remove("correct-input");
+  } else if (passwordValue.length < 8) {
+      passwordErr.textContent = "비밀번호를 8자 이상 입력해주세요.";
+      passwordInput.classList.add("error-input");
+      passwordInput.classList.remove("correct-input");
+  } else {
+      passwordErr.textContent = "";
+      passwordInput.classList.remove("error-input");
+      passwordInput.classList.add("correct-input");
+  }
+  toggleButton();
+}
+
+// 비밀번호 보이기/숨기기 기능
+function togglePasswordVisibility(input, button) {
+  if (input.type === "password") {
+      input.type = "text";
+      button.innerHTML = '<img src="/images/eye-icon.png" class="eye-icon" alt="eye-off">';
+  } else {
+      input.type = "password";
+      button.innerHTML = '<img src="/images/invisible-eye-icon.png" class="eye-icon" alt="eye-on">';
+  }
+}
+
+// 이벤트 리스너 추가
+emailInput.addEventListener("focusout", validateEmail);
+passwordInput.addEventListener("focusout", validatePassword);
+passwordVisibility.addEventListener("click", () => togglePasswordVisibility(passwordInput, passwordVisibility));
+
+// 엔터 키 입력 시 검증 함수 실행
+emailInput.addEventListener("keydown", function(event) {
+  if (event.key === "Enter") {
+    validateEmail();
+  }
+});
+
+passwordInput.addEventListener("keydown", function(event) {
+  if (event.key === "Enter") {
+    validatePassword();
+  }
+});

sign-up.js

@@ -0,0 +1,133 @@
+/* login, signup 공통 */
+
+// 이메일 유효성 검사 함수
+function emailValidation(email) {
+    const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+    return emailRegex.test(email);
+}
+
+// 요소 가져오기
+const emailInput = document.getElementById("email");
+const passwordInput = document.getElementById("password");
+const passwordRepeatInput = document.getElementById("password-repeat");
+const emailErr = document.getElementById("emailErr");
+const passwordErr = document.getElementById("passwordErr");
+const passwordCheckErr = document.getElementById("passwordCheckErr");
+const passwordVisibility = document.getElementById("passwordVisibility");
+
+let isPasswordCheckTouched = false; // 비밀번호 확인 입력 여부 추적
+
+// 초기 오류 메시지 숨김
+emailErr.style.display = "none";
+passwordErr.style.display = "none";
+passwordCheckErr.style.display = "none";
+
+// 이메일 검증
+function validateEmail() {
+    const emailValue = emailInput.value.trim();
+    if (emailValue === "") {
+        emailErr.textContent = "이메일을 입력해주세요.";
+        emailErr.style.display = "block";
+        emailInput.classList.add("error-input");
+        emailInput.classList.remove("correct-input");
+    } else if (!emailValidation(emailValue)) {
+        emailErr.textContent = "잘못된 이메일 형식입니다.";
+        emailErr.style.display = "block";
+        emailInput.classList.add("error-input");
+        emailInput.classList.remove("correct-input");
+    } else {
+        emailErr.style.display = "none";
+        emailInput.classList.remove("error-input");
+        emailInput.classList.add("correct-input");
+    }
+    toggleButton();
+}
+
+// 비밀번호 검증
+function validatePassword() {
+    const passwordValue = passwordInput.value.trim();
+    if (passwordValue === "") {
+        passwordErr.textContent = "비밀번호를 입력해주세요.";
+        passwordErr.style.display = "block";
+        passwordInput.classList.add("error-input");
+        passwordInput.classList.remove("correct-input");
+    } else if (passwordValue.length < 8) {
+        passwordErr.textContent = "비밀번호를 8자 이상 입력해주세요.";
+        passwordErr.style.display = "block";
+        passwordInput.classList.add("error-input");
+        passwordInput.classList.remove("correct-input");
+    } else {
+        passwordErr.style.display = "none";
+        passwordInput.classList.remove("error-input");
+        passwordInput.classList.add("correct-input");
+    }
+    toggleButton();
+}
+
+// 비밀번호 확인 검증
+function validatePasswordCheck() {
+    const passwordValue = passwordInput.value.trim();
+    const passwordCheckValue = passwordRepeatInput.value.trim();
+
+    if (!isPasswordCheckTouched) {
+        passwordCheckErr.style.display = "none"; // 입력 전에는 오류 문구 숨김
+        return;
+    }
+
+    if (passwordCheckValue === "") {
+        passwordCheckErr.style.display = "none"; // 비밀번호 확인 필드가 비었을 때도 오류 메시지 숨김
+    } else if (passwordValue !== passwordCheckValue) {
+        passwordCheckErr.textContent = "비밀번호가 일치하지 않습니다.";
+        passwordCheckErr.style.display = "block";
+        passwordRepeatInput.classList.add("error-input");
+    } else {
+        passwordCheckErr.style.display = "none";
+        passwordRepeatInput.classList.remove("error-input");
+    }
+    toggleButton();
+}
+
+// 비밀번호 보이기/숨기기 기능
+function togglePasswordVisibility(input, button) {
+    if (input.type === "password") {
+        input.type = "text";
+        button.innerHTML = '<img src="/images/eye-icon.png" class="eye-icon" alt="eye-off">';
+    } else {
+        input.type = "password";
+        button.innerHTML = '<img src="/images/invisible-eye-icon.png" class="eye-icon" alt="eye-on">';
+    }
+}
+
+// 회원가입 버튼 활성화
+function toggleButton() {
+    const isFormValid =
+        emailErr.style.display === "none" &&
+        passwordErr.style.display === "none" &&
+        passwordCheckErr.style.display === "none" &&
+        emailInput.value.trim() !== "" &&
+        passwordInput.value.trim() !== "" &&
+        passwordRepeatInput.value.trim() !== "";
+
+    const signupButton = document.querySelector(".signup");
+    if (isFormValid) {
+        signupButton.disabled = false;
+        signupButton.classList.add("active");
+    } else {
+        signupButton.disabled = true;
+        signupButton.classList.remove("active");
+    }
+}
+
+// 이벤트 리스너 추가
+emailInput.addEventListener("focusout", validateEmail);
+passwordInput.addEventListener("focusout", validatePassword);
+passwordRepeatInput.addEventListener("input", () => {
+    isPasswordCheckTouched = true; // 사용자가 입력 시작했음을 추적
+    validatePasswordCheck(); // 입력 시에도 검증 함수 실행
+});
+passwordRepeatInput.addEventListener("keydown", function(event) {
+    if (event.key === "Enter") {
+        validatePasswordCheck();
+    }
+});
+passwordVisibility.addEventListener("click", () => togglePasswordVisibility(passwordInput, passwordVisibility));

signup.html

@@ -24,27 +24,33 @@ <h1>판다마켓</h1>
           <form>
           <div class="group">
             <label for="email">이메일</label>
-            <input type="email" id="email" name="email">
+            <input type="email" id="email" name="email" placeholder="이메일을 입력해주세요."
+            class="error-input">
+            <p id="emailErr" class="errMsg">이메일을 입력해주세요.</p>
           </div>
           <div class="group">
             <label for="username">닉네임</label>
-            <input type="username" id="username" name="username">
+            <input type="username" id="username" name="username" placeholder="닉네임을 입력해주세요.">
+            <p id="nicknameErr" class="errMsg"></p>
           </div>
           <div class="group">
             <label for="password">비밀번호</label>
             <div class="password-input">
-            <input type="password" id="password" name="password">
+            <input type="password" id="password" name="password" placeholder="비밀번호를 입력해주세요.">
             <img src="./image/invisible_icon.png" class="password-icon" alt="비밀번호 보기">
+            <p id="passwordErr" class="errMsg">비밀번호를 8자 이상 입력해주세요.</p>
            </div>
           </div>
            <div class="group">
             <label for="password-repeat">비밀번호 확인</label>
              <div class="password-input">
-              <input id="password-repeat" name="password-repeat">
-             <img src="./image/eye_icon.png" class="password-icon" alt="비밀번호 보기">
+              <input id="password-repeat" name="password-repeat" placeholder="비밀번호를 다시 한 번 입력해주세요."
+              class="error-input">
+             <img src="./image/eye_icon.png" class="password-icon1" alt="비밀번호 보기">
+             <p id="passwordCheckErr" class="errMsg">비밀번호가 일치하지 않습니다.</p>
              </div>
           </div>
-            <button type="submit">로그인</button>
+            <button type="submit">회원가입</button>
           </form>
         </div>
           <div class="bottom">
@@ -61,12 +67,12 @@ <h1>간편 로그인하기</h1>
         </div>
           </div>
           <div class="footer">
-             <h1>판다마켓이 처음이신가요?</h1>
+             <p>이미 회원이신가요?</p>
              <a href="./sign-in.html">로그인</a>
           </div>
 
 
     </div>
-
+    <script src='./sign-up.js'></script>
   </body>
 </html>