🎯 g5se 오늘의 스도쿠 퍼즐 생성기 - 난이도별 퍼즐 풀이 & 타이머 기록

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

**Step 1: 프로젝트 골격 생성 및 modern shell 적용**

1. `app/modules/sudoku/index.php` 파일을 생성하고 다음 골격을 작성하세요:

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

// 페이지 타이틀
$g5['title'] = '오늘의 스도쿠 퍼즐';

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;">
        <div class="sudoku-header">
            <h1 style="font-size: 28px; font-weight: 700; margin-bottom: 8px;">🧩 오늘의 스도쿠</h1>
            <p style="color: var(--m-text-muted); margin-bottom: 24px;">난이도를 선택하고 퍼즐을 풀어보세요!</p>
        </div>

        <div class="difficulty-selector" style="margin-bottom: 24px;">
            <button class="diff-btn" data-level="easy">쉬움</button>
            <button class="diff-btn" data-level="medium">보통</button>
            <button class="diff-btn" data-level="hard">어려움</button>
            <button class="diff-btn" data-level="extreme">익스트림</button>
        </div>

        <div id="sudoku-board" style="display: none;">
            <!-- 스도쿠 보드가 여기에 동적으로 삽입됩니다 -->
        </div>

        <div id="game-controls" style="display: none; margin-top: 24px;">
            <div style="display: flex; gap: 12px; align-items: center;">
                <button id="hint-btn">💡 힌트 (3)</button>
                <button id="reset-btn">🔄 초기화</button>
                <button id="check-btn">✅ 정답 확인</button>
                <div id="timer" style="margin-left: auto; font-size: 18px; font-weight: 600;">00:00</div>
            </div>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>

<style>
.difficulty-selector {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.diff-btn {
    padding: 12px 24px;
    background: var(--m-surface);
    border: 2px solid var(--m-primary);
    border-radius: var(--m-radius-lg);
    color: var(--m-primary);
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.diff-btn:hover {
    background: var(--m-primary);
    color: white;
}
#game-controls button {
    padding: 10px 20px;
    background: var(--m-primary);
    color: white;
    border: none;
    border-radius: var(--m-radius-lg);
    font-weight: 600;
    cursor: pointer;
}
#game-controls button:hover {
    opacity: 0.9;
}
</style>

<script>
document.querySelectorAll('.diff-btn').forEach(btn => {
    btn.addEventListener('click', function() {
        const level = this.dataset.level;
        alert(`${level} 난이도 선택됨! (다음 단계에서 퍼즐 생성 구현)`);
    });
});
</script>

