🎰 g5se 카지노 슬롯머신 시뮬레이터 - 행운의 릴 돌리기 & 잭팟 히스토리

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

**Step 1: 프로젝트 폴더 생성 & modern shell 골격 구축**

다음 작업을 수행하세요:

1. `app/modules/casino/index.php` 파일 생성
2. modern shell 골격 적용:
   - `_common.php` 인클루드 (g5se 진입 컨텍스트)
   - `_head.inc.php` 인클루드 (HTML head + 다크모드 토큰)
   - `m-shell` 래퍼로 전체 감싸기
   - `_nav.inc.php` 인클루드 (상단 네비게이션)
   - `<main class="m-container">` 안에 페이지 본문
   - `_footer.inc.php` 인클루드 (하단 푸터)
   - `tail.sub.php` 인클루드 (스크립트 종료)

3. 페이지 제목: "🎰 카지노 슬롯머신"
4. 본문에 임시 텍스트: "슬롯머신 게임 준비 중..."

**코드 골격 예시:**

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

// 회원 전용 체크
if (!$is_member) {
    alert_close('회원만 이용할 수 있습니다.');
}

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;">
        <h1 style="font-size: 2rem; font-weight: 700; margin-bottom: 24px;">🎰 카지노 슬롯머신</h1>
        <p style="color: var(--m-text-muted);">슬롯머신 게임 준비 중...</p>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<?php include_once('./tail.sub.php'); ?>
```

브라우저에서 `/casino` 접속 시 페이지가 로드되고 modern shell이 적용되었는지 확인하세요.

**Step 2: SQLite DB 스키마 설계 & 초기화**

슬롯머신 게임 데이터를 저장할 SQLite DB를 구축합니다.

**DB 파일 위치**: `G5_DATA_PATH/modules/casino.sqlite`

**테이블 설계**:

1. `user_coins` 테이블:
   - `mb_id` TEXT PRIMARY KEY (회원 아이디)
   - `coins` INTEGER NOT NULL DEFAULT 1000 (보유 코인)
   - `last_bonus_date` TEXT (마지막 일일 보너스 수령 날짜, YYYY-MM-DD)
   - `created_at` TEXT (계정 생성 일시)

2. `spin_history` 테이블:
   - `id` INTEGER PRIMARY KEY AUTOINCREMENT
   - `mb_id` TEXT NOT NULL (회원 아이디)
   - `bet_amount` INTEGER NOT NULL (베팅액)
   - `symbols` TEXT NOT NULL (릴 결과, 예: "🍒,🍒,🍒")
   - `payout` INTEGER NOT NULL (배당액, 0이면 꽝)
   - `is_jackpot` INTEGER DEFAULT 0 (잭팟 여부, 1=잭팟)
   - `created_at` TEXT (스핀 일시)

3. `statistics` 테이블:
   - `mb_id` TEXT PRIMARY KEY
   - `total_spins` INTEGER DEFAULT 0 (총 스핀 횟수)
   - `total_bet` INTEGER DEFAULT 0 (총 베팅액)
   - `total_win` INTEGER DEFAULT 0 (총 획득액)
   - `jackpot_count` INTEGER DEFAULT 0 (잭팟 달성 횟수)

**PHP 코드 추가**:

`app/modules/casino/index.php` 상단 로직 부분에 다음 코드를 추가하세요:

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

// 테이블 생성 (첫 접근 시)
$db->exec("
    CREATE TABLE IF NOT EXISTS user_coins (
        mb_id TEXT PRIMARY KEY,
        coins INTEGER NOT NULL DEFAULT 1000,
        last_bonus_date TEXT,
        created_at TEXT DEFAULT (datetime('now'))
    )
");

$db->exec("
    CREATE TABLE IF NOT EXISTS spin_history (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        mb_id TEXT NOT NULL,
        bet_amount INTEGER NOT NULL,
        symbols TEXT NOT NULL,
        payout INTEGER NOT NULL,
        is_jackpot INTEGER DEFAULT 0,
        created_at TEXT DEFAULT (datetime('now'))
    )
");

$db->exec("
    CREATE TABLE IF NOT EXISTS statistics (
        mb_id TEXT PRIMARY KEY,
        total_spins INTEGER DEFAULT 0,
        total_bet INTEGER DEFAULT 0,
        total_win INTEGER DEFAULT 0,
        jackpot_count INTEGER DEFAULT 0
    )
");

// 현재 사용자 코인 조회 (없으면 초기 1000코인 지급)
$stmt = $db->prepare('SELECT coins, last_bonus_date FROM user_coins WHERE mb_id = ?');
$stmt->execute([$member['mb_id']]);
$user = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$user) {
    $db->prepare('INSERT INTO user_coins (mb_id, coins) VALUES (?, 1000)')->execute([$member['mb_id']]);
    $user = ['coins' => 1000, 'last_bonus_date' => null];
}

$coins = (int)$user['coins'];
$last_bonus_date = $user['last_bonus_date'];
```

**본문에 코인 잔액 표시**:

`<main>` 태그 안에 다음 HTML을 추가하세요:

```html
<div style="background: var(--m-surface); padding: 20px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); margin-bottom: 24px;">
    <h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 12px;">💰 보유 코인</h2>
    <p style="font-size: 2.5rem; font-weight: 900; color: #FFD700;"><?php echo number_format($coins); ?> 코인</p>
</div>
```

브라우저 새로고침 후 코인 잔액이 표시되는지 확인하세요.

**Step 3: 슬롯머신 UI & 릴 컴포넌트 구축**

슬롯머신의 시각적 인터페이스를 만듭니다.

**요구사항**:

1. 3개의 릴(세로 컬럼)을 가로로 배치
2. 각 릴은 카드 스타일 박스 안에 심볼 이모지 표시
3. 심볼 7종: 🍒(체리), 🍋(레몬), 🍊(오렌지), 🍉(수박), ⭐(별), 💎(다이아), 7️⃣(세븐)
4. 베팅 금액 선택 버튼: 10/50/100/500코인
5. SPIN 버튼 (릴 회전 트리거)
6. 배당표 안내 (각 심볼별 배당률)

**HTML 코드 추가** (`<main>` 태그 안):

```html
<!-- 슬롯머신 본체 -->
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 40px; border-radius: var(--m-radius-lg); box-shadow: 0 20px 60px rgba(0,0,0,0.3); margin-bottom: 32px;">
    <!-- 릴 컨테이너 -->
    <div id="reels" style="display: flex; gap: 16px; justify-content: center; margin-bottom: 32px;">
        <div class="reel" data-reel="0" style="background: #fff; width: 120px; height: 160px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 5rem; box-shadow: inset 0 4px 8px rgba(0,0,0,0.1);">
            <span class="symbol">🍒</span>
        </div>
        <div class="reel" data-reel="1" style="background: #fff; width: 120px; height: 160px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 5rem; box-shadow: inset 0 4px 8px rgba(0,0,0,0.1);">
            <span class="symbol">🍒</span>
        </div>
        <div class="reel" data-reel="2" style="background: #fff; width: 120px; height: 160px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 5rem; box-shadow: inset 0 4px 8px rgba(0,0,0,0.1);">
            <span class="symbol">🍒</span>
        </div>
    </div>

    <!-- 베팅 금액 선택 -->
    <div style="display: flex; gap: 12px; justify-content: center; margin-bottom: 20px;">
        <button class="bet-btn" data-amount="10" style="background: #fff; color: #667eea; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 700; cursor: pointer; transition: transform 0.2s;">10 코인</button>
        <button class="bet-btn" data-amount="50" style="background: #fff; color: #667eea; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 700; cursor: pointer; transition: transform 0.2s;">50 코인</button>
        <button class="bet-btn active" data-amount="100" style="background: #FFD700; color: #333; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 700; cursor: pointer; transition: transform 0.2s;">100 코인</button>
        <button class="bet-btn" data-amount="500" style="background: #fff; color: #667eea; border: none; padding: 12px 24px; border-radius: 8px; font-weight: 700; cursor: pointer; transition: transform 0.2s;">500 코인</button>
    </div>

    <!-- SPIN 버튼 -->
    <div style="text-align: center;">
        <button id="spinBtn" style="background: #FFD700; color: #333; border: none; padding: 20px 60px; border-radius: 50px; font-size: 1.5rem; font-weight: 900; cursor: pointer; box-shadow: 0 8px 20px rgba(255,215,0,0.4); transition: all 0.3s;">🎰 SPIN</button>
    </div>
</div>

<!-- 배당표 -->
<div style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); margin-bottom: 32px;">
    <h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 16px;">💎 배당표</h3>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px;">
        <div style="padding: 12px; background: rgba(255,215,0,0.1); border-radius: 8px;">7️⃣ 세븐 x3 → <strong>100배</strong></div>
        <div style="padding: 12px; background: rgba(138,43,226,0.1); border-radius: 8px;">💎 다이아 x3 → <strong>50배</strong></div>
        <div style="padding: 12px; background: rgba(255,215,0,0.1); border-radius: 8px;">⭐ 별 x3 → <strong>20배</strong></div>
        <div style="padding: 12px; background: rgba(255,99,71,0.1); border-radius: 8px;">🍉 수박 x3 → <strong>10배</strong></div>
        <div style="padding: 12px; background: rgba(255,165,0,0.1); border-radius: 8px;">🍊 오렌지 x3 → <strong>5배</strong></div>
        <div style="padding: 12px; background: rgba(255,255,0,0.1); border-radius: 8px;">🍋 레몬 x3 → <strong>3배</strong></div>
        <div style="padding: 12px; background: rgba(220,20,60,0.1); border-radius: 8px;">🍒 체리 x3 → <strong>2배</strong></div>
    </div>
    <p style="margin-top: 12px; color: var(--m-text-muted); font-size: 0.875rem;">* 2개 일치 시 베팅액 반환, 불일치 시 베팅액 차감</p>
</div>
```

**JavaScript 코드 추가** (페이지 하단, `</main>` 다음):

```html
<script>
let selectedBet = 100; // 기본 베팅액

// 베팅 버튼 클릭 이벤트
document.querySelectorAll('.bet-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        document.querySelectorAll('.bet-btn').forEach(b => {
            b.style.background = '#fff';
            b.style.color = '#667eea';
            b.classList.remove('active');
        });
        btn.style.background = '#FFD700';
        btn.style.color = '#333';
        btn.classList.add('active');
        selectedBet = parseInt(btn.dataset.amount);
    });
});

// SPIN 버튼 클릭 (임시 - 다음 단계에서 구현)
document.getElementById('spinBtn').addEventListener('click', () => {
    alert('SPIN 버튼 클릭! 베팅액: ' + selectedBet + '코인');
});
</script>
```

브라우저 새로고침 후 슬롯머신 UI가 표시되고, 베팅 버튼 클릭 시 스타일이 변경되며, SPIN 버튼 클릭 시 alert가 뜨는지 확인하세요.

**Step 4: 릴 스핀 애니메이션 & 랜덤 심볼 생성**

릴이 회전하는 애니메이션을 CSS로 구현하고, JavaScript로 랜덤 심볼을 생성합니다.

**요구사항**:

1. SPIN 버튼 클릭 시 3개 릴이 순차적으로 회전 시작
2. 각 릴은 0.5초 간격으로 멈춤 (첫 번째 → 두 번째 → 세 번째)
3. 회전 중 심볼이 블러 효과로 흐릿하게 보임
4. 멈출 때 최종 심볼이 선명하게 표시
5. 7종 심볼 중 랜덤 선택 (가중치 없이 균등 확률)

