[전유진] sprint4

auth.js

@@ -0,0 +1,69 @@
+/* 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");
+
+// 이메일 검증 
+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));

css/auth.css

@@ -0,0 +1,216 @@
+.main-btn,
+button {
+  cursor: pointer;
+}
+
+.main-btn:hover,
+button:hover {
+  background: var(--blue200);
+}
+
+.main-btn:active,
+button:active {
+  background: var(--blue300);
+}
+
+.main-btn:disabled,
+button:disabled {
+  background: var(--inactive);
+}
+
+main {
+  height: 61.8rem;
+  margin: 22rem auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+}
+
+.logo-box {
+  width: 39.6rem;
+  height: 13.2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 2rem;
+}
+
+.logo {
+  width: 10rem;
+  height: 10rem;
+}
+
+.pandamarket {
+  width: 26.6rem;
+  height: 12rem;
+  color: var(--blue100);
+}
+
+form {
+  margin-top: 4rem;
+  width: 64rem;
+  height: 44.6em;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.signup-form {
+  margin-bottom: 20rem;
+}
+
+.login-input {
+  margin-bottom: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.password-container {
+  position: relative;
+}
+
+.password-container input {
+  width: 100%; /* input이 가득 차도록 */
+  padding-right: 4rem; /* 아이콘과 텍스트 간 간격 확보 */
+  box-sizing: border-box; /* 패딩이 width에 포함되도록 설정 */
+}
+
+.eye-icon {
+  position: absolute;
+  right: 1.5rem;
+  top: 42%;
+  transform: translateY(-50%);
+  cursor: pointer;
+  width: 24px;
+  height: 24px;
+}
+
+label {
+  margin-bottom: 1rem;
+  font-size: 1.8rem;
+  font-weight: 700;
+}
+
+input {
+  font-size: 1.6rem;
+  height: 5.6rem;
+  padding: 2rem;
+  border-radius: 1.2rem;
+  background-color: var(--gray100);
+}
+
+input::placeholder {
+  color: var(--inactive);
+}
+
+.error-input {
+  border: 2px solid var(--red);
+}
+
+.correct-input {
+  border: 2px solid var(--blue100);
+}
+
+.errMsg {
+  display: block;
+  margin-left: 2rem;
+  color: var(--red);
+  font-size: 1.4rem;
+  font-weight: 600;
+}
+
+#btn {
+  height: 5.6rem;
+  color: var(--gray100);
+  font-size: 2rem;
+  font-weight: 600;
+  padding: 1.6rem 12.4rem;
+  border-radius: 4rem;
+  background-color: var(--inactive);
+}
+
+.easy-login {
+  width: 64rem;
+  margin: 4rem 0;
+  background-color: #e6f2ff;
+  border-radius: 0.8rem;
+}
+
+.easy-login-box {
+  height: 5rem;
+  margin: 1.6rem 2.3rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.easy-login-box p {
+  font-size: 1.6rem;
+  font-weight: 500;
+}
+
+.easy-login-icons {
+  display: flex;
+  gap: 1.6rem;
+}
+
+.question {
+  margin-top: 1rem;
+  display: flex;
+  justify-content: center;
+  font-size: 1.4rem;
+  font-weight: 500;
+}
+
+.question a {
+  text-decoration: underline;
+  color: var(--blue100);
+}
+
+.signup,
+.login {
+  font-size: 1.4rem;
+  font-weight: 500;
+}
+
+/* Mobile: 767px 이하  */
+@media (max-width: 767px) {
+  main {
+    margin: 15rem auto;
+    width: 100%;
+    max-width: 40rem; /* 최대 너비 400px */
+    padding: 0 1.6rem; /* 좌우 여백 16px */
+  }
+  .logo-box {
+    width: 100%;
+    max-width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  form {
+    margin-top: 0;
+    width: 100%; /* 부모(main)의 너비를 따름 */
+  }
+  .logo {
+    width: 5.2rem; 
+    height: auto;
+  }
+  .pandamarket {
+    width: 13.3rem; /* 텍스트 로고 크기 조절 */
+    height: auto;
+  }
+  label {
+    font-size: 1.4rem;
+  }
+  .easy-login {
+    width: 100%;
+    margin: 1.6rem 0;
+  }
+  .question {
+    width: 100%;
+  }
+}

css/base.css

@@ -1,3 +1,5 @@
+@import url(./unsupported.css);
+
 :root {
   /* Primary color */
   --blue100: #3692FF;