🎯 g5se 오늘의 색상 심리 테스트 - 나를 표현하는 컬러 찾기

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

**1단계: 색상 심리 테스트 페이지 기본 골격 생성**

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

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

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

// 테이블 생성 (최초 1회)
$pdo->exec("
    CREATE TABLE IF NOT EXISTS quiz_results (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        color_name TEXT NOT NULL,
        ip_address TEXT,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP
    )
");

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 style="max-width: 700px; margin: 0 auto;">
            <h1 style="font-size: 2rem; font-weight: 700; margin-bottom: 12px; color: var(--m-text);">🎨 오늘의 색상 심리 테스트</h1>
            <p style="color: var(--m-text-muted); margin-bottom: 32px;">5가지 질문으로 나를 표현하는 색상을 찾아보세요!</p>
            
            <div id="quiz-container">
                <!-- 질문이 여기에 동적으로 렌더링됩니다 -->
            </div>
            
            <div id="result-container" style="display: none;">
                <!-- 결과가 여기에 표시됩니다 -->
            </div>
            
            <div style="margin-top: 48px; padding: 24px; background: var(--m-surface); border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
                <h3 style="font-size: 1.25rem; font-weight: 600; margin-bottom: 16px; color: var(--m-text);">🏆 인기 색상 순위</h3>
                <div id="popular-colors">
                    <!-- 인기 색상 TOP 3이 여기에 표시됩니다 -->
                </div>
            </div>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<?php include_once('./tail.sub.php'); ?>
```

이 파일을 저장하고 브라우저에서 `/color-quiz`로 접속하여 페이지가 정상적으로 로드되는지 확인하세요. modern shell이 적용되어 네비게이션, 푸터, 다크모드 토글이 자동으로 표시되어야 합니다.

**2단계: 질문 데이터 구조 및 렌더링 로직 구현**

`app/modules/color-quiz/index.php` 파일의 상단(SQLite 초기화 직후)에 질문 배열을 추가하고, 하단에 JavaScript로 질문을 동적 렌더링하는 코드를 작성하세요:

PHP 부분 (파일 상단, `$pdo->exec()` 직후에 추가):
```php
// 질문 데이터 (5개 질문, 각 4개 선택지)
$questions = [
    [
        'id' => 1,
        'question' => '주말에 가장 하고 싶은 활동은?',
        'options' => [
            ['text' => '조용한 카페에서 책 읽기', 'point' => 'blue'],
            ['text' => '친구들과 활기찬 파티', 'point' => 'red'],
            ['text' => '자연 속 산책', 'point' => 'green'],
            ['text' => '집에서 영화 마라톤', 'point' => 'purple']
        ]
    ],
    [
        'id' => 2,
        'question' => '스트레스 받을 때 어떻게 해소하나요?',
        'options' => [
            ['text' => '운동으로 땀 흘리기', 'point' => 'red'],
            ['text' => '명상이나 요가', 'point' => 'blue'],
            ['text' => '맛있는 음식 먹기', 'point' => 'orange'],
            ['text' => '음악 듣기', 'point' => 'purple']
        ]
    ],
    [
        'id' => 3,
        'question' => '가장 좋아하는 계절은?',
        'options' => [
            ['text' => '봄 (따뜻하고 화사한)', 'point' => 'pink'],
            ['text' => '여름 (뜨겁고 열정적인)', 'point' => 'orange'],
            ['text' => '가을 (차분하고 감성적인)', 'point' => 'brown'],
            ['text' => '겨울 (고요하고 평화로운)', 'point' => 'blue']
        ]
    ],
    [
        'id' => 4,
        'question' => '친구들이 나를 어떻게 표현할까요?',
        'options' => [
            ['text' => '밝고 긍정적인 사람', 'point' => 'yellow'],
            ['text' => '침착하고 신중한 사람', 'point' => 'blue'],
            ['text' => '열정적이고 활발한 사람', 'point' => 'red'],
            ['text' => '창의적이고 독특한 사람', 'point' => 'purple']
        ]
    ],
    [
        'id' => 5,
        'question' => '이상적인 휴가지는?',
        'options' => [
            ['text' => '한적한 시골 마을', 'point' => 'green'],
            ['text' => '북적이는 대도시', 'point' => 'red'],
            ['text' => '고요한 해변', 'point' => 'blue'],
            ['text' => '역사적인 유적지', 'point' => 'brown']
        ]
    ]
];

// 색상별 결과 데이터
$color_results = [
    'blue' => ['name' => '블루 (평화)', 'hex' => '#4A90E2', 'desc' => '차분하고 신중한 당신은 평화로운 블루입니다. 깊은 생각과 통찰력을 가진 사색가 타입이에요.'],
    'red' => ['name' => '레드 (열정)', 'hex' => '#E74C3C', 'desc' => '에너지 넘치고 활발한 당신은 열정적인 레드입니다. 도전을 즐기고 리더십이 강한 타입이에요.'],
    'green' => ['name' => '그린 (자연)', 'hex' => '#27AE60', 'desc' => '자연을 사랑하고 균형을 중시하는 당신은 그린입니다. 조화롭고 안정적인 성격의 소유자예요.'],
    'purple' => ['name' => '퍼플 (창의)', 'hex' => '#9B59B6', 'desc' => '창의적이고 독창적인 당신은 신비로운 퍼플입니다. 예술적 감각과 상상력이 풍부한 타입이에요.'],
    'yellow' => ['name' => '옐로우 (활기)', 'hex' => '#F39C12', 'desc' => '밝고 긍정적인 당신은 행복한 옐로우입니다. 주변을 즐겁게 만드는 에너지를 가진 타입이에요.'],
    'orange' => ['name' => '오렌지 (열정)', 'hex' => '#E67E22', 'desc' => '따뜻하고 사교적인 당신은 활기찬 오렌지입니다. 사람들과 어울리길 좋아하는 타입이에요.'],
    'pink' => ['name' => '핑크 (온화)', 'hex' => '#EC87C0', 'desc' => '부드럽고 배려심 깊은 당신은 사랑스러운 핑크입니다. 감성적이고 따뜻한 성격의 소유자예요.'],
    'brown' => ['name' => '브라운 (안정)', 'hex' => '#8B6F47', 'desc' => '현실적이고 믿음직한 당신은 안정적인 브라운입니다. 책임감이 강하고 신뢰할 수 있는 타입이에요.']
];

// JSON으로 전달
$questions_json = json_encode($questions, JSON_UNESCAPED_UNICODE);
$colors_json = json_encode($color_results, JSON_UNESCAPED_UNICODE);
```

JavaScript 부분 (파일 하단, `</main>` 직전에 추가):
```php
<script>
const questions = <?= $questions_json ?>;
const colorResults = <?= $colors_json ?>;
let currentQuestion = 0;
let answers = [];

function renderQuestion() {
    const container = document.getElementById('quiz-container');
    const q = questions[currentQuestion];
    
    container.innerHTML = `
        <div style="background: var(--m-surface); padding: 32px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
            <div style="margin-bottom: 24px;">
                <span style="color: var(--m-text-muted); font-size: 0.875rem;">질문 ${currentQuestion + 1} / ${questions.length}</span>
                <div style="width: 100%; height: 4px; background: var(--m-text-muted); opacity: 0.2; border-radius: 2px; margin-top: 8px;">
                    <div style="width: ${((currentQuestion + 1) / questions.length) * 100}%; height: 100%; background: #4A90E2; border-radius: 2px; transition: width 0.3s;"></div>
                </div>
            </div>
            <h2 style="font-size: 1.5rem; font-weight: 600; margin-bottom: 24px; color: var(--m-text);">${q.question}</h2>
            <div style="display: grid; gap: 12px;">
                ${q.options.map((opt, idx) => `
                    <button onclick="selectAnswer('${opt.point}')" 
                        style="padding: 16px 20px; background: var(--m-surface); border: 2px solid var(--m-text-muted); opacity: 0.3; border-radius: 8px; text-align: left; cursor: pointer; transition: all 0.2s; color: var(--m-text); font-size: 1rem;"
                        onmouseover="this.style.borderColor='#4A90E2'; this.style.transform='translateX(4px)';"
                        onmouseout="this.style.borderColor='var(--m-text-muted)'; this.style.opacity='0.3'; this.style.transform='translateX(0)';">
                        ${opt.text}
                    </button>
                `).join('')}
            </div>
        </div>
    `;
}

function selectAnswer(point) {
    answers.push(point);
    currentQuestion++;
    
    if (currentQuestion < questions.length) {
        renderQuestion();
    } else {
        showResult();
    }
}

function showResult() {
    // 가장 많이 선택된 색상 찾기
    const count = {};
    answers.forEach(c => count[c] = (count[c] || 0) + 1);
    const resultColor = Object.keys(count).reduce((a, b) => count[a] > count[b] ? a : b);
    const result = colorResults[resultColor];
    
    document.getElementById('quiz-container').style.display = 'none';
    const resultContainer = document.getElementById('result-container');
    resultContainer.style.display = 'block';
    resultContainer.innerHTML = `
        <div style="background: var(--m-surface); padding: 40px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); text-align: center;">
            <div style="width: 120px; height: 120px; background: ${result.hex}; border-radius: 50%; margin: 0 auto 24px; box-shadow: 0 8px 24px rgba(0,0,0,0.15);"></div>
            <h2 style="font-size: 2rem; font-weight: 700; margin-bottom: 12px; color: var(--m-text);">${result.name}</h2>
            <p style="font-size: 1.125rem; color: var(--m-text-muted); line-height: 1.6; margin-bottom: 32px;">${result.desc}</p>
            <div style="display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;">
                <button onclick="copyResult()" style="padding: 12px 24px; background: #4A90E2; color: white; border: none; border-radius: 8px; cursor: pointer; font-weight: 600;">🔗 결과 공유하기</button>
                <button onclick="location.reload()" style="padding: 12px 24px; background: var(--m-surface); color: var(--m-text); border: 2px solid var(--m-text-muted); opacity: 0.5; border-radius: 8px; cursor: pointer; font-weight: 600;">🔄 다시 하기</button>
            </div>
        </div>
    `;
    
    // 결과 저장
    fetch('/color-quiz?action=save', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({color: resultColor})
    });
}

