🎲 랜덤 미션 생성기 - 오늘의 재미있는 도전 과제

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

## Step 1: 프로젝트 기본 골격 생성

`app/modules/random-mission-generator/index.php` 파일을 생성하고 modern shell 골격을 적용해주세요.

### 요구사항:

1. **파일 구조**:
   - `app/modules/random-mission-generator/index.php` 생성
   - g5se 폴더 기반 자동 라우팅으로 `/random-mission-generator` URL에서 접근 가능

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

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    <main class="m-container" style="padding: 32px 20px 48px;">
        <!-- 페이지 본문 -->
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<?php include_once('./tail.sub.php'); ?>
```

3. **페이지 헤더 섹션**:
   - 제목: "🎲 랜덤 미션 생성기"
   - 부제: "오늘의 재미있는 도전 과제를 받아보세요!"
   - 간단한 설명 문구

4. **미션 카드 영역**:
   - 초기 상태: "미션 뽑기" 버튼만 표시
   - 카드 스타일: `background: var(--m-surface); box-shadow: var(--m-shadow); border-radius: var(--m-radius-lg);`
   - 중앙 정렬 레이아웃

5. **완료 미션 히스토리 섹션**:
   - 제목: "오늘 완료한 미션"
   - 빈 상태 메시지: "아직 완료한 미션이 없습니다."

### 디자인 가이드:
- 모든 텍스트는 `color: var(--m-text);` 사용
- 흐린 텍스트는 `color: var(--m-text-muted);`
- 버튼은 `background: #6366f1; color: white;` (primary 색상)
- 페이지 최대 너비: 800px, 중앙 정렬
- 여백과 간격은 16px 단위로 통일

### 참고:
- `_common.php`, `head.sub.php`, `tail.sub.php`는 `app/` 루트에 있으므로 `./`로 인클루드
- `G5_THEME_PATH`는 `_common.php` 인클루드 시점에 정의됨
- 아직 DB나 JavaScript 기능은 구현하지 않음 (정적 HTML만)

## Step 2: SQLite 데이터베이스 설정 및 미션 데이터 초기화

모듈 전용 SQLite 데이터베이스를 생성하고 미션 데이터를 관리할 테이블을 만들어주세요.

### 요구사항:

1. **SQLite DB 연결 함수**:
   - `app/modules/random-mission-generator/index.php` 상단에 DB 연결 로직 추가
   - DB 파일 위치: `G5_DATA_PATH.'/modules/random-mission-generator.sqlite'`
   - `G5_DATA_PATH.'/modules'` 디렉터리가 없으면 자동 생성 (`@mkdir(..., 0707, true)`)
   - PDO로 연결: `new PDO('sqlite:'.G5_DATA_PATH.'/modules/random-mission-generator.sqlite')`

2. **테이블 스키마 (자동 생성)**:

```sql
CREATE TABLE IF NOT EXISTS missions (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    category TEXT NOT NULL,
    title TEXT NOT NULL,
    difficulty INTEGER DEFAULT 1,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

CREATE TABLE IF NOT EXISTS completed (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    mission_id INTEGER NOT NULL,
    completed_at DATETIME DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (mission_id) REFERENCES missions(id)
);
```

3. **초기 미션 데이터 삽입**:
   - missions 테이블이 비어있으면 샘플 미션 20개 이상 삽입
   - 카테고리: 운동, 학습, 취미, 친구/가족, 자기계발
   - difficulty: 1(쉬움), 2(보통), 3(어려움)
   - 예시 미션:
     - (운동, "10분 스트레칭하기", 1)
     - (학습, "새로운 영단어 5개 외우기", 1)
     - (취미, "좋아하는 노래 한 곡 듣기", 1)
     - (친구/가족, "가족에게 감사 메시지 보내기", 2)
     - (자기계발, "오늘 하루 감사한 일 3가지 적기", 2)
     - (운동, "30분 산책하기", 2)
     - (학습, "책 한 챕터 읽기", 2)
     - (취미, "새로운 레시피 시도해보기", 3)
     - (친구/가족, "오랜만에 친구에게 전화하기", 2)
     - (자기계발, "명상 15분 하기", 2)

4. **DB 연결 확인**:
   - 페이지 로드 시 DB 연결 테스트
   - 에러 발생 시 사용자 친화적 메시지 표시

### 구현 팁:
- prepared statement 사용: `$stmt = $pdo->prepare("INSERT INTO ..."); $stmt->execute([...]);`
- 초기 데이터 삽입은 `SELECT COUNT(*) FROM missions`로 체크 후 0이면 실행
- DB 연결 객체는 `$pdo` 변수에 저장하여 재사용

### 보안:
- SQLite 파일은 웹 루트 밖 (`G5_DATA_PATH`) 위치
- 모든 쿼리는 prepared statement 사용
- 에러 메시지에 민감한 정보(경로 등) 노출 금지

## Step 3: 랜덤 미션 뽑기 기능 구현 (AJAX)

"미션 뽑기" 버튼 클릭 시 DB에서 무작위 미션을 가져와 카드 형태로 표시하는 기능을 구현해주세요.

### 요구사항:

1. **AJAX 엔드포인트**:
   - `app/modules/random-mission-generator/index.php` 상단에 AJAX 요청 처리 로직 추가
   - `$_GET['action'] === 'get_mission'` 분기 처리
   - DB에서 랜덤 미션 1개 조회: `SELECT * FROM missions ORDER BY RANDOM() LIMIT 1`
   - JSON 응답: `{"id": 1, "category": "운동", "title": "10분 스트레칭하기", "difficulty": 1}`
   - 응답 후 `exit;`로 HTML 렌더링 방지

