🎮 g5se 레트로 아케이드 하이스코어 리더보드 - 전설의 게이머 명예의 전당

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

## Step 1: 프로젝트 구조 생성 & 메인 페이지 골격

다음 작업을 수행하세요:

### 1) 폴더 구조 생성
```bash
mkdir -p app/modules/arcade
mkdir -p data/modules/arcade-screenshots
```

### 2) app/modules/arcade/index.php 생성

아래 코드로 메인 페이지를 만드세요:

```php
<?php
include_once('./_common.php');

// SQLite DB 연결 (첫 접근 시 자동 생성)
@mkdir(G5_DATA_PATH.'/modules', 0707, true);
$db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/arcade.sqlite');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 테이블 스키마 자동 생성
$db->exec("
CREATE TABLE IF NOT EXISTS games (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    title TEXT NOT NULL,
    category TEXT NOT NULL,
    thumbnail TEXT,
    description TEXT,
    difficulty TEXT DEFAULT 'normal',
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE IF NOT EXISTS scores (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    game_id INTEGER NOT NULL,
    nickname TEXT NOT NULL,
    score INTEGER NOT NULL,
    screenshot TEXT,
    ip TEXT,
    status TEXT DEFAULT 'pending',
    admin_note TEXT,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (game_id) REFERENCES games(id)
);

CREATE INDEX IF NOT EXISTS idx_scores_game ON scores(game_id, score DESC);
CREATE INDEX IF NOT EXISTS idx_scores_status ON scores(status);
");

// 샘플 게임 데이터 삽입 (최초 1회만)
$count = $db->query("SELECT COUNT(*) FROM games")->fetchColumn();
if ($count == 0) {
    $stmt = $db->prepare("INSERT INTO games (title, category, description, difficulty) VALUES (?, ?, ?, ?)");
    $games = [
        ['갤러그', '슈팅', '외계 침략자를 격파하라! 클래식 종스크롤 슈팅', 'hard'],
        ['팩맨', '퍼즐', '미로를 누비며 점을 먹고 유령을 피하라', 'normal'],
        ['스트리트 파이터 II', '격투', '세계 최강의 파이터를 가려라', 'hard'],
        ['테트리스', '퍼즐', '블록을 쌓아 라인을 완성하라', 'normal'],
        ['아웃런', '레이싱', '페라리를 몰고 해안도로를 질주하라', 'easy']
    ];
    foreach ($games as $g) {
        $stmt->execute($g);
    }
}

// 전체 게임 목록 조회
$games = $db->query("SELECT * FROM games ORDER BY category, title")->fetchAll(PDO::FETCH_ASSOC);

// 최근 승인된 하이스코어 TOP 5
$recentScores = $db->query("
    SELECT s.*, g.title as game_title
    FROM scores s
    JOIN games g ON s.game_id = g.id
    WHERE s.status = 'approved'
    ORDER BY s.created_at DESC
    LIMIT 5
")->fetchAll(PDO::FETCH_ASSOC);

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<style>
.arcade-hero {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 60px 20px;
    text-align: center;
    margin: -32px -20px 32px;
    position: relative;
    overflow: hidden;
}
.arcade-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 2px,
        rgba(0,0,0,0.1) 2px,
        rgba(0,0,0,0.1) 4px
    );
    pointer-events: none;
}
.arcade-hero h1 {
    font-size: 3rem;
    font-weight: 900;
    color: #fff;
    text-shadow: 0 0 20px rgba(255,255,255,0.5),
                 0 0 40px rgba(255,0,255,0.3);
    margin: 0 0 16px;
    position: relative;
}
.arcade-hero p {
    color: rgba(255,255,255,0.9);
    font-size: 1.1rem;
    position: relative;
}
.game-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 48px;
}
.game-card {
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    padding: 20px;
    box-shadow: var(--m-shadow);
    transition: transform 0.2s;
}
.game-card:hover {
    transform: translateY(-4px);
}
.game-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--m-text);
    margin-bottom: 8px;
}
.game-category {
    display: inline-block;
    padding: 4px 12px;
    background: var(--m-primary);
    color: white;
    border-radius: 12px;
    font-size: 0.85rem;
    margin-bottom: 12px;
}
.recent-scores {
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    padding: 24px;
    box-shadow: var(--m-shadow);
}
.score-item {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--m-border, rgba(0,0,0,0.1));
}
.score-item:last-child {
    border-bottom: none;
}
</style>

<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    <main class="m-container" style="padding: 32px 20px 48px;">
        <div class="arcade-hero">
            <h1>🕹️ 레트로 아케이드</h1>
            <p>전설의 게이머가 되어 명예의 전당에 이름을 새기세요</p>
        </div>

        <h2 style="margin-bottom: 24px; color: var(--m-text);">🎮 게임 목록</h2>
        <div class="game-grid">
            <?php foreach ($games as $game): ?>
            <div class="game-card">
                <div class="game-title"><?php echo htmlspecialchars($game['title']); ?></div>
                <span class="game-category"><?php echo htmlspecialchars($game['category']); ?></span>
                <p style="color: var(--m-text-muted); margin: 12px 0;">
                    <?php echo htmlspecialchars($game['description']); ?>
                </p>
                <a href="/arcade/game/<?php echo $game['id']; ?>" 
                   style="display: inline-block; padding: 8px 16px; background: var(--m-primary); color: white; border-radius: 8px; text-decoration: none;">
                    리더보드 보기
                </a>
            </div>
            <?php endforeach; ?>
        </div>

        <h2 style="margin-bottom: 24px; color: var(--m-text);">🏆 최근 등록된 하이스코어</h2>
        <div class="recent-scores">
            <?php if (empty($recentScores)): ?>
                <p style="color: var(--m-text-muted); text-align: center;">아직 등록된 기록이 없습니다.</p>
            <?php else: ?>
                <?php foreach ($recentScores as $score): ?>
                <div class="score-item">
                    <div>
                        <strong style="color: var(--m-text);"><?php echo htmlspecialchars($score['game_title']); ?></strong>
                        <span style="color: var(--m-text-muted); margin-left: 12px;">
                            <?php echo htmlspecialchars($score['nickname']); ?>
                        </span>
                    </div>
                    <div style="font-weight: 700; color: var(--m-primary);">
                        <?php echo number_format($score['score']); ?>점
                    </div>
                </div>
                <?php endforeach; ?>
            <?php endif; ?>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<?php include_once('./tail.sub.php'); ?>
```

