@@ -28,7 +26,7 @@
diff --git a/javaScript/login.js b/javaScript/login.js
new file mode 100644
index 00000000..1a8926fb
--- /dev/null
+++ b/javaScript/login.js
@@ -0,0 +1,83 @@
+document.addEventListener("DOMContentLoaded", function() {
+ const emailInput = document.getElementById("email");
+ const emailError = document.getElementById("email-error");
+
+ const passwordInput = document.getElementById("password");
+ const passwordError = document.getElementById("password-error");
+ const togglePasswordBtn = document.querySelector(".toggle-btn");
+
+ const loginButton = document.querySelector(".login-btn");
+
+ /* 이메일과 비밀번호 동시 유효성 검증 */
+ emailInput.addEventListener("focusout", validateForm);
+ passwordInput.addEventListener("focusout", validateForm);
+
+ /* 눈 아이콘 클릭 시 비밀번호 표시 및 숨기기 */
+ togglePasswordBtn.addEventListener("click", function() {
+
+ if (passwordInput.type === "password") {
+ passwordInput.type = "text";
+ togglePasswordBtn.src = "./images/open_eye.png";
+ } else {
+ passwordInput.type = "password";
+ togglePasswordBtn.src = "./images/close_eye.png";
+ }
+ });
+
+ /* 로그인을 위한 유효성 검증 */
+ function validateForm() {
+ let isValid = true;
+
+ /* 이메일 유효성 검증 */
+ const emailValue = emailInput.value.trim();
+ const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+ if (emailValue === "") {
+ showError(emailInput, emailError, "이메일을 입력해주세요.");
+ isValid = false;
+ } else if (!emailPattern.test(emailValue)) {
+ showError(emailInput, emailError, "잘못된 이메일 형식입니다.");
+ isValid = false;
+ } else {
+ hideError(emailInput, emailError);
+ }
+
+ /* 비밀번호 유효성 검증 */
+ const passwordValue = passwordInput.value.trim();
+
+ if (passwordValue === "") {
+ showError(passwordInput, passwordError, "비밀번호를 입력해주세요.");
+ isValid = false;
+ } else if (passwordValue.length < 8) {
+ showError(passwordInput, passwordError, "비밀번호를 8자 이상 입력해주세요.");
+ isValid = false;
+ } else {
+ hideError(passwordInput, passwordError);
+ }
+
+ /* 동시 유효성 검증 완료 시 로그인 버튼 활성화*/
+ loginButton.disabled = !isValid;
+ }
+
+ function showError(inputElement, errorElement, message) {
+ inputElement.classList.add("input-error");
+ errorElement.textContent = message;
+ errorElement.style.display = "block";
+ }
+
+ function hideError(inputElement, errorElement) {
+ inputElement.classList.remove("input-error");
+ errorElement.textContent = "";
+ errorElement.style.display = "none";
+ }
+
+ /* 로그인 버튼 클릭 시 페이지 이동 */
+ loginButton.addEventListener("click", function(event) {
+ event.preventDefault();
+ if (!loginButton.disabled) {
+ window.location.href = "/items";
+ }
+ });
+
+ loginButton.disabled = true;
+});
\ No newline at end of file
diff --git a/javaScript/signup.js b/javaScript/signup.js
new file mode 100644
index 00000000..62096bb1
--- /dev/null
+++ b/javaScript/signup.js
@@ -0,0 +1,134 @@
+document.addEventListener("DOMContentLoaded", function () {
+ const emailInput = document.getElementById("email");
+ const emailError = document.getElementById("email-error");
+
+ const usernameInput = document.getElementById("username");
+ const usernameError = document.getElementById("username-error");
+
+ const passwordInput = document.getElementById("password");
+ const passwordError = document.getElementById("password-error");
+
+ const confirmPasswordInput = document.getElementById("confirm-password");
+ const confirmPasswordError = document.getElementById("confirm-password-error");
+
+ const passwordToggle = document.querySelector("#password-toggle");
+ const confirmPasswordToggle = document.querySelector("#confirm-password-toggle");
+
+ const signupButton = document.querySelector(".login-btn");
+
+ function showError(input, errorElement, message) {
+ input.style.border = "2px solid red";
+ errorElement.textContent = message;
+ errorElement.style.color = "red";
+ errorElement.style.display = "block";
+ updateSignupButtonState();
+ }
+
+ function hideError(input, errorElement) {
+ input.style.border = "";
+ errorElement.textContent = "";
+ errorElement.style.display = "none";
+ updateSignupButtonState();
+ }
+
+ function validateInput() {
+ let isValid = true;
+
+ if (emailInput.value.trim() === "" || emailError.textContent !== "") isValid = false;
+ if (usernameInput.value.trim() === "" || usernameError.textContent !== "") isValid = false;
+ if (passwordInput.value.trim() === "" || passwordError.textContent !== "") isValid = false;
+ if (confirmPasswordInput.value.trim() === "" || confirmPasswordError.textContent !== "") isValid = false;
+
+ return isValid;
+ }
+
+ function updateSignupButtonState() {
+ signupButton.disabled = !validateInput();
+ }
+
+ emailInput.addEventListener("blur", function () {
+ const emailValue = emailInput.value.trim();
+ const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+
+ if (emailValue === "") {
+ showError(emailInput, emailError, "이메일을 입력해주세요.");
+ } else if (!emailPattern.test(emailValue)) {
+ showError(emailInput, emailError, "잘못된 이메일 형식입니다.");
+ } else {
+ hideError(emailInput, emailError);
+ }
+ });
+
+ usernameInput.addEventListener("blur", function () {
+ if (usernameInput.value.trim() === "") {
+ showError(usernameInput, usernameError, "닉네임을 입력해주세요.");
+ } else {
+ hideError(usernameInput, usernameError);
+ }
+ });
+
+ passwordInput.addEventListener("blur", function () {
+ const passwordValue = passwordInput.value.trim();
+
+ if (passwordValue === "") {
+ showError(passwordInput, passwordError, "비밀번호를 입력해주세요.");
+ } else if (passwordValue.length < 8) {
+ showError(passwordInput, passwordError, "비밀번호를 8자 이상 입력해주세요.");
+ } else {
+ hideError(passwordInput, passwordError);
+ }
+ });
+
+ passwordInput.addEventListener("input", function () {
+ validateConfirmPassword();
+ });
+
+ confirmPasswordInput.addEventListener("blur", function () {
+ validateConfirmPassword();
+ });
+
+ function validateConfirmPassword() {
+ const passwordValue = passwordInput.value.trim();
+ const confirmPasswordValue = confirmPasswordInput.value.trim();
+
+ if (confirmPasswordValue === "") {
+ showError(confirmPasswordInput, confirmPasswordError, "비밀번호를 다시 입력해주세요.");
+ } else if (passwordValue !== confirmPasswordValue) {
+ showError(confirmPasswordInput, confirmPasswordError, "비밀번호가 일치하지 않습니다.");
+ } else {
+ hideError(confirmPasswordInput, confirmPasswordError);
+ }
+ }
+
+ signupButton.addEventListener("click", function (event) {
+ event.preventDefault();
+ if (!signupButton.disabled) {
+ location.href = "login.html";
+ }
+ });
+
+ /* 눈 아이콘 클릭 시 비밀번호 표시 및 숨기기 */
+ passwordToggle.addEventListener("click", function () {
+
+ if (passwordInput.type === "password") {
+ passwordInput.type = "text";
+ passwordToggle.src = "./images/open_eye.png"; // 사선 없는 눈 아이콘
+ } else {
+ passwordInput.type = "password";
+ passwordToggle.src = "./images/close_eye.png"; // 사선 있는 눈 아이콘
+ }
+ });
+
+ confirmPasswordToggle.addEventListener("click", function () {
+
+ if (confirmPasswordInput.type === "password") {
+ confirmPasswordInput.type = "text";
+ confirmPasswordToggle.src = "./images/open_eye.png";
+ } else {
+ confirmPasswordInput.type = "password";
+ confirmPasswordToggle.src = "./images/close_eye.png";
+ }
+ });
+
+ updateSignupButtonState();
+});
\ No newline at end of file
diff --git a/login.html b/login.html
index 2a01ab04..5350cbcc 100644
--- a/login.html
+++ b/login.html
@@ -3,7 +3,7 @@
- 로그인
+ 판다마켓 로그인
@@ -15,13 +15,15 @@
+
\ No newline at end of file
diff --git a/signup.html b/signup.html
index 5965b06d..3c9ce68f 100644
--- a/signup.html
+++ b/signup.html
@@ -3,7 +3,7 @@
- 
@@ -84,12 +82,10 @@ -
-
-
-
- 
- 
- 
-
+ -
+
-
+
-
+
판다마켓
@@ -37,5 +39,6 @@판다마켓
판다마켓이 처음이신가요? 회원가입
판다마켓
@@ -46,5 +50,6 @@판다마켓
이미 회원이신가요? 로그인