🎯 오늘의 한자 학습 카드 - 매일 한 글자씩 익히기

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

## Step 1: 프로젝트 기본 구조 생성

### 1) 모듈 폴더 생성

```bash
mkdir -p app/modules/hanja
```

### 2) 메인 페이지 생성 (app/modules/hanja/index.php)

다음 내용으로 파일을 생성하세요:

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

// 모듈 DB 초기화
@mkdir(G5_DATA_PATH.'/modules', 0707, true);
$db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/hanja.sqlite');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 테이블 생성 (최초 실행 시)
$db->exec("
    CREATE TABLE IF NOT EXISTS hanja_cards (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        hanja TEXT NOT NULL,
        reading TEXT NOT NULL,
        meaning TEXT NOT NULL,
        strokes INTEGER,
        radical TEXT,
        examples TEXT,
        learned_date DATE,
        is_bookmarked INTEGER DEFAULT 0,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
    )
");

$db->exec("
    CREATE TABLE IF NOT EXISTS hanja_stats (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        total_days INTEGER DEFAULT 0,
        streak_days INTEGER DEFAULT 0,
        quiz_attempts INTEGER DEFAULT 0,
        quiz_correct INTEGER DEFAULT 0,
        last_study_date DATE
    )
");

// 통계 레코드 초기화
$statsCheck = $db->query("SELECT COUNT(*) FROM hanja_stats")->fetchColumn();
if ($statsCheck == 0) {
    $db->exec("INSERT INTO hanja_stats (total_days, streak_days) VALUES (0, 0)");
}

// 샘플 한자 데이터 삽입 (최초 실행 시)
$count = $db->query("SELECT COUNT(*) FROM hanja_cards")->fetchColumn();
if ($count == 0) {
    $sampleData = [
        ['大', '큰 대', '크다, 위대하다', 3, '大', '大學(대학), 大韓民國(대한민국)'],
        ['小', '작을 소', '작다', 3, '小', '小學校(소학교), 大小(대소)'],
        ['中', '가운데 중', '가운데, 안', 4, '丨', '中學校(중학교), 中央(중앙)'],
        ['人', '사람 인', '사람', 2, '人', '人間(인간), 人生(인생)'],
        ['日', '날 일', '해, 날', 4, '日', '日本(일본), 每日(매일)'],
    ];
    
    $stmt = $db->prepare("
        INSERT INTO hanja_cards (hanja, reading, meaning, strokes, radical, examples)
        VALUES (?, ?, ?, ?, ?, ?)
    ");
    
    foreach ($sampleData as $data) {
        $stmt->execute($data);
    }
}

// 오늘의 한자 가져오기 (아직 학습하지 않은 첫 번째 한자)
$todayHanja = $db->query("
    SELECT * FROM hanja_cards 
    WHERE learned_date IS NULL 
    ORDER BY id ASC 
    LIMIT 1
")->fetch(PDO::FETCH_ASSOC);

// 통계 가져오기
$stats = $db->query("SELECT * FROM hanja_stats LIMIT 1")->fetch(PDO::FETCH_ASSOC);

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<style>
.hanja-card {
    perspective: 1000px;
    margin: 32px auto;
    max-width: 400px;
    height: 500px;
    cursor: pointer;
}

.hanja-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

.hanja-card.flipped .hanja-card-inner {
    transform: rotateY(180deg);
}

.hanja-card-front,
.hanja-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: var(--m-radius-lg);
    background: var(--m-surface);
    box-shadow: var(--m-shadow);
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.hanja-card-back {
    transform: rotateY(180deg);
}

.hanja-display {
    font-size: 120px;
    font-weight: bold;
    color: var(--m-primary);
    margin-bottom: 16px;
}

.hanja-reading {
    font-size: 24px;
    color: var(--m-text);
    margin-bottom: 8px;
}

.hanja-meaning {
    font-size: 18px;
    color: var(--m-text-muted);
    margin-bottom: 24px;
}

.hanja-details {
    width: 100%;
    text-align: left;
}

.hanja-detail-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 0;
    border-bottom: 1px solid var(--m-text-muted);
    opacity: 0.3;
}

.hanja-detail-label {
    font-weight: bold;
    color: var(--m-text);
}

.hanja-detail-value {
    color: var(--m-text-muted);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-top: 32px;
}

.stat-card {
    background: var(--m-surface);
    padding: 20px;
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
    text-align: center;
}

.stat-value {
    font-size: 32px;
    font-weight: bold;
    color: var(--m-primary);
}

.stat-label {
    font-size: 14px;
    color: var(--m-text-muted);
    margin-top: 8px;
}

.action-buttons {
    display: flex;
    gap: 12px;
    margin-top: 32px;
}

.btn {
    padding: 12px 24px;
    border-radius: var(--m-radius-lg);
    border: none;
    font-size: 16px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn:hover {
    opacity: 0.8;
}

.btn-primary {
    background: var(--m-primary);
    color: white;
}

.btn-secondary {
    background: var(--m-surface);
    color: var(--m-text);
    box-shadow: var(--m-shadow);
}

.flip-hint {
    text-align: center;
    color: var(--m-text-muted);
    font-size: 14px;
    margin-top: 16px;
}
</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="text-align: center; color: var(--m-text); margin-bottom: 8px;">🎯 오늘의 한자</h1>
        <p style="text-align: center; color: var(--m-text-muted); margin-bottom: 32px;">매일 한 글자씩 익혀가는 한자 학습</p>

        <?php if ($todayHanja): ?>
            <div class="hanja-card" id="hanjaCard">
                <div class="hanja-card-inner">
                    <div class="hanja-card-front">
                        <div class="hanja-display"><?php echo htmlspecialchars($todayHanja['hanja']); ?></div>
                        <div class="hanja-reading"><?php echo htmlspecialchars($todayHanja['reading']); ?></div>
                        <div class="hanja-meaning"><?php echo htmlspecialchars($todayHanja['meaning']); ?></div>
                        <p style="color: var(--m-text-muted); font-size: 14px;">카드를 클릭하여 뒤집어보세요</p>
                    </div>
                    <div class="hanja-card-back">
                        <h3 style="color: var(--m-text); margin-bottom: 24px;">상세 정보</h3>
                        <div class="hanja-details">
                            <div class="hanja-detail-row">
                                <span class="hanja-detail-label">획수</span>
                                <span class="hanja-detail-value"><?php echo htmlspecialchars($todayHanja['strokes']); ?>획</span>
                            </div>
                            <div class="hanja-detail-row">
                                <span class="hanja-detail-label">부수</span>
                                <span class="hanja-detail-value"><?php echo htmlspecialchars($todayHanja['radical']); ?></span>
                            </div>
                            <div class="hanja-detail-row">
                                <span class="hanja-detail-label">예문</span>
                                <span class="hanja-detail-value"><?php echo htmlspecialchars($todayHanja['examples']); ?></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <p class="flip-hint">💡 Tip: 카드를 클릭하면 앞뒤로 뒤집을 수 있습니다</p>

            <div class="action-buttons" style="justify-content: center;">
                <button class="btn btn-primary" onclick="markAsLearned(<?php echo $todayHanja['id']; ?>)">✅ 학습 완료</button>
                <a href="/hanja/archive" class="btn btn-secondary">📖 학습 아카이브</a>
            </div>
        <?php else: ?>
            <div style="text-align: center; padding: 60px 20px;">
                <p style="font-size: 48px; margin-bottom: 16px;">🎉</p>
                <h2 style="color: var(--m-text); margin-bottom: 8px;">모든 한자를 학습했습니다!</h2>
                <p style="color: var(--m-text-muted);">복습 퀴즈로 실력을 확인해보세요</p>
                <div class="action-buttons" style="justify-content: center; margin-top: 24px;">
                    <a href="/hanja/quiz" class="btn btn-primary">퀴즈 풀기</a>
                    <a href="/hanja/archive" class="btn btn-secondary">학습 기록 보기</a>
                </div>
            </div>
        <?php endif; ?>

        <div class="stats-grid">
            <div class="stat-card">
                <div class="stat-value"><?php echo $stats['total_days']; ?></div>
                <div class="stat-label">총 학습 일수</div>
            </div>
            <div class="stat-card">
                <div class="stat-value"><?php echo $stats['streak_days']; ?></div>
                <div class="stat-label">연속 학습 일수</div>
            </div>
            <div class="stat-card">
                <div class="stat-value">
                    <?php 
                    if ($stats['quiz_attempts'] > 0) {
                        echo round(($stats['quiz_correct'] / $stats['quiz_attempts']) * 100);
                    } else {
                        echo 0;
                    }
                    ?>%
                </div>
                <div class="stat-label">퀴즈 정답률</div>
            </div>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>

<script>
// 카드 플립 애니메이션
document.getElementById('hanjaCard')?.addEventListener('click', function() {
    this.classList.toggle('flipped');
});

// 학습 완료 처리
function markAsLearned(id) {
    if (!confirm('이 한자를 학습 완료로 표시하시겠습니까?')) return;
    
    fetch('/hanja/index.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: 'action=mark_learned&id=' + id
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            alert('학습 완료! 다음 한자로 이동합니다.');
            location.reload();
        } else {
            alert('오류가 발생했습니다.');
        }
    });
}
</script>

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

### 3) AJAX 처리 추가

위 파일의 맨 위(`include_once('./_common.php');` 바로 아래)에 다음 코드를 추가하세요:

```php
// AJAX 요청 처리
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action'])) {
    @mkdir(G5_DATA_PATH.'/modules', 0707, true);
    $db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/hanja.sqlite');
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    if ($_POST['action'] === 'mark_learned') {
        $id = intval($_POST['id']);
        $today = date('Y-m-d');
        
        // 한자를 학습 완료로 표시
        $stmt = $db->prepare("UPDATE hanja_cards SET learned_date = ? WHERE id = ?");
        $stmt->execute([$today, $id]);
        
        // 통계 업데이트
        $stats = $db->query("SELECT * FROM hanja_stats LIMIT 1")->fetch(PDO::FETCH_ASSOC);
        $lastStudyDate = $stats['last_study_date'];
        $newStreakDays = $stats['streak_days'];
        
        if ($lastStudyDate === null || $lastStudyDate !== $today) {
            $newTotalDays = $stats['total_days'] + 1;
            
            // 연속 일수 계산
            if ($lastStudyDate === date('Y-m-d', strtotime('-1 day'))) {
                $newStreakDays = $stats['streak_days'] + 1;
            } else {
                $newStreakDays = 1;
            }
            
            $stmt = $db->prepare("
                UPDATE hanja_stats 
                SET total_days = ?, streak_days = ?, last_study_date = ?
            ");
            $stmt->execute([$newTotalDays, $newStreakDays, $today]);
        }
        
        header('Content-Type: application/json');
        echo json_encode(['success' => true]);
        exit;
    }
}
```

이제 브라우저에서 `/hanja`로 접속하면 오늘의 한자 학습 페이지가 표시됩니다.

## Step 2: 학습 아카이브 페이지 구현

지금까지 학습한 한자 목록을 날짜별로 확인할 수 있는 아카이브 페이지를 만듭니다.

### 1) 아카이브 페이지 생성 (app/modules/hanja/archive.php)

다음 내용으로 파일을 생성하세요:

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

// 모듈 DB 연결
@mkdir(G5_DATA_PATH.'/modules', 0707, true);
$db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/hanja.sqlite');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 검색 파라미터
$search = isset($_GET['search']) ? trim($_GET['search']) : '';
$filterBookmarked = isset($_GET['bookmarked']) ? true : false;

// 학습한 한자 목록 가져오기
$query = "SELECT * FROM hanja_cards WHERE learned_date IS NOT NULL";
$params = [];

if ($search !== '') {
    $query .= " AND (hanja LIKE ? OR reading LIKE ? OR meaning LIKE ?)";
    $params[] = "%$search%";
    $params[] = "%$search%";
    $params[] = "%$search%";
}

if ($filterBookmarked) {
    $query .= " AND is_bookmarked = 1";
}

$query .= " ORDER BY learned_date DESC";

$stmt = $db->prepare($query);
$stmt->execute($params);
$learnedCards = $stmt->fetchAll(PDO::FETCH_ASSOC);

// 북마크 토글 처리
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'toggle_bookmark') {
    $id = intval($_POST['id']);
    $stmt = $db->prepare("UPDATE hanja_cards SET is_bookmarked = NOT is_bookmarked WHERE id = ?");
    $stmt->execute([$id]);
    
    header('Content-Type: application/json');
    echo json_encode(['success' => true]);
    exit;
}

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<style>
.search-bar {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.search-input {
    flex: 1;
    min-width: 200px;
    padding: 12px 16px;
    border: 1px solid var(--m-text-muted);
    border-radius: var(--m-radius-lg);
    background: var(--m-surface);
    color: var(--m-text);
    font-size: 16px;
}

.search-input::placeholder {
    color: var(--m-text-muted);
}

.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    cursor: pointer;
}

.hanja-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 24px;
}

