🎰 랜덤 점심 메뉴 룰렛 - 오늘 뭐 먹지? 고민 끝!

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

## Step 1: 기본 페이지 구조 생성

`app/modules/lunch-menu-roulette/index.php` 파일을 생성하고 modern shell 골격을 적용합니다.

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

require_once(G5_THEME_PATH.'/modern/_head.inc.php');
include_once('./head.sub.php');
?>
<style>
.roulette-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.page-header {
    margin-bottom: 32px;
}

.page-header h1 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--m-text);
    margin-bottom: 8px;
}

.page-header p {
    color: var(--m-text-muted);
    font-size: 1rem;
}

.menu-input-section {
    background: var(--m-surface);
    padding: 24px;
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
    margin-bottom: 32px;
}

.menu-form {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}

.menu-form input {
    flex: 1;
    padding: 12px 16px;
    border: 1px solid var(--m-border, #e5e7eb);
    border-radius: 8px;
    font-size: 1rem;
    background: var(--m-surface);
    color: var(--m-text);
}

.menu-form input:focus {
    outline: none;
    border-color: #3b82f6;
}

.menu-form button {
    padding: 12px 24px;
    background: #3b82f6;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.menu-form button:hover {
    background: #2563eb;
}

.menu-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 40px;
}

.menu-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #f3f4f6;
    border-radius: 20px;
    font-size: 0.9rem;
    color: #374151;
}

[data-theme="dark"] .menu-item {
    background: #374151;
    color: #e5e7eb;
}

.menu-item button {
    background: none;
    border: none;
    color: #ef4444;
    cursor: pointer;
    font-size: 1.1rem;
    padding: 0;
    line-height: 1;
}

.canvas-section {
    background: var(--m-surface);
    padding: 32px;
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
    margin-bottom: 24px;
}

#rouletteCanvas {
    max-width: 100%;
    border-radius: 50%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
}

.spin-button {
    margin-top: 24px;
    padding: 16px 48px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1.2rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.spin-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
}

.spin-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.result-section {
    background: var(--m-surface);
    padding: 24px;
    border-radius: var(--m-radius-lg);
    box-shadow: var(--m-shadow);
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.result-content {
    text-align: center;
}

.result-emoji {
    font-size: 3rem;
    margin-bottom: 12px;
}

.result-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--m-text);
}

.result-menu {
    font-size: 2rem;
    font-weight: 900;
    color: #667eea;
    margin-top: 8px;
}

.empty-state {
    color: var(--m-text-muted);
    font-size: 0.95rem;
}
</style>

<div class="m-shell">
    <?php require G5_THEME_PATH.'/modern/_nav.inc.php'; ?>
    <main class="m-container" style="padding: 32px 20px 48px;">
        <div class="roulette-container">
            <div class="page-header">
                <h1>🎰 랜덤 점심 메뉴 룰렛</h1>
                <p>오늘 뭐 먹지? 고민은 그만, 룰렛이 결정해드려요!</p>
            </div>

            <div class="menu-input-section">
                <form class="menu-form" id="menuForm">
                    <input 
                        type="text" 
                        id="menuInput" 
                        placeholder="메뉴 이름 입력 (예: 김치찌개, 파스타)" 
                        maxlength="20"
                        required
                    >
                    <button type="submit">추가</button>
                </form>
                <div class="menu-list" id="menuList">
                    <span class="empty-state">아직 추가된 메뉴가 없어요. 위에서 메뉴를 추가해보세요!</span>
                </div>
            </div>

            <div class="canvas-section">
                <canvas id="rouletteCanvas" width="400" height="400"></canvas>
                <div>
                    <button class="spin-button" id="spinButton" disabled>룰렛 돌리기 🎲</button>
                </div>
            </div>

            <div class="result-section" id="resultSection" style="display: none;">
                <div class="result-content">
                    <div class="result-emoji">🎉</div>
                    <div class="result-text">오늘의 점심 메뉴는</div>
                    <div class="result-menu" id="resultMenu"></div>
                </div>
            </div>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>

