프로젝트(Project)/[React2기] 모바일 앱을 웹사이트화 프로젝트

리액트 프로젝트 4주차 회고

만능 엔터테이너 2024. 9. 27. 22:09
728x90
반응형
SMALL


마지막 주차에는 구내식당 ui 화면을 구현하였습니다. 또한, 이제까지 구현하였던 코드들을 정리하여 합치는 시간을 가졌습니다.

아래에는 구현한 구내식당 ui 화면 및 이제까지 구현한 파트와 시연 동영상입니다.

bandicam 2024-09-13 17-45-46-474.mp4
2.42MB

 

KakaoTalk_20240918_211411347.mp4
0.17MB

 

오피스너 프로젝트 제안서_청년배포용.pdf
4.32MB

 

  • 수정된 로그인 ui 화면 구현 tailwindcss로 구현 완료
  • 로그인을 할 때, 이메일 주소에 @가 들어가지 않으면 경고 메시지를 보여주면서 로그인 주의사항을 표시
  • 비밀번호를 입력할 때, 비밀번호가 6자리 이상이 되지 않으면 경고 표시를 보여주면서 비밀번호는 6자리 이상으로 작성하도록 알림 설정 기능 추가
  • 로그인 버튼을 사용자가 클릭하면 아래의 빨간 글씨로 이메일 주소와 비밀번호가 나타나게 되면서 사용자의 로그인 정보를 표시하도록 설정
  • 회원 가입 및 아이디 / 비밀번호 찾기를 마우스로 올렸을 때, hover 효과를 주고 회원 가입을 사용자가 클릭시 alert 기능으로 “현재는 앱에서만 지원하는 기능입니다.”라고 표시
  • 밑 소셜 계정으로 간편 로그인 화면 밑에 소셜 계정을 나타내는 동그란 회색 원을 4개에서 각각의 원을 마우스를 올릴 시에 hover 효과로 테두리를 회색으로 변화하도록 설정
728x90
반응형
LIST