<?php include_once('./tail.sub.php'); ?>
```

2. 브라우저에서 `/sudoku` 경로로 접속하여 페이지가 정상적으로 표시되는지 확인하세요.
3. 난이도 버튼을 클릭하면 alert가 뜨는지 테스트하세요.

**확인 사항:**
- modern shell이 적용되어 네비게이션과 푸터가 표시되는가?
- 다크모드 토글 시 배경색과 텍스트 색상이 자동으로 변하는가?
- 난이도 버튼 호버 시 색상 전환 애니메이션이 부드러운가?

**Step 2: SQLite DB 초기화 및 스도쿠 생성 백엔드 구현**

1. `app/modules/sudoku/index.php` 상단(modern shell 인클루드 전)에 다음 DB 초기화 코드를 추가하세요:

```php
// SQLite DB 초기화
@mkdir(G5_DATA_PATH.'/modules', 0707, true);
$db_path = G5_DATA_PATH.'/modules/sudoku.sqlite';
$pdo = new PDO('sqlite:'.$db_path);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 테이블 생성 (첫 접근 시 자동 생성)
$pdo->exec("
    CREATE TABLE IF NOT EXISTS puzzle_history (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        user_id TEXT,
        difficulty TEXT,
        seed TEXT,
        solve_time INTEGER,
        hints_used INTEGER,
        completed_at TEXT
    )
");
$pdo->exec("CREATE INDEX IF NOT EXISTS idx_user_difficulty ON puzzle_history(user_id, difficulty)");
```

2. 같은 파일에 스도쿠 생성 함수를 추가하세요 (modern shell 인클루드 전):

```php
// 스도쿠 생성 함수 (백트래킹 알고리즘)
function generateSudoku($seed) {
    mt_srand($seed);
    $board = array_fill(0, 9, array_fill(0, 9, 0));
    
    function isValid($board, $row, $col, $num) {
        // 행 검사
        for ($x = 0; $x < 9; $x++) {
            if ($board[$row][$x] == $num) return false;
        }
        // 열 검사
        for ($x = 0; $x < 9; $x++) {
            if ($board[$x][$col] == $num) return false;
        }
        // 3x3 박스 검사
        $startRow = $row - $row % 3;
        $startCol = $col - $col % 3;
        for ($i = 0; $i < 3; $i++) {
            for ($j = 0; $j < 3; $j++) {
                if ($board[$i + $startRow][$j + $startCol] == $num) return false;
            }
        }
        return true;
    }
    
    function solve(&$board) {
        for ($row = 0; $row < 9; $row++) {
            for ($col = 0; $col < 9; $col++) {
                if ($board[$row][$col] == 0) {
                    $nums = range(1, 9);
                    shuffle($nums);
                    foreach ($nums as $num) {
                        if (isValid($board, $row, $col, $num)) {
                            $board[$row][$col] = $num;
                            if (solve($board)) return true;
                            $board[$row][$col] = 0;
                        }
                    }
                    return false;
                }
            }
        }
        return true;
    }
    
    solve($board);
    return $board;
}

// 난이도별 힌트 개수 설정
function removeCells($board, $difficulty) {
    $hints = ['easy' => 40, 'medium' => 30, 'hard' => 25, 'extreme' => 20];
    $cellsToRemove = 81 - $hints[$difficulty];
    
    $puzzle = $board;
    $removed = 0;
    while ($removed < $cellsToRemove) {
        $row = mt_rand(0, 8);
        $col = mt_rand(0, 8);
        if ($puzzle[$row][$col] != 0) {
            $puzzle[$row][$col] = 0;
            $removed++;
        }
    }
    return $puzzle;
}
```

3. AJAX 요청 처리 로직을 추가하세요 (DB 초기화 코드 바로 아래):

```php
// AJAX: 퍼즐 생성 요청 처리
if (isset($_POST['action']) && $_POST['action'] === 'generate') {
    $difficulty = $_POST['difficulty'] ?? 'medium';
    $seed = isset($_POST['daily']) ? strtotime(date('Y-m-d')) : time();
    
    $solution = generateSudoku($seed);
    $puzzle = removeCells($solution, $difficulty);
    
    header('Content-Type: application/json');
    echo json_encode([
        'puzzle' => $puzzle,
        'solution' => $solution,
        'seed' => $seed
    ]);
    exit;
}
```

4. 프론트엔드 JavaScript를 수정하여 AJAX로 퍼즐을 받아오도록 변경하세요:

```javascript
let currentPuzzle = null;
let currentSolution = null;
let hintsLeft = 3;

document.querySelectorAll('.diff-btn').forEach(btn => {
    btn.addEventListener('click', async function() {
        const level = this.dataset.level;
        const formData = new FormData();
        formData.append('action', 'generate');
        formData.append('difficulty', level);
        
        const response = await fetch(window.location.href, {
            method: 'POST',
            body: formData
        });
        const data = await response.json();
        
        currentPuzzle = data.puzzle;
        currentSolution = data.solution;
        hintsLeft = 3;
        
        renderBoard(data.puzzle);
        document.getElementById('sudoku-board').style.display = 'block';
        document.getElementById('game-controls').style.display = 'block';
    });
});

function renderBoard(puzzle) {
    const boardHTML = puzzle.map((row, i) => 
        row.map((cell, j) => {
            const isGiven = cell !== 0;
            return `<input type="text" 
                class="sudoku-cell ${isGiven ? 'given' : ''}" 
                data-row="${i}" data-col="${j}" 
                value="${isGiven ? cell : ''}" 
                ${isGiven ? 'readonly' : ''} 
                maxlength="1">`;
        }).join('')
    ).join('');
    
    document.getElementById('sudoku-board').innerHTML = `
        <div class="sudoku-grid">${boardHTML}</div>
    `;
}
```

5. CSS에 보드 스타일을 추가하세요:

```css
.sudoku-grid {
    display: grid;
    grid-template-columns: repeat(9, 50px);
    gap: 0;
    border: 3px solid var(--m-text);
    width: fit-content;
    margin: 0 auto;
}
.sudoku-cell {
    width: 50px;
    height: 50px;
    text-align: center;
    font-size: 20px;
    font-weight: 600;
    border: 1px solid var(--m-text-muted);
    background: var(--m-surface);
    color: var(--m-text);
}
.sudoku-cell.given {
    background: rgba(128, 128, 128, 0.2);
    cursor: not-allowed;
}
.sudoku-cell:not(.given):focus {
    outline: 2px solid var(--m-primary);
}
.sudoku-cell:nth-child(3n) {
    border-right: 2px solid var(--m-text);
}
.sudoku-cell:nth-child(n+19):nth-child(-n+27),
.sudoku-cell:nth-child(n+46):nth-child(-n+54) {
    border-bottom: 2px solid var(--m-text);
}
```

**확인 사항:**
- 난이도 버튼 클릭 시 AJAX로 퍼즐이 생성되는가?
- 9×9 그리드가 3×3 두꺼운 경계선으로 구분되어 표시되는가?
- 초기 힌트 셀은 회색 배경, 빈칸은 흰색 배경으로 구분되는가?
- SQLite DB 파일이 `data/modules/sudoku.sqlite` 경로에 생성되었는가?

**Step 3: 실시간 입력 검증 및 타이머 구현**

1. JavaScript에 입력 검증 함수를 추가하세요:

```javascript
function validateCell(row, col, value) {
    if (value === '') return true;
    const num = parseInt(value);
    if (isNaN(num) || num < 1 || num > 9) return false;
    
    // 행 검사
    const cells = document.querySelectorAll('.sudoku-cell');
    for (let i = 0; i < 9; i++) {
        const cell = cells[row * 9 + i];
        if (i !== col && cell.value === value) return false;
    }
    
    // 열 검사
    for (let i = 0; i < 9; i++) {
        const cell = cells[i * 9 + col];
        if (i !== row && cell.value === value) return false;
    }
    
    // 3x3 박스 검사
    const boxRow = Math.floor(row / 3) * 3;
    const boxCol = Math.floor(col / 3) * 3;
    for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 3; j++) {
            const r = boxRow + i;
            const c = boxCol + j;
            if (r !== row || c !== col) {
                const cell = cells[r * 9 + c];
                if (cell.value === value) return false;
            }
        }
    }
    return true;
}

function renderBoard(puzzle) {
    // 기존 코드 유지하고, 이벤트 리스너 추가
    const boardHTML = puzzle.map((row, i) => 
        row.map((cell, j) => {
            const isGiven = cell !== 0;
            return `<input type="text" 
                class="sudoku-cell ${isGiven ? 'given' : ''}" 
                data-row="${i}" data-col="${j}" 
                value="${isGiven ? cell : ''}" 
                ${isGiven ? 'readonly' : ''} 
                maxlength="1">`;
        }).join('')
    ).join('');
    
    document.getElementById('sudoku-board').innerHTML = `
        <div class="sudoku-grid">${boardHTML}</div>
    `;
    
    // 입력 이벤트 리스너
    document.querySelectorAll('.sudoku-cell:not(.given)').forEach(cell => {
        cell.addEventListener('input', function(e) {
            const row = parseInt(this.dataset.row);
            const col = parseInt(this.dataset.col);
            const value = this.value;
            
            if (!validateCell(row, col, value)) {
                this.classList.add('invalid');
                this.style.animation = 'shake 0.3s';
            } else {
                this.classList.remove('invalid');
            }
        });
    });
    
    startTimer();
}
```

2. 타이머 구현:

```javascript
let timerInterval = null;
let elapsedSeconds = 0;

