2048 퍼즐게임 + 랭킹보드 설계

목적

사이트에 간단한 미니게임을 넣어 회원들이 재미로 등수를 겨룰 수 있게 한다. 부담 없는 사내 이벤트성 기능.

범위

• 2048 스타일 퍼즐게임 1개
• 최고 점수 기준 전체 랭킹보드 (TOP 10)
• 로그인(승인 회원) 전용

페이지 배치

• 새 독립 페이지 /game.html → permalink /game/
• board.html, stats.html과 동일한 front matter 패턴 사용:

  ---
  layout: default
  title: 2048
  permalink: /game/
  ---
  

• _config.yml의 navigation에 메뉴 항목 추가 (헤더 nav에 노출)

인증

• assets/js/auth-guard.js의 requireApproved(callback) 사용
• 비로그인 또는 미승인 회원은 /login/으로 리다이렉트 (기존 패턴과 동일)
• 로그인 승인 회원만 게임 플레이 및 점수 제출 가능

게임 로직

• 2048, 4x4 그리드, 순수 vanilla JS (외부 라이브러리 없음)
• 조작: 키보드 화살표 + 모바일 터치 스와이프
• 게임오버 시 최종 점수 확정

데이터 모델 (Firestore)

새 컬렉션 game_scores, 문서 ID = uid:

{
  nickname: string,
  bestScore: number,
  updatedAt: serverTimestamp
}

• 게임 종료 시 현재 점수가 기존 bestScore보다 크면 setDoc으로 갱신
• 매니페스트 제한 없음 (몇 판이든 플레이 가능, 최고점만 저장)
• 점수는 클라이언트가 계산해 그대로 저장 (서버 재검증 없음 — 친목 랭킹보드 수준의 신뢰 모델)

랭킹보드

• 같은 페이지 하단에 TOP 10 리스트 표시
• stats.js의 getTop10 패턴처럼 getDocs(collection(db, "game_scores")) 후 bestScore 내림차순 정렬, 상위 10개 표시
• 닉네임은 Firestore에 저장된 값을 그대로 사용 (회원가입 시 등록된 닉네임)
• 본인의 현재 순위/최고점수도 별도로 표시

보안 규칙

• game_scores/{uid} 문서는 본인(uid 일치)만 write 가능하도록 Firestore 보안 규칙 필요
• 프로젝트에 firestore.rules 파일이 없음 → 콘솔에서 규칙을 관리 중일 가능성. 구현 단계에서 현재 규칙 확인 후 필요한 규칙 추가 방법 안내

테스트

• 게임 로직(타일 이동/병합/게임오버 판정)에 대한 간단한 자기검증 스크립트 (assert 기반)