### 3) 작업 완료 확인

브라우저에서 `/arcade`로 접속하여:
- 네온 그라데이션 히어로 섹션
- 5개 샘플 게임 카드 그리드
- 빈 최근 하이스코어 섹션

이 표시되는지 확인하세요.

## Step 2: 게임별 리더보드 페이지 & 하이스코어 제출 폼

### 1) app/modules/arcade/game/[id]/index.php 생성

동적 segment를 활용한 게임별 페이지를 만드세요:

```php
<?php
include_once('./_common.php');

$game_id = (int)$_GET['id'];
if ($game_id <= 0) {
    alert('잘못된 접근입니다.');
    goto_url('/arcade');
}

$db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/arcade.sqlite');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 게임 정보 조회
$stmt = $db->prepare("SELECT * FROM games WHERE id = ?");
$stmt->execute([$game_id]);
$game = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$game) {
    alert('존재하지 않는 게임입니다.');
    goto_url('/arcade');
}

// TOP 10 리더보드 (승인된 기록만)
$stmt = $db->prepare("
    SELECT * FROM scores
    WHERE game_id = ? AND status = 'approved'
    ORDER BY score DESC
    LIMIT 10
");
$stmt->execute([$game_id]);
$leaderboard = $stmt->fetchAll(PDO::FETCH_ASSOC);

// 점수 제출 처리
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['submit_score'])) {
    $nickname = trim($_POST['nickname']);
    $score = (int)$_POST['score'];
    $ip = $_SERVER['REMOTE_ADDR'];

    // 유효성 검증
    if (empty($nickname) || $score <= 0) {
        alert('닉네임과 점수를 올바르게 입력하세요.');
    } else {
        // IP 기반 중복 제출 방지 (1시간 쿨다운)
        $stmt = $db->prepare("
            SELECT COUNT(*) FROM scores
            WHERE game_id = ? AND ip = ? AND created_at > datetime('now', '-1 hour')
        ");
        $stmt->execute([$game_id, $ip]);
        if ($stmt->fetchColumn() > 0) {
            alert('1시간에 한 번만 제출할 수 있습니다.');
        } else {
            // 스크린샷 업로드 처리
            $screenshot = null;
            if (!empty($_FILES['screenshot']['tmp_name'])) {
                $upload_dir = G5_DATA_PATH.'/modules/arcade-screenshots';
                @mkdir($upload_dir, 0707, true);
                $ext = pathinfo($_FILES['screenshot']['name'], PATHINFO_EXTENSION);
                $filename = uniqid('screenshot_').'.'.$ext;
                if (move_uploaded_file($_FILES['screenshot']['tmp_name'], $upload_dir.'/'.$filename)) {
                    $screenshot = $filename;
                }
            }

            // DB 삽입
            $stmt = $db->prepare("
                INSERT INTO scores (game_id, nickname, score, screenshot, ip)
                VALUES (?, ?, ?, ?, ?)
            ");
            $stmt->execute([$game_id, $nickname, $score, $screenshot, $ip]);

            alert('하이스코어가 등록되었습니다. 관리자 승인 후 리더보드에 반영됩니다.');
            goto_url('/arcade/game/'.$game_id);
        }
    }
}

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<style>
.game-header {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    padding: 40px 20px;
    border-radius: var(--m-radius-lg);
    margin-bottom: 32px;
    color: white;
}
.leaderboard-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 32px;
}
.leaderboard-table th {
    background: var(--m-primary);
    color: white;
    padding: 12px;
    text-align: left;
}
.leaderboard-table td {
    padding: 12px;
    border-bottom: 1px solid var(--m-border, rgba(0,0,0,0.1));
    color: var(--m-text);
}
.rank-medal {
    font-size: 1.5rem;
    margin-right: 8px;
}
.submit-form {
    background: var(--m-surface);
    padding: 24px;
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
}
.form-group {
    margin-bottom: 16px;
}
.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--m-text);
}
.form-group input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--m-border, #ddd);
    border-radius: 8px;
    background: var(--m-surface);
    color: var(--m-text);
}
.submit-btn {
    background: var(--m-primary);
    color: white;
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;
    width: 100%;
}
</style>

<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    <main class="m-container" style="padding: 32px 20px 48px;">
        <div class="game-header">
            <h1 style="margin: 0 0 8px;"><?php echo htmlspecialchars($game['title']); ?></h1>
            <p style="margin: 0; opacity: 0.9;"><?php echo htmlspecialchars($game['description']); ?></p>
        </div>

        <h2 style="margin-bottom: 16px; color: var(--m-text);">🏆 리더보드 TOP 10</h2>
        <table class="leaderboard-table">
            <thead>
                <tr>
                    <th>순위</th>
                    <th>닉네임</th>
                    <th>점수</th>
                    <th>등록일</th>
                </tr>
            </thead>
            <tbody>
                <?php if (empty($leaderboard)): ?>
                    <tr><td colspan="4" style="text-align: center; color: var(--m-text-muted);">아직 등록된 기록이 없습니다.</td></tr>
                <?php else: ?>
                    <?php foreach ($leaderboard as $idx => $row): ?>
                    <tr>
                        <td>
                            <?php
                            $medals = ['🥇', '🥈', '🥉'];
                            echo $idx < 3 ? '<span class="rank-medal">'.$medals[$idx].'</span>' : ($idx + 1).'위';
                            ?>
                        </td>
                        <td><?php echo htmlspecialchars($row['nickname']); ?></td>
                        <td style="font-weight: 700; color: var(--m-primary);"><?php echo number_format($row['score']); ?>점</td>
                        <td style="color: var(--m-text-muted);"><?php echo date('Y-m-d', strtotime($row['created_at'])); ?></td>
                    </tr>
                    <?php endforeach; ?>
                <?php endif; ?>
            </tbody>
        </table>

        <h2 style="margin-bottom: 16px; color: var(--m-text);">📝 하이스코어 등록</h2>
        <form method="post" enctype="multipart/form-data" class="submit-form">
            <div class="form-group">
                <label>닉네임</label>
                <input type="text" name="nickname" required maxlength="20" placeholder="게이머 태그를 입력하세요">
            </div>
            <div class="form-group">
                <label>점수</label>
                <input type="number" name="score" required min="1" placeholder="획득한 점수">
            </div>
            <div class="form-group">
                <label>스크린샷 (선택)</label>
                <input type="file" name="screenshot" accept="image/*">
                <small style="color: var(--m-text-muted);">관리자 검증을 위해 게임 화면 캡처를 업로드하세요</small>
            </div>
            <button type="submit" name="submit_score" class="submit-btn">🚀 하이스코어 등록</button>
        </form>

        <div style="margin-top: 24px; text-align: center;">
            <a href="/arcade" style="color: var(--m-primary);">← 게임 목록으로 돌아가기</a>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<?php include_once('./tail.sub.php'); ?>
```

