🎯 g5se 타이핑 스피드 테스트 - 분당 타수(WPM) 측정 & 순위 기록

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

타이핑 스피드 테스트 페이지의 기본 골격을 만들어주세요.

**1) 폴더 & 파일 생성**
- `app/modules/typing-speed/index.php` 파일 생성
- URL은 자동으로 `/typing-speed`가 됩니다 (폴더 기반 라우팅)

**2) modern shell 골격 적용**
파일 내용:
```php
<?php
include_once('./_common.php');

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    <main class="m-container" style="padding: 32px 20px 48px;">
        <h1 style="font-size: 32px; font-weight: 700; margin-bottom: 8px;">⌨️ 타이핑 스피드 테스트</h1>
        <p style="color: var(--m-text-muted); margin-bottom: 32px;">60초 안에 얼마나 빠르고 정확하게 입력할 수 있나요?</p>
        
        <div id="app">
            <!-- JavaScript로 동적 렌더링 -->
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<?php include_once('./tail.sub.php'); ?>
```

**3) 기본 CSS 스타일**
`<main>` 태그 안에 `<style>` 블록 추가:
- 타이핑 영역 카드: `background: var(--m-surface); box-shadow: var(--m-shadow); border-radius: var(--m-radius-lg); padding: 24px;`
- 텍스트 색상: `color: var(--m-text);`
- 버튼: `background: #3b82f6; color: white; padding: 12px 24px; border-radius: 8px; font-weight: 600; cursor: pointer;`

**4) JavaScript 초기 구조**
`<script>` 블록 추가:
```javascript
const app = document.getElementById('app');

function renderStart() {
    app.innerHTML = `
        <div class="card">
            <h2>준비되셨나요?</h2>
            <p>아래 버튼을 누르면 60초 타이머가 시작됩니다.</p>
            <button id="startBtn">시작하기</button>
        </div>
    `;
    document.getElementById('startBtn').addEventListener('click', startTest);
}

function startTest() {
    app.innerHTML = '<p>테스트 시작!</p>';
}

renderStart();
```

완료 후 `/typing-speed`로 접속하여 "시작하기" 버튼이 보이는지 확인하세요.

타이핑 테스트 핵심 로직을 구현해주세요.

**1) 테스트 문장 데이터**
JavaScript 상단에 추가:
```javascript
const sentences = [
    '빠른 갈색 여우가 게으른 개를 뛰어넘습니다.',
    '코딩은 창의력과 논리력이 만나는 예술입니다.',
    '연습은 완벽을 만들지 않지만 영구적으로 만듭니다.',
    '타이핑 속도는 생산성의 기본입니다.',
    '키보드는 생각을 현실로 바꾸는 도구입니다.'
];
```

**2) 테스트 화면 렌더링**
`startTest()` 함수 수정:
```javascript
let timer = 60;
let timerInterval;
let targetSentence = sentences[Math.floor(Math.random() * sentences.length)];
let userInput = '';
let startTime = Date.now();

function startTest() {
    app.innerHTML = `
        <div class="card">
            <div style="display: flex; justify-content: space-between; margin-bottom: 16px;">
                <span style="font-size: 18px; font-weight: 600;">⏱️ <span id="timer">60</span>초</span>
                <span style="font-size: 18px; font-weight: 600;">정확도: <span id="accuracy">100</span>%</span>
            </div>
            <div id="sentence" style="font-size: 24px; line-height: 1.6; margin-bottom: 16px; color: var(--m-text-muted);"></div>
            <textarea id="input" placeholder="여기에 입력하세요..." style="width: 100%; height: 120px; font-size: 18px; padding: 12px; border: 2px solid #e5e7eb; border-radius: 8px; resize: none;"></textarea>
        </div>
    `;
    
    renderSentence();
    document.getElementById('input').addEventListener('input', handleInput);
    document.getElementById('input').focus();
    
    timerInterval = setInterval(() => {
        timer--;
        document.getElementById('timer').textContent = timer;
        if (timer <= 0) {
            endTest();
        }
    }, 1000);
}
```