.hanja-card-mini {
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
    padding: 24px;
    position: relative;
    transition: transform 0.2s, box-shadow 0.2s;
}

.hanja-card-mini:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.hanja-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
}

.hanja-char {
    font-size: 48px;
    font-weight: bold;
    color: var(--m-primary);
}

.bookmark-btn {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    transition: transform 0.2s;
}

.bookmark-btn:hover {
    transform: scale(1.2);
}

.hanja-info {
    margin-bottom: 12px;
}

.hanja-reading-mini {
    font-size: 18px;
    font-weight: bold;
    color: var(--m-text);
    margin-bottom: 4px;
}

.hanja-meaning-mini {
    font-size: 14px;
    color: var(--m-text-muted);
    margin-bottom: 8px;
}

.hanja-meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--m-text-muted);
}

.hanja-date {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--m-text-muted);
    opacity: 0.3;
    font-size: 12px;
    color: var(--m-text-muted);
}

.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state-icon {
    font-size: 64px;
    margin-bottom: 16px;
}

.btn {
    padding: 12px 24px;
    border-radius: var(--m-radius-lg);
    border: none;
    font-size: 16px;
    cursor: pointer;
    transition: opacity 0.2s;
    text-decoration: none;
    display: inline-block;
}

.btn:hover {
    opacity: 0.8;
}