function startTimer() {
    elapsedSeconds = 0;
    clearInterval(timerInterval);
    timerInterval = setInterval(() => {
        elapsedSeconds++;
        const minutes = Math.floor(elapsedSeconds / 60);
        const seconds = elapsedSeconds % 60;
        document.getElementById('timer').textContent = 
            `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
    }, 1000);
}

function stopTimer() {
    clearInterval(timerInterval);
}
```

3. CSS에 애니메이션 추가:

```css
.sudoku-cell.invalid {
    border: 2px solid #ef4444;
    background: rgba(239, 68, 68, 0.1);
}
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}
```

**확인 사항:**
- 빈칸에 숫자 입력 시 행/열/박스 규칙 위반이 즉시 감지되는가?
- 위반 시 빨간색 테두리와 흔들림 애니메이션이 표시되는가?
- 타이머가 퍼즐 로드 시 자동으로 시작되는가?

**Step 4: 힌트 시스템 및 정답 확인 구현**

1. 힌트 버튼 이벤트 리스너 추가:

```javascript
document.getElementById('hint-btn').addEventListener('click', function() {
    if (hintsLeft <= 0) {
        alert('힌트를 모두 사용했습니다!');
        return;
    }
    
    const emptyCells = [];
    document.querySelectorAll('.sudoku-cell:not(.given)').forEach((cell, idx) => {
        if (cell.value === '') {
            const row = parseInt(cell.dataset.row);
            const col = parseInt(cell.dataset.col);
            emptyCells.push({ cell, row, col });
        }
    });
    
    if (emptyCells.length === 0) {
        alert('모든 칸이 채워졌습니다!');
        return;
    }
    
    const randomCell = emptyCells[Math.floor(Math.random() * emptyCells.length)];
    randomCell.cell.value = currentSolution[randomCell.row][randomCell.col];
    randomCell.cell.classList.add('hint-cell');
    randomCell.cell.readOnly = true;
    
    hintsLeft--;
    this.textContent = `💡 힌트 (${hintsLeft})`;
});
```

2. 정답 확인 버튼 이벤트 리스너 추가:

```javascript
document.getElementById('check-btn').addEventListener('click', async function() {
    const cells = document.querySelectorAll('.sudoku-cell');
    let isComplete = true;
    let isCorrect = true;
    
    cells.forEach((cell, idx) => {
        const row = Math.floor(idx / 9);
        const col = idx % 9;
        const value = parseInt(cell.value);
        
        if (!value) {
            isComplete = false;
        } else if (value !== currentSolution[row][col]) {
            isCorrect = false;
        }
    });
    
    if (!isComplete) {
        alert('아직 빈칸이 남아있습니다!');
        return;
    }
    
    if (!isCorrect) {
        alert('틀린 칸이 있습니다. 다시 확인해보세요!');
        return;
    }
    
    stopTimer();
    
    // 서버에 완료 기록 저장
    const formData = new FormData();
    formData.append('action', 'save_result');
    formData.append('difficulty', currentDifficulty);
    formData.append('seed', currentSeed);
    formData.append('solve_time', elapsedSeconds);
    formData.append('hints_used', 3 - hintsLeft);
    
    await fetch(window.location.href, {
        method: 'POST',
        body: formData
    });
    
    showCompletionModal();
});

function showCompletionModal() {
    const modal = document.createElement('div');
    modal.className = 'completion-modal';
    modal.innerHTML = `
        <div class="modal-content">
            <h2>🎉 축하합니다!</h2>
            <p>퍼즐을 완성했습니다!</p>
            <div class="stats">
                <div>⏱️ 소요 시간: ${Math.floor(elapsedSeconds / 60)}분 ${elapsedSeconds % 60}초</div>
                <div>💡 힌트 사용: ${3 - hintsLeft}회</div>
            </div>
            <button onclick="location.reload()">새 퍼즐 도전하기</button>
        </div>
    `;
    document.body.appendChild(modal);
}
```

3. PHP에 완료 기록 저장 로직 추가 (AJAX 처리 섹션에):

```php
// AJAX: 완료 기록 저장
if (isset($_POST['action']) && $_POST['action'] === 'save_result') {
    $user_id = $is_member ? $member['mb_id'] : 'guest';
    $difficulty = $_POST['difficulty'];
    $seed = $_POST['seed'];
    $solve_time = (int)$_POST['solve_time'];
    $hints_used = (int)$_POST['hints_used'];
    $completed_at = date('c');
    
    $stmt = $pdo->prepare("
        INSERT INTO puzzle_history (user_id, difficulty, seed, solve_time, hints_used, completed_at)
        VALUES (?, ?, ?, ?, ?, ?)
    ");
    $stmt->execute([$user_id, $difficulty, $seed, $solve_time, $hints_used, $completed_at]);
    
    echo json_encode(['success' => true]);
    exit;
}
```

4. 모달 CSS 추가:

```css
.completion-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.modal-content {
    background: var(--m-surface);
    padding: 32px;
    border-radius: var(--m-radius-lg);
    text-align: center;
    box-shadow: var(--m-shadow);
    max-width: 400px;
}
.modal-content h2 {
    font-size: 32px;
    margin-bottom: 16px;
}
.stats {
    margin: 24px 0;
    font-size: 18px;
}
.stats div {
    margin: 8px 0;
}
.hint-cell {
    background: rgba(59, 130, 246, 0.2);
}
```

5. 초기화 버튼 이벤트 리스너 추가:

```javascript
document.getElementById('reset-btn').addEventListener('click', function() {
    if (confirm('현재 입력한 내용이 모두 지워집니다. 계속하시겠습니까?')) {
        renderBoard(currentPuzzle);
        hintsLeft = 3;
        document.getElementById('hint-btn').textContent = '💡 힌트 (3)';
    }
});
```

**확인 사항:**
- 힌트 버튼 클릭 시 랜덤 빈칸에 정답이 표시되는가?
- 힌트 사용 횟수가 감소하고, 3회 초과 시 경고가 뜨는가?
- 정답 확인 시 모든 칸이 맞으면 축하 모달이 표시되는가?
- 완료 기록이 SQLite DB에 정상 저장되는가?

**Step 5: 퍼즐 히스토리 페이지 구현**

1. `app/modules/sudoku/history.php` 파일을 생성하세요:

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

// SQLite DB 연결
$db_path = G5_DATA_PATH.'/modules/sudoku.sqlite';
$pdo = new PDO('sqlite:'.$db_path);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$user_id = $is_member ? $member['mb_id'] : 'guest';

// 난이도별 통계
$stats = [];
foreach (['easy', 'medium', 'hard', 'extreme'] as $diff) {
    $stmt = $pdo->prepare("
        SELECT COUNT(*) as count, AVG(solve_time) as avg_time, MIN(solve_time) as best_time
        FROM puzzle_history
        WHERE user_id = ? AND difficulty = ?
    ");
    $stmt->execute([$user_id, $diff]);
    $stats[$diff] = $stmt->fetch(PDO::FETCH_ASSOC);
}

// 최근 10개 기록
$stmt = $pdo->prepare("
    SELECT * FROM puzzle_history
    WHERE user_id = ?
    ORDER BY completed_at DESC
    LIMIT 10
");
$stmt->execute([$user_id]);
$recent = $stmt->fetchAll(PDO::FETCH_ASSOC);

$g5['title'] = '내 퍼즐 히스토리';

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: 28px; font-weight: 700; margin-bottom: 24px;">📊 내 퍼즐 히스토리</h1>
        
        <div class="stats-grid">
            <?php foreach ($stats as $diff => $data): ?>
                <div class="stat-card">
                    <h3><?php echo ucfirst($diff); ?></h3>
                    <div class="stat-item">완료: <?php echo $data['count']; ?>회</div>
                    <div class="stat-item">평균: <?php echo $data['avg_time'] ? gmdate('i:s', $data['avg_time']) : '-'; ?></div>
                    <div class="stat-item">최고: <?php echo $data['best_time'] ? gmdate('i:s', $data['best_time']) : '-'; ?></div>
                </div>
            <?php endforeach; ?>
        </div>
        
        <h2 style="font-size: 24px; font-weight: 700; margin: 32px 0 16px;">최근 기록</h2>
        <div class="history-table">
            <?php if (empty($recent)): ?>
                <p style="color: var(--m-text-muted);">아직 완료한 퍼즐이 없습니다.</p>
            <?php else: ?>
                <table>
                    <thead>
                        <tr>
                            <th>난이도</th>
                            <th>소요 시간</th>
                            <th>힌트 사용</th>
                            <th>완료 일시</th>
                        </tr>
                    </thead>
                    <tbody>
                        <?php foreach ($recent as $row): ?>
                            <tr>
                                <td><?php echo htmlspecialchars($row['difficulty']); ?></td>
                                <td><?php echo gmdate('i:s', $row['solve_time']); ?></td>
                                <td><?php echo $row['hints_used']; ?>회</td>
                                <td><?php echo date('Y-m-d H:i', strtotime($row['completed_at'])); ?></td>
                            </tr>
                        <?php endforeach; ?>
                    </tbody>
                </table>
            <?php endif; ?>
        </div>
        
        <div style="margin-top: 32px;">
            <a href="/sudoku" style="display: inline-block; padding: 12px 24px; background: var(--m-primary); color: white; border-radius: var(--m-radius-lg); text-decoration: none; font-weight: 600;">새 퍼즐 풀기</a>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>

<style>
.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);
    box-shadow: var(--m-shadow);
}
.stat-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 12px;
    text-transform: capitalize;
}
.stat-item {
    margin: 8px 0;
    color: var(--m-text-muted);
}
.history-table table {
    width: 100%;
    border-collapse: collapse;
}
.history-table th,
.history-table td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--m-text-muted);
}
.history-table th {
    font-weight: 700;
    background: var(--m-surface);
}
</style>

