🎯 g5se 온라인 퀴즈 아레나 - 다양한 주제의 퀴즈 풀기 & 점수 경쟁

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

**Step 1: 퀴즈 아레나 메인 페이지 생성**

`app/modules/quiz-arena/index.php` 파일을 만들고 다음을 구현하세요:

1. **modern shell 골격 적용**:
   - `_common.php` 인클루드
   - `_head.inc.php` + `m-shell` + `_nav.inc.php` + `m-container` + `_footer.inc.php` + `tail.sub.php` 구조 사용

2. **SQLite DB 초기화**:
   - 파일 위치: `G5_DATA_PATH.'/modules/quiz-arena.sqlite'`
   - 디렉터리 생성: `@mkdir(G5_DATA_PATH.'/modules', 0707, true);`
   - 테이블 스키마 (첫 접근 시 자동 생성):
     ```sql
     CREATE TABLE IF NOT EXISTS quiz_sets (
       id INTEGER PRIMARY KEY AUTOINCREMENT,
       category TEXT NOT NULL,
       title TEXT NOT NULL,
       difficulty TEXT DEFAULT 'normal',
       created_at TEXT DEFAULT CURRENT_TIMESTAMP
     );
     
     CREATE TABLE IF NOT EXISTS quiz_questions (
       id INTEGER PRIMARY KEY AUTOINCREMENT,
       quiz_set_id INTEGER NOT NULL,
       question TEXT NOT NULL,
       option_a TEXT NOT NULL,
       option_b TEXT NOT NULL,
       option_c TEXT NOT NULL,
       option_d TEXT NOT NULL,
       correct_answer TEXT NOT NULL,
       explanation TEXT,
       FOREIGN KEY(quiz_set_id) REFERENCES quiz_sets(id)
     );
     
     CREATE TABLE IF NOT EXISTS user_scores (
       id INTEGER PRIMARY KEY AUTOINCREMENT,
       mb_id TEXT NOT NULL,
       quiz_set_id INTEGER NOT NULL,
       score INTEGER DEFAULT 0,
       total_questions INTEGER DEFAULT 0,
       completed_at TEXT DEFAULT CURRENT_TIMESTAMP,
       FOREIGN KEY(quiz_set_id) REFERENCES quiz_sets(id)
     );
     ```

3. **카테고리별 퀴즈 세트 목록 표시**:
   - DB에서 quiz_sets를 category별로 그룹화하여 조회
   - 각 카테고리 카드에 퀴즈 세트 개수 표시
   - 카드 클릭 시 `/quiz-arena/play?set_id={id}` 링크

4. **UI 디자인**:
   - 헤더: "🎯 퀴즈 아레나" 타이틀 + "도전! 지식왕 되기" 서브타이틀
   - 카테고리 카드: 그리드 레이아웃 (2열, 모바일 1열)
   - 카드 스타일: `background: var(--m-surface); box-shadow: var(--m-shadow); border-radius: var(--m-radius-lg);`
   - hover 시 살짝 scale 애니메이션
   - 우측 상단에 "내 기록" 버튼 (`/quiz-arena/my-stats` 링크)

5. **샘플 데이터 삽입** (DB가 비어있을 경우):
   - 상식/역사/과학/엔터테인먼트 카테고리에 각 1개씩 샘플 퀴즈 세트 생성
   - 각 세트당 5개 문제 (4지선다)

**디자인 토큰 사용 예시:**
```css
.quiz-category-card {
  background: var(--m-surface);
  color: var(--m-text);
  box-shadow: var(--m-shadow);
  border-radius: var(--m-radius-lg);
  padding: 24px;
  transition: transform 0.2s;
}
.quiz-category-card:hover {
  transform: translateY(-4px);
}
.category-badge {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 6px 12px;
  border-radius: 12px;
  font-size: 0.9em;
}
```

**예상 URL**: `/quiz-arena` (폴더 기반 자동 라우팅)

파일 경로는 반드시 `app/modules/quiz-arena/index.php`로 생성하세요.

**Step 2: 퀴즈 풀이 페이지 구현**

`app/modules/quiz-arena/play/index.php` 파일을 만들고 다음을 구현하세요:

1. **URL 파라미터 처리**:
   - `$_GET['set_id']`로 퀴즈 세트 ID 받기
   - 해당 세트의 문제 목록을 DB에서 조회 (quiz_questions 테이블)
   - 세트가 없으면 404 메시지 표시