.btn-primary {
    background: var(--m-primary);
    color: white;
}
</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="color: var(--m-text); margin-bottom: 8px;">📖 학습 아카이브</h1>
        <p style="color: var(--m-text-muted); margin-bottom: 32px;">지금까지 학습한 한자를 확인하세요</p>

        <form method="GET" class="search-bar">
            <input 
                type="text" 
                name="search" 
                class="search-input" 
                placeholder="한자, 훈음, 뜻으로 검색..." 
                value="<?php echo htmlspecialchars($search); ?>"
            >
            <label class="filter-checkbox">
                <input type="checkbox" name="bookmarked" <?php echo $filterBookmarked ? 'checked' : ''; ?> onchange="this.form.submit()">
                <span style="color: var(--m-text);">🔖 북마크만 보기</span>
            </label>
            <button type="submit" class="btn btn-primary">검색</button>
        </form>

        <?php if (count($learnedCards) > 0): ?>
            <div class="hanja-grid">
                <?php foreach ($learnedCards as $card): ?>
                    <div class="hanja-card-mini">
                        <div class="hanja-header">
                            <div class="hanja-char"><?php echo htmlspecialchars($card['hanja']); ?></div>
                            <button 
                                class="bookmark-btn" 
                                onclick="toggleBookmark(<?php echo $card['id']; ?>, this)"
                                title="북마크"
                            >
                                <?php echo $card['is_bookmarked'] ? '⭐' : '☆'; ?>
                            </button>
                        </div>
                        <div class="hanja-info">
                            <div class="hanja-reading-mini"><?php echo htmlspecialchars($card['reading']); ?></div>
                            <div class="hanja-meaning-mini"><?php echo htmlspecialchars($card['meaning']); ?></div>
                            <div class="hanja-meta">
                                <span>획수: <?php echo htmlspecialchars($card['strokes']); ?>획</span>
                                <span>부수: <?php echo htmlspecialchars($card['radical']); ?></span>
                            </div>
                        </div>
                        <div class="hanja-date">
                            학습일: <?php echo htmlspecialchars($card['learned_date']); ?>
                        </div>
                    </div>
                <?php endforeach; ?>
            </div>
        <?php else: ?>
            <div class="empty-state">
                <div class="empty-state-icon">📚</div>
                <h2 style="color: var(--m-text); margin-bottom: 8px;">
                    <?php echo $search !== '' || $filterBookmarked ? '검색 결과가 없습니다' : '아직 학습한 한자가 없습니다'; ?>
                </h2>
                <p style="color: var(--m-text-muted); margin-bottom: 24px;">
                    <?php echo $search !== '' || $filterBookmarked ? '다른 검색어로 시도해보세요' : '오늘의 한자부터 시작해보세요!'; ?>
                </p>
                <a href="/hanja" class="btn btn-primary">오늘의 한자 보기</a>
            </div>
        <?php endif; ?>

        <div style="margin-top: 32px; text-align: center;">
            <a href="/hanja" class="btn btn-primary">← 메인으로</a>
            <a href="/hanja/quiz" class="btn btn-primary" style="margin-left: 12px;">퀴즈 풀기 →</a>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>

