🎯 g5se 랜덤 포춘 쿠키 메시지 생성기 - 오늘의 행운 메시지 & 공유하기

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

**Step 1: 프로젝트 폴더 생성 및 기본 페이지 구조 만들기**

1. `app/modules/fortune-cookie/index.php` 파일을 생성하세요.
2. 파일 맨 위에 다음 코드를 작성하세요:

```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 style="max-width: 600px; margin: 0 auto; text-align: center;">
            <h1 style="font-size: 2rem; margin-bottom: 1rem; color: var(--m-text);">🥠 포춘 쿠키</h1>
            <p style="color: var(--m-text-muted); margin-bottom: 2rem;">쿠키를 깨서 오늘의 행운 메시지를 받아보세요!</p>
            
            <div style="margin: 3rem 0;">
                <div style="font-size: 8rem; cursor: pointer; user-select: none;">🥠</div>
                <button type="button" style="
                    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
                    color: white;
                    border: none;
                    padding: 1rem 2rem;
                    font-size: 1.1rem;
                    border-radius: var(--m-radius-lg);
                    cursor: pointer;
                    margin-top: 1rem;
                    box-shadow: var(--m-shadow);
                ">쿠키 깨기</button>
            </div>
            
            <div style="
                background: var(--m-surface);
                border-radius: var(--m-radius-lg);
                padding: 2rem;
                margin-top: 2rem;
                box-shadow: var(--m-shadow);
                display: none;
            ">
                <p style="font-size: 1.2rem; color: var(--m-text); margin-bottom: 1rem;">행운 메시지가 여기에 표시됩니다</p>
                <p style="color: var(--m-text-muted); font-size: 0.9rem;">행운 번호: #00</p>
            </div>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<?php include_once('./tail.sub.php'); ?>
```

3. 브라우저에서 `/fortune-cookie`로 접속하여 기본 레이아웃이 표시되는지 확인하세요.

**확인 사항:**
- modern shell의 네비게이션과 푸터가 자동으로 표시되는가?
- 다크모드 토글 시 배경색과 텍스트 색상이 자동으로 변경되는가?
- 쿠키 이모지와 "쿠키 깨기" 버튼이 중앙에 배치되어 있는가?

**Step 2: SQLite 데이터베이스 연결 및 메시지 데이터 준비**

1. `app/modules/fortune-cookie/index.php` 파일의 `include_once('./_common.php');` 바로 아래에 다음 코드를 추가하세요:

```php
// SQLite DB 연결 및 테이블 생성
@mkdir(G5_DATA_PATH.'/modules', 0707, true);
$db_path = G5_DATA_PATH.'/modules/fortune-cookie.sqlite';
$db = new PDO('sqlite:'.$db_path);
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 테이블 생성 (첫 접근 시)
$db->exec("
    CREATE TABLE IF NOT EXISTS messages (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        category TEXT NOT NULL,
        content TEXT NOT NULL,
        lucky_number INTEGER NOT NULL,
        created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
        is_favorite INTEGER DEFAULT 0
    )
");

// 메시지 풀 (카테고리별)
$message_pool = [
    'fortune' => [
        '오늘은 예상치 못한 행운이 찾아올 것입니다.',
        '작은 기회가 큰 성공으로 이어질 것입니다.',
        '당신의 긍정적인 에너지가 주변을 밝게 만듭니다.',
        '곧 좋은 소식이 들려올 것입니다.',
        '오늘 만나는 사람이 당신에게 행운을 가져다줄 것입니다.'
    ],
    'love' => [
        '진심은 언제나 통합니다. 용기를 내보세요.',
        '오늘은 소중한 사람에게 감사를 표현하기 좋은 날입니다.',
        '당신의 미소가 누군가의 하루를 밝게 만들 것입니다.',
        '사랑은 가까운 곳에 있습니다. 주변을 둘러보세요.',
        '따뜻한 말 한마디가 큰 변화를 만듭니다.'
    ],
    'success' => [
        '노력은 절대 배신하지 않습니다. 계속 나아가세요.',
        '오늘 시작한 일이 큰 성과로 이어질 것입니다.',
        '당신의 재능이 빛을 발할 시간이 다가옵니다.',
        '작은 성공들이 모여 큰 꿈을 이룹니다.',
        '도전을 두려워하지 마세요. 당신은 해낼 수 있습니다.'
    ],
    'wisdom' => [
        '때로는 천천히 가는 것이 더 빠른 길입니다.',
        '실패는 성공의 어머니입니다. 포기하지 마세요.',
        '오늘 배운 작은 교훈이 내일의 큰 지혜가 됩니다.',
        '경청은 최고의 대화 기술입니다.',
        '변화는 불편하지만, 성장의 시작입니다.'
    ],
    'fun' => [
        '오늘은 좋아하는 음식을 마음껏 즐겨보세요!',
        '가끔은 아무 이유 없이 춤춰도 괜찮습니다.',
        '웃음은 최고의 명약입니다. 오늘 많이 웃으세요.',
        '오늘 하루는 당신이 주인공입니다!',
        '작은 행복을 찾는 것이 진짜 행복의 비결입니다.'
    ]
];

// 쿠키 깨기 버튼 클릭 시 처리
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['break_cookie'])) {
    // 랜덤 카테고리 선택
    $categories = array_keys($message_pool);
    $random_category = $categories[array_rand($categories)];
    
    // 해당 카테고리에서 랜덤 메시지 선택
    $messages = $message_pool[$random_category];
    $random_message = $messages[array_rand($messages)];
    
    // 행운 번호 생성 (1~99)
    $lucky_number = rand(1, 99);
    
    // DB에 저장
    $stmt = $db->prepare("INSERT INTO messages (category, content, lucky_number) VALUES (?, ?, ?)");
    $stmt->execute([$random_category, $random_message, $lucky_number]);
    
    // 방금 생성된 메시지 가져오기
    $current_message = [
        'category' => $random_category,
        'content' => $random_message,
        'lucky_number' => $lucky_number
    ];
}

// 최근 메시지 10개 가져오기
$stmt = $db->query("SELECT * FROM messages ORDER BY created_at DESC LIMIT 10");
$recent_messages = $stmt->fetchAll(PDO::FETCH_ASSOC);
```