**CSS 애니메이션 추가** (`<style>` 태그를 `<main>` 위에 삽입):

```html
<style>
@keyframes spin {
    0% { transform: translateY(0); filter: blur(0); }
    50% { transform: translateY(-20px); filter: blur(8px); }
    100% { transform: translateY(0); filter: blur(0); }
}

.reel.spinning .symbol {
    animation: spin 0.1s linear infinite;
}

.reel {
    transition: all 0.3s ease;
}

.reel.stopped .symbol {
    animation: none;
    filter: blur(0);
}

#spinBtn:hover {
    transform: scale(1.05);
    box-shadow: 0 12px 30px rgba(255,215,0,0.6);
}

#spinBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.bet-btn:hover {
    transform: scale(1.05);
}
</style>
```

**JavaScript 스핀 로직 구현** (기존 `<script>` 태그 내용을 다음으로 교체):

```javascript
const symbols = ['🍒', '🍋', '🍊', '🍉', '⭐', '💎', '7️⃣'];
let selectedBet = 100;
let isSpinning = false;

// 베팅 버튼 클릭 이벤트
document.querySelectorAll('.bet-btn').forEach(btn => {
    btn.addEventListener('click', () => {
        document.querySelectorAll('.bet-btn').forEach(b => {
            b.style.background = '#fff';
            b.style.color = '#667eea';
            b.classList.remove('active');
        });
        btn.style.background = '#FFD700';
        btn.style.color = '#333';
        btn.classList.add('active');
        selectedBet = parseInt(btn.dataset.amount);
    });
});

// 랜덤 심볼 선택
function getRandomSymbol() {
    return symbols[Math.floor(Math.random() * symbols.length)];
}

// 릴 스핀 애니메이션
function spinReel(reelIndex, finalSymbol, delay) {
    return new Promise(resolve => {
        const reel = document.querySelector(`.reel[data-reel="${reelIndex}"]`);
        const symbolEl = reel.querySelector('.symbol');
        
        setTimeout(() => {
            reel.classList.add('spinning');
            
            // 0.1초마다 랜덤 심볼 변경 (회전 효과)
            const interval = setInterval(() => {
                symbolEl.textContent = getRandomSymbol();
            }, 100);
            
            // 2초 후 멈춤
            setTimeout(() => {
                clearInterval(interval);
                symbolEl.textContent = finalSymbol;
                reel.classList.remove('spinning');
                reel.classList.add('stopped');
                setTimeout(() => reel.classList.remove('stopped'), 300);
                resolve();
            }, 2000);
        }, delay);
    });
}

// SPIN 버튼 클릭
document.getElementById('spinBtn').addEventListener('click', async () => {
    if (isSpinning) return;
    
    const currentCoins = parseInt(document.querySelector('[style*="font-size: 2.5rem"]').textContent.replace(/[^0-9]/g, ''));
    
    if (currentCoins < selectedBet) {
        alert('코인이 부족합니다!');
        return;
    }
    
    isSpinning = true;
    document.getElementById('spinBtn').disabled = true;
    
    // 랜덤 심볼 3개 생성
    const results = [getRandomSymbol(), getRandomSymbol(), getRandomSymbol()];
    
    // 릴 순차 회전
    await spinReel(0, results[0], 0);
    await spinReel(1, results[1], 0);
    await spinReel(2, results[2], 0);
    
    // 결과 처리 (다음 단계에서 구현)
    console.log('결과:', results);
    alert('결과: ' + results.join(' '));
    
    isSpinning = false;
    document.getElementById('spinBtn').disabled = false;
});
```

브라우저 새로고침 후 SPIN 버튼을 클릭하세요. 릴이 순차적으로 회전하며 블러 효과가 적용되고, 2초 후 랜덤 심볼이 표시되는지 확인하세요.

**Step 5: 배당 계산 & 코인 업데이트 (서버 로직)**

스핀 결과에 따라 배당을 계산하고, 사용자 코인을 업데이트하는 서버 로직을 구현합니다.

**요구사항**:

1. AJAX로 스핀 결과를 서버에 전송
2. 서버에서 배당 계산:
   - 3개 일치: 심볼별 배당 지급
   - 2개 일치: 베팅액 반환
   - 불일치: 베팅액 차감
3. 코인 잔액 업데이트 (DB 저장)
4. 스핀 히스토리 기록
5. 통계 업데이트 (총 스핀, 총 베팅, 총 획득)

**PHP 서버 로직 추가** (`app/modules/casino/index.php` 상단, DB 초기화 다음):

