🎯 g5se 두뇌 트레이닝 숫자 기억 게임 - 순차 기억력 테스트 & 최고 기록 도전

g5se가 설치된 디렉터리(루트에 `index.php`·`app/`이 있는 곳)에서 작업을 시작합니다. (g5se 설치는 https://github.com/gnuboard/g5se 참고)

**Step 1: 기본 골격 만들기**

`app/modules/number-memory/index.php` 파일을 생성하고 다음 내용을 작성하세요:

1. g5se modern shell 골격 적용:
   - `_common.php` 인클루드
   - `_head.inc.php` + `head.sub.php` 인클루드
   - `<div class="m-shell">` 래퍼
   - `_nav.inc.php` 네비게이션
   - `<main class="m-container">` 본문 영역
   - `_footer.inc.php` + `tail.sub.php` 인클루드

2. 페이지 제목과 간단한 설명 추가:
   - 제목: "🧠 숫자 기억력 게임"
   - 설명: "화면에 표시되는 숫자를 기억하고 입력하세요. 라운드가 진행될수록 숫자가 늘어납니다!"

3. 게임 영역 레이아웃:
   - 중앙 정렬된 게임 카드 (최대 너비 500px)
   - "시작하기" 버튼 (초기 상태)
   - 숫자 표시 영역 (숨김 상태)
   - 입력 폼 영역 (숨김 상태)

4. 스타일링:
   - 디자인 토큰 사용: `var(--m-surface)`, `var(--m-text)`, `var(--m-shadow)`, `var(--m-radius-lg)`
   - 게임 카드: 흰색 배경(라이트), 어두운 배경(다크), 그림자, 라운드 모서리, 패딩
   - 버튼: 파란색 배경 (#3b82f6), 흰색 텍스트, 호버 효과

**중요**: 아직 게임 로직이나 DB는 구현하지 마세요. 골격과 UI만 만듭니다.

**Step 2: 게임 로직 구현 (JavaScript)**

`app/modules/number-memory/index.php` 파일에 JavaScript를 추가하여 게임 로직을 구현하세요:

1. 게임 상태 관리:
   - `currentRound`: 현재 라운드 (1부터 시작)
   - `currentNumber`: 현재 라운드에서 표시할 숫자 문자열
   - `gameStarted`: 게임 진행 여부

2. "시작하기" 버튼 클릭 이벤트:
   - 버튼 숨기기
   - `currentRound = 1`로 초기화
   - `startRound()` 함수 호출

3. `startRound()` 함수:
   - 라운드 안내 표시 ("라운드 N: X자리 숫자")
   - 무작위 숫자 생성 (라운드 1: 3자리, 라운드 2: 4자리, ...)
   - 숫자를 큰 글씨로 2초간 표시
   - 2초 후 숫자 숨기고 입력 폼 표시

4. 입력 폼:
   - `<input type="text" maxlength="...">`로 숫자 입력 (최대 길이는 현재 라운드+2)
   - "제출" 버튼

5. "제출" 버튼 클릭 이벤트:
   - 입력값과 `currentNumber` 비교
   - 정답: 축하 메시지 표시 후 `currentRound++` → `startRound()` 재호출
   - 오답: "게임 오버! 라운드 N까지 도달" 메시지 표시 → 닉네임 입력 폼 표시

6. 시각적 피드백:
   - 숫자 표시 시 페이드인 애니메이션 (CSS transition)
   - 정답/오답 시 색상 변화 (초록/빨강)

**중요**: 아직 DB 저장 기능은 구현하지 마세요. 게임 플레이만 동작하도록 합니다.

**Step 3: SQLite DB 생성 및 기록 저장**

`app/modules/number-memory/index.php` 파일 상단(로직 부분)에 DB 처리를 추가하세요:

1. SQLite 연결:
   - `G5_DATA_PATH.'/modules'` 디렉터리가 없으면 생성 (`@mkdir(..., 0707, true)`)
   - `new PDO('sqlite:'.G5_DATA_PATH.'/modules/number-memory.sqlite')`로 연결
   - 에러 모드: `PDO::ERRMODE_EXCEPTION`

2. 테이블 생성 (첫 접근 시):
   ```sql
   CREATE TABLE IF NOT EXISTS records (
     id INTEGER PRIMARY KEY AUTOINCREMENT,
     nickname TEXT NOT NULL,
     round INTEGER NOT NULL,
     created_at DATETIME DEFAULT CURRENT_TIMESTAMP
   )
   ```

3. AJAX 엔드포인트 추가:
   - `$_POST['action'] === 'save_record'` 분기
   - `$_POST['nickname']`과 `$_POST['round']` 받기
   - 입력값 검증 (닉네임 1~20자, 라운드 1 이상)
   - prepared statement로 INSERT:
     ```php
     $stmt = $pdo->prepare('INSERT INTO records (nickname, round) VALUES (?, ?)');
     $stmt->execute([$nickname, $round]);
     ```
   - JSON 응답: `{"success": true, "message": "기록이 저장되었습니다!"}`
   - 에러 시: `{"success": false, "message": "저장 실패"}`

4. JavaScript 수정:
   - 게임 오버 시 닉네임 입력 폼 표시
   - "기록 저장" 버튼 클릭 시 `fetch()`로 POST 요청
   - 성공 시 "순위 보드 보기" 버튼 표시 (페이지 새로고침)

**중요**: prepared statement 사용 필수, htmlspecialchars()로 출력 이스케이프

**Step 4: 순위 보드 표시 및 최종 다듬기**

`app/modules/number-memory/index.php` 파일을 완성하세요:

1. 순위 보드 데이터 조회:
   - 페이지 로드 시 상위 10개 기록 SELECT:
     ```php
     $stmt = $pdo->query('SELECT nickname, round, created_at FROM records ORDER BY round DESC, created_at ASC LIMIT 10');
     $records = $stmt->fetchAll(PDO::FETCH_ASSOC);
     ```

2. 순위 보드 UI:
   - 게임 카드 아래에 "🏆 최고 기록 TOP 10" 섹션 추가
   - `<table>` 태그로 순위표 표시:
     - 열: 순위, 닉네임, 라운드, 날짜
     - 데이터 반복문으로 출력 (`htmlspecialchars()` 적용)
   - 기록이 없을 경우 "아직 기록이 없습니다" 메시지

3. 스타일 개선:
   - 테이블: 테두리, 패딩, 헤더 배경색 (디자인 토큰 사용)
   - 순위 1위에 금메달 이모지 🥇, 2위 🥈, 3위 🥉
   - 날짜 포맷: `date('Y-m-d H:i', strtotime($record['created_at']))`

4. 게임 리셋 버튼:
   - 게임 오버 후 "다시 도전하기" 버튼 추가
   - 클릭 시 페이지 새로고침 (location.reload())

5. 반응형 디자인:
   - 모바일에서 테이블이 스크롤 가능하도록 `overflow-x: auto` 래퍼
   - 게임 카드 최대 너비 500px, 작은 화면에서 100% 너비

6. 접근성:
   - 입력 필드에 `aria-label` 추가
   - 버튼에 명확한 텍스트 사용

**최종 확인 사항**:
- 다크모드 전환 시 모든 요소가 자연스럽게 변경되는지 확인
- SQL 인젝션, XSS 방어 확인
- 콘솔 에러 없는지 확인