Feat: 회원가입 페이지 비밀번호 visible조절 기능 추가

Author: jaewon8405

signup.html

@@ -36,15 +36,15 @@
             <label for="password">비밀번호</label>
             <div class="input-wrapper">
               <input id="password" type="password" name="password" />
-              <img src="images/eye-close.png" alt="보기 아이콘" />
+              <img id="viewIcon" src="images/eye-close.png" alt="보기 아이콘" />
               <p id="passwordError" style="display: none; color: red"></p>
             </div>
           </div>
           <div class="form-group">
             <label for="passwordCheck">비밀번호 확인</label>
             <div class="input-wrapper">
               <input id="passwordCheck" type="text" name="text" />
-              <img src="images/eye-open.png" alt="보기 아이콘" />
+              <img id="viewIcon2" src="images/eye-open.png" alt="보기 아이콘" />
               <p id="passwordCheckError" style="display: none; color: red"></p>
             </div>
           </div>

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);