```php
// AJAX 요청 처리
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'spin') {
    header('Content-Type: application/json');
    
    $bet_amount = (int)$_POST['bet_amount'];
    $symbols = json_decode($_POST['symbols'], true);
    
    // 코인 잔액 확인
    $stmt = $db->prepare('SELECT coins FROM user_coins WHERE mb_id = ?');
    $stmt->execute([$member['mb_id']]);
    $current_coins = (int)$stmt->fetchColumn();
    
    if ($current_coins < $bet_amount) {
        echo json_encode(['success' => false, 'message' => '코인이 부족합니다.']);
        exit;
    }
    
    // 배당 계산
    $symbol_payouts = [
        '🍒' => 2,
        '🍋' => 3,
        '🍊' => 5,
        '🍉' => 10,
        '⭐' => 20,
        '💎' => 50,
        '7️⃣' => 100
    ];
    
    $unique = array_unique($symbols);
    $counts = array_count_values($symbols);
    
    $payout = 0;
    $is_jackpot = 0;
    $result_message = '';
    
    if (count($unique) === 1) {
        // 3개 일치
        $symbol = $symbols[0];
        $multiplier = $symbol_payouts[$symbol];
        $payout = $bet_amount * $multiplier;
        $result_message = "🎉 {$symbol} 3개 일치! {$multiplier}배 당첨!";
        
        if ($symbol === '7️⃣') {
            $is_jackpot = 1;
            $result_message = "🎰 JACKPOT! 세븐 3개! {$multiplier}배 대박!";
        }
    } elseif (max($counts) === 2) {
        // 2개 일치 - 베팅액 반환
        $payout = $bet_amount;
        $result_message = "😊 2개 일치! 베팅액 반환";
    } else {
        // 불일치
        $payout = 0;
        $result_message = "😢 꽝! 다음 기회에...";
    }
    
    // 코인 업데이트
    $new_coins = $current_coins - $bet_amount + $payout;
    $db->prepare('UPDATE user_coins SET coins = ? WHERE mb_id = ?')->execute([$new_coins, $member['mb_id']]);
    
    // 스핀 히스토리 기록
    $symbols_str = implode(',', $symbols);
    $db->prepare('INSERT INTO spin_history (mb_id, bet_amount, symbols, payout, is_jackpot) VALUES (?, ?, ?, ?, ?)')->execute([
        $member['mb_id'],
        $bet_amount,
        $symbols_str,
        $payout,
        $is_jackpot
    ]);
    
    // 통계 업데이트
    $db->exec("
        INSERT INTO statistics (mb_id, total_spins, total_bet, total_win, jackpot_count)
        VALUES ('{$member['mb_id']}', 1, {$bet_amount}, {$payout}, {$is_jackpot})
        ON CONFLICT(mb_id) DO UPDATE SET
            total_spins = total_spins + 1,
            total_bet = total_bet + {$bet_amount},
            total_win = total_win + {$payout},
            jackpot_count = jackpot_count + {$is_jackpot}
    ");
    
    echo json_encode([
        'success' => true,
        'payout' => $payout,
        'new_coins' => $new_coins,
        'message' => $result_message,
        'is_jackpot' => $is_jackpot
    ]);
    exit;
}
```

**JavaScript AJAX 요청 추가** (기존 SPIN 버튼 클릭 로직 수정):

```javascript
// SPIN 버튼 클릭 (기존 코드를 다음으로 교체)
document.getElementById('spinBtn').addEventListener('click', async () => {
    if (isSpinning) return;
    
    const currentCoins = parseInt(document.querySelector('[style*="font-size: 2.5rem"]').textContent.replace(/[^0-9]/g, ''));
    
    if (currentCoins < selectedBet) {
        alert('코인이 부족합니다!');
        return;
    }
    
    isSpinning = true;
    document.getElementById('spinBtn').disabled = true;
    
    // 랜덤 심볼 3개 생성
    const results = [getRandomSymbol(), getRandomSymbol(), getRandomSymbol()];
    
    // 릴 순차 회전
    await spinReel(0, results[0], 0);
    await spinReel(1, results[1], 0);
    await spinReel(2, results[2], 0);
    
    // 서버에 결과 전송
    const formData = new FormData();
    formData.append('action', 'spin');
    formData.append('bet_amount', selectedBet);
    formData.append('symbols', JSON.stringify(results));
    
    const response = await fetch(window.location.href, {
        method: 'POST',
        body: formData
    });
    
    const data = await response.json();
    
    if (data.success) {
        // 코인 잔액 업데이트
        document.querySelector('[style*="font-size: 2.5rem"]').textContent = data.new_coins.toLocaleString() + ' 코인';
        
        // 결과 메시지 표시
        alert(data.message + '\n\n획득: ' + data.payout.toLocaleString() + ' 코인\n잔액: ' + data.new_coins.toLocaleString() + ' 코인');
        
        // 잭팟 애니메이션 (다음 단계에서 구현)
        if (data.is_jackpot) {
            console.log('🎰 JACKPOT!');
        }
    } else {
        alert(data.message);
    }
    
    isSpinning = false;
    document.getElementById('spinBtn').disabled = false;
});
```

브라우저 새로고침 후 SPIN을 여러 번 클릭하세요. 코인 잔액이 실시간으로 업데이트되고, 결과에 따라 배당이 지급되는지 확인하세요.

**Step 6: 잭팟 축하 애니메이션 & 사운드 효과**

세븐 3개 일치(잭팟) 시 특수 효과를 추가합니다.

**요구사항**:

1. 잭팟 시 전체 화면 축하 모달 표시
2. CSS 파티클 애니메이션 (떨어지는 금화 효과)
3. Web Audio API로 승리 사운드 재생
4. 모달 닫기 버튼

**HTML 모달 추가** (`<main>` 태그 다음에 삽입):

```html
<!-- 잭팟 모달 -->
<div id="jackpotModal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 9999; justify-content: center; align-items: center;">
    <div style="text-align: center; position: relative;">
        <div id="confetti" style="position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; pointer-events: none;"></div>
        <div style="background: linear-gradient(135deg, #FFD700, #FFA500); padding: 60px; border-radius: 24px; box-shadow: 0 30px 80px rgba(255,215,0,0.6);">
            <h1 style="font-size: 4rem; font-weight: 900; color: #fff; text-shadow: 0 4px 8px rgba(0,0,0,0.3); margin-bottom: 20px;">🎰 JACKPOT! 🎰</h1>
            <p style="font-size: 2rem; color: #fff; margin-bottom: 12px;">세븐 3개 일치!</p>
            <p id="jackpotAmount" style="font-size: 3rem; font-weight: 900; color: #fff; text-shadow: 0 4px 8px rgba(0,0,0,0.3);"></p>
            <button onclick="closeJackpotModal()" style="margin-top: 32px; background: #fff; color: #FFA500; border: none; padding: 16px 48px; border-radius: 50px; font-size: 1.25rem; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px rgba(0,0,0,0.2);">확인</button>
        </div>
    </div>
</div>
```

**CSS 파티클 애니메이션 추가** (기존 `<style>` 태그 안에 추가):