2. 코드가 정상적으로 동작하는지 확인하세요. 페이지를 새로고침해도 에러가 없어야 합니다.

**확인 사항:**
- `data/modules/fortune-cookie.sqlite` 파일이 자동으로 생성되었는가?
- 페이지 로딩 시 에러가 발생하지 않는가?

**Step 3: 쿠키 깨기 기능 구현 및 메시지 카드 표시**

1. `app/modules/fortune-cookie/index.php`에서 기존 버튼 부분을 다음과 같이 수정하세요:

```php
<div style="margin: 3rem 0;">
    <div id="cookie" style="font-size: 8rem; cursor: pointer; user-select: none; transition: transform 0.3s;">🥠</div>
    <form method="POST" id="cookieForm">
        <button type="submit" name="break_cookie" value="1" style="
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            border: none;
            padding: 1rem 2rem;
            font-size: 1.1rem;
            border-radius: var(--m-radius-lg);
            cursor: pointer;
            margin-top: 1rem;
            box-shadow: var(--m-shadow);
            transition: transform 0.2s;
        " onmouseover="this.style.transform='scale(1.05)'" onmouseout="this.style.transform='scale(1)'">쿠키 깨기</button>
    </form>
</div>

<?php if (isset($current_message)): ?>
<div id="messageCard" style="
    background: var(--m-surface);
    border-radius: var(--m-radius-lg);
    padding: 2rem;
    margin-top: 2rem;
    box-shadow: var(--m-shadow);
    border-left: 4px solid <?php 
        $colors = [
            'fortune' => '#FFD700',
            'love' => '#FF69B4',
            'success' => '#4169E1',
            'wisdom' => '#9370DB',
            'fun' => '#FF6347'
        ];
        echo $colors[$current_message['category']];
    ?>;
    animation: fadeIn 0.5s;
">
    <div style="display: inline-block; background: <?php echo $colors[$current_message['category']]; ?>; color: white; padding: 0.3rem 0.8rem; border-radius: 1rem; font-size: 0.85rem; margin-bottom: 1rem;">
        <?php 
            $category_names = [
                'fortune' => '🍀 행운',
                'love' => '💕 사랑',
                'success' => '🎯 성공',
                'wisdom' => '🧠 지혜',
                'fun' => '🎉 재미'
            ];
            echo $category_names[$current_message['category']];
        ?>
    </div>
    <p style="font-size: 1.2rem; color: var(--m-text); margin-bottom: 1rem; line-height: 1.6;">
        <?php echo htmlspecialchars($current_message['content']); ?>
    </p>
    <p style="color: var(--m-text-muted); font-size: 0.9rem; margin-bottom: 1rem;">
        행운 번호: #<?php echo str_pad($current_message['lucky_number'], 2, '0', STR_PAD_LEFT); ?>
    </p>
    <button type="button" onclick="copyMessage()" style="
        background: var(--m-surface);
        border: 1px solid var(--m-text-muted);
        color: var(--m-text);
        padding: 0.6rem 1.2rem;
        border-radius: var(--m-radius-lg);
        cursor: pointer;
        font-size: 0.9rem;
    ">📋 메시지 복사</button>
</div>

<style>
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
</style>

<script>
function copyMessage() {
    const message = `<?php echo htmlspecialchars($current_message['content']); ?>`;
    const luckyNumber = '<?php echo str_pad($current_message['lucky_number'], 2, '0', STR_PAD_LEFT); ?>';
    const text = `오늘의 행운: ${message} #행운번호${luckyNumber}`;
    
    navigator.clipboard.writeText(text).then(() => {
        alert('메시지가 복사되었습니다!');
    });
}