<?php include_once('./tail.sub.php'); ?>
```

이 단계에서는 페이지의 HTML 구조와 CSS 스타일만 완성합니다. 다음 단계에서 JavaScript 기능을 추가할 예정입니다.

## Step 2: 메뉴 관리 기능 구현 (JavaScript)

`app/modules/lunch-menu-roulette/index.php` 파일의 `<?php include_once('./tail.sub.php'); ?>` 바로 위에 다음 JavaScript 코드를 추가합니다:

```html
<script>
// 전역 변수
let menuList = [];
const STORAGE_KEY = 'lunch_menu_roulette_items';

// 페이지 로드 시 localStorage에서 메뉴 불러오기
window.addEventListener('DOMContentLoaded', () => {
    loadMenuFromStorage();
    renderMenuList();
    updateSpinButton();
});

// localStorage에서 메뉴 로드
function loadMenuFromStorage() {
    const saved = localStorage.getItem(STORAGE_KEY);
    if (saved) {
        try {
            menuList = JSON.parse(saved);
        } catch (e) {
            console.error('메뉴 로드 실패:', e);
            menuList = [];
        }
    }
}

// localStorage에 메뉴 저장
function saveMenuToStorage() {
    localStorage.setItem(STORAGE_KEY, JSON.stringify(menuList));
}

// 메뉴 추가
document.getElementById('menuForm').addEventListener('submit', (e) => {
    e.preventDefault();
    
    const input = document.getElementById('menuInput');
    const menuName = input.value.trim();
    
    if (!menuName) return;
    
    // 중복 체크
    if (menuList.includes(menuName)) {
        alert('이미 추가된 메뉴입니다!');
        return;
    }
    
    menuList.push(menuName);
    saveMenuToStorage();
    renderMenuList();
    updateSpinButton();
    
    input.value = '';
    input.focus();
});

// 메뉴 삭제
function removeMenu(index) {
    menuList.splice(index, 1);
    saveMenuToStorage();
    renderMenuList();
    updateSpinButton();
}

// 메뉴 리스트 렌더링
function renderMenuList() {
    const container = document.getElementById('menuList');
    
    if (menuList.length === 0) {
        container.innerHTML = '<span class="empty-state">아직 추가된 메뉴가 없어요. 위에서 메뉴를 추가해보세요!</span>';
        return;
    }
    
    container.innerHTML = menuList.map((menu, index) => `
        <div class="menu-item">
            <span>${escapeHtml(menu)}</span>
            <button onclick="removeMenu(${index})" title="삭제">×</button>
        </div>
    `).join('');
}

// 룰렛 버튼 활성화/비활성화
function updateSpinButton() {
    const button = document.getElementById('spinButton');
    button.disabled = menuList.length < 2;
    
    if (menuList.length < 2) {
        button.textContent = '최소 2개 이상의 메뉴를 추가하세요';
    } else {
        button.textContent = '룰렛 돌리기 🎲';
    }
}

// XSS 방지용 HTML 이스케이프
function escapeHtml(text) {
    const div = document.createElement('div');
    div.textContent = text;
    return div.innerHTML;
}
</script>
```

이 단계에서는 메뉴 추가/삭제/저장/불러오기 기능을 완성합니다.

## Step 3: 룰렛 Canvas 그리기 및 회전 애니메이션

`app/modules/lunch-menu-roulette/index.php`의 `<script>` 태그 내부 맨 아래에 다음 코드를 추가합니다:

```javascript
// Canvas 관련 변수
const canvas = document.getElementById('rouletteCanvas');
const ctx = canvas.getContext('2d');
const centerX = canvas.width / 2;
const centerY = canvas.height / 2;
const radius = 180;

let currentRotation = 0;
let isSpinning = false;

// 룰렛 색상 팔레트
const colors = [
    '#FF6B6B', '#4ECDC4', '#45B7D1', '#FFA07A',
    '#98D8C8', '#F7DC6F', '#BB8FCE', '#85C1E2',
    '#F8B500', '#52B788', '#E07A5F', '#81B29A'
];