2. **퀴즈 UI 구조**:
   - 상단: 진행률 바 (예: "3 / 5 문제")
   - 중앙: 현재 문제 텍스트 (큰 폰트)
   - 4개 선택지 버튼 (A/B/C/D)
   - 하단: "다음 문제" 버튼 (정답 선택 후 활성화)

3. **JavaScript 인터랙션**:
   - 페이지 로드 시 문제 데이터를 JSON으로 `<script>` 태그에 임베드
   - 선택지 클릭 시:
     - AJAX로 `/quiz-arena/check-answer` POST 요청 (문제 ID + 선택한 답)
     - 응답에서 정답 여부 받아서 즉시 피드백 (정답: 초록 배경, 오답: 빨강 배경)
     - 정답일 경우 점수 +10점 표시
     - 오답일 경우 정답 선택지 강조 + 해설 표시
   - "다음 문제" 버튼 클릭 시 다음 문제로 이동 (JS로 화면 갱신)
   - 마지막 문제 완료 시 결과 요약 모달 표시 (총 점수, 정답률)

4. **AJAX 엔드포인트 분기** (같은 파일 내):
   - `$_POST['action'] === 'check_answer'`일 경우:
     - 문제 ID와 선택한 답을 받아서 정답 여부 체크
     - JSON 응답: `{"correct": true/false, "explanation": "...", "correct_answer": "B"}`
     - `header('Content-Type: application/json');`
     - `exit;`로 HTML 렌더링 중단

5. **퀴즈 완료 처리**:
   - 모든 문제 완료 시 user_scores 테이블에 기록 저장
   - mb_id는 `$member['mb_id']` 사용 (비회원은 'guest')
   - 완료 모달에 "리더보드 보기" 버튼 추가

6. **UI 디자인**:
   - 진행률 바: `<progress>` 태그 + CSS 스타일링
   - 선택지 버튼: 큰 패딩, 호버 시 배경색 변화
   - 정답 피드백: 0.3초 fade-in 애니메이션
   - 모달: 반투명 배경 + 중앙 카드

**AJAX 코드 예시 (JS):**
```javascript
function checkAnswer(questionId, selectedAnswer) {
  fetch('/quiz-arena/play', {
    method: 'POST',
    headers: {'Content-Type': 'application/x-www-form-urlencoded'},
    body: `action=check_answer&question_id=${questionId}&answer=${selectedAnswer}`
  })
  .then(res => res.json())
  .then(data => {
    if (data.correct) {
      // 정답 처리
      document.querySelector(`[data-option="${selectedAnswer}"]`).style.background = '#10b981';
    } else {
      // 오답 처리
      document.querySelector(`[data-option="${selectedAnswer}"]`).style.background = '#ef4444';
      document.querySelector(`[data-option="${data.correct_answer}"]`).style.background = '#10b981';
      showExplanation(data.explanation);
    }
  });
}
```

**예상 URL**: `/quiz-arena/play?set_id=1`

**Step 3: 리더보드 페이지 구현**

`app/modules/quiz-arena/leaderboard/index.php` 파일을 만들고 다음을 구현하세요:

1. **전체 순위 조회**:
   - user_scores 테이블에서 mb_id별 총점 집계 (SUM)
   - 점수 내림차순 정렬, 상위 20명만 표시
   - 비회원('guest')은 제외

2. **순위표 UI**:
   - 테이블 형식: 순위 | 사용자명 | 총점 | 완료한 퀴즈 수
   - 1~3위는 금/은/동 메달 아이콘 표시
   - 본인 순위는 하이라이트 (배경색 변경)

3. **필터 기능**:
   - 상단에 탭: "전체" / "오늘" / "이번 주"
   - 탭 클릭 시 기간 필터링 (completed_at 기준)
   - AJAX 없이 페이지 새로고침 방식으로 구현 (`?period=today` 파라미터)

4. **빈 상태 처리**:
   - 순위 데이터가 없을 경우 "아직 기록이 없습니다" 메시지 + 퀴즈 풀러 가기 버튼

5. **디자인**:
   - 테이블 헤더: 어두운 배경 (`var(--m-surface)` + 투명도)
   - 순위 셀: 큰 폰트, 볼드
   - 메달 아이콘: 🥇🥈🥉 이모지 사용
   - 본인 행: `background: rgba(102, 126, 234, 0.1);`

**SQL 예시:**
```sql
SELECT 
  mb_id,
  SUM(score) as total_score,
  COUNT(*) as quiz_count
FROM user_scores
WHERE mb_id != 'guest'
GROUP BY mb_id
ORDER BY total_score DESC
LIMIT 20
```

