비밀번호눈아이콘 1
카테고리 설명
-
자주 쓰이는 기능이지만 할 때마다 귀찮은 비밀번호 input에 눈 아이콘 배치하기..이번에는 tailwind로 반영해보았다.이메일 유효성 검증은 이전 글에서 zod 라이브러리를 사용해서 스키마 정의 후 검증해주었고, password는 기준 값과 다른 경우 일치하지 않음 메시지와 input컬러를 바꿔준다. 메시지와 컬러는 useState로 주어서 텍스트 입력중일 때, input에서 벗어날 때 바로 체크해서 반영해주도록 했다. 8자 미만인 경우 검정색으로 8자 이상 입력 하라는 텍스트도 보여준다. 눈 아이콘 켜짐 여부에 따라 비밀번호는 암호화 되거나 그대로 보여준다. 사실 별 건 없지만.. 나중엔 더 빠르게 작업하기 위해 기록해두는 글. const [visibility, setVisibility] =..
반응형