### 2) 작업 완료 확인

- `/arcade/game/1` 접속 시 갤러그 리더보드 표시
- 하이스코어 제출 폼에서 닉네임/점수/스크린샷 입력 가능
- 제출 후 "관리자 승인 대기" 메시지 표시
- 1시간 이내 재제출 시 쿨다운 경고

## Step 3: 관리자 검증 시스템 & 승인 대시보드

### 1) app/modules/arcade/admin/index.php 생성

관리자 전용 검증 페이지를 만드세요:

```php
<?php
include_once('./_common.php');

// 관리자 권한 체크
if (!$is_member || $member['mb_level'] < 10) {
    alert('관리자만 접근할 수 있습니다.');
    goto_url('/arcade');
}

$db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/arcade.sqlite');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 승인/거부 처리
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $score_id = (int)$_POST['score_id'];
    $action = $_POST['action'];
    $note = trim($_POST['admin_note'] ?? '');

    if (in_array($action, ['approved', 'rejected'])) {
        $stmt = $db->prepare("UPDATE scores SET status = ?, admin_note = ? WHERE id = ?");
        $stmt->execute([$action, $note, $score_id]);
        alert($action === 'approved' ? '승인되었습니다.' : '거부되었습니다.');
        goto_url('/arcade/admin');
    }
}

// 대기 중인 점수 목록
$pendingScores = $db->query("
    SELECT s.*, g.title as game_title
    FROM scores s
    JOIN games g ON s.game_id = g.id
    WHERE s.status = 'pending'
    ORDER BY s.created_at DESC
")->fetchAll(PDO::FETCH_ASSOC);

// 최근 처리된 기록
$recentProcessed = $db->query("
    SELECT s.*, g.title as game_title
    FROM scores s
    JOIN games g ON s.game_id = g.id
    WHERE s.status IN ('approved', 'rejected')
    ORDER BY s.created_at DESC
    LIMIT 20
")->fetchAll(PDO::FETCH_ASSOC);

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<style>
.admin-header {
    background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
    padding: 40px 20px;
    border-radius: var(--m-radius-lg);
    margin-bottom: 32px;
    color: white;
}
.pending-card {
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--m-shadow);
}
.screenshot-preview {
    max-width: 100%;
    max-height: 300px;
    border-radius: 8px;
    margin: 12px 0;
}
.action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}
.approve-btn {
    flex: 1;
    padding: 10px;
    background: #10b981;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.reject-btn {
    flex: 1;
    padding: 10px;
    background: #ef4444;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
}
.status-approved { background: #d1fae5; color: #065f46; }
.status-rejected { background: #fee2e2; color: #991b1b; }
.status-pending { background: #fef3c7; color: #92400e; }
</style>

<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    <main class="m-container" style="padding: 32px 20px 48px;">
        <div class="admin-header">
            <h1 style="margin: 0 0 8px;">🛡️ 관리자 검증 대시보드</h1>
            <p style="margin: 0; opacity: 0.9;">하이스코어 승인 및 부정 기록 관리</p>
        </div>

        <h2 style="margin-bottom: 16px; color: var(--m-text);">⏳ 승인 대기 중 (<?php echo count($pendingScores); ?>건)</h2>
        <?php if (empty($pendingScores)): ?>
            <p style="color: var(--m-text-muted); text-align: center; padding: 40px 0;">대기 중인 기록이 없습니다.</p>
        <?php else: ?>
            <?php foreach ($pendingScores as $score): ?>
            <div class="pending-card">
                <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 12px;">
                    <div>
                        <h3 style="margin: 0 0 4px; color: var(--m-text);"><?php echo htmlspecialchars($score['game_title']); ?></h3>
                        <p style="margin: 0; color: var(--m-text-muted);">
                            닉네임: <strong><?php echo htmlspecialchars($score['nickname']); ?></strong> |
                            점수: <strong style="color: var(--m-primary);"><?php echo number_format($score['score']); ?>점</strong>
                        </p>
                    </div>
                    <span class="status-badge status-pending">대기중</span>
                </div>

                <?php if ($score['screenshot']): ?>
                    <img src="/data/modules/arcade-screenshots/<?php echo htmlspecialchars($score['screenshot']); ?>" 
                         class="screenshot-preview" alt="스크린샷">
                <?php else: ?>
                    <p style="color: var(--m-text-muted); font-style: italic;">스크린샷 없음</p>
                <?php endif; ?>

                <form method="post" style="margin-top: 16px;">
                    <input type="hidden" name="score_id" value="<?php echo $score['id']; ?>">
                    <input type="text" name="admin_note" placeholder="관리자 메모 (선택)" 
                           style="width: 100%; padding: 8px; margin-bottom: 12px; border: 1px solid var(--m-border, #ddd); border-radius: 8px; background: var(--m-surface); color: var(--m-text);">
                    <div class="action-buttons">
                        <button type="submit" name="action" value="approved" class="approve-btn">✅ 승인</button>
                        <button type="submit" name="action" value="rejected" class="reject-btn">❌ 거부</button>
                    </div>
                </form>
            </div>
            <?php endforeach; ?>
        <?php endif; ?>

        <h2 style="margin: 48px 0 16px; color: var(--m-text);">📋 최근 처리 내역</h2>
        <table class="leaderboard-table">
            <thead>
                <tr>
                    <th>게임</th>
                    <th>닉네임</th>
                    <th>점수</th>
                    <th>상태</th>
                    <th>처리일</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($recentProcessed as $row): ?>
                <tr>
                    <td><?php echo htmlspecialchars($row['game_title']); ?></td>
                    <td><?php echo htmlspecialchars($row['nickname']); ?></td>
                    <td><?php echo number_format($row['score']); ?>점</td>
                    <td>
                        <span class="status-badge status-<?php echo $row['status']; ?>">
                            <?php echo $row['status'] === 'approved' ? '승인' : '거부'; ?>
                        </span>
                    </td>
                    <td style="color: var(--m-text-muted);"><?php echo date('Y-m-d H:i', strtotime($row['created_at'])); ?></td>
                </tr>
                <?php endforeach; ?>
            </tbody>
        </table>

        <div style="margin-top: 24px; text-align: center;">
            <a href="/arcade" style="color: var(--m-primary);">← 메인으로 돌아가기</a>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<?php include_once('./tail.sub.php'); ?>
```