function copyResult() {
    const url = window.location.origin + window.location.pathname + '?result=' + answers.join(',');
    navigator.clipboard.writeText(url).then(() => {
        alert('✅ 결과 URL이 복사되었습니다!');
    });
}

// 초기 렌더링
renderQuestion();
</script>
```

저장 후 브라우저에서 `/color-quiz`를 새로고침하여 질문이 순차적으로 표시되는지 확인하세요.

**3단계: 결과 저장 및 인기 색상 순위 표시**

`app/modules/color-quiz/index.php` 파일의 상단(질문 배열 정의 이전)에 AJAX 요청 처리 로직을 추가하고, 하단에 인기 색상 순위를 렌더링하는 코드를 작성하세요:

PHP 부분 (파일 상단, `$pdo->exec()` 직후에 추가):
```php
// AJAX 요청 처리: 결과 저장
if (isset($_GET['action']) && $_GET['action'] === 'save') {
    $input = json_decode(file_get_contents('php://input'), true);
    if (isset($input['color'])) {
        $color = htmlspecialchars($input['color']);
        $ip = $_SERVER['REMOTE_ADDR'];
        
        $stmt = $pdo->prepare("INSERT INTO quiz_results (color_name, ip_address) VALUES (?, ?)");
        $stmt->execute([$color, $ip]);
        
        echo json_encode(['success' => true]);
        exit;
    }
}

