■ 소개
오늘은 고대하던 모각DAY입니다.
.
오전에 육아를 빡세게 한뒤 역삼으로 출발했습니다..
.
오늘 집중적으로 해결한 TASK은 아래와 같습니다.
1) 난이도 도입
2) ESG 이슈 대응 비용 보정
3) 리더보드 도입
4) 구글 로그인
.
■ 진행 및 결과
모각데이인 만큼 미리 구성원들에게 궁금한 것을 정리해갔습니다.
그리고 철면피 깔고 많이 여쭤봤습니다.
효은님이 모각 참여하시면 디자인쪽도 물어봤을텐데 아쉬웠습니다.
.
TASK별 결과물은 아래와 같습니다.
1) 난이도 도입
하드/노말/이지 모드로 랜딩페이지에서 난이도를 선택할 수 있게 했습니다.
난이도에 따라 ESG 이슈 발생 빈도가 달라집니다.
2) ESG 이슈 대응 비용 보정
게임이 진행되어도 ESG 이슈에 대응하는 비용은 고정되어 있었습니다.
기업의 규모가 커지면 당연히 그에 비례해 ESG 이슈에 대응을 하는 비용이 증가하기 마 련입니다.
이를 반영해 시간이 지날 수록 ESG 이슈 대응 비용이 증가하도록 세팅했습니다.
(그동안은 난이도가 너무 낮았습니다.)
.
3) ★ 리더보드
지난번 DAILY 후기에서 말씀드린 것처럼 리더보드를 도입해보려고 했습니다.
참고한 사이트는 가상 지구의 타일을 판매하는 "EARTH 2"라는 플랫폼의 리더보드입니다.
커서의 도움으로 리더보드를 만들었습니다.
최고 회사 잔고, 최고 개인 자산, 최고 진행 턴을 달성하는 top30 유저를 확인할 수 있습니다.
.
4) 구글 로그인
위의 리더보드와 연계해서 반드시 필요했던 것이 사용자 관리입니다.
그래서 firebase의 장점인 구글 로그인 세팅이 편리한 점을 백분활용하여 구글 로그인을 달았습니다.
위의 리더보드에 기록을 올리려면 구글 로그인을 해야합니다.
.
이 세팅과 관련해서 JUN님께 백엔드 구축에 대해서 조언을 받았습니다.
해당 내용은 따로 정리하겠습니다.
.
■ 배운 점
<백엔드 구축>
백앤드를 구축하기 전에 조언을 받은데로 미리 틀을 구상해봤습니다.
https://docs.google.com/spreadsheets/d/1Gz40yIvJWbWTWAUsw3N4BHp8C7IQbxVS0Zl-fQD1qlo/edit?usp=sharing
.
여기서 추가된게 바로 구글 로그인입니다.
성준님의 조언 덕분에 필요하다고 판단할 수 있었습니다-!
.
구글 로그인을 다는 것은 생각보다 쉬웠습니다.
1) 커서에 아래 내용을 붙여 넣었습니다
구글 로그인 기능을 붙이고 싶어.
그런데 구글 로그인은 옵션이고,
로그인하면 나중에 만들 리더보드에 기록을 남길 수 있게 미리 세팅해줘.
리더보드는 사용자 중 각 분야 TOP 30을 확인할 수 있는 창이야
ex) 가장 많은 회사 잔고, 가장 많은 내 잔고, 가장 많은 턴 진행 등등2) 작동을 안해서 아래 프롬프트를 붙여 넣었습니다.
작동은 안해3) 아래와 같은 답을 주었습니다.
구글 로그인이 작동하지 않는군요. Firebase 설정을 확인해보겠습니다.
Firebase 콘솔에서 구글 로그인을 활성화해야 합니다. 다음 단계를 따라해보세요:
Firebase 콘솔 설정 (필수)
Firebase 콘솔 접속: https://console.firebase.google.com
프로젝트 선택: "exiters-frompter" 프로젝트
Authentication 활성화:
왼쪽 메뉴에서 "Authentication" 클릭
"Get started" 버튼 클릭
Google 로그인 활성화:
"Sign-in method" 탭 클릭
"Google" 클릭
"Enable" 토글을 켜기
"Save" 클릭
Authorized domains 추가:
"Authentication" → "Settings" 탭
"Authorized domains"에 다음 추가:
localhost
127.0.0.1
배포 도메인 (있다면)
브라우저에서 확인
개발자 도구 열기: F12
Console 탭에서 에러 메시지 확인
Network 탭에서 Firebase 요청 실패 여부 확인
Firebase 콘솔 설정을 완료한 후 다시 테스트해보세요. 여전히 안 되면 브라우저 콘솔의 에러 메시지를 알려주세요!4) 하라는데로 FIREBASE 홈페이지로 가서 따라했습니다.
.
놀랍게도 그게 다입니다.
.
그 후에는 구글 이미지를 따와서 좀 꾸미고, 버튼의 워딩만 좀 손보았습니다.
.
외형 구성이 완료된 후에 JUN님의 도움을 받아 아래 프롬프트를 추가로 입력했습니다.
회원가입한 사용자는 users collection에 연결해서 운영할 수 있게 설정해줘이 프롬프트를 넣으니 아래와 같은 대답을 주었고, 전체적으로 코딩 내용에
구글 로그인한 내역을 활용하는 것들이 추가되었습니다.
✅ 사용자 관리 시스템 완성! 👤
회원가입한 사용자를 users 컬렉션에 연결해서 운영할 수 있는 시스템을 완성했습니다:
🗄️ 데이터베이스 구조
users 컬렉션: 사용자 프로필 및 통계 저장
leaderboard_records 컬렉션: 리더보드 기록 저장
👤 사용자 프로필 기능
자동 프로필 생성: Google 로그인 시 자동으로 users 컬렉션에 프로필 생성
게임 통계 추적:
총 게임 수, 승리 수, 승률
최고 회사 잔고, 최고 개인 자산, 최고 진행 턴
마지막 게임 결과 및 날짜
선호 설정 저장:
기본 난이도 (Easy/Normal/Hard)
기본 EXIT 목표 금액
�� 게임 연동
게임 종료 시: 자동으로 사용자 통계 업데이트 + 리더보드 기록 저장
게임 시작 시: 사용자 선호 설정을 기본값으로 자동 로드
��️ 새로운 페이지
/profile: 사용자 프로필 관리 페이지
게임 통계 확인
선호 설정 변경
마지막 게임 정보
🔗 네비게이션
랜딩 페이지: 로그인 시 "프로필" 버튼 추가
프로필 페이지: 설정 저장 및 통계 확인
📊 데이터 흐름
로그인 → users 컬렉션에 프로필 생성/업데이트
게임 플레이 → 선호 설정을 기본값으로 사용
게임 종료 → 통계 업데이트 + 리더보드 기록 저장
프로필 확인 → 실시간 통계 및 설정 관리
이제 브라우저에서 테스트해보세요:
http://localhost:8080 에서 Google 로그인
/profile 페이지에서 통계 및 설정 확인
게임 플레이 후 통계 업데이트 확인.
눈오지님께도 캐릭터화에 대한 조언을 들었는데,
아쉽게도 5시 이후에 육아에 복귀한다고 오늘은 더 할 시간이 없었습니다.
예상대로 모각 시간 순삭이었습니다.
다음번에 이어서 시도하겠습니다.