<?php include_once('./tail.sub.php'); ?>
```

2. `app/modules/sudoku/index.php`의 게임 컨트롤 영역에 히스토리 링크 추가:

```html
<div id="game-controls" style="display: none; margin-top: 24px;">
    <div style="display: flex; gap: 12px; align-items: center;">
        <button id="hint-btn">💡 힌트 (3)</button>
        <button id="reset-btn">🔄 초기화</button>
        <button id="check-btn">✅ 정답 확인</button>
        <a href="/sudoku/history" style="margin-left: auto; padding: 10px 20px; background: var(--m-surface); border: 2px solid var(--m-primary); border-radius: var(--m-radius-lg); color: var(--m-primary); text-decoration: none; font-weight: 600;">📊 히스토리</a>
        <div id="timer" style="font-size: 18px; font-weight: 600;">00:00</div>
    </div>
</div>
```

**확인 사항:**
- `/sudoku/history` 경로로 접속 시 난이도별 통계가 표시되는가?
- 최근 10개 완료 기록이 테이블로 표시되는가?
- 다크모드에서도 테이블이 읽기 쉬운가?

**Step 6: 일일 챌린지 모드 및 메모 기능 구현**

1. `app/modules/sudoku/index.php`의 난이도 선택 영역 위에 일일 챌린지 버튼 추가:

```html
<div class="daily-challenge" style="margin-bottom: 24px; padding: 20px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: var(--m-radius-lg); color: white;">
    <h2 style="font-size: 20px; font-weight: 700; margin-bottom: 8px;">🏆 오늘의 챌린지</h2>
    <p style="margin-bottom: 12px; opacity: 0.9;">모든 사용자가 동일한 퍼즐에 도전합니다!</p>
    <button id="daily-btn" style="padding: 10px 24px; background: white; color: #667eea; border: none; border-radius: var(--m-radius-lg); font-weight: 600; cursor: pointer;">오늘의 퍼즐 시작하기</button>
</div>
```

2. JavaScript에 일일 챌린지 이벤트 리스너 추가:

```javascript
let currentDifficulty = 'medium';
let currentSeed = null;