// 쿠키 클릭 시 흔들림 효과
document.getElementById('cookie').addEventListener('click', function() {
    this.style.animation = 'shake 0.5s';
    setTimeout(() => {
        this.style.animation = '';
    }, 500);
});
</script>

<style>
@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); }
}
</style>
<?php endif; ?>
```

2. 페이지를 새로고침하고 "쿠키 깨기" 버튼을 클릭하여 메시지가 표시되는지 확인하세요.
3. 쿠키 이모지를 클릭하면 흔들리는 애니메이션이 동작하는지 확인하세요.
4. "메시지 복사" 버튼을 클릭하여 클립보드에 복사되는지 확인하세요.

**확인 사항:**
- 버튼 클릭 시 랜덤 메시지가 표시되는가?
- 카테고리별로 다른 색상의 테두리가 표시되는가?
- 메시지 카드가 fade-in 애니메이션으로 나타나는가?
- 쿠키 이모지 클릭 시 흔들림 효과가 동작하는가?
- 메시지 복사 기능이 정상 작동하는가?

**Step 4: 최근 메시지 히스토리 표시**

1. `app/modules/fortune-cookie/index.php`의 메시지 카드 아래에 다음 코드를 추가하세요:

```php
<?php if (count($recent_messages) > 0): ?>
<div style="margin-top: 4rem;">
    <h2 style="font-size: 1.5rem; color: var(--m-text); margin-bottom: 1.5rem; text-align: center;">📜 최근 받은 메시지</h2>
    <div style="display: grid; gap: 1rem;">
        <?php 
            $colors = [
                'fortune' => '#FFD700',
                'love' => '#FF69B4',
                'success' => '#4169E1',
                'wisdom' => '#9370DB',
                'fun' => '#FF6347'
            ];
            $category_names = [
                'fortune' => '🍀 행운',
                'love' => '💕 사랑',
                'success' => '🎯 성공',
                'wisdom' => '🧠 지혜',
                'fun' => '🎉 재미'
            ];
            
            foreach ($recent_messages as $msg): 
        ?>
        <div style="
            background: var(--m-surface);
            border-radius: var(--m-radius-lg);
            padding: 1.2rem;
            box-shadow: var(--m-shadow);
            border-left: 3px solid <?php echo $colors[$msg['category']]; ?>;
        ">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem;">
                <span style="background: <?php echo $colors[$msg['category']]; ?>; color: white; padding: 0.2rem 0.6rem; border-radius: 0.8rem; font-size: 0.75rem;">
                    <?php echo $category_names[$msg['category']]; ?>
                </span>
                <span style="color: var(--m-text-muted); font-size: 0.8rem;">
                    <?php 
                        $date = new DateTime($msg['created_at']);
                        echo $date->format('m/d H:i');
                    ?>
                </span>
            </div>
            <p style="color: var(--m-text); font-size: 0.95rem; line-height: 1.5; margin-bottom: 0.5rem;">
                <?php echo htmlspecialchars($msg['content']); ?>
            </p>
            <p style="color: var(--m-text-muted); font-size: 0.8rem;">
                행운 번호: #<?php echo str_pad($msg['lucky_number'], 2, '0', STR_PAD_LEFT); ?>
            </p>
        </div>
        <?php endforeach; ?>
    </div>
</div>
<?php endif; ?>
```

2. 여러 번 "쿠키 깨기" 버튼을 클릭하여 히스토리가 쌓이는지 확인하세요.
3. 최근 10개까지만 표시되는지 확인하세요.

**확인 사항:**
- 최근 메시지가 최신순으로 정렬되어 표시되는가?
- 각 메시지에 카테고리 배지와 날짜/시간이 표시되는가?
- 카테고리별 색상이 일관되게 적용되는가?
- 10개 이상 생성해도 최근 10개만 표시되는가?