스터디 4기 - In dark 웹 사이트 기반 게임 만들기 - 로그인 구현

기획 단계에 이어 로그인 페이지 기획과 화면 구현을 진행하였습니다.

게임을 진행 및 저장을 위해서는 유저 정보가 가장 먼저 필요해서 첫번째 순서로 진행합니다.

 

1. 로그인 기획

 

첫 방문 진입 흐름

1. 첫 화면 = 로그인 화면(전용 라우트 or 모달)
2. 구글 소셜 로그인 및 개인 이메일 로그인
3. 계정 연동 시 커뮤니티/채팅/진행도 동기화
4. cloude firebase 에 유저 정보 저장
5. 테마 연출: 커서 위치를 중심으로 횃불 스포트라이트(radial-gradient) 효과로 어두운 배경을 밝히는 컨셉

 

 

2. 기획에 따른 구현

firebase 프로젝트 등록 진행

 

이후에 firebase에서 얻은 api key를 내 웹 프로젝트에 적용.

 

인증 메뉴에서 이메일 및 구글 인증 허용 설정

 

 

기획한 테마 및 UI 를 구현

 

 

이렇게 로그인 단계를 구현 완료했고, vercel을 통해 프론트 배포 진행도 완료했습니다.

 

문제점

은 firebase auth api-key가 vite의 .env.local로 관리되도록 했었는데, 이 부분 때문에 다른 컴퓨터에서 .env.local 파일이 없는 사용자는 페이지가 먹통이었던 문제가 있었습니다.

 

해결 방법

vercel의 환경 변수 설정 페이지가 있는데, 그 곳에서 .env 파일을 생성해 첨부해주면 firebase의 인증키 값을 넣을 수 있고 배포 시 환경 변수 설정이 되어 다른 사용자도 접근이 가능해집니다. firebase 인증 키는 다른 사용자가에게 보여져도 되는 키 값이라 이렇게 환경 변수 설정 쪽에 넣었으나, 관리자 키 값같은 다른 사람에게 비밀이 되어야할 키 값은 넣으면 안됩니다. 

vercel 프로젝트의 환경변수 설정 세팅 페이지

 

 

로그인 시, 사용자의 로그인 정보는 cloude DB에 저장됩니다.

cloude firebase에 생성된 로그인 정보

 

 

이후 게임의 메인 페이지에 접속됩니다. 다음 시간에는 게임의 생명주기를 구현하고, 게임을 플레이할 수 있도록 구현 예정입니다~