document.getElementById('daily-btn').addEventListener('click', async function() {
    const formData = new FormData();
    formData.append('action', 'generate');
    formData.append('difficulty', 'medium');
    formData.append('daily', '1');
    
    const response = await fetch(window.location.href, {
        method: 'POST',
        body: formData
    });
    const data = await response.json();
    
    currentPuzzle = data.puzzle;
    currentSolution = data.solution;
    currentDifficulty = 'medium';
    currentSeed = data.seed;
    hintsLeft = 3;
    
    renderBoard(data.puzzle);
    document.getElementById('sudoku-board').style.display = 'block';
    document.getElementById('game-controls').style.display = 'block';
});

// 기존 난이도 버튼 이벤트에도 currentDifficulty, currentSeed 저장 추가
document.querySelectorAll('.diff-btn').forEach(btn => {
    btn.addEventListener('click', async function() {
        const level = this.dataset.level;
        currentDifficulty = level;
        // ... 기존 코드 ...
        currentSeed = data.seed;
    });
});
```

3. 메모 모드 구현:

```javascript
let memoMode = false;

// 게임 컨트롤에 메모 모드 버튼 추가 (HTML)
<button id="memo-btn" style="background: var(--m-surface); border: 2px solid var(--m-primary); color: var(--m-primary);">📝 메모 모드</button>

// JavaScript 이벤트 리스너
document.getElementById('memo-btn').addEventListener('click', function() {
    memoMode = !memoMode;
    this.style.background = memoMode ? 'var(--m-primary)' : 'var(--m-surface)';
    this.style.color = memoMode ? 'white' : 'var(--m-primary)';
    this.textContent = memoMode ? '✏️ 입력 모드' : '📝 메모 모드';
});