**기간 필터 SQL (오늘 기준):**
```sql
WHERE mb_id != 'guest' 
  AND DATE(completed_at) = DATE('now')
```

**예상 URL**: `/quiz-arena/leaderboard?period=all`

**Step 4: 개인 통계 페이지 구현**

`app/modules/quiz-arena/my-stats/index.php` 파일을 만들고 다음을 구현하세요:

1. **로그인 체크**:
   - `$is_member`가 false면 로그인 페이지로 리다이렉트
   - 비회원은 접근 불가 메시지

2. **개인 통계 데이터 조회**:
   - 총 풀이한 퀴즈 수
   - 평균 정답률 (정답 수 / 총 문제 수 * 100)
   - 카테고리별 완료 횟수 (quiz_sets 조인)
   - 최근 완료한 퀴즈 5개 (completed_at 내림차순)

3. **통계 카드 UI**:
   - 상단: 큰 숫자로 "총 풀이 퀴즈: 12개" / "평균 정답률: 85%"
   - 중간: 카테고리별 완료 횟수 바 차트 (CSS `width` 퍼센트로 시각화)
   - 하단: 최근 완료 퀴즈 목록 (제목, 점수, 날짜)

4. **바 차트 구현** (순수 CSS):
   ```html
   <div class="stat-bar">
     <div class="stat-label">상식</div>
     <div class="stat-progress" style="width: 70%;">7회</div>
   </div>
   ```
   - 각 카테고리별 완료 횟수를 최대값 대비 비율로 계산
   - 바 색상: 카테고리마다 다른 그라디언트

5. **빈 상태 처리**:
   - 아직 퀴즈를 풀지 않은 경우 "첫 퀴즈를 풀어보세요!" 메시지 + 퀴즈 목록 버튼

6. **디자인**:
   - 통계 카드: `background: var(--m-surface); padding: 32px;`
   - 숫자는 큰 폰트 (48px) + 볼드
   - 바 차트: 애니메이션 (페이지 로드 시 0%에서 실제 값까지 0.5초 transition)

**SQL 예시 (카테고리별 집계):**
```sql
SELECT 
  qs.category,
  COUNT(*) as count
FROM user_scores us
JOIN quiz_sets qs ON us.quiz_set_id = qs.id
WHERE us.mb_id = :mb_id
GROUP BY qs.category
```

**예상 URL**: `/quiz-arena/my-stats`

**Step 5: 관리자 퀴즈 등록 폼 구현**

`app/modules/quiz-arena/admin/index.php` 파일을 만들고 다음을 구현하세요:

1. **관리자 권한 체크**:
   - `$member['mb_level']`이 10 이상인지 확인 (g5se 최고관리자)
   - 권한 없으면 "접근 권한이 없습니다" 메시지 + 홈으로 돌아가기 버튼

2. **퀴즈 세트 등록 폼**:
   - 입력 필드:
     - 카테고리 (select: 상식/역사/과학/엔터테인먼트/기타)
     - 퀴즈 세트 제목 (text)
     - 난이도 (select: 쉬움/보통/어려움)
   - "문제 추가" 버튼 클릭 시 문제 입력 필드 동적 추가 (JS)

3. **문제 입력 필드** (동적 추가):
   - 문제 텍스트 (textarea)
   - 선택지 A/B/C/D (text input 4개)
   - 정답 선택 (radio button)
   - 해설 (textarea, 선택사항)
   - "이 문제 삭제" 버튼

4. **폼 제출 처리**:
   - POST 요청 시:
     - quiz_sets 테이블에 세트 정보 INSERT
     - 반환된 set_id로 각 문제를 quiz_questions 테이블에 INSERT
     - 트랜잭션 사용 (SQLite `BEGIN`/`COMMIT`)
   - 성공 시 "퀴즈 세트가 등록되었습니다" 메시지 + 목록으로 돌아가기

5. **기존 퀴즈 세트 목록 표시**:
   - 폼 하단에 등록된 퀴즈 세트 테이블
   - 각 행: 제목 | 카테고리 | 문제 수 | 삭제 버튼
   - 삭제 버튼 클릭 시 확인 모달 + AJAX DELETE 요청

6. **UI 디자인**:
   - 폼 레이아웃: 2열 그리드 (레이블 좌측, 입력 우측)
   - 문제 카드: 점선 테두리 + 배경색 구분
   - "문제 추가" 버튼: 점선 스타일 + hover 시 배경 변화