<script>
function toggleBookmark(id, btn) {
    fetch('/hanja/archive', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: 'action=toggle_bookmark&id=' + id
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            // 북마크 아이콘 토글
            btn.textContent = btn.textContent === '⭐' ? '☆' : '⭐';
        }
    });
}
</script>

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

이제 `/hanja/archive`로 접속하면 학습한 한자 목록을 확인할 수 있습니다.

## Step 3: 복습 퀴즈 페이지 구현

학습한 한자 중 랜덤으로 5개를 선택하여 훈음 맞추기 퀴즈를 제공하는 페이지를 만듭니다.

### 1) 퀴즈 페이지 생성 (app/modules/hanja/quiz.php)

다음 내용으로 파일을 생성하세요:

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

// 모듈 DB 연결
@mkdir(G5_DATA_PATH.'/modules', 0707, true);
$db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/hanja.sqlite');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 퀴즈 제출 처리
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'submit_quiz') {
    $answers = json_decode($_POST['answers'], true);
    $correctCount = 0;
    
    foreach ($answers as $answer) {
        $stmt = $db->prepare("SELECT reading FROM hanja_cards WHERE id = ?");
        $stmt->execute([$answer['id']]);
        $correct = $stmt->fetchColumn();
        
        if (strtolower(trim($answer['answer'])) === strtolower(trim($correct))) {
            $correctCount++;
        }
    }
    
    // 통계 업데이트
    $stmt = $db->prepare("
        UPDATE hanja_stats 
        SET quiz_attempts = quiz_attempts + ?, quiz_correct = quiz_correct + ?
    ");
    $stmt->execute([count($answers), $correctCount]);
    
    header('Content-Type: application/json');
    echo json_encode([
        'success' => true,
        'correct' => $correctCount,
        'total' => count($answers)
    ]);
    exit;
}

// 학습한 한자 중 랜덤 5개 선택
$quizCards = $db->query("
    SELECT * FROM hanja_cards 
    WHERE learned_date IS NOT NULL 
    ORDER BY RANDOM() 
    LIMIT 5
")->fetchAll(PDO::FETCH_ASSOC);

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<style>
.quiz-container {
    max-width: 600px;
    margin: 0 auto;
}

.quiz-progress {
    display: flex;
    gap: 8px;
    margin-bottom: 32px;
    justify-content: center;
}

.progress-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--m-text-muted);
    opacity: 0.3;
    transition: all 0.3s;
}