2. **JavaScript 구현**:
   - "미션 뽑기" 버튼에 `onclick` 이벤트 추가
   - `fetch('/random-mission-generator?action=get_mission')`로 AJAX 요청
   - 응답 받은 미션 데이터를 카드에 표시
   - 미션 카드 HTML 구조:
     ```html
     <div class="mission-card">
         <div class="mission-category">{카테고리}</div>
         <h2 class="mission-title">{미션 제목}</h2>
         <div class="mission-difficulty">{별표 개수}</div>
         <button class="complete-btn">완료 체크</button>
     </div>
     ```

3. **애니메이션 효과**:
   - 미션 카드 등장 시 페이드인 + 슬라이드업 효과
   - CSS transition 사용:
     ```css
     .mission-card {
         opacity: 0;
         transform: translateY(20px);
         transition: opacity 0.3s, transform 0.3s;
     }
     .mission-card.show {
         opacity: 1;
         transform: translateY(0);
     }
     ```
   - JavaScript로 `.show` 클래스 토글

4. **난이도 표시**:
   - difficulty 값에 따라 별표(⭐) 개수 표시
   - 1: ⭐ 쉬움
   - 2: ⭐⭐ 보통
   - 3: ⭐⭐⭐ 어려움

5. **카테고리 색상 코딩**:
   - 운동: `#ef4444` (빨강)
   - 학습: `#3b82f6` (파랑)
   - 취미: `#8b5cf6` (보라)
   - 친구/가족: `#ec4899` (핑크)
   - 자기계발: `#10b981` (초록)

### 스타일 가이드:
- 미션 카드: `max-width: 500px; margin: 0 auto; padding: 32px;`
- 카테고리 배지: `display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 14px;`
- 미션 제목: `font-size: 24px; font-weight: 600; margin: 16px 0;`
- 완료 버튼: `width: 100%; padding: 12px; background: #10b981; color: white; border-radius: 8px;`

### 에러 처리:
- DB 조회 실패 시 `{"error": "미션을 불러올 수 없습니다."}` 응답
- JavaScript에서 에러 메시지 alert 표시

## Step 4: 미션 완료 체크 및 히스토리 기능 구현

미션 완료 버튼 클릭 시 DB에 기록하고, 오늘 완료한 미션 목록을 표시하는 기능을 구현해주세요.

### 요구사항:

1. **완료 체크 AJAX 엔드포인트**:
   - `$_POST['action'] === 'complete_mission'` 분기 처리
   - `$_POST['mission_id']` 받아서 completed 테이블에 삽입
   - prepared statement 사용: `INSERT INTO completed (mission_id) VALUES (?)`
   - JSON 응답: `{"success": true, "count": 3}` (오늘 완료한 미션 개수 포함)

2. **오늘 완료한 미션 조회**:
   - `$_GET['action'] === 'get_today_completed'` 엔드포인트 추가
   - SQL 쿼리:
     ```sql
     SELECT m.*, c.completed_at 
     FROM completed c 
     JOIN missions m ON c.mission_id = m.id 
     WHERE DATE(c.completed_at) = DATE('now') 
     ORDER BY c.completed_at DESC
     ```
   - JSON 배열 응답: `[{"id": 1, "title": "...", "category": "...", "completed_at": "2024-01-15 14:30:00"}, ...]`

3. **JavaScript 완료 처리**:
   - "완료 체크" 버튼 클릭 이벤트
   - `fetch('/random-mission-generator', {method: 'POST', body: ...})`
   - 성공 시:
     - 미션 카드에 완료 표시 (체크 아이콘 + "완료!" 메시지)
     - 1초 후 히스토리 목록 갱신
     - 2초 후 미션 카드 숨기고 "다음 미션 뽑기" 버튼 표시

4. **히스토리 목록 렌더링**:
   - 페이지 로드 시 오늘 완료한 미션 자동 로드
   - 각 미션 항목:
     ```html
     <div class="history-item">
         <span class="category-badge">{카테고리}</span>
         <span class="mission-text">{미션 제목}</span>
         <span class="time-text">{완료 시간}</span>
         <button class="delete-btn">✕</button>
     </div>
     ```
   - 완료 시간은 "오후 2:30" 형식으로 표시 (JavaScript `toLocaleTimeString()`)

5. **오늘 완료 개수 표시**:
   - 히스토리 섹션 상단에 "오늘 완료한 미션: {count}개" 표시
   - 0개일 때: "아직 완료한 미션이 없습니다. 첫 미션을 시작해보세요!"

6. **완료 삭제 기능 (보너스)**:
   - `$_POST['action'] === 'delete_completed'` 엔드포인트
   - `$_POST['completed_id']` 받아서 해당 레코드 삭제
   - 삭제 버튼 클릭 시 확인 다이얼로그 표시

### 스타일 가이드:
- 히스토리 항목: `display: flex; justify-content: space-between; align-items: center; padding: 12px; border-bottom: 1px solid var(--m-border);`
- 완료 표시: 초록색 체크 아이콘 + "완료!" 텍스트 (애니메이션)
- 삭제 버튼: `color: var(--m-text-muted); opacity: 0.5;` (hover 시 `opacity: 1`)

### 에러 처리:
- mission_id가 없거나 유효하지 않으면 에러 응답
- DB 삽입 실패 시 사용자 친화적 메시지
- completed_id 삭제 권한 체크 (오늘 완료한 것만 삭제 가능)