From c3cc5d0504b1e5ced3c363cdfe5f8f54bbd90594 Mon Sep 17 00:00:00 2001
From: hahahaday12 <hahahaday12@naver.com>
Date: Sun, 5 Nov 2023 11:24:23 +0900
Subject: [PATCH] =?UTF-8?q?Feat:=20=EB=B9=84=EB=B0=80=EB=B2=88=ED=98=B8=20?=
 =?UTF-8?q?=EB=B3=B4=EC=9D=B4=EA=B8=B0=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

---
 src/components/Form/JoinForm/input.js | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/Form/JoinForm/input.js b/src/components/Form/JoinForm/input.js
index 897f3b5..5c45b4e 100644
--- a/src/components/Form/JoinForm/input.js
+++ b/src/components/Form/JoinForm/input.js
@@ -28,6 +28,9 @@ const Joininput = () => {
   const [passwordMessage, setPasswordMessage] = useState('');
   const [passwordConfirmMessage, setPasswordConfirmMessage] = useState('');
 
+  const [passwordVisible, setPasswordVisible] = useState(false);
+  const [confirmPasswordVisible, setConfirmPasswordVisible] = useState(false);
+
   const navigateToHome = () => navigate('/');
 
   const handleEnter = (e) => {
@@ -118,6 +121,14 @@ const Joininput = () => {
     }
   }, []);
 
+  const togglePasswordVisibility = () => {
+    setPasswordVisible(!passwordVisible);
+  };
+
+  const toggleConfirmPasswordVisibility = () => {
+    setConfirmPasswordVisible(!confirmPasswordVisible);
+  };
+
   //passwordConfirm 의 값이 변경될 때 호출
   const onRepassword = useCallback(
     (e) => {
@@ -161,7 +172,7 @@ const Joininput = () => {
       </Formbox>
       <Formbox>
         <input
-          type="password"
+          type={passwordVisible ? 'text' : 'password'}
           placeholder="비밀번호를 입력하세요"
           autoComplete="off"
           name="password"
@@ -172,10 +183,13 @@ const Joininput = () => {
             {passwordMessage}
           </span>
         )}
+        <span className="password-toggle" onClick={togglePasswordVisibility}>
+          {passwordVisible ? '숨기기' : '보이기'}
+        </span>
       </Formbox>
       <Formbox>
         <input
-          type="password"
+          type={confirmPasswordVisible ? 'text' : 'password'}
           placeholder="비밀번호를 한번 더 입력해주세요"
           autoComplete="off"
           name="passwordConfirm"
@@ -189,6 +203,12 @@ const Joininput = () => {
             {passwordConfirmMessage}
           </span>
         )}
+        <span
+          className="password-toggle"
+          onClick={toggleConfirmPasswordVisibility}
+        >
+          {confirmPasswordVisible ? '숨기기' : '보이기'}
+        </span>
       </Formbox>
       <section>
         <RegisterButton
@@ -260,6 +280,7 @@ const Formbox = styled.div`
     }
   }
 `;
+
 const Linkbox = styled.div`
   left: 250px;
   width: 120px;
@@ -273,6 +294,7 @@ const Linkbox = styled.div`
     text-decoration: none;
   }
 `;
+
 const ButtonText = styled.div`
   font-size: ${fontsize[2]};
   color: white;