728x90
반응형
SMALL
주어진 피그마 디자인을 보고 수정된 로그인 화면 ui를 구축 완료하였습니다. 또한 로그인 상태 관리 및 유효성 검증을 위해서 react hook form을 이용하여 로그인 화면에 유효성 검증 기능을 추가완료하였습니다. 이번 주차에는 로그인 화면에 비밀 번호 및 인증 키에 대한 경고를 주는 등 로그인 화면에 대한 검증 기능과 상태 업데이트에 대한 기능을 많이 추가해 놓았습니다.
다음은 구현한 로그인 화면 ui와 관련 영상입니다.
KakaoTalk_20240913_174738424.mp4
0.87MB
- 수정된 로그인 ui 화면 구현 tailwindcss로 구현 완료
- 로그인을 할 때, 이메일 주소에 @가 들어가지 않으면 경고 메시지를 보여주면서 로그인 주의사항을 표시
- 비밀번호를 입력할 때, 비밀번호가 6자리 이상이 되지 않으면 경고 표시를 보여주면서 비밀번호는 6자리 이상으로 작성하도록 알림 설정 기능 추가
- 로그인 버튼을 사용자가 클릭하면 아래의 빨간 글씨로 이메일 주소와 비밀번호가 나타나게 되면서 사용자의 로그인 정보를 표시하도록 설정
- 회원 가입 및 아이디 / 비밀번호 찾기를 마우스로 올렸을 때, hover 효과를 주고 회원 가입을 사용자가 클릭시 alert 기능으로 “현재는 앱에서만 지원하는 기능입니다.”라고 표시
- 밑 소셜 계정으로 간편 로그인 화면 밑에 소셜 계정을 나타내는 동그란 회색 원을 4개에서 각각의 원을 마우스를 올릴 시에 hover 효과로 테두리를 회색으로 변화하도록 설정
728x90
반응형
LIST
'프로젝트(Project) > [React2기] 모바일 앱을 웹사이트화 프로젝트' 카테고리의 다른 글
| 리액트 프로젝트 4주차 회고 (0) | 2024.09.27 |
|---|---|
| 리액트 프로젝트 3주차 학습회고 (1) | 2024.09.21 |