// renderBoard 함수 수정 (셀 이벤트 리스너 부분)
cell.addEventListener('input', function(e) {
    const row = parseInt(this.dataset.row);
    const col = parseInt(this.dataset.col);
    const value = this.value;
    
    if (memoMode) {
        // 메모 모드: 작은 숫자로 표시
        this.classList.add('memo-cell');
        this.style.fontSize = '12px';
        this.style.color = 'var(--m-text-muted)';
    } else {
        // 일반 모드: 검증 수행
        this.classList.remove('memo-cell');
        this.style.fontSize = '20px';
        this.style.color = 'var(--m-text)';
        
        if (!validateCell(row, col, value)) {
            this.classList.add('invalid');
            this.style.animation = 'shake 0.3s';
        } else {
            this.classList.remove('invalid');
        }
    }
});
```

4. CSS에 메모 셀 스타일 추가:

```css
.sudoku-cell.memo-cell {
    font-size: 12px !important;
    color: var(--m-text-muted) !important;
    font-weight: 400;
}
```

5. PHP에 일일 챌린지 순위표 조회 로직 추가 (history.php에):

```php
// 오늘의 챌린지 순위 (상위 10명)
$today_seed = strtotime(date('Y-m-d'));
$stmt = $pdo->prepare("
    SELECT user_id, solve_time, hints_used, completed_at
    FROM puzzle_history
    WHERE seed = ? AND difficulty = 'medium'
    ORDER BY solve_time ASC, hints_used ASC
    LIMIT 10
");
$stmt->execute([$today_seed]);
$daily_leaderboard = $stmt->fetchAll(PDO::FETCH_ASSOC);
```

6. history.php에 순위표 섹션 추가:

```html
<h2 style="font-size: 24px; font-weight: 700; margin: 32px 0 16px;">🏆 오늘의 챌린지 순위</h2>
<div class="leaderboard">
    <?php if (empty($daily_leaderboard)): ?>
        <p style="color: var(--m-text-muted);">아직 오늘의 챌린지를 완료한 사람이 없습니다.</p>
    <?php else: ?>
        <table>
            <thead>
                <tr>
                    <th>순위</th>
                    <th>사용자</th>
                    <th>소요 시간</th>
                    <th>힌트 사용</th>
                </tr>
            </thead>
            <tbody>
                <?php foreach ($daily_leaderboard as $idx => $row): ?>
                    <tr>
                        <td><?php echo $idx + 1; ?></td>
                        <td><?php echo htmlspecialchars($row['user_id']); ?></td>
                        <td><?php echo gmdate('i:s', $row['solve_time']); ?></td>
                        <td><?php echo $row['hints_used']; ?>회</td>
                    </tr>
                <?php endforeach; ?>
            </tbody>
        </table>
    <?php endif; ?>
</div>
```

**확인 사항:**
- 오늘의 챌린지 버튼 클릭 시 동일한 시드로 퍼즐이 생성되는가?
- 메모 모드 토글 시 입력 숫자가 작은 회색 글씨로 표시되는가?
- 히스토리 페이지에 오늘의 챌린지 순위표가 표시되는가?

**Step 7: 자동 저장 및 퍼즐 공유 기능 구현**

1. localStorage 자동 저장 구현:

```javascript
function saveProgress() {
    const cells = document.querySelectorAll('.sudoku-cell');
    const progress = [];
    cells.forEach(cell => {
        progress.push({
            row: cell.dataset.row,
            col: cell.dataset.col,
            value: cell.value,
            isMemo: cell.classList.contains('memo-cell')
        });
    });
    
    localStorage.setItem('sudoku_progress', JSON.stringify({
        puzzle: currentPuzzle,
        solution: currentSolution,
        difficulty: currentDifficulty,
        seed: currentSeed,
        progress: progress,
        elapsedSeconds: elapsedSeconds,
        hintsLeft: hintsLeft,
        timestamp: Date.now()
    }));
}

function loadProgress() {
    const saved = localStorage.getItem('sudoku_progress');
    if (!saved) return false;
    
    const data = JSON.parse(saved);
    // 24시간 이상 지난 데이터는 무시
    if (Date.now() - data.timestamp > 86400000) {
        localStorage.removeItem('sudoku_progress');
        return false;
    }
    
    currentPuzzle = data.puzzle;
    currentSolution = data.solution;
    currentDifficulty = data.difficulty;
    currentSeed = data.seed;
    elapsedSeconds = data.elapsedSeconds;
    hintsLeft = data.hintsLeft;
    
    renderBoard(data.puzzle);
    
    // 진행 상황 복원
    data.progress.forEach(item => {
        const cell = document.querySelector(`[data-row="${item.row}"][data-col="${item.col}"]`);
        if (cell && !cell.classList.contains('given')) {
            cell.value = item.value;
            if (item.isMemo) {
                cell.classList.add('memo-cell');
                cell.style.fontSize = '12px';
                cell.style.color = 'var(--m-text-muted)';
            }
        }
    });
    
    document.getElementById('hint-btn').textContent = `💡 힌트 (${hintsLeft})`;
    document.getElementById('sudoku-board').style.display = 'block';
    document.getElementById('game-controls').style.display = 'block';
    
    return true;
}

// 페이지 로드 시 자동 복원
window.addEventListener('DOMContentLoaded', function() {
    if (loadProgress()) {
        if (confirm('이전에 풀던 퍼즐을 이어서 하시겠습니까?')) {
            startTimer();
        } else {
            localStorage.removeItem('sudoku_progress');
            location.reload();
        }
    }
});

// 입력 시마다 자동 저장
document.addEventListener('input', function(e) {
    if (e.target.classList.contains('sudoku-cell')) {
        saveProgress();
    }
});
```

2. 퍼즐 공유 기능 구현:

```javascript
// 게임 컨트롤에 공유 버튼 추가 (HTML)
<button id="share-btn" style="background: var(--m-surface); border: 2px solid var(--m-primary); color: var(--m-primary);">🔗 퍼즐 공유</button>

// JavaScript 이벤트 리스너
document.getElementById('share-btn').addEventListener('click', function() {
    if (!currentSeed) {
        alert('먼저 퍼즐을 시작해주세요!');
        return;
    }
    
    const shareUrl = `${window.location.origin}/sudoku?seed=${currentSeed}&difficulty=${currentDifficulty}`;
    
    if (navigator.clipboard) {
        navigator.clipboard.writeText(shareUrl).then(() => {
            alert('퍼즐 링크가 클립보드에 복사되었습니다!\n\n' + shareUrl);
        });
    } else {
        prompt('이 링크를 복사하여 친구에게 공유하세요:', shareUrl);
    }
});
```

3. URL 파라미터로 퍼즐 로드 기능 추가:

```javascript
// 페이지 로드 시 URL 파라미터 확인
window.addEventListener('DOMContentLoaded', async function() {
    const params = new URLSearchParams(window.location.search);
    const seed = params.get('seed');
    const difficulty = params.get('difficulty');
    
    if (seed && difficulty) {
        const formData = new FormData();
        formData.append('action', 'generate');
        formData.append('difficulty', difficulty);
        formData.append('seed', seed);
        
        const response = await fetch(window.location.href.split('?')[0], {
            method: 'POST',
            body: formData
        });
        const data = await response.json();
        
        currentPuzzle = data.puzzle;
        currentSolution = data.solution;
        currentDifficulty = difficulty;
        currentSeed = seed;
        hintsLeft = 3;
        
        renderBoard(data.puzzle);
        document.getElementById('sudoku-board').style.display = 'block';
        document.getElementById('game-controls').style.display = 'block';
        
        alert('공유받은 퍼즐을 시작합니다!');
    } else {
        // 기존 자동 복원 로직
        if (loadProgress()) {
            if (confirm('이전에 풀던 퍼즐을 이어서 하시겠습니까?')) {
                startTimer();
            } else {
                localStorage.removeItem('sudoku_progress');
                location.reload();
            }
        }
    }
});
```

4. PHP에서 시드 기반 퍼즐 생성 지원 (AJAX 처리 섹션 수정):

```php
// AJAX: 퍼즐 생성 요청 처리
if (isset($_POST['action']) && $_POST['action'] === 'generate') {
    $difficulty = $_POST['difficulty'] ?? 'medium';
    
    if (isset($_POST['seed'])) {
        // 공유받은 퍼즐 (시드값 직접 사용)
        $seed = (int)$_POST['seed'];
    } elseif (isset($_POST['daily'])) {
        // 일일 챌린지 (오늘 날짜 기반)
        $seed = strtotime(date('Y-m-d'));
    } else {
        // 일반 퍼즐 (현재 시각 기반)
        $seed = time();
    }
    
    $solution = generateSudoku($seed);
    $puzzle = removeCells($solution, $difficulty);
    
    header('Content-Type: application/json');
    echo json_encode([
        'puzzle' => $puzzle,
        'solution' => $solution,
        'seed' => $seed
    ]);
    exit;
}
```

**확인 사항:**
- 퍼즐 풀이 중 새로고침해도 진행 상황이 복원되는가?
- 공유 버튼 클릭 시 URL이 클립보드에 복사되는가?
- 공유받은 링크로 접속 시 동일한 퍼즐이 로드되는가?
- 24시간 이상 지난 자동 저장 데이터는 무시되는가?

**Step 8: 반응형 디자인 및 터치 최적화**

1. CSS에 반응형 미디어 쿼리 추가:

```css
/* 태블릿 이하 */
@media (max-width: 768px) {
    .sudoku-grid {
        grid-template-columns: repeat(9, 40px);
    }
    .sudoku-cell {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
    .difficulty-selector {
        flex-direction: column;
    }
    .diff-btn {
        width: 100%;
    }
    #game-controls > div {
        flex-wrap: wrap;
    }
    #game-controls button,
    #game-controls a {
        flex: 1 1 45%;
    }
    .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* 모바일 */
@media (max-width: 480px) {
    .sudoku-grid {
        grid-template-columns: repeat(9, 35px);
    }
    .sudoku-cell {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
    .sudoku-header h1 {
        font-size: 24px;
    }
    .modal-content {
        padding: 24px;
        margin: 0 16px;
    }
}
```

2. 터치 디바이스 최적화:

```javascript
// 터치 디바이스 감지
const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0;

if (isTouchDevice) {
    // 숫자 입력 패드 추가
    const numpad = document.createElement('div');
    numpad.className = 'numpad';
    numpad.innerHTML = `
        <div class="numpad-title">숫자 선택</div>
        <div class="numpad-grid">
            ${[1,2,3,4,5,6,7,8,9].map(n => `<button class="numpad-btn" data-num="${n}">${n}</button>`).join('')}
            <button class="numpad-btn" data-num="0" style="grid-column: span 3;">지우기</button>
        </div>
    `;
    document.getElementById('sudoku-board').appendChild(numpad);
    
    // 셀 선택 시 활성화
    let selectedCell = null;
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('sudoku-cell') && !e.target.classList.contains('given')) {
            if (selectedCell) selectedCell.classList.remove('selected');
            selectedCell = e.target;
            selectedCell.classList.add('selected');
            numpad.style.display = 'block';
        }
    });
    
    // 숫자 패드 클릭
    document.querySelectorAll('.numpad-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            if (!selectedCell) return;
            
            const num = this.dataset.num;
            if (num === '0') {
                selectedCell.value = '';
            } else {
                selectedCell.value = num;
            }
            
            // 검증 트리거
            selectedCell.dispatchEvent(new Event('input'));
        });
    });
}
```

3. 숫자 패드 CSS 추가:

```css
.numpad {
    display: none;
    margin-top: 24px;
    padding: 16px;
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
}
.numpad-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    text-align: center;
}
.numpad-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.numpad-btn {
    padding: 16px;
    background: var(--m-primary);
    color: white;
    border: none;
    border-radius: var(--m-radius-lg);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
}
.numpad-btn:active {
    transform: scale(0.95);
}
.sudoku-cell.selected {
    outline: 3px solid var(--m-primary);
    background: rgba(59, 130, 246, 0.1);
}
```

4. 가로 스크롤 방지:

```css
body {
    overflow-x: hidden;
}
.m-container {
    max-width: 100%;
    overflow-x: auto;
}
```

**확인 사항:**
- 모바일에서 보드가 화면에 맞게 축소되는가?
- 터치 디바이스에서 숫자 패드가 표시되는가?
- 셀 선택 시 파란색 테두리가 표시되는가?
- 가로 스크롤이 발생하지 않는가?

**Step 9: 성능 최적화 및 캐싱 전략**

1. 일일 챌린지 퍼즐 서버 메모리 캐싱 구현 (index.php 상단에):

```php
// 일일 챌린지 캐싱 (APCu 사용)
function getDailyChallenge($difficulty) {
    $cache_key = 'sudoku_daily_'.date('Y-m-d').'_'.$difficulty;
    
    if (function_exists('apcu_fetch')) {
        $cached = apcu_fetch($cache_key, $success);
        if ($success) return $cached;
    }
    
    // 캐시 미스 시 생성
    $seed = strtotime(date('Y-m-d'));
    $solution = generateSudoku($seed);
    $puzzle = removeCells($solution, $difficulty);
    
    $data = [
        'puzzle' => $puzzle,
        'solution' => $solution,
        'seed' => $seed
    ];
    
    if (function_exists('apcu_store')) {
        apcu_store($cache_key, $data, 86400); // 24시간 캐싱
    }
    
    return $data;
}