```css
@keyframes fall {
    0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; }
    100% { transform: translateY(100vh) rotate(360deg); opacity: 0; }
}

.coin {
    position: absolute;
    font-size: 2rem;
    animation: fall linear infinite;
}

#jackpotModal {
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
```

**JavaScript 잭팟 로직 추가** (기존 `<script>` 태그 안에 추가):

```javascript
// Web Audio API 사운드 생성
const audioContext = new (window.AudioContext || window.webkitAudioContext)();

function playWinSound() {
    const oscillator = audioContext.createOscillator();
    const gainNode = audioContext.createGain();
    
    oscillator.connect(gainNode);
    gainNode.connect(audioContext.destination);
    
    oscillator.frequency.setValueAtTime(523.25, audioContext.currentTime); // C5
    oscillator.frequency.setValueAtTime(659.25, audioContext.currentTime + 0.1); // E5
    oscillator.frequency.setValueAtTime(783.99, audioContext.currentTime + 0.2); // G5
    oscillator.frequency.setValueAtTime(1046.5, audioContext.currentTime + 0.3); // C6
    
    gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
    gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.5);
    
    oscillator.start(audioContext.currentTime);
    oscillator.stop(audioContext.currentTime + 0.5);
}

function createConfetti() {
    const confettiContainer = document.getElementById('confetti');
    confettiContainer.innerHTML = '';
    
    for (let i = 0; i < 50; i++) {
        const coin = document.createElement('div');
        coin.className = 'coin';
        coin.textContent = '💰';
        coin.style.left = Math.random() * 100 + '%';
        coin.style.animationDuration = (Math.random() * 2 + 2) + 's';
        coin.style.animationDelay = Math.random() * 2 + 's';
        confettiContainer.appendChild(coin);
    }
}

function showJackpotModal(amount) {
    document.getElementById('jackpotAmount').textContent = amount.toLocaleString() + ' 코인 획득!';
    document.getElementById('jackpotModal').style.display = 'flex';
    createConfetti();
    playWinSound();
}

function closeJackpotModal() {
    document.getElementById('jackpotModal').style.display = 'none';
}

// 기존 SPIN 로직의 잭팟 부분 수정
// (기존 코드에서 "if (data.is_jackpot)" 부분을 다음으로 교체)
if (data.is_jackpot) {
    setTimeout(() => showJackpotModal(data.payout), 500);
}
```

브라우저 새로고침 후 세븐 3개가 나올 때까지 SPIN을 반복하세요 (확률이 낮으므로 테스트용으로 서버 로직에서 임시로 잭팟 확률을 높이거나, 콘솔에서 `showJackpotModal(10000)` 함수를 직접 호출하여 테스트 가능). 잭팟 모달이 표시되고 금화 애니메이션과 사운드가 재생되는지 확인하세요.

**Step 7: 스핀 히스토리 & 잭팟 명예의 전당**

최근 스핀 기록과 잭팟 달성자 목록을 표시합니다.

**요구사항**:

1. 최근 20회 스핀 결과 테이블 (심볼, 베팅액, 배당)
2. 잭팟 명예의 전당 (닉네임, 날짜, 배당액)
3. 개인 통계 카드 (총 스핀, 총 베팅, 총 획득, 승률)

**PHP 데이터 조회 추가** (`app/modules/casino/index.php` 상단, DB 초기화 다음):

```php
// 최근 스핀 히스토리 조회
$stmt = $db->prepare('SELECT * FROM spin_history WHERE mb_id = ? ORDER BY created_at DESC LIMIT 20');
$stmt->execute([$member['mb_id']]);
$recent_spins = $stmt->fetchAll(PDO::FETCH_ASSOC);

// 잭팟 명예의 전당
$stmt = $db->query('SELECT sh.*, uc.mb_id FROM spin_history sh JOIN user_coins uc ON sh.mb_id = uc.mb_id WHERE sh.is_jackpot = 1 ORDER BY sh.created_at DESC LIMIT 10');
$jackpot_hall = $stmt->fetchAll(PDO::FETCH_ASSOC);

// 개인 통계
$stmt = $db->prepare('SELECT * FROM statistics WHERE mb_id = ?');
$stmt->execute([$member['mb_id']]);
$stats = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$stats) {
    $stats = ['total_spins' => 0, 'total_bet' => 0, 'total_win' => 0, 'jackpot_count' => 0];
}

$win_rate = $stats['total_spins'] > 0 ? round(($stats['total_win'] / $stats['total_bet']) * 100, 1) : 0;
```

**HTML 히스토리 섹션 추가** (배당표 다음에 삽입):

