[본 캠프 16일차] 팀 프로젝트 4일차

firebase auth 를 이용하여 로그인 로그아웃 회원가입 기능 구현

 

1. 메인페이지 헤더부분에 로그인, 회원가입 버튼 생성 (localStorage 사용)

  1-1. 비로그인 시 로그아웃, 마이페이지 버튼 display: none 으로 안보이게 설정

  2-2. 회원가입 후 로그인 할 때 firebase 를 통해 첫 계정 인증한 뒤, localStorage 에 로그인 상태 저장을 하고 새로고침 시, 인증 정보를 firebase 에서 안가져오고 localStorage 를 통해 가져와 로그인 딜레이를 제거 (버튼이 새로고침 할 때마다 0.1초씩 보이던 현상 수정)

 

2. 회원가입 페이지 구현

  2-1. 회원가입 페이지에서 로그인 버튼 생성

  2-2. firebase 를 이용하여 SDK 설정 후,  auth 를 통해 계정 인증 기능 설정

  2-3. 회원가입 성공 시, 메인페이지로 이동

  2-4. 회원가입 실패 시, 이메일과 비밀번호 확인 메시지 출력

 

3. 로그인 페이지 구현

  3-1. 로그인 페이지에서 회원가입 버튼 생성

  3-2. 로그인 성공 시, 메인페이지로 이동

  3-3. 로그인 실패 시, 로그인 정보가 일치하지 않다는 메시지 출력

 

4. 로그인 시, 메인페이지 헤더부분에 로그아웃, 마이페이지 버튼 생성

  4-1. 로그인, 회원가입 버튼을 display: none 으로 안보이게 설정

  4-2. 마이페이지 버튼에 background-color 랜덤색상 설정 (1초마다 부드럽게 랜덤색상 변경)

  4-3. 새로고침 할 때 마다 마이페이지 버튼 background-color 랜덤색상 위에 팀원 아바타 이미지 랜덤 출력

 

5. 마이페이지 헤더부분 로그아웃, 마이페이지 버튼 생성

  5-1. 마이페이지는 로그인을 해야 메인페이지에 버튼이 보여서 로그아웃, 마이페이지 버튼만 생성

 

6. 상세페이지 헤더부분 로그인, 회원가입, 로그아웃, 마이페이지 버튼 생성

  6-1. 비로그인 상태인지 로그인 상태인지 체크 후, 해당 버튼 나오게 설정 및 기능 구현

 

 

새벽 3시 일단 제출해