// AJAX 요청 처리: 인기 색상 조회
if (isset($_GET['action']) && $_GET['action'] === 'popular') {
    $stmt = $pdo->query("
        SELECT color_name, COUNT(*) as count 
        FROM quiz_results 
        GROUP BY color_name 
        ORDER BY count DESC 
        LIMIT 3
    ");
    $popular = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
    echo json_encode($popular);
    exit;
}
```

JavaScript 부분 (파일 하단, 기존 스크립트 끝에 추가):
```javascript
// 인기 색상 순위 로드
function loadPopularColors() {
    fetch('/color-quiz?action=popular')
        .then(r => r.json())
        .then(data => {
            const container = document.getElementById('popular-colors');
            if (data.length === 0) {
                container.innerHTML = '<p style="color: var(--m-text-muted); text-align: center;">아직 결과가 없습니다. 첫 번째 참여자가 되어보세요!</p>';
                return;
            }
            
            container.innerHTML = data.map((item, idx) => {
                const colorInfo = colorResults[item.color_name];
                if (!colorInfo) return '';
                
                const medals = ['🥇', '🥈', '🥉'];
                return `
                    <div style="display: flex; align-items: center; gap: 16px; padding: 16px; background: var(--m-surface); border-radius: 8px; margin-bottom: 12px; border: 2px solid var(--m-text-muted); opacity: 0.2;">
                        <span style="font-size: 2rem;">${medals[idx]}</span>
                        <div style="width: 40px; height: 40px; background: ${colorInfo.hex}; border-radius: 50%; flex-shrink: 0;"></div>
                        <div style="flex: 1;">
                            <div style="font-weight: 600; color: var(--m-text);">${colorInfo.name}</div>
                            <div style="font-size: 0.875rem; color: var(--m-text-muted);">${item.count}명이 선택</div>
                        </div>
                    </div>
                `;
            }).join('');
        });
}

// 페이지 로드 시 인기 색상 로드
loadPopularColors();
```

저장 후 브라우저에서 `/color-quiz`를 새로고침하고 테스트를 완료하여 결과가 저장되는지, 인기 색상 순위가 업데이트되는지 확인하세요.