.progress-dot.active {
    background: var(--m-primary);
    opacity: 1;
    transform: scale(1.3);
}

.progress-dot.correct {
    background: #22c55e;
    opacity: 1;
}

.progress-dot.wrong {
    background: #ef4444;
    opacity: 1;
}

.quiz-card {
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
    padding: 48px 32px;
    text-align: center;
    margin-bottom: 24px;
}

.quiz-number {
    color: var(--m-text-muted);
    font-size: 14px;
    margin-bottom: 16px;
}

.quiz-hanja {
    font-size: 96px;
    font-weight: bold;
    color: var(--m-primary);
    margin-bottom: 32px;
}

.quiz-input {
    width: 100%;
    max-width: 400px;
    padding: 16px 20px;
    font-size: 18px;
    border: 2px solid var(--m-text-muted);
    border-radius: var(--m-radius-lg);
    background: var(--m-surface);
    color: var(--m-text);
    text-align: center;
    transition: border-color 0.2s;
}

.quiz-input:focus {
    outline: none;
    border-color: var(--m-primary);
}

.quiz-input::placeholder {
    color: var(--m-text-muted);
}

.quiz-hint {
    margin-top: 16px;
    font-size: 14px;
    color: var(--m-text-muted);
}

.quiz-buttons {
    display: flex;
    gap: 12px;
    justify-content: center;
    margin-top: 24px;
}