**3) 실시간 입력 검증**
```javascript
function renderSentence() {
    const sentenceDiv = document.getElementById('sentence');
    let html = '';
    for (let i = 0; i < targetSentence.length; i++) {
        const char = targetSentence[i];
        const userChar = userInput[i];
        let color = 'var(--m-text-muted)';
        if (userChar !== undefined) {
            color = userChar === char ? '#10b981' : '#ef4444';
        }
        html += `<span style="color: ${color};">${char}</span>`;
    }
    sentenceDiv.innerHTML = html;
}

function handleInput(e) {
    userInput = e.target.value;
    renderSentence();
    
    const correct = userInput.split('').filter((c, i) => c === targetSentence[i]).length;
    const accuracy = userInput.length > 0 ? Math.round((correct / userInput.length) * 100) : 100;
    document.getElementById('accuracy').textContent = accuracy;
    
    if (userInput === targetSentence) {
        endTest();
    }
}
```

**4) 테스트 종료**
```javascript
function endTest() {
    clearInterval(timerInterval);
    const elapsedTime = (Date.now() - startTime) / 1000 / 60; // 분 단위
    const correctChars = userInput.split('').filter((c, i) => c === targetSentence[i]).length;
    const wpm = Math.round(correctChars / 5 / elapsedTime); // 단어당 5글자 가정
    const accuracy = Math.round((correctChars / userInput.length) * 100) || 0;
    
    app.innerHTML = `
        <div class="card" style="text-align: center;">
            <h2 style="font-size: 28px; margin-bottom: 16px;">🎉 테스트 완료!</h2>
            <div style="font-size: 48px; font-weight: 700; color: #3b82f6; margin-bottom: 8px;">${wpm} WPM</div>
            <div style="font-size: 20px; color: var(--m-text-muted); margin-bottom: 24px;">정확도: ${accuracy}%</div>
            <button onclick="location.reload()">다시 도전</button>
        </div>
    `;
}
```

완료 후 테스트해보세요:
1. 시작 버튼 클릭
2. 제시된 문장 입력 중 맞은 글자는 초록색, 틀린 글자는 빨간색으로 표시
3. 60초 경과 또는 문장 완성 시 WPM과 정확도 표시

SQLite 데이터베이스를 연동하여 기록 저장 및 순위판 기능을 추가해주세요.

**1) DB 초기화 (PHP 상단에 추가)**
`<?php` 블록 아래, `require_once` 전에:
```php
// 모듈 DB 디렉터리 생성
@mkdir(G5_DATA_PATH.'/modules', 0707, true);

// SQLite 연결
$db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/typing-speed.sqlite');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 테이블 생성
$db->exec("
    CREATE TABLE IF NOT EXISTS records (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        nickname TEXT NOT NULL,
        wpm INTEGER NOT NULL,
        accuracy REAL NOT NULL,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
    )
");
$db->exec("CREATE INDEX IF NOT EXISTS idx_wpm ON records(wpm DESC)");

// AJAX 처리
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    header('Content-Type: application/json');
    
    if ($_POST['action'] === 'save') {
        $nickname = trim($_POST['nickname'] ?? '');
        $wpm = intval($_POST['wpm'] ?? 0);
        $accuracy = floatval($_POST['accuracy'] ?? 0);
        
        if ($nickname && $wpm > 0) {
            $stmt = $db->prepare("INSERT INTO records (nickname, wpm, accuracy) VALUES (?, ?, ?)");
            $stmt->execute([$nickname, $wpm, $accuracy]);
            echo json_encode(['success' => true]);
        } else {
            echo json_encode(['success' => false, 'error' => '닉네임과 WPM이 필요합니다.']);
        }
        exit;
    }
    
    if ($_POST['action'] === 'leaderboard') {
        $stmt = $db->query("SELECT nickname, wpm, accuracy, created_at FROM records ORDER BY wpm DESC LIMIT 10");
        $records = $stmt->fetchAll(PDO::FETCH_ASSOC);
        echo json_encode($records);
        exit;
    }
}
```