### 2) 작업 완료 확인

- 관리자 계정으로 `/arcade/admin` 접속
- 대기 중인 점수 카드에 스크린샷 미리보기
- 승인/거부 버튼 클릭 시 상태 변경
- 최근 처리 내역 테이블에 히스토리 표시

## Step 4: 게이머 프로필 페이지 & 전적 통계

### 1) app/modules/arcade/profile/[nickname]/index.php 생성

닉네임별 프로필 페이지를 만드세요:

```php
<?php
include_once('./_common.php');

$nickname = trim($_GET['nickname'] ?? '');
if (empty($nickname)) {
    alert('잘못된 접근입니다.');
    goto_url('/arcade');
}

$db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/arcade.sqlite');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 해당 닉네임의 전체 승인된 기록
$stmt = $db->prepare("
    SELECT s.*, g.title as game_title, g.category
    FROM scores s
    JOIN games g ON s.game_id = g.id
    WHERE s.nickname = ? AND s.status = 'approved'
    ORDER BY s.created_at DESC
");
$stmt->execute([$nickname]);
$records = $stmt->fetchAll(PDO::FETCH_ASSOC);

if (empty($records)) {
    alert('해당 게이머의 기록이 없습니다.');
    goto_url('/arcade');
}

// 통계 계산
$totalScore = array_sum(array_column($records, 'score'));
$totalGames = count(array_unique(array_column($records, 'game_id')));
$avgScore = $totalGames > 0 ? round($totalScore / $totalGames) : 0;

// 메달 집계
$medals = ['gold' => 0, 'silver' => 0, 'bronze' => 0];
foreach ($records as $record) {
    $stmt = $db->prepare("
        SELECT COUNT(*) as rank FROM scores
        WHERE game_id = ? AND status = 'approved' AND score > ?
    ");
    $stmt->execute([$record['game_id'], $record['score']]);
    $rank = $stmt->fetchColumn() + 1;
    
    if ($rank === 1) $medals['gold']++;
    elseif ($rank === 2) $medals['silver']++;
    elseif ($rank === 3) $medals['bronze']++;
}

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<style>
.profile-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 40px 20px;
    border-radius: var(--m-radius-lg);
    margin-bottom: 32px;
    color: white;
    text-align: center;
}
.profile-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    margin: 0 auto 16px;
}
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.stat-card {
    background: var(--m-surface);
    padding: 20px;
    border-radius: var(--m-radius-lg);
    text-align: center;
    box-shadow: var(--m-shadow);
}
.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--m-primary);
    margin-bottom: 8px;
}
.stat-label {
    color: var(--m-text-muted);
    font-size: 0.9rem;
}
.record-timeline {
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    padding: 24px;
    box-shadow: var(--m-shadow);
}
.timeline-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--m-border, rgba(0,0,0,0.1));
}
.timeline-item:last-child {
    border-bottom: none;
}
</style>

<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    <main class="m-container" style="padding: 32px 20px 48px;">
        <div class="profile-header">
            <div class="profile-avatar">🎮</div>
            <h1 style="margin: 0 0 8px;"><?php echo htmlspecialchars($nickname); ?></h1>
            <p style="margin: 0; opacity: 0.9;">레트로 게이머</p>
        </div>

        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-value"><?php echo number_format($totalScore); ?></div>
                <div class="stat-label">총 누적 점수</div>
            </div>
            <div class="stat-card">
                <div class="stat-value"><?php echo $totalGames; ?>개</div>
                <div class="stat-label">플레이한 게임</div>
            </div>
            <div class="stat-card">
                <div class="stat-value"><?php echo number_format($avgScore); ?></div>
                <div class="stat-label">평균 점수</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">
                    🥇<?php echo $medals['gold']; ?>
                    🥈<?php echo $medals['silver']; ?>
                    🥉<?php echo $medals['bronze']; ?>
                </div>
                <div class="stat-label">획득 메달</div>
            </div>
        </div>

        <h2 style="margin-bottom: 16px; color: var(--m-text);">📜 플레이 히스토리</h2>
        <div class="record-timeline">
            <?php foreach ($records as $record): ?>
            <div class="timeline-item">
                <div style="display: flex; justify-content: space-between; align-items: center;">
                    <div>
                        <strong style="color: var(--m-text); font-size: 1.1rem;">
                            <?php echo htmlspecialchars($record['game_title']); ?>
                        </strong>
                        <span style="margin-left: 12px; padding: 2px 8px; background: var(--m-primary); color: white; border-radius: 8px; font-size: 0.8rem;">
                            <?php echo htmlspecialchars($record['category']); ?>
                        </span>
                    </div>
                    <div style="text-align: right;">
                        <div style="font-weight: 700; color: var(--m-primary); font-size: 1.2rem;">
                            <?php echo number_format($record['score']); ?>점
                        </div>
                        <div style="color: var(--m-text-muted); font-size: 0.85rem;">
                            <?php echo date('Y-m-d', strtotime($record['created_at'])); ?>
                        </div>
                    </div>
                </div>
            </div>
            <?php endforeach; ?>
        </div>

        <div style="margin-top: 24px; text-align: center;">
            <a href="/arcade" style="color: var(--m-primary);">← 메인으로 돌아가기</a>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<?php include_once('./tail.sub.php'); ?>
```

