프로젝트: spartaflix에 로그인 기능 추가

html파일

웹체험

(기존에 생성되어 있는 ID:user PW:0000)

팀장, 조원 : 이상헌

구현 내용

기존 강의에서 제작한 spartaflix예제에

로그인기능을 추가하여 유저별 영화기록을 분리함

사용된 기술

Html : 로그인 창의 뼈대를 생성

Css : 로그인 창의 위치, 사이즈, 색상 조절

JavaScript : 로그인창의 토글기능, FireStore에서 데이터 가져오기, Json저장

FireBase : FireStore을 사용하여 로그인 정보 및 유저별 데이터 저장

흐름도

회원가입

• 1. FireStore의 Api를 가져옴
• 2. 유저가 상단 로그인 버튼과 상호작용시 로그인창이 토글
• 3. 토글된 창에 ID와 PW를 입력 및 회원가입 버튼 상호작용
• 4. FireStore에 ID에 입력된 값과 같은 값이 있는지 대조
• • 1. 있는 경우 이미 존재하는 유저 알림 생성 - end
  • 2. 없는 경우 ID를 키로 PW를 값으로 FireStore에 등록, 회원가입 완료 알림 생성

로그인

• 1. FireStore의 Api를 가져옴
• 2. 유저가 상단 로그인 버튼과 상호작용시 로그인창이 토글
• 3. 토글된 창에 ID와 PW를 입력 및 로그인 버튼 상호작용
• 4. FireStore에 ID에 입력된 값과 같은 값이 있는지 대조
• • 1. 없는 경우 ID 혹은 PW오류 알림 생성 - end
  • 2. 있는 경우 ID를 키값을 넣은경우와 입력한 PW를 대조
• • 1. 틀린 경우 ID 혹은 PW오류 알림 생성 - end
  • 2. 맞은 경우 로그인 정보를 개인 컴퓨터 Json으로 저장이후 새로고침

영화 목록 갱신

• 1. 웹진입 혹은 새로고침시 Json이 있는 경우 그 정보로 로그인
  • 1. Json이 없는 경우 로그아웃으로 판정
• 2. 로그인이 되어있는 경우 FireStore에서 movies[유저ID]를 키로 데이터를 가져옴
  • 1. 로그아웃의 경우 영화목록을 empty로 비우기만 할뿐 데이터를 불러오지 않음

영화 기록하기

• 1. 로그인이 되어있는 경우 영화 기록하기 버튼 상호작용
  • 1. 로그아웃시 로그인 이후 가능하다는 알림 생성
• 2. 영화 기록창 토글
• 3. 이미지주소, 제목, 평점, 코멘트 입력후 기록하기 상호작용
• 4. 로그인 된 유저를 키로 FireStore의 movies DB에 저장 및 새로고침