```html
<!-- 개인 통계 -->
<div style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); margin-bottom: 32px;">
    <h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 16px;">📊 나의 통계</h3>
    <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px;">
        <div style="text-align: center; padding: 16px; background: rgba(103,126,234,0.1); border-radius: 8px;">
            <div style="font-size: 0.875rem; color: var(--m-text-muted); margin-bottom: 8px;">총 스핀</div>
            <div style="font-size: 1.5rem; font-weight: 700;"><?php echo number_format($stats['total_spins']); ?>회</div>
        </div>
        <div style="text-align: center; padding: 16px; background: rgba(255,99,71,0.1); border-radius: 8px;">
            <div style="font-size: 0.875rem; color: var(--m-text-muted); margin-bottom: 8px;">총 베팅</div>
            <div style="font-size: 1.5rem; font-weight: 700;"><?php echo number_format($stats['total_bet']); ?></div>
        </div>
        <div style="text-align: center; padding: 16px; background: rgba(50,205,50,0.1); border-radius: 8px;">
            <div style="font-size: 0.875rem; color: var(--m-text-muted); margin-bottom: 8px;">총 획득</div>
            <div style="font-size: 1.5rem; font-weight: 700;"><?php echo number_format($stats['total_win']); ?></div>
        </div>
        <div style="text-align: center; padding: 16px; background: rgba(255,215,0,0.1); border-radius: 8px;">
            <div style="font-size: 0.875rem; color: var(--m-text-muted); margin-bottom: 8px;">수익률</div>
            <div style="font-size: 1.5rem; font-weight: 700;"><?php echo $win_rate; ?>%</div>
        </div>
    </div>
</div>

<!-- 최근 스핀 히스토리 -->
<div style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); margin-bottom: 32px;">
    <h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 16px;">📜 최근 스핀 기록</h3>
    <?php if (empty($recent_spins)): ?>
        <p style="color: var(--m-text-muted); text-align: center; padding: 32px;">아직 스핀 기록이 없습니다.</p>
    <?php else: ?>
        <div style="overflow-x: auto;">
            <table style="width: 100%; border-collapse: collapse;">
                <thead>
                    <tr style="border-bottom: 2px solid var(--m-text-muted);">
                        <th style="padding: 12px; text-align: left;">심볼</th>
                        <th style="padding: 12px; text-align: right;">베팅</th>
                        <th style="padding: 12px; text-align: right;">배당</th>
                        <th style="padding: 12px; text-align: center;">결과</th>
                        <th style="padding: 12px; text-align: left;">시간</th>
                    </tr>
                </thead>
                <tbody>
                    <?php foreach ($recent_spins as $spin): ?>
                        <tr style="border-bottom: 1px solid rgba(128,128,128,0.2);">
                            <td style="padding: 12px; font-size: 1.5rem;"><?php echo htmlspecialchars($spin['symbols']); ?></td>
                            <td style="padding: 12px; text-align: right;"><?php echo number_format($spin['bet_amount']); ?></td>
                            <td style="padding: 12px; text-align: right; font-weight: 700; color: <?php echo $spin['payout'] > 0 ? '#50C878' : '#FF6B6B'; ?>;"><?php echo number_format($spin['payout']); ?></td>
                            <td style="padding: 12px; text-align: center;">
                                <?php if ($spin['is_jackpot']): ?>
                                    <span style="background: #FFD700; color: #333; padding: 4px 12px; border-radius: 12px; font-size: 0.75rem; font-weight: 700;">JACKPOT</span>
                                <?php elseif ($spin['payout'] > $spin['bet_amount']): ?>
                                    <span style="color: #50C878;">✅ 승</span>
                                <?php elseif ($spin['payout'] == $spin['bet_amount']): ?>
                                    <span style="color: var(--m-text-muted);">↔️ 무</span>
                                <?php else: ?>
                                    <span style="color: #FF6B6B;">❌ 패</span>
                                <?php endif; ?>
                            </td>
                            <td style="padding: 12px; font-size: 0.875rem; color: var(--m-text-muted);"><?php echo date('m/d H:i', strtotime($spin['created_at'])); ?></td>
                        </tr>
                    <?php endforeach; ?>
                </tbody>
            </table>
        </div>
    <?php endif; ?>
</div>

<!-- 잭팟 명예의 전당 -->
<div style="background: linear-gradient(135deg, #FFD700, #FFA500); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
    <h3 style="font-size: 1.25rem; font-weight: 700; margin-bottom: 16px; color: #fff;">🏆 잭팟 명예의 전당</h3>
    <?php if (empty($jackpot_hall)): ?>
        <p style="color: #fff; text-align: center; padding: 32px; opacity: 0.8;">아직 잭팟 달성자가 없습니다.</p>
    <?php else: ?>
        <div style="display: grid; gap: 12px;">
            <?php foreach ($jackpot_hall as $idx => $jackpot): ?>
                <div style="background: rgba(255,255,255,0.2); padding: 16px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center;">
                    <div style="display: flex; align-items: center; gap: 12px;">
                        <div style="background: #fff; color: #FFA500; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700;"><?php echo $idx + 1; ?></div>
                        <div>
                            <div style="color: #fff; font-weight: 700;"><?php echo htmlspecialchars($jackpot['mb_id']); ?></div>
                            <div style="color: #fff; opacity: 0.8; font-size: 0.875rem;"><?php echo date('Y-m-d H:i', strtotime($jackpot['created_at'])); ?></div>
                        </div>
                    </div>
                    <div style="color: #fff; font-size: 1.25rem; font-weight: 700;"><?php echo number_format($jackpot['payout']); ?> 코인</div>
                </div>
            <?php endforeach; ?>
        </div>
    <?php endif; ?>
</div>
```

브라우저 새로고침 후 스핀을 여러 번 실행하세요. 최근 스핀 히스토리 테이블에 기록이 쌓이고, 개인 통계가 업데이트되는지 확인하세요.

**Step 8: 일일 보너스 시스템**

코인이 부족한 사용자를 위해 하루 1회 보너스 코인을 지급하는 기능을 추가합니다.

**요구사항**:

1. 일일 보너스 버튼 (500코인 지급)
2. 마지막 수령일 기준 24시간 후 재수령 가능
3. 남은 시간 카운트다운 표시
4. 수령 시 DB 업데이트

**PHP 보너스 로직 추가** (`app/modules/casino/index.php` 상단, AJAX 요청 처리 부분에 추가):

```php
// 일일 보너스 수령
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'claim_bonus') {
    header('Content-Type: application/json');
    
    $stmt = $db->prepare('SELECT coins, last_bonus_date FROM user_coins WHERE mb_id = ?');
    $stmt->execute([$member['mb_id']]);
    $user = $stmt->fetch(PDO::FETCH_ASSOC);
    
    $today = date('Y-m-d');
    
    if ($user['last_bonus_date'] === $today) {
        echo json_encode(['success' => false, 'message' => '오늘 이미 보너스를 수령했습니다.']);
        exit;
    }
    
    $new_coins = $user['coins'] + 500;
    $db->prepare('UPDATE user_coins SET coins = ?, last_bonus_date = ? WHERE mb_id = ?')->execute([$new_coins, $today, $member['mb_id']]);
    
    echo json_encode([
        'success' => true,
        'new_coins' => $new_coins,
        'message' => '일일 보너스 500코인을 받았습니다!'
    ]);
    exit;
}
```