### 2) 게임별 리더보드에 프로필 링크 추가

`app/modules/arcade/game/[id]/index.php`의 리더보드 테이블 부분을 수정:

```php
<td>
    <a href="/arcade/profile/<?php echo urlencode($row['nickname']); ?>" 
       style="color: var(--m-primary); text-decoration: none; font-weight: 600;">
        <?php echo htmlspecialchars($row['nickname']); ?>
    </a>
</td>
```

### 3) 작업 완료 확인

- 리더보드에서 닉네임 클릭 시 프로필 페이지 이동
- 총 점수, 플레이 게임 수, 평균 점수 통계 표시
- 메달 집계 (1위=금, 2위=은, 3위=동)
- 플레이 히스토리 타임라인 렌더링

## Step 5: 전체 랭킹 통합 페이지 & 필터 시스템

### 1) app/modules/arcade/rankings/index.php 생성

전체 게이머 통합 랭킹을 보여주는 페이지를 만드세요:

```php
<?php
include_once('./_common.php');

$db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/arcade.sqlite');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 필터 파라미터
$period = $_GET['period'] ?? 'all';
$category = $_GET['category'] ?? 'all';

// 기간 필터 SQL
$periodSql = '';
if ($period === 'week') {
    $periodSql = "AND s.created_at > datetime('now', '-7 days')";
} elseif ($period === 'month') {
    $periodSql = "AND s.created_at > datetime('now', '-30 days')";
}

// 카테고리 필터 SQL
$categorySql = '';
if ($category !== 'all') {
    $categorySql = "AND g.category = ".$db->quote($category);
}

// 닉네임별 총점 집계
$rankings = $db->query("
    SELECT 
        s.nickname,
        SUM(s.score) as total_score,
        COUNT(DISTINCT s.game_id) as games_played,
        MAX(s.created_at) as last_played
    FROM scores s
    JOIN games g ON s.game_id = g.id
    WHERE s.status = 'approved' {$periodSql} {$categorySql}
    GROUP BY s.nickname
    ORDER BY total_score DESC
    LIMIT 50
")->fetchAll(PDO::FETCH_ASSOC);

// 카테고리 목록
$categories = $db->query("SELECT DISTINCT category FROM games ORDER BY category")->fetchAll(PDO::FETCH_COLUMN);

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<style>
.filter-bar {
    background: var(--m-surface);
    padding: 20px;
    border-radius: var(--m-radius-lg);
    margin-bottom: 24px;
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    box-shadow: var(--m-shadow);
}
.filter-group {
    display: flex;
    gap: 8px;
    align-items: center;
}
.filter-btn {
    padding: 8px 16px;
    border: 2px solid var(--m-border, #ddd);
    background: var(--m-surface);
    color: var(--m-text);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
    transition: all 0.2s;
}
.filter-btn:hover {
    border-color: var(--m-primary);
}
.filter-btn.active {
    background: var(--m-primary);
    color: white;
    border-color: var(--m-primary);
}
.ranking-card {
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    padding: 16px 20px;
    margin-bottom: 12px;
    box-shadow: var(--m-shadow);
    display: flex;
    align-items: center;
    gap: 20px;
}
.rank-number {
    font-size: 2rem;
    font-weight: 900;
    color: var(--m-text-muted);
    min-width: 60px;
    text-align: center;
}
.rank-number.top3 {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.player-info {
    flex: 1;
}
.player-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--m-text);
    margin-bottom: 4px;
}
.player-stats {
    color: var(--m-text-muted);
    font-size: 0.9rem;
}
.total-score {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--m-primary);
    text-align: right;
}
</style>

<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    <main class="m-container" style="padding: 32px 20px 48px;">
        <h1 style="margin-bottom: 24px; color: var(--m-text);">🏆 전체 랭킹</h1>

        <div class="filter-bar">
            <div class="filter-group">
                <span style="color: var(--m-text); font-weight: 600;">기간:</span>
                <a href="?period=all&category=<?php echo $category; ?>" 
                   class="filter-btn <?php echo $period === 'all' ? 'active' : ''; ?>">전체</a>
                <a href="?period=week&category=<?php echo $category; ?>" 
                   class="filter-btn <?php echo $period === 'week' ? 'active' : ''; ?>">주간</a>
                <a href="?period=month&category=<?php echo $category; ?>" 
                   class="filter-btn <?php echo $period === 'month' ? 'active' : ''; ?>">월간</a>
            </div>
            <div class="filter-group">
                <span style="color: var(--m-text); font-weight: 600;">카테고리:</span>
                <a href="?period=<?php echo $period; ?>&category=all" 
                   class="filter-btn <?php echo $category === 'all' ? 'active' : ''; ?>">전체</a>
                <?php foreach ($categories as $cat): ?>
                    <a href="?period=<?php echo $period; ?>&category=<?php echo urlencode($cat); ?>" 
                       class="filter-btn <?php echo $category === $cat ? 'active' : ''; ?>">
                        <?php echo htmlspecialchars($cat); ?>
                    </a>
                <?php endforeach; ?>
            </div>
        </div>

        <?php if (empty($rankings)): ?>
            <p style="text-align: center; color: var(--m-text-muted); padding: 40px 0;">랭킹 데이터가 없습니다.</p>
        <?php else: ?>
            <?php foreach ($rankings as $idx => $player): ?>
            <div class="ranking-card">
                <div class="rank-number <?php echo $idx < 3 ? 'top3' : ''; ?>">
                    <?php
                    if ($idx === 0) echo '🥇';
                    elseif ($idx === 1) echo '🥈';
                    elseif ($idx === 2) echo '🥉';
                    else echo ($idx + 1);
                    ?>
                </div>
                <div class="player-info">
                    <div class="player-name">
                        <a href="/arcade/profile/<?php echo urlencode($player['nickname']); ?>" 
                           style="color: var(--m-text); text-decoration: none;">
                            <?php echo htmlspecialchars($player['nickname']); ?>
                        </a>
                    </div>
                    <div class="player-stats">
                        <?php echo $player['games_played']; ?>개 게임 플레이 |
                        최근 활동: <?php echo date('Y-m-d', strtotime($player['last_played'])); ?>
                    </div>
                </div>
                <div class="total-score">
                    <?php echo number_format($player['total_score']); ?>점
                </div>
            </div>
            <?php endforeach; ?>
        <?php endif; ?>

        <div style="margin-top: 32px; text-align: center;">
            <a href="/arcade" style="color: var(--m-primary); font-weight: 600;">← 메인으로 돌아가기</a>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<?php include_once('./tail.sub.php'); ?>
```

