refactor: 눈 모양 아이콘 누르면 비밀번호 보이게 구현

codeit-bootcamp-frontend · Apr 7, 2024 · 39b6f27 · 39b6f27
1 parent 9231d9a
commit 39b6f27
Showing 1 changed file with 4 additions and 13 deletions.
diff --git a/src/components/signinPage/Input.tsx b/src/components/signinPage/Input.tsx
@@ -64,19 +64,10 @@ function Input({
   validation,
 }: InputProps) {
   const [pwState, setPwState] = useState(false);
-  const passwordRef = useRef<HTMLInputElement>(null);
   const error = errors[id];
 
   const toggleEyesButton = () => {
-    if (passwordRef.current) {
-      if (pwState) {
-        passwordRef.current.type = "text";
-        setPwState(false);
-      } else {
-        passwordRef.current.type = "password";
-        setPwState(true);
-      }
-    }
+    setPwState((prev) => !prev);
   };
 
   return (
@@ -85,17 +76,17 @@ function Input({
         <Label htmlFor={id}>{label}</Label>
         <InputForm
           id={id}
-          type={type}
+          type={pwState ? "password" : "text"}
           placeholder={placeholder}
           $error={!!error}
           {...validation}
         />
         {type === "password" && (
           <ImgPosition onClick={toggleEyesButton}>
             {pwState ? (
-              <Image src={setPwOff} alt="Pw-off" />
-            ) : (
               <Image src={setPwOn} alt="Pw-on" />
+            ) : (
+              <Image src={setPwOff} alt="Pw-off" />
             )}
           </ImgPosition>
         )}