**2) 결과 화면에 저장 폼 추가**
`endTest()` 함수 수정:
```javascript
function endTest() {
    clearInterval(timerInterval);
    const elapsedTime = (Date.now() - startTime) / 1000 / 60;
    const correctChars = userInput.split('').filter((c, i) => c === targetSentence[i]).length;
    const wpm = Math.round(correctChars / 5 / elapsedTime);
    const accuracy = Math.round((correctChars / userInput.length) * 100) || 0;
    
    app.innerHTML = `
        <div class="card" style="text-align: center;">
            <h2 style="font-size: 28px; margin-bottom: 16px;">🎉 테스트 완료!</h2>
            <div style="font-size: 48px; font-weight: 700; color: #3b82f6; margin-bottom: 8px;">${wpm} WPM</div>
            <div style="font-size: 20px; color: var(--m-text-muted); margin-bottom: 24px;">정확도: ${accuracy}%</div>
            
            <div style="margin-bottom: 16px;">
                <input type="text" id="nickname" placeholder="닉네임 입력" style="padding: 12px; border: 2px solid #e5e7eb; border-radius: 8px; font-size: 16px; width: 200px;">
            </div>
            <button id="saveBtn" style="margin-right: 8px;">기록 저장</button>
            <button onclick="location.reload()">다시 도전</button>
        </div>
        <div id="leaderboard" style="margin-top: 32px;"></div>
    `;
    
    document.getElementById('saveBtn').addEventListener('click', () => saveRecord(wpm, accuracy));
    loadLeaderboard();
}
```

**3) 저장 및 순위판 로드**
```javascript
async function saveRecord(wpm, accuracy) {
    const nickname = document.getElementById('nickname').value.trim();
    if (!nickname) {
        alert('닉네임을 입력하세요!');
        return;
    }
    
    const formData = new FormData();
    formData.append('action', 'save');
    formData.append('nickname', nickname);
    formData.append('wpm', wpm);
    formData.append('accuracy', accuracy);
    
    const res = await fetch('', { method: 'POST', body: formData });
    const data = await res.json();
    
    if (data.success) {
        alert('기록이 저장되었습니다!');
        loadLeaderboard();
    } else {
        alert('저장 실패: ' + (data.error || '알 수 없는 오류'));
    }
}

async function loadLeaderboard() {
    const formData = new FormData();
    formData.append('action', 'leaderboard');
    
    const res = await fetch('', { method: 'POST', body: formData });
    const records = await res.json();
    
    const leaderboard = document.getElementById('leaderboard');
    if (records.length === 0) {
        leaderboard.innerHTML = '<p style="text-align: center; color: var(--m-text-muted);">아직 기록이 없습니다. 첫 기록을 남겨보세요!</p>';
        return;
    }
    
    let html = '<div class="card"><h3 style="margin-bottom: 16px;">🏆 순위판</h3><div>';
    records.forEach((r, i) => {
        const medal = i === 0 ? '🥇' : i === 1 ? '🥈' : i === 2 ? '🥉' : `${i + 1}.`;
        html += `
            <div style="display: flex; justify-content: space-between; padding: 12px; border-bottom: 1px solid #e5e7eb;">
                <span style="font-weight: 600;">${medal} ${r.nickname}</span>
                <span><strong>${r.wpm} WPM</strong> (${r.accuracy}%)</span>
            </div>
        `;
    });
    html += '</div></div>';
    leaderboard.innerHTML = html;
}
```

완료 후 테스트:
1. 테스트 완료 후 닉네임 입력 → "기록 저장" 클릭
2. 순위판에 내 기록이 표시되는지 확인
3. 여러 번 테스트하여 상위 10명 순위가 WPM 내림차순으로 정렬되는지 확인