// AJAX 처리 부분 수정
if (isset($_POST['action']) && $_POST['action'] === 'generate') {
    $difficulty = $_POST['difficulty'] ?? 'medium';
    
    if (isset($_POST['daily'])) {
        // 일일 챌린지는 캐시에서 가져오기
        $data = getDailyChallenge($difficulty);
    } else {
        // 일반 퍼즐은 매번 새로 생성
        if (isset($_POST['seed'])) {
            $seed = (int)$_POST['seed'];
        } else {
            $seed = time();
        }
        
        $solution = generateSudoku($seed);
        $puzzle = removeCells($solution, $difficulty);
        
        $data = [
            'puzzle' => $puzzle,
            'solution' => $solution,
            'seed' => $seed
        ];
    }
    
    header('Content-Type: application/json');
    echo json_encode($data);
    exit;
}
```

2. DB 쿼리 최적화 (인덱스 추가):

```php
// 테이블 생성 시 복합 인덱스 추가
$pdo->exec("
    CREATE INDEX IF NOT EXISTS idx_seed_difficulty 
    ON puzzle_history(seed, difficulty)
");
$pdo->exec("
    CREATE INDEX IF NOT EXISTS idx_user_completed 
    ON puzzle_history(user_id, completed_at DESC)
");
```

3. 프론트엔드 디바운싱 (자동 저장 최적화):

```javascript
let saveTimeout = null;

function debouncedSave() {
    clearTimeout(saveTimeout);
    saveTimeout = setTimeout(() => {
        saveProgress();
    }, 500); // 500ms 디바운싱
}

// 기존 자동 저장 이벤트 수정
document.addEventListener('input', function(e) {
    if (e.target.classList.contains('sudoku-cell')) {
        debouncedSave();
    }
});
```

4. 이미지/리소스 최적화 (CSS에 프리로딩 힌트 추가):

```html
<!-- head.sub.php 또는 _head.inc.php에 추가 (이미 있다면 생략) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
```

5. 에러 핸들링 강화:

```javascript
// AJAX 요청에 에러 핸들링 추가
async function generatePuzzle(difficulty, options = {}) {
    try {
        const formData = new FormData();
        formData.append('action', 'generate');
        formData.append('difficulty', difficulty);
        
        if (options.daily) formData.append('daily', '1');
        if (options.seed) formData.append('seed', options.seed);
        
        const response = await fetch(window.location.href.split('?')[0], {
            method: 'POST',
            body: formData
        });
        
        if (!response.ok) {
            throw new Error('서버 응답 오류');
        }
        
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('퍼즐 생성 실패:', error);
        alert('퍼즐을 생성하는 중 오류가 발생했습니다. 다시 시도해주세요.');
        return null;
    }
}

// 기존 이벤트 리스너들을 이 함수 사용하도록 수정
document.getElementById('daily-btn').addEventListener('click', async function() {
    const data = await generatePuzzle('medium', { daily: true });
    if (data) {
        currentPuzzle = data.puzzle;
        currentSolution = data.solution;
        currentDifficulty = 'medium';
        currentSeed = data.seed;
        hintsLeft = 3;
        
        renderBoard(data.puzzle);
        document.getElementById('sudoku-board').style.display = 'block';
        document.getElementById('game-controls').style.display = 'block';
    }
});
```

6. PHP 에러 로깅:

```php
// AJAX 처리 부분에 try-catch 추가
try {
    if (isset($_POST['action']) && $_POST['action'] === 'generate') {
        // ... 기존 코드 ...
    } elseif (isset($_POST['action']) && $_POST['action'] === 'save_result') {
        // ... 기존 코드 ...
    }
} catch (Exception $e) {
    error_log('Sudoku Error: ' . $e->getMessage());
    header('Content-Type: application/json');
    http_response_code(500);
    echo json_encode(['error' => '서버 오류가 발생했습니다.']);
    exit;
}
```

**확인 사항:**
- 일일 챌린지를 여러 번 요청해도 동일한 퍼즐이 반환되는가? (캐싱 확인)
- 자동 저장이 연속 입력 시 500ms마다 한 번만 실행되는가? (디바운싱 확인)
- 네트워크 오류 시 사용자에게 적절한 메시지가 표시되는가?
- DB 인덱스가 정상 생성되었는가?

**Step 10: 최종 테스트 및 보안 강화**

1. XSS 방지 강화 (모든 출력에 이스케이프 적용 확인):

```php
// history.php의 사용자 ID 출력 부분 수정
<td><?php echo htmlspecialchars($row['user_id'], ENT_QUOTES, 'UTF-8'); ?></td>

// index.php의 모든 사용자 입력 처리 부분에 이스케이프 적용
$difficulty = htmlspecialchars($_POST['difficulty'] ?? 'medium', ENT_QUOTES, 'UTF-8');
```

2. SQL 인젝션 방지 재확인 (모든 쿼리가 prepared statement 사용 확인):

```php
// 예시: 모든 DB 쿼리가 다음 형태인지 확인
$stmt = $pdo->prepare("SELECT * FROM puzzle_history WHERE user_id = ?");
$stmt->execute([$user_id]);
```

3. CSRF 방지 (g5se 내장 토큰 활용):

```php
// AJAX 요청 처리 전에 토큰 검증 추가
if (isset($_POST['action'])) {
    // g5se는 세션 기반 인증을 사용하므로 추가 CSRF 토큰은 선택사항
    // 필요 시 $_SESSION['ss_token'] 검증 로직 추가
}
```

4. 입력 검증 강화:

```php
// 난이도 화이트리스트 검증
$allowed_difficulties = ['easy', 'medium', 'hard', 'extreme'];
$difficulty = $_POST['difficulty'] ?? 'medium';
if (!in_array($difficulty, $allowed_difficulties)) {
    $difficulty = 'medium';
}

// 시드값 범위 검증
if (isset($_POST['seed'])) {
    $seed = (int)$_POST['seed'];
    if ($seed < 0 || $seed > PHP_INT_MAX) {
        $seed = time();
    }
}
```

5. 최종 테스트 체크리스트 작성:

```markdown
## 테스트 체크리스트

### 기능 테스트
- [ ] 난이도별 퍼즐 생성 (쉬움/보통/어려움/익스트림)
- [ ] 실시간 입력 검증 (행/열/박스 규칙)
- [ ] 타이머 시작/정지
- [ ] 힌트 기능 (3회 제한)
- [ ] 정답 확인 및 완료 모달
- [ ] 완료 기록 DB 저장
- [ ] 히스토리 페이지 통계 표시
- [ ] 일일 챌린지 모드
- [ ] 메모 모드 토글
- [ ] 자동 저장/복원
- [ ] 퍼즐 공유 (URL 파라미터)

### 반응형/UX 테스트
- [ ] 데스크톱 (1920x1080)
- [ ] 태블릿 (768x1024)
- [ ] 모바일 (375x667)
- [ ] 터치 디바이스 숫자 패드
- [ ] 다크모드 전환

### 보안 테스트
- [ ] XSS 방지 (사용자 입력 이스케이프)
- [ ] SQL 인젝션 방지 (prepared statement)
- [ ] 입력 검증 (난이도/시드값)

### 성능 테스트
- [ ] 일일 챌린지 캐싱 동작
- [ ] 자동 저장 디바운싱
- [ ] DB 인덱스 적용 확인
- [ ] 페이지 로드 속도 (3초 이내)
```

6. README.md 작성:

```markdown
# 🧩 g5se 오늘의 스도쿠 퍼즐 생성기

매일 새로운 스도쿠 퍼즐을 풀 수 있는 웹 기반 퍼즐 플랫폼

## 주요 기능

- 난이도별 퍼즐 생성 (쉬움/보통/어려움/익스트림)
- 실시간 입력 검증 및 오류 표시
- 힌트 시스템 (3회 제한)
- 풀이 타이머 및 기록 저장
- 일일 챌린지 모드 (전체 순위표)
- 메모 모드 (후보 숫자 기록)
- 자동 저장/복원 (localStorage)
- 퍼즐 공유 (URL 링크)

## 기술 스택

- 프레임워크: 그누보드5 SE
- DB: SQLite
- 프론트엔드: Vanilla JavaScript + CSS Grid
- 알고리즘: 백트래킹 (스도쿠 생성)

## 설치 방법

1. g5se 설치 (https://github.com/gnuboard/g5se)
2. `app/modules/sudoku/` 폴더에 파일 복사
3. `/sudoku` 경로로 접속

## 라이센스

MIT License
```

**최종 확인 사항:**
- 모든 기능이 정상 동작하는가?
- 보안 취약점이 없는가?
- 다양한 디바이스에서 테스트했는가?
- 에러 핸들링이 적절한가?
- 코드에 주석이 충분한가?