### 2) 메인 페이지에 랭킹 링크 추가

`app/modules/arcade/index.php`의 히어로 섹션 아래에 추가:

```php
<div style="text-align: center; margin-bottom: 32px;">
    <a href="/arcade/rankings" 
       style="display: inline-block; padding: 12px 24px; background: var(--m-primary); color: white; border-radius: 8px; text-decoration: none; font-weight: 600;">
        🏆 전체 랭킹 보기
    </a>
</div>
```

### 3) 작업 완료 확인

- `/arcade/rankings` 접속 시 전체 게이머 총점 랭킹 표시
- 기간 필터 (전체/주간/월간) 동작 확인
- 카테고리 필터 (전체/슈팅/퍼즐/격투/레이싱) 동작 확인
- TOP 3 메달 표시 및 그라데이션 효과
- 닉네임 클릭 시 프로필 페이지 이동

## Step 6: 신기록 알림 배너 & 업적 시스템

### 1) 신기록 알림 배너 추가

`app/modules/arcade/index.php`의 게임 목록 위에 다음 코드를 추가:

```php
// 최근 24시간 내 갱신된 신기록 조회
$newRecords = $db->query("
    WITH RankedScores AS (
        SELECT 
            s.*,
            g.title as game_title,
            ROW_NUMBER() OVER (PARTITION BY s.game_id ORDER BY s.score DESC) as rank
        FROM scores s
        JOIN games g ON s.game_id = g.id
        WHERE s.status = 'approved'
    )
    SELECT * FROM RankedScores
    WHERE rank = 1 AND created_at > datetime('now', '-24 hours')
    ORDER BY created_at DESC
    LIMIT 3
")->fetchAll(PDO::FETCH_ASSOC);
?>

<!-- 히어로 섹션 바로 아래에 추가 -->
<?php if (!empty($newRecords)): ?>
<div style="background: linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%); padding: 20px; border-radius: var(--m-radius-lg); margin-bottom: 32px; box-shadow: var(--m-shadow);">
    <h3 style="margin: 0 0 12px; color: #2d3436; display: flex; align-items: center; gap: 8px;">
        🔥 최근 24시간 신기록!
    </h3>
    <?php foreach ($newRecords as $record): ?>
    <div style="background: rgba(255,255,255,0.9); padding: 12px 16px; border-radius: 8px; margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center;">
        <div>
            <strong style="color: #2d3436;"><?php echo htmlspecialchars($record['game_title']); ?></strong>
            <span style="color: #636e72; margin-left: 12px;">
                <?php echo htmlspecialchars($record['nickname']); ?>님이 1위 달성!
            </span>
        </div>
        <span style="font-weight: 700; color: #d63031; font-size: 1.1rem;">
            <?php echo number_format($record['score']); ?>점
        </span>
    </div>
    <?php endforeach; ?>
</div>
<?php endif; ?>
```