**PHP 보너스 상태 확인** (기존 코인 조회 다음에 추가):

```php
// 보너스 수령 가능 여부
$today = date('Y-m-d');
$can_claim_bonus = ($last_bonus_date !== $today);

// 다음 보너스까지 남은 시간 (초 단위)
if (!$can_claim_bonus) {
    $next_bonus_time = strtotime($last_bonus_date . ' +1 day');
    $remaining_seconds = $next_bonus_time - time();
} else {
    $remaining_seconds = 0;
}
```

**HTML 보너스 버튼 추가** (코인 잔액 카드 안에 추가):

```html
<div style="background: var(--m-surface); padding: 20px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); margin-bottom: 24px;">
    <h2 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 12px;">💰 보유 코인</h2>
    <p style="font-size: 2.5rem; font-weight: 900; color: #FFD700;"><?php echo number_format($coins); ?> 코인</p>
    
    <!-- 일일 보너스 버튼 -->
    <div style="margin-top: 16px;">
        <?php if ($can_claim_bonus): ?>
            <button id="bonusBtn" style="background: linear-gradient(135deg, #50C878, #32CD32); color: #fff; border: none; padding: 12px 32px; border-radius: 50px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 12px rgba(50,205,50,0.4); transition: all 0.3s;">🎁 일일 보너스 받기 (500코인)</button>
        <?php else: ?>
            <button id="bonusBtn" disabled style="background: #ccc; color: #666; border: none; padding: 12px 32px; border-radius: 50px; font-weight: 700; cursor: not-allowed;">🎁 일일 보너스 (받음)</button>
            <p id="bonusTimer" style="margin-top: 8px; font-size: 0.875rem; color: var(--m-text-muted);">다음 보너스: <span id="countdown"></span></p>
        <?php endif; ?>
    </div>
</div>

<script>
const canClaimBonus = <?php echo $can_claim_bonus ? 'true' : 'false'; ?>;
let remainingSeconds = <?php echo $remaining_seconds; ?>;

// 보너스 수령
if (canClaimBonus) {
    document.getElementById('bonusBtn').addEventListener('click', async () => {
        const formData = new FormData();
        formData.append('action', 'claim_bonus');
        
        const response = await fetch(window.location.href, {
            method: 'POST',
            body: formData
        });
        
        const data = await response.json();
        
        if (data.success) {
            document.querySelector('[style*="font-size: 2.5rem"]').textContent = data.new_coins.toLocaleString() + ' 코인';
            alert(data.message);
            location.reload();
        } else {
            alert(data.message);
        }
    });
}

// 카운트다운 타이머
if (!canClaimBonus && remainingSeconds > 0) {
    const countdownEl = document.getElementById('countdown');
    
    function updateCountdown() {
        if (remainingSeconds <= 0) {
            location.reload();
            return;
        }
        
        const hours = Math.floor(remainingSeconds / 3600);
        const minutes = Math.floor((remainingSeconds % 3600) / 60);
        const seconds = remainingSeconds % 60;
        
        countdownEl.textContent = `${hours}시간 ${minutes}분 ${seconds}초`;
        remainingSeconds--;
    }
    
    updateCountdown();
    setInterval(updateCountdown, 1000);
}
</script>
```

브라우저 새로고침 후 일일 보너스 버튼을 클릭하세요. 코인이 500 증가하고, 버튼이 비활성화되며 카운트다운이 시작되는지 확인하세요.

**Step 9: 반응형 디자인 & 모바일 최적화**

다양한 화면 크기에서 슬롯머신이 정상 작동하도록 반응형 스타일을 추가합니다.

**요구사항**:

1. 모바일(~768px): 릴 크기 축소, 버튼 세로 배치
2. 태블릿(768px~1024px): 중간 크기 레이아웃
3. 터치 이벤트 지원
4. 가로 스크롤 방지

**CSS 미디어 쿼리 추가** (기존 `<style>` 태그 안에 추가):

```css
/* 모바일 최적화 */
@media (max-width: 768px) {
    .reel {
        width: 80px !important;
        height: 120px !important;
        font-size: 3.5rem !important;
    }
    
    #reels {
        gap: 8px !important;
    }
    
    .bet-btn {
        padding: 10px 16px !important;
        font-size: 0.875rem !important;
    }
    
    #spinBtn {
        padding: 16px 40px !important;
        font-size: 1.25rem !important;
    }
    
    h1 {
        font-size: 1.5rem !important;
    }
    
    .m-container {
        padding: 16px 12px 32px !important;
    }
    
    /* 테이블 가로 스크롤 */
    table {
        font-size: 0.875rem;
    }
    
    table th,
    table td {
        padding: 8px !important;
    }
}

@media (max-width: 480px) {
    .reel {
        width: 70px !important;
        height: 100px !important;
        font-size: 3rem !important;
    }
    
    .bet-btn {
        padding: 8px 12px !important;
        font-size: 0.75rem !important;
    }
    
    #spinBtn {
        padding: 14px 32px !important;
        font-size: 1rem !important;
    }
}

/* 터치 피드백 */
button:active {
    transform: scale(0.95);
}

/* 가로 스크롤 방지 */
body {
    overflow-x: hidden;
}

.m-container {
    max-width: 100%;
    overflow-x: hidden;
}
```

**JavaScript 터치 이벤트 추가** (기존 `<script>` 태그 안에 추가):

```javascript
// 터치 이벤트 지원
if ('ontouchstart' in window) {
    document.getElementById('spinBtn').addEventListener('touchstart', (e) => {
        e.preventDefault();
        document.getElementById('spinBtn').click();
    });
    
    document.querySelectorAll('.bet-btn').forEach(btn => {
        btn.addEventListener('touchstart', (e) => {
            e.preventDefault();
            btn.click();
        });
    });
}

// 화면 회전 감지
window.addEventListener('orientationchange', () => {
    setTimeout(() => {
        window.scrollTo(0, 0);
    }, 100);
});
```