// 룰렛 그리기
function drawRoulette() {
    if (menuList.length === 0) {
        // 메뉴가 없을 때 기본 원
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.beginPath();
        ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI);
        ctx.fillStyle = '#f3f4f6';
        ctx.fill();
        ctx.strokeStyle = '#d1d5db';
        ctx.lineWidth = 3;
        ctx.stroke();
        
        ctx.fillStyle = '#9ca3af';
        ctx.font = '16px sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText('메뉴를 추가해주세요', centerX, centerY);
        return;
    }
    
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.save();
    ctx.translate(centerX, centerY);
    ctx.rotate(currentRotation);
    
    const sliceAngle = (2 * Math.PI) / menuList.length;
    
    // 각 조각 그리기
    menuList.forEach((menu, index) => {
        const startAngle = index * sliceAngle;
        const endAngle = startAngle + sliceAngle;
        
        // 조각 색칠
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.arc(0, 0, radius, startAngle, endAngle);
        ctx.closePath();
        ctx.fillStyle = colors[index % colors.length];
        ctx.fill();
        ctx.strokeStyle = '#fff';
        ctx.lineWidth = 3;
        ctx.stroke();
        
        // 텍스트
        ctx.save();
        ctx.rotate(startAngle + sliceAngle / 2);
        ctx.textAlign = 'center';
        ctx.fillStyle = '#fff';
        ctx.font = 'bold 16px sans-serif';
        ctx.fillText(menu, radius * 0.6, 5);
        ctx.restore();
    });
    
    ctx.restore();
    
    // 중앙 원 (장식)
    ctx.beginPath();
    ctx.arc(centerX, centerY, 20, 0, 2 * Math.PI);
    ctx.fillStyle = '#fff';
    ctx.fill();
    ctx.strokeStyle = '#333';
    ctx.lineWidth = 2;
    ctx.stroke();
    
    // 상단 포인터 (고정)
    ctx.beginPath();
    ctx.moveTo(centerX, 30);
    ctx.lineTo(centerX - 15, 60);
    ctx.lineTo(centerX + 15, 60);
    ctx.closePath();
    ctx.fillStyle = '#ef4444';
    ctx.fill();
    ctx.strokeStyle = '#fff';
    ctx.lineWidth = 2;
    ctx.stroke();
}

// 룰렛 회전 애니메이션
function spinRoulette() {
    if (isSpinning || menuList.length < 2) return;
    
    isSpinning = true;
    document.getElementById('spinButton').disabled = true;
    document.getElementById('resultSection').style.display = 'none';
    
    // 랜덤 회전 각도 (최소 5바퀴 + 랜덤)
    const minSpins = 5;
    const extraRotation = Math.random() * 2 * Math.PI;
    const targetRotation = currentRotation + (minSpins * 2 * Math.PI) + extraRotation;
    
    const duration = 3000; // 3초
    const startTime = Date.now();
    const startRotation = currentRotation;
    
    function animate() {
        const elapsed = Date.now() - startTime;
        const progress = Math.min(elapsed / duration, 1);
        
        // easeOut 효과
        const easeProgress = 1 - Math.pow(1 - progress, 3);
        
        currentRotation = startRotation + (targetRotation - startRotation) * easeProgress;
        drawRoulette();
        
        if (progress < 1) {
            requestAnimationFrame(animate);
        } else {
            // 회전 완료
            currentRotation = targetRotation % (2 * Math.PI);
            isSpinning = false;
            document.getElementById('spinButton').disabled = false;
            showResult();
        }
    }
    
    animate();
}

// 결과 표시
function showResult() {
    // 포인터가 가리키는 메뉴 계산 (상단 기준)
    const sliceAngle = (2 * Math.PI) / menuList.length;
    const normalizedRotation = (2 * Math.PI - (currentRotation % (2 * Math.PI))) % (2 * Math.PI);
    const selectedIndex = Math.floor(normalizedRotation / sliceAngle) % menuList.length;
    const selectedMenu = menuList[selectedIndex];
    
    document.getElementById('resultMenu').textContent = selectedMenu;
    document.getElementById('resultSection').style.display = 'flex';
    
    // 결과 섹션 스크롤
    setTimeout(() => {
        document.getElementById('resultSection').scrollIntoView({ 
            behavior: 'smooth', 
            block: 'center' 
        });
    }, 100);
}

// 룰렛 버튼 이벤트
document.getElementById('spinButton').addEventListener('click', spinRoulette);

// 초기 룰렛 그리기
drawRoulette();

// 메뉴 변경 시 룰렛 다시 그리기
const originalRenderMenuList = renderMenuList;
renderMenuList = function() {
    originalRenderMenuList();
    currentRotation = 0; // 메뉴 변경 시 회전 초기화
    drawRoulette();
};
</script>
```

이 코드를 추가하면 룰렛의 모든 기능이 완성됩니다.