기존에 만들었던 로그인 폼이 너무 허접해서 적당히 클론할 만한 걸 찾다가 항상 쓰고있던 구글 로그인 폼이 떠올랐다.
바로 분석 고고 ✨
분석해보기
메인 컬러와 흰색의 조합으로 심플하면서도 직관적인 구글 로그인 폼..!!
구글 로그인 폼이 마음에 든 결정적인 이유는 바로 input에 focus를 줬을 때 발생하는 애니메이션 때문이다.
입력할 때에도 가이드가 사라지지 않는 placeholder와 border의 적절한 CSS 조합이 재밌어보였다.
무작정 따라 만들어보도록 하자.
파악한 것
- input의 focus 상태와 dirty 상태에 따른
- border의 색상과 두께 변화
- placeholder의 색상과 크기, 위치 변화
필요한 것
- input의 focus와 dirty의 실시간 상태
- CSS 변화를 위해 emotion에 넘기기 위한 상태를 담을 state
만들어보기
로직 작성
먼저 false가 초기값인 state를 선언해준다.
react-hook-form을 사용 중이므로
focus 상태는 input의 onFocus 메서드와 react-hook-form register의 onBlur 메서드를 사용하고,
dirty 상태는 react-hook-form의 getValues를 사용하여 관측해줬다.
조건부 스타일링
기존 placeholder 대신, 커스텀 placeholder를 만들어서 absolute를 이용해 input과 겹쳐줬다.
변화가 있어야 하는 속성들은 모두 focus || dirty 조건에 맞춰주고, color 속성은 focus 조건에만 변화가 생기므로 dirty를 빼준다.
결과물
후기
우선 생각한 대로 나와서 매우 만족스럽다. 😋
그리고 개발 도중 document.actvieElement라는 새로운 속성도 알게되었고, 까먹었던 onBlur event를 다시 알게 되었다.
어려웠던 점
처음엔 focus event에 초점을 두지 못했었다.
click event에 따라 UI가 변경되게 했었는데, 그러다 보니 로그인 페이지를 처음 들어올 때 autofocus가 될 때 또는 탭으로 input에 focus를 줄 때 click event라서 CSS가 작동하지 않아서 커서는 생기는데 CSS가 적용되지 않는 현상이 발생했다.
그제서야 focus 이벤트를 관측해야한다는 것을 뒤늦게 파악했고, 검색을 통해 스택오버플로우를 참고해 처음으로 적용해본 방법은 document.activeElement를 사용하는 것이었다.
document.activeElement는 현재 페이지에서 active 상태인 요소를 반환해주는 속성이었다.
해결
하지만, 이 속성도 트리거가 있어야 했고 실시간 파악의 문제점을 해결해주지는 못했다. 그래서 react hook form 공식 페이지 docs에서 한참을 헤매다가 register의 onBlur 속성을 발견했고, 발견하지 못한 onFocus는 input 자체의 onFocus를 사용했다.
처음엔 input 자체의 onBlur이벤트를 써보려고 했지만 {...register}의 사용량을 덮어쓴다는 에러가 나와서 docs에서 찾아보게 되었다.
이후로는 어려운 점이 없었다.
onClick 이벤트를 onFocus와 onBlur 이벤트로 나누어 함수를 선언하고 상태를 변경해주기만 하면 되었다.
추가해야할 것
나머지는 유효성 검사에 따른 색상 변경과 에러 문구만 추가하면 될 듯하다.