브라우저 개발자 도구에서 모바일 뷰로 전환하거나 실제 모바일 기기로 접속하여 레이아웃이 정상 작동하는지 확인하세요.

**Step 10: 최종 마무리 & 보안 강화**

프로젝트를 완성하고 보안 취약점을 점검합니다.

**요구사항**:

1. XSS 방어: 모든 사용자 입력 이스케이프
2. CSRF 방어: g5se 토큰 검증
3. SQL 인젝션 방어: prepared statement 확인
4. 에러 핸들링 개선
5. 코드 정리 & 주석 추가

**보안 강화 코드 추가**:

**1. CSRF 토큰 추가** (PHP 상단):

```php
// CSRF 토큰 생성
if (!isset($_SESSION['casino_token'])) {
    $_SESSION['casino_token'] = bin2hex(random_bytes(32));
}
$csrf_token = $_SESSION['casino_token'];

// AJAX 요청 시 토큰 검증
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    if (!isset($_POST['csrf_token']) || $_POST['csrf_token'] !== $_SESSION['casino_token']) {
        header('Content-Type: application/json');
        echo json_encode(['success' => false, 'message' => '잘못된 요청입니다.']);
        exit;
    }
}
```

**2. JavaScript CSRF 토큰 전송** (모든 fetch 요청에 추가):

```javascript
const csrfToken = '<?php echo $csrf_token; ?>';

// SPIN 버튼 클릭 (기존 fetch 부분 수정)
const formData = new FormData();
formData.append('action', 'spin');
formData.append('bet_amount', selectedBet);
formData.append('symbols', JSON.stringify(results));
formData.append('csrf_token', csrfToken); // CSRF 토큰 추가

// 보너스 버튼 클릭 (기존 fetch 부분 수정)
const formData = new FormData();
formData.append('action', 'claim_bonus');
formData.append('csrf_token', csrfToken); // CSRF 토큰 추가
```

**3. 에러 핸들링 개선** (PHP):

```php
try {
    // 기존 DB 작업 코드를 try-catch로 감싸기
    @mkdir(G5_DATA_PATH.'/modules', 0707, true);
    $db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/casino.sqlite');
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
    // ... 나머지 코드 ...
    
} catch (PDOException $e) {
    error_log('Casino DB Error: ' . $e->getMessage());
    if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        header('Content-Type: application/json');
        echo json_encode(['success' => false, 'message' => '일시적인 오류가 발생했습니다. 잠시 후 다시 시도해주세요.']);
        exit;
    }
}
```

**4. 입력 검증 강화** (PHP AJAX 처리 부분):

```php
// 스핀 요청 검증
if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'spin') {
    header('Content-Type: application/json');
    
    // 입력 검증
    $bet_amount = filter_var($_POST['bet_amount'], FILTER_VALIDATE_INT);
    if ($bet_amount === false || !in_array($bet_amount, [10, 50, 100, 500])) {
        echo json_encode(['success' => false, 'message' => '잘못된 베팅액입니다.']);
        exit;
    }
    
    $symbols = json_decode($_POST['symbols'], true);
    if (!is_array($symbols) || count($symbols) !== 3) {
        echo json_encode(['success' => false, 'message' => '잘못된 요청입니다.']);
        exit;
    }
    
    $valid_symbols = ['🍒', '🍋', '🍊', '🍉', '⭐', '💎', '7️⃣'];
    foreach ($symbols as $symbol) {
        if (!in_array($symbol, $valid_symbols)) {
            echo json_encode(['success' => false, 'message' => '잘못된 심볼입니다.']);
            exit;
        }
    }
    
    // ... 나머지 코드 ...
}
```

**5. 사용자 안내 메시지 추가** (HTML):

```html
<!-- 게임 안내 -->
<div style="background: rgba(103,126,234,0.1); padding: 16px; border-radius: 8px; margin-bottom: 24px; border-left: 4px solid #667eea;">
    <h4 style="font-size: 1rem; font-weight: 700; margin-bottom: 8px;">ℹ️ 게임 안내</h4>
    <ul style="margin: 0; padding-left: 20px; color: var(--m-text-muted); font-size: 0.875rem; line-height: 1.6;">
        <li>베팅 금액을 선택하고 SPIN 버튼을 눌러 릴을 회전시키세요.</li>
        <li>3개 심볼이 모두 일치하면 배당을 받습니다.</li>
        <li>2개 일치 시 베팅액이 반환됩니다.</li>
        <li>세븐 3개 일치 시 잭팟 달성! 100배 배당!</li>
        <li>코인이 부족하면 일일 보너스(500코인)를 받으세요.</li>
        <li>이 게임은 가상 코인으로 진행되며 실제 금전과 무관합니다.</li>
    </ul>
</div>
```

**최종 테스트 체크리스트**:

1. ✅ 회원 전용 페이지 (비회원 접근 차단)
2. ✅ 릴 스핀 애니메이션 정상 작동
3. ✅ 배당 계산 정확성
4. ✅ 코인 잔액 실시간 업데이트
5. ✅ 잭팟 모달 & 사운드 재생
6. ✅ 스핀 히스토리 기록
7. ✅ 일일 보너스 시스템
8. ✅ 반응형 디자인 (모바일/태블릿)
9. ✅ CSRF 토큰 검증
10. ✅ SQL 인젝션 방어
11. ✅ XSS 방어 (htmlspecialchars)
12. ✅ 에러 핸들링

브라우저에서 모든 기능을 테스트하고, 개발자 도구 콘솔에 에러가 없는지 확인하세요. 모바일 뷰에서도 정상 작동하는지 테스트하세요.