**JavaScript 동적 필드 추가 예시:**
```javascript
let questionCount = 1;
document.getElementById('add-question-btn').addEventListener('click', () => {
  const container = document.getElementById('questions-container');
  const questionHtml = `
    <div class="question-card" data-index="${questionCount}">
      <h4>문제 ${questionCount}</h4>
      <textarea name="questions[${questionCount}][text]" placeholder="문제 텍스트" required></textarea>
      <input type="text" name="questions[${questionCount}][option_a]" placeholder="A" required>
      <input type="text" name="questions[${questionCount}][option_b]" placeholder="B" required>
      <input type="text" name="questions[${questionCount}][option_c]" placeholder="C" required>
      <input type="text" name="questions[${questionCount}][option_d]" placeholder="D" required>
      <label><input type="radio" name="questions[${questionCount}][correct]" value="A" required> 정답: A</label>
      <textarea name="questions[${questionCount}][explanation]" placeholder="해설 (선택)"></textarea>
      <button type="button" onclick="this.parentElement.remove()">삭제</button>
    </div>
  `;
  container.insertAdjacentHTML('beforeend', questionHtml);
  questionCount++;
});
```

**예상 URL**: `/quiz-arena/admin`

**Step 6: 타이머 모드 & 힌트 시스템 (보너스 기능)**

`app/modules/quiz-arena/play/index.php` 파일을 수정하여 다음 기능을 추가하세요:

1. **타이머 모드 활성화**:
   - URL 파라미터 `?mode=timer` 감지
   - 각 문제당 30초 제한 시간
   - 화면 상단에 카운트다운 타이머 표시 (큰 폰트)
   - 시간 초과 시 자동으로 오답 처리 + 다음 문제로 이동

2. **타이머 UI**:
   - 원형 프로그레스 바 (SVG `<circle>` 사용)
   - 남은 시간이 10초 이하일 때 빨간색으로 변경 + 깜빡임 애니메이션
   - 시간 초과 시 "시간 초과!" 메시지 + 정답 표시

3. **힌트 시스템**:
   - 화면 우측 상단에 "💡 힌트 사용" 버튼
   - 클릭 시:
     - 오답 선택지 1개를 랜덤으로 비활성화 (흐리게 표시)
     - 힌트 사용 횟수 제한 (퀴즈당 3회)
     - 힌트 사용 시 점수 -5점 차감
   - 힌트 사용 횟수 표시 ("힌트 남음: 2/3")

4. **점수 계산 로직 수정**:
   - 기본 점수: 정답 시 +10점
   - 타이머 모드: 남은 시간에 비례한 보너스 점수 (최대 +5점)
   - 힌트 사용: -5점 차감
   - 최종 점수 = 기본 점수 + 시간 보너스 - 힌트 페널티

5. **타이머 JavaScript 구현**:
```javascript
let timeLeft = 30;
const timerInterval = setInterval(() => {
  timeLeft--;
  document.getElementById('timer-display').textContent = timeLeft;
  updateTimerProgress(timeLeft / 30 * 100);
  
  if (timeLeft <= 10) {
    document.getElementById('timer-display').classList.add('warning');
  }
  
  if (timeLeft <= 0) {
    clearInterval(timerInterval);
    handleTimeout();
  }
}, 1000);

function handleTimeout() {
  // 오답 처리 로직
  showMessage('시간 초과!');
  setTimeout(() => nextQuestion(), 2000);
}
```

6. **힌트 기능 JavaScript**:
```javascript
let hintsRemaining = 3;
function useHint() {
  if (hintsRemaining <= 0) {
    alert('힌트를 모두 사용했습니다');
    return;
  }
  
  const wrongOptions = ['A', 'B', 'C', 'D'].filter(opt => opt !== correctAnswer);
  const randomWrong = wrongOptions[Math.floor(Math.random() * wrongOptions.length)];
  document.querySelector(`[data-option="${randomWrong}"]`).style.opacity = '0.3';
  document.querySelector(`[data-option="${randomWrong}"]`).disabled = true;
  
  hintsRemaining--;
  currentScore -= 5;
  updateHintDisplay();
}
```

7. **UI 개선**:
   - 타이머 모드 선택 토글 스위치 (메인 페이지에 추가)
   - 힌트 버튼: 반투명 배경 + 아이콘
   - 시간 초과 시 애니메이션 효과 (shake)

**예상 URL**: `/quiz-arena/play?set_id=1&mode=timer`