From 08b54c6a4e2b1b5c7764fe7debdf2c36ec3f4c7e Mon Sep 17 00:00:00 2001 From: jaewon8405 Date: Thu, 12 Jun 2025 18:07:21 +0900 Subject: [PATCH 1/7] =?UTF-8?q?Feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EB=B0=8F=20=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20=EC=9C=A0?= =?UTF-8?q?=ED=9A=A8=EC=84=B1=20=EA=B2=80=EC=82=AC=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- login.html | 3 +++ login.js | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 55 insertions(+) create mode 100644 login.js diff --git a/login.html b/login.html index 100fcdf..03f89ee 100644 --- a/login.html +++ b/login.html @@ -25,12 +25,14 @@
+
보기 아이콘 +
로그인 @@ -51,5 +53,6 @@ + diff --git a/login.js b/login.js new file mode 100644 index 0000000..cc7a640 --- /dev/null +++ b/login.js @@ -0,0 +1,52 @@ +const $userId = document.querySelector('#userId'); +const $IdError = document.querySelector('#IdError'); +const $password = document.querySelector('#password'); +const $passwordError = document.querySelector('#passwordError'); +function handleFocustOutId() { + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + const value = $userId.value.trim(); + if (value === '') { + $IdError.style.display = 'block'; + $IdError.innerText = '이메일을 입력해주세요.'; + $userId.style.border = '2px solid red'; + } else if (!emailPattern.test(value)) { + $IdError.style.display = 'block'; + $IdError.innerText = '잘못된 이메일 형식입니다.'; + $userId.style.border = '2px solid red'; + } else { + $IdError.style.display = 'none'; + $userId.style.border = ''; + } +} +function handleFocutOutPassWord() { + const value = $password.value.trim(); + if (value === '') { + $passwordError.style.display = 'block'; + $passwordError.innerText = '비밀번호를 입력해주세요.'; + $password.style.border = '2px solid red'; + } else if (value.length < 8) { + $passwordError.style.display = 'block'; + $passwordError.innerText = '비밀번호를 8자 이상 입력해주세요.'; + $password.style.border = '2px solid red'; + } else { + $passwordError.style.display = 'none'; + $password.style.border = ''; + } +} +function handleFocutOutId() { + if ($userId.value.trim() === '') { + $IdError.style.display = 'block'; + $IdError.innerText = '이메일을 입력해주세요.'; + $userId.style.border = '2px solid red'; + } +} +function handleFocutOutId() { + if ($userId.value.trim() === '') { + $IdError.style.display = 'block'; + $IdError.innerText = '이메일을 입력해주세요.'; + $userId.style.border = '2px solid red'; + } +} + +$userId.addEventListener('focusout', handleFocustOutId); +$password.addEventListener('focusout', handleFocutOutPassWord); From d2394f99ed848a060a17ebde2bf90cdba578b1ec Mon Sep 17 00:00:00 2001 From: jaewon8405 Date: Thu, 12 Jun 2025 18:17:47 +0900 Subject: [PATCH 2/7] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EB=B0=8F=20?= =?UTF-8?q?=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85=20=EB=B2=84=ED=8A=BC=20a?= =?UTF-8?q?=ED=83=9C=EA=B7=B8=EC=97=90=EC=84=9C=20button=ED=83=9C=EA=B7=B8?= =?UTF-8?q?=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- login.html | 2 +- signup.html | 2 +- styles/login-signup.css | 1 + 3 files changed, 3 insertions(+), 2 deletions(-) diff --git a/login.html b/login.html index 03f89ee..69ccd56 100644 --- a/login.html +++ b/login.html @@ -35,7 +35,7 @@ - + - + - + + diff --git a/signup.js b/signup.js new file mode 100644 index 0000000..2ba77ac --- /dev/null +++ b/signup.js @@ -0,0 +1,97 @@ +const $userId = document.querySelector('#userId'); +const $IdError = document.querySelector('#IdError'); +const $nickName = document.querySelector('#nickname'); +const $nicknameError = document.querySelector('#nicknameError'); +const $password = document.querySelector('#password'); +const $passwordError = document.querySelector('#passwordError'); +const $passwordCheck = document.querySelector('#passwordCheck'); +const $passwordCheckError = document.querySelector('#passwordCheckError'); +const $signupBtn = document.querySelector('#signupBtn'); +let idCheck = false; +let passwordCheck = false; +let nicknameCheck = false; +let passwordAuthCheck = false; + +function btnCheck() { + if (idCheck && passwordCheck && nicknameCheck && passwordAuthCheck) { + $signupBtn.disabled = false; + } else { + $signupBtn.disabled = true; + } +} + +function handleFocustOutId() { + const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; + const value = $userId.value.trim(); + if (value === '') { + $IdError.style.display = 'block'; + $IdError.innerText = '이메일을 입력해주세요.'; + $userId.style.border = '2px solid red'; + idCheck = false; + } else if (!emailPattern.test(value)) { + $IdError.style.display = 'block'; + $IdError.innerText = '잘못된 이메일 형식입니다.'; + $userId.style.border = '2px solid red'; + idCheck = false; + } else { + $IdError.style.display = 'none'; + $userId.style.border = ''; + idCheck = true; + } + btnCheck(); +} + +function handleFocusOutNickName() { + const value = $nickName.value.trim(); + if (value === '') { + $nicknameError.style.display = 'block'; + $nicknameError.innerText = '닉네임을 입력해주세요.'; + $nickName.style.border = '2px solid red'; + passwordCheck = false; + } else { + $nicknameError.style.display = 'none'; + $nickName.style.border = ''; + nicknameCheck = true; + } + btnCheck(); +} + +function handleFocutOutPassWord() { + const value = $password.value.trim(); + if (value === '') { + $passwordError.style.display = 'block'; + $passwordError.innerText = '비밀번호를 입력해주세요.'; + $password.style.border = '2px solid red'; + passwordCheck = false; + } else if (value.length < 8) { + $passwordError.style.display = 'block'; + $passwordError.innerText = '비밀번호를 8자 이상 입력해주세요.'; + $password.style.border = '2px solid red'; + passwordCheck = false; + } else { + $passwordError.style.display = 'none'; + $password.style.border = ''; + passwordCheck = true; + } + btnCheck(); +} + +function handleFocusOutPassWordCheck() { + const value = $passwordCheck.value.trim(); + if (value === $password.value) { + $passwordCheckError.style.display = 'none'; + $passwordCheck.style.border = ''; + passwordAuthCheck = true; + } else { + $passwordCheckError.style.display = 'block'; + $passwordCheckError.innerText = '비밀번호가 일치하지 않습니다.'; + $passwordCheck.style.border = '2px solid red'; + passwordAuthCheck = false; + } + btnCheck(); +} + +$userId.addEventListener('focusout', handleFocustOutId); +$password.addEventListener('focusout', handleFocutOutPassWord); +$nickName.addEventListener('focusout', handleFocusOutNickName); +$passwordCheck.addEventListener('focusout', handleFocusOutPassWordCheck); diff --git a/styles/login-signup.css b/styles/auth.css similarity index 100% rename from styles/login-signup.css rename to styles/auth.css From 1c7dae7c4da207131d1fab0420594d611c5fbb0b Mon Sep 17 00:00:00 2001 From: jaewon8405 Date: Fri, 13 Jun 2025 17:02:25 +0900 Subject: [PATCH 5/7] =?UTF-8?q?Feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=EB=B2=84=ED=8A=BC=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C?= =?UTF-8?q?=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B4=EB=8F=99=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- signup.html | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/signup.html b/signup.html index 0e707d1..f62b312 100644 --- a/signup.html +++ b/signup.html @@ -21,7 +21,7 @@ - From 4557f08ab91553833c4e3d3865f702abd6a6b68f Mon Sep 17 00:00:00 2001 From: jaewon8405 Date: Fri, 13 Jun 2025 17:15:19 +0900 Subject: [PATCH 6/7] =?UTF-8?q?Feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B9=84=EB=B0=80=EB=B2=88?= =?UTF-8?q?=ED=98=B8=20visible=EC=A1=B0=EC=A0=88=20=EA=B8=B0=EB=8A=A5=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- images/{password-icon1.png => eye-close.png} | Bin images/{password-icon2.png => eye-open.png} | Bin login.html | 2 +- login.js | 10 ++++++++++ signup.html | 4 ++-- 5 files changed, 13 insertions(+), 3 deletions(-) rename images/{password-icon1.png => eye-close.png} (100%) rename images/{password-icon2.png => eye-open.png} (100%) diff --git a/images/password-icon1.png b/images/eye-close.png similarity index 100% rename from images/password-icon1.png rename to images/eye-close.png diff --git a/images/password-icon2.png b/images/eye-open.png similarity index 100% rename from images/password-icon2.png rename to images/eye-open.png diff --git a/login.html b/login.html index f646a1a..94b294b 100644 --- a/login.html +++ b/login.html @@ -31,7 +31,7 @@
- 보기 아이콘 + 보기 아이콘
diff --git a/login.js b/login.js index ce689ee..e00bb22 100644 --- a/login.js +++ b/login.js @@ -3,6 +3,7 @@ const $IdError = document.querySelector('#IdError'); const $password = document.querySelector('#password'); const $passwordError = document.querySelector('#passwordError'); const $loginBtn = document.querySelector('#loginBtn'); +const $viewIcon = document.querySelector('#viewIcon'); let idCheck = false; let passwordCheck = false; @@ -54,5 +55,14 @@ function handleFocutOutPassWord() { btnCheck(); } +function handlePassWordView() { + const isPassWordVisible = $password.type === 'text'; + $password.type = isPassWordVisible ? 'password' : 'text'; + $viewIcon.src = isPassWordVisible + ? 'images/eye-close.png' + : 'images/eye-open.png'; +} + $userId.addEventListener('focusout', handleFocustOutId); $password.addEventListener('focusout', handleFocutOutPassWord); +$viewIcon.addEventListener('click', handlePassWordView); diff --git a/signup.html b/signup.html index f62b312..80f4071 100644 --- a/signup.html +++ b/signup.html @@ -36,7 +36,7 @@
- 보기 아이콘 + 보기 아이콘
@@ -44,7 +44,7 @@
- 보기 아이콘 + 보기 아이콘
From de88b5d13c192c5f6e7dd7e9a6384f6d2e30bf91 Mon Sep 17 00:00:00 2001 From: jaewon8405 Date: Fri, 13 Jun 2025 17:18:59 +0900 Subject: [PATCH 7/7] =?UTF-8?q?Feat:=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=B9=84=EB=B0=80?= =?UTF-8?q?=EB=B2=88=ED=98=B8=20visible=EC=A1=B0=EC=A0=88=20=EA=B8=B0?= =?UTF-8?q?=EB=8A=A5=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- signup.html | 4 ++-- signup.js | 20 ++++++++++++++++++++ 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/signup.html b/signup.html index 80f4071..30a0b96 100644 --- a/signup.html +++ b/signup.html @@ -36,7 +36,7 @@
- 보기 아이콘 + 보기 아이콘
@@ -44,7 +44,7 @@
- 보기 아이콘 + 보기 아이콘
diff --git a/signup.js b/signup.js index 2ba77ac..125e904 100644 --- a/signup.js +++ b/signup.js @@ -7,6 +7,8 @@ const $passwordError = document.querySelector('#passwordError'); const $passwordCheck = document.querySelector('#passwordCheck'); const $passwordCheckError = document.querySelector('#passwordCheckError'); const $signupBtn = document.querySelector('#signupBtn'); +const $viewIcon = document.querySelector('#viewIcon'); +const $viewIcon2 = document.querySelector('#viewIcon2'); let idCheck = false; let passwordCheck = false; let nicknameCheck = false; @@ -91,7 +93,25 @@ function handleFocusOutPassWordCheck() { btnCheck(); } +function handlePassWordView() { + const isPassWordVisible = $password.type === 'text'; + $password.type = isPassWordVisible ? 'password' : 'text'; + $viewIcon.src = isPassWordVisible + ? 'images/eye-close.png' + : 'images/eye-open.png'; +} + +function handlePassWordView2() { + const isPassWordVisible = $passwordCheck.type === 'text'; + $passwordCheck.type = isPassWordVisible ? 'password' : 'text'; + $viewIcon2.src = isPassWordVisible + ? 'images/eye-close.png' + : 'images/eye-open.png'; +} + $userId.addEventListener('focusout', handleFocustOutId); $password.addEventListener('focusout', handleFocutOutPassWord); $nickName.addEventListener('focusout', handleFocusOutNickName); $passwordCheck.addEventListener('focusout', handleFocusOutPassWordCheck); +$viewIcon.addEventListener('click', handlePassWordView); +$viewIcon2.addEventListener('click', handlePassWordView2);