.btn {
    padding: 12px 32px;
    border-radius: var(--m-radius-lg);
    border: none;
    font-size: 16px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.btn:hover {
    opacity: 0.8;
}

.btn-primary {
    background: var(--m-primary);
    color: white;
}

.btn-secondary {
    background: var(--m-surface);
    color: var(--m-text);
    box-shadow: var(--m-shadow);
}

.result-card {
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
    padding: 48px 32px;
    text-align: center;
}

.result-score {
    font-size: 72px;
    font-weight: bold;
    color: var(--m-primary);
    margin-bottom: 16px;
}

.result-message {
    font-size: 24px;
    color: var(--m-text);
    margin-bottom: 32px;
}

.result-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    margin-top: 32px;
}

.result-stat {
    padding: 16px;
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
}

.result-stat-value {
    font-size: 32px;
    font-weight: bold;
    color: var(--m-primary);
}

.result-stat-label {
    font-size: 14px;
    color: var(--m-text-muted);
    margin-top: 4px;
}
</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="text-align: center; color: var(--m-text); margin-bottom: 8px;">✍️ 복습 퀴즈</h1>
        <p style="text-align: center; color: var(--m-text-muted); margin-bottom: 32px;">한자를 보고 훈음을 입력하세요</p>

        <?php if (count($quizCards) < 5): ?>
            <div class="result-card">
                <div style="font-size: 64px; margin-bottom: 16px;">📚</div>
                <h2 style="color: var(--m-text); margin-bottom: 8px;">퀴즈를 시작하려면 최소 5개의 한자를 학습해야 합니다</h2>
                <p style="color: var(--m-text-muted); margin-bottom: 24px;">현재 <?php echo count($quizCards); ?>개 학습 완료</p>
                <a href="/hanja" class="btn btn-primary">학습하러 가기</a>
            </div>
        <?php else: ?>
            <div class="quiz-container">
                <div class="quiz-progress" id="quizProgress">
                    <?php for ($i = 0; $i < 5; $i++): ?>
                        <div class="progress-dot <?php echo $i === 0 ? 'active' : ''; ?>"></div>
                    <?php endfor; ?>
                </div>

                <div id="quizArea">
                    <div class="quiz-card">
                        <div class="quiz-number">문제 <span id="currentNumber">1</span> / 5</div>
                        <div class="quiz-hanja" id="quizHanja"><?php echo htmlspecialchars($quizCards[0]['hanja']); ?></div>
                        <input 
                            type="text" 
                            class="quiz-input" 
                            id="quizInput" 
                            placeholder="훈음을 입력하세요 (예: 큰 대)"
                            autocomplete="off"
                        >
                        <div class="quiz-hint">💡 Tip: 띄어쓰기와 대소문자는 구분하지 않습니다</div>
                    </div>

                    <div class="quiz-buttons">
                        <button class="btn btn-secondary" onclick="skipQuestion()">건너뛰기</button>
                        <button class="btn btn-primary" onclick="submitAnswer()">다음</button>
                    </div>
                </div>

                <div id="resultArea" style="display: none;">
                    <div class="result-card">
                        <div class="result-score" id="resultScore"></div>
                        <div class="result-message" id="resultMessage"></div>
                        <div class="result-details">
                            <div class="result-stat">
                                <div class="result-stat-value" id="correctCount"></div>
                                <div class="result-stat-label">정답</div>
                            </div>
                            <div class="result-stat">
                                <div class="result-stat-value" id="wrongCount"></div>
                                <div class="result-stat-label">오답</div>
                            </div>
                        </div>
                        <div style="margin-top: 32px;">
                            <a href="/hanja/quiz" class="btn btn-primary">다시 풀기</a>
                            <a href="/hanja" class="btn btn-secondary" style="margin-left: 12px;">메인으로</a>
                        </div>
                    </div>
                </div>
            </div>
        <?php endif; ?>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>

<script>
const quizData = <?php echo json_encode($quizCards); ?>;
let currentIndex = 0;
let answers = [];

const quizInput = document.getElementById('quizInput');
const quizHanja = document.getElementById('quizHanja');
const currentNumber = document.getElementById('currentNumber');
const progressDots = document.querySelectorAll('.progress-dot');

// Enter 키로 제출
quizInput?.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        submitAnswer();
    }
});

function submitAnswer() {
    const answer = quizInput.value.trim();
    
    if (answer === '') {
        alert('답을 입력해주세요!');
        return;
    }
    
    // 답안 저장
    answers.push({
        id: quizData[currentIndex].id,
        answer: answer
    });
    
    // 다음 문제로
    nextQuestion();
}