### 2) 업적 시스템 구현

`app/modules/arcade/profile/[nickname]/index.php`에 업적 계산 로직 추가:

```php
// 기존 통계 계산 아래에 추가

// 업적 체크
$achievements = [];

// 첫 1위 달성
if ($medals['gold'] >= 1) {
    $achievements[] = [
        'icon' => '🏆',
        'title' => '첫 승리',
        'description' => '첫 1위 기록 달성',
        'rarity' => 'common'
    ];
}

// 3관왕
if ($medals['gold'] >= 3) {
    $achievements[] = [
        'icon' => '👑',
        'title' => '3관왕',
        'description' => '3개 게임에서 1위 달성',
        'rarity' => 'rare'
    ];
}

// 100만점 돌파
if ($totalScore >= 1000000) {
    $achievements[] = [
        'icon' => '💎',
        'title' => '밀리언 게이머',
        'description' => '총 누적 점수 100만점 돌파',
        'rarity' => 'epic'
    ];
}

// 올라운더 (5개 이상 게임 플레이)
if ($totalGames >= 5) {
    $achievements[] = [
        'icon' => '🎮',
        'title' => '올라운더',
        'description' => '5개 이상의 게임 플레이',
        'rarity' => 'common'
    ];
}

// 퍼펙트 게이머 (모든 게임 1위)
$allGamesCount = $db->query("SELECT COUNT(*) FROM games")->fetchColumn();
if ($medals['gold'] >= $allGamesCount && $allGamesCount > 0) {
    $achievements[] = [
        'icon' => '⭐',
        'title' => '퍼펙트 게이머',
        'description' => '모든 게임에서 1위 달성',
        'rarity' => 'legendary'
    ];
}
```

통계 그리드 아래에 업적 섹션 추가:

```php
<?php if (!empty($achievements)): ?>
<h2 style="margin-bottom: 16px; color: var(--m-text);">🏅 획득 업적</h2>
<div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 16px; margin-bottom: 32px;">
    <?php foreach ($achievements as $ach): ?>
    <div style="background: var(--m-surface); padding: 16px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); text-align: center;
                border: 2px solid <?php 
                    echo $ach['rarity'] === 'legendary' ? '#ffd700' : 
                        ($ach['rarity'] === 'epic' ? '#a855f7' : 
                        ($ach['rarity'] === 'rare' ? '#3b82f6' : '#94a3b8')); 
                ?>;">
        <div style="font-size: 3rem; margin-bottom: 8px;"><?php echo $ach['icon']; ?></div>
        <div style="font-weight: 700; color: var(--m-text); margin-bottom: 4px;"><?php echo $ach['title']; ?></div>
        <div style="color: var(--m-text-muted); font-size: 0.9rem;"><?php echo $ach['description']; ?></div>
    </div>
    <?php endforeach; ?>
</div>
<?php endif; ?>
```

### 3) 작업 완료 확인

- 메인 페이지에 최근 24시간 신기록 배너 표시
- 프로필 페이지에 업적 카드 렌더링
- 업적 등급별 테두리 색상 (전설=금색, 에픽=보라, 레어=파랑, 일반=회색)
- 조건 충족 시 업적 자동 해제

## Step 7: CRT 효과 & 레트로 UI 폴리싱

### 1) CRT 스캔라인 효과 추가

모든 페이지의 `<style>` 블록에 다음 CSS를 추가:

```css
/* CRT 효과 토글 */
.crt-mode {
    position: relative;
}
.crt-mode::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0) 0px,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0.1) 2px,
        rgba(0, 0, 0, 0.1) 4px
    );
    pointer-events: none;
    z-index: 9999;
    animation: scanline 8s linear infinite;
}
.crt-mode::after {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(
        ellipse at center,
        rgba(0, 0, 0, 0) 0%,
        rgba(0, 0, 0, 0.3) 100%
    );
    pointer-events: none;
    z-index: 9998;
}
@keyframes scanline {
    0% { transform: translateY(0); }
    100% { transform: translateY(100vh); }
}

/* 픽셀 폰트 적용 */
.pixel-text {
    font-family: 'Courier New', monospace;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* 네온 글로우 효과 */
.neon-glow {
    text-shadow: 
        0 0 10px currentColor,
        0 0 20px currentColor,
        0 0 30px currentColor,
        0 0 40px currentColor;
    animation: neon-flicker 3s infinite alternate;
}
@keyframes neon-flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        opacity: 1;
    }
    20%, 24%, 55% {
        opacity: 0.8;
    }
}
```

### 2) CRT 모드 토글 버튼 추가

모든 페이지의 `<main>` 시작 부분에 추가:

```php
<div style="position: fixed; bottom: 20px; right: 20px; z-index: 1000;">
    <button onclick="toggleCRT()" 
            style="background: var(--m-primary); color: white; border: none; padding: 12px 20px; border-radius: 50px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.3); font-weight: 600;">
        📺 CRT 모드
    </button>
</div>

<script>
function toggleCRT() {
    document.body.classList.toggle('crt-mode');
    const isEnabled = document.body.classList.contains('crt-mode');
    localStorage.setItem('crtMode', isEnabled ? '1' : '0');
}

// 페이지 로드 시 저장된 설정 복원
if (localStorage.getItem('crtMode') === '1') {
    document.body.classList.add('crt-mode');
}
</script>
```

### 3) 히어로 섹션에 네온 효과 적용

`app/modules/arcade/index.php`의 히어로 h1 태그를 수정:

```php
<h1 class="pixel-text neon-glow" style="font-size: 3rem; font-weight: 900; color: #fff; margin: 0 0 16px; position: relative;">
    🕹️ RETRO ARCADE
</h1>
```

### 4) 게임 카드에 호버 효과 강화

`.game-card` 스타일에 추가:

```css
.game-card {
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    padding: 20px;
    box-shadow: var(--m-shadow);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}
.game-card::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle, rgba(102, 126, 234, 0.1) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
}
.game-card:hover::before {
    opacity: 1;
}
.game-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 24px rgba(102, 126, 234, 0.3);
}
```

### 5) 리더보드 테이블 애니메이션

`.leaderboard-table tbody tr`에 추가:

```css
.leaderboard-table tbody tr {
    animation: fadeInUp 0.5s ease-out backwards;
}
.leaderboard-table tbody tr:nth-child(1) { animation-delay: 0.1s; }
.leaderboard-table tbody tr:nth-child(2) { animation-delay: 0.2s; }
.leaderboard-table tbody tr:nth-child(3) { animation-delay: 0.3s; }
.leaderboard-table tbody tr:nth-child(4) { animation-delay: 0.4s; }
.leaderboard-table tbody tr:nth-child(5) { animation-delay: 0.5s; }

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
```

### 6) 작업 완료 확인

- 우측 하단 CRT 모드 토글 버튼 클릭 시 스캔라인 효과 활성화
- 히어로 섹션 제목에 네온 글로우 애니메이션
- 게임 카드 호버 시 부드러운 확대 + 그림자 효과
- 리더보드 테이블 행이 순차적으로 페이드인
- localStorage로 CRT 모드 설정 유지