function skipQuestion() {
    answers.push({
        id: quizData[currentIndex].id,
        answer: ''
    });
    
    nextQuestion();
}

function nextQuestion() {
    currentIndex++;
    
    if (currentIndex < quizData.length) {
        // 다음 문제 표시
        quizHanja.textContent = quizData[currentIndex].hanja;
        quizInput.value = '';
        quizInput.focus();
        currentNumber.textContent = currentIndex + 1;
        
        // 진행률 업데이트
        progressDots.forEach((dot, index) => {
            dot.classList.remove('active');
            if (index === currentIndex) {
                dot.classList.add('active');
            }
        });
    } else {
        // 퀴즈 완료
        finishQuiz();
    }
}

function finishQuiz() {
    // 서버에 답안 제출
    fetch('/hanja/quiz', {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: 'action=submit_quiz&answers=' + encodeURIComponent(JSON.stringify(answers))
    })
    .then(response => response.json())
    .then(data => {
        showResult(data.correct, data.total);
    });
}

function showResult(correct, total) {
    const score = Math.round((correct / total) * 100);
    const wrong = total - correct;
    
    document.getElementById('quizArea').style.display = 'none';
    document.getElementById('resultArea').style.display = 'block';
    
    document.getElementById('resultScore').textContent = score + '점';
    document.getElementById('correctCount').textContent = correct;
    document.getElementById('wrongCount').textContent = wrong;
    
    let message = '';
    if (score === 100) {
        message = '🎉 완벽합니다!';
    } else if (score >= 80) {
        message = '👏 훌륭해요!';
    } else if (score >= 60) {
        message = '👍 잘했어요!';
    } else {
        message = '💪 조금만 더 힘내세요!';
    }
    document.getElementById('resultMessage').textContent = message;
    
    // 진행률 점 업데이트
    progressDots.forEach((dot, index) => {
        dot.classList.remove('active');
        if (index < correct) {
            dot.classList.add('correct');
        } else {
            dot.classList.add('wrong');
        }
    });
}
</script>

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

이제 `/hanja/quiz`로 접속하면 복습 퀴즈를 풀 수 있습니다.

## Step 4: 사용자 경험 개선 및 마무리

마지막으로 전체적인 사용자 경험을 개선하고 세부 기능을 보강합니다.

### 1) 메인 페이지 개선 (app/modules/hanja/index.php 수정)

기존 메인 페이지의 `<main>` 섹션 상단에 다음 안내 배너를 추가하세요 (`<h1>` 태그 바로 위):

```php
<?php
// 학습 가능한 한자 수 확인
$remainingCount = $db->query("SELECT COUNT(*) FROM hanja_cards WHERE learned_date IS NULL")->fetchColumn();
?>

<?php if ($remainingCount > 0): ?>
    <div style="background: linear-gradient(135deg, var(--m-primary) 0%, #6366f1 100%); color: white; padding: 20px 24px; border-radius: var(--m-radius-lg); margin-bottom: 24px; box-shadow: var(--m-shadow);">
        <div style="display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;">
            <div>
                <div style="font-size: 14px; opacity: 0.9; margin-bottom: 4px;">학습 진행률</div>
                <div style="font-size: 24px; font-weight: bold;">
                    <?php 
                    $totalCount = $db->query("SELECT COUNT(*) FROM hanja_cards")->fetchColumn();
                    $learnedCount = $totalCount - $remainingCount;
                    echo "$learnedCount / $totalCount";
                    ?>
                </div>
            </div>
            <div style="font-size: 14px; opacity: 0.9;">
                <?php echo round(($learnedCount / $totalCount) * 100); ?>% 완료
            </div>
        </div>
        <div style="background: rgba(255,255,255,0.2); height: 8px; border-radius: 4px; margin-top: 12px; overflow: hidden;">
            <div style="background: white; height: 100%; width: <?php echo round(($learnedCount / $totalCount) * 100); ?>%; transition: width 0.3s;"></div>
        </div>
    </div>
<?php endif; ?>
```

### 2) 아카이브 페이지에 통계 요약 추가 (app/modules/hanja/archive.php 수정)

검색 바 위에 다음 통계 섹션을 추가하세요:

```php
<?php
// 통계 계산
$totalLearned = count($learnedCards);
$bookmarkedCount = $db->query("SELECT COUNT(*) FROM hanja_cards WHERE is_bookmarked = 1")->fetchColumn();
$thisWeekCount = $db->query("
    SELECT COUNT(*) FROM hanja_cards 
    WHERE learned_date >= date('now', '-7 days')
")->fetchColumn();
?>

<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 32px;">
    <div style="background: var(--m-surface); padding: 20px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); text-align: center;">
        <div style="font-size: 36px; font-weight: bold; color: var(--m-primary);"><?php echo $totalLearned; ?></div>
        <div style="font-size: 14px; color: var(--m-text-muted); margin-top: 4px;">총 학습 한자</div>
    </div>
    <div style="background: var(--m-surface); padding: 20px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); text-align: center;">
        <div style="font-size: 36px; font-weight: bold; color: #f59e0b;"><?php echo $bookmarkedCount; ?></div>
        <div style="font-size: 14px; color: var(--m-text-muted); margin-top: 4px;">북마크</div>
    </div>
    <div style="background: var(--m-surface); padding: 20px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); text-align: center;">
        <div style="font-size: 36px; font-weight: bold; color: #22c55e;"><?php echo $thisWeekCount; ?></div>
        <div style="font-size: 14px; color: var(--m-text-muted); margin-top: 4px;">이번 주 학습</div>
    </div>
</div>
```

### 3) 퀴즈 페이지에 힌트 기능 추가 (app/modules/hanja/quiz.php 수정)

퀴즈 카드 안의 입력창 아래에 힌트 버튼을 추가하세요:

```html
<!-- 기존 quiz-hint div 아래에 추가 -->
<button class="btn btn-secondary" onclick="showHint()" id="hintBtn" style="margin-top: 16px;">
    💡 힌트 보기
</button>
<div id="hintText" style="display: none; margin-top: 12px; padding: 12px; background: rgba(99, 102, 241, 0.1); border-radius: 8px; color: var(--m-text);">
    획수: <span id="hintStrokes"></span>획 | 
    부수: <span id="hintRadical"></span>
</div>
```

그리고 `<script>` 섹션에 다음 함수를 추가하세요:

```javascript
function showHint() {
    const current = quizData[currentIndex];
    document.getElementById('hintStrokes').textContent = current.strokes;
    document.getElementById('hintRadical').textContent = current.radical;
    document.getElementById('hintText').style.display = 'block';
    document.getElementById('hintBtn').style.display = 'none';
}

// nextQuestion 함수 안에 힌트 초기화 코드 추가
function nextQuestion() {
    currentIndex++;
    
    if (currentIndex < quizData.length) {
        // ... 기존 코드 ...
        
        // 힌트 초기화
        document.getElementById('hintText').style.display = 'none';
        document.getElementById('hintBtn').style.display = 'inline-block';
    } else {
        finishQuiz();
    }
}
```

### 4) 반응형 디자인 개선

모든 페이지의 `<style>` 섹션 끝에 다음 미디어 쿼리를 추가하세요:

```css
@media (max-width: 640px) {
    .hanja-display {
        font-size: 80px;
    }
    
    .quiz-hanja {
        font-size: 72px;
    }
    
    .hanja-grid {
        grid-template-columns: 1fr;
    }
    
    .stats-grid {
        grid-template-columns: 1fr;
    }
    
    .action-buttons {
        flex-direction: column;
    }
    
    .btn {
        width: 100%;
    }
}
```

### 5) 최종 테스트

다음 시나리오를 테스트하세요:

1. **메인 페이지**
   - `/hanja` 접속
   - 학습 진행률 배너 확인
   - 한자 카드 클릭하여 플립 애니메이션 확인
   - 학습 완료 버튼 클릭 후 통계 업데이트 확인

2. **아카이브 페이지**
   - `/hanja/archive` 접속
   - 통계 요약 확인
   - 검색 기능 테스트
   - 북마크 토글 테스트
   - 북마크 필터 테스트

3. **퀴즈 페이지**
   - `/hanja/quiz` 접속
   - 5문제 풀이 (정답/오답 섞어서)
   - 힌트 기능 사용
   - 건너뛰기 기능 사용
   - 결과 화면 확인
   - 통계 업데이트 확인

4. **다크모드**
   - nav의 다크모드 토글 버튼 클릭
   - 모든 페이지에서 색상 전환 확인

5. **반응형**
   - 브라우저 창 크기 조절
   - 모바일 화면에서 레이아웃 확인

모든 기능이 정상 동작하면 완성입니다! 🎉