🎯 g5se 온라인 레시피 북 - 나만의 요리 아카이브 & 재료 검색

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

**목표:** 레시피 북 메인 페이지 골격 생성 + DB 초기화

---

## 1) 폴더 & 파일 생성

`app/modules/recipes/index.php` 파일을 만들어주세요. 이 파일은 `/recipes` URL로 자동 매핑됩니다.

## 2) modern shell 골격 적용

아래 구조로 페이지를 만들어주세요:

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

// DB 초기화 (첫 접근 시 테이블 자동 생성)
@mkdir(G5_DATA_PATH.'/modules', 0707, true);
@mkdir(G5_DATA_PATH.'/modules/recipes', 0707, true);
$db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/recipes.sqlite');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// recipes 테이블 생성
$db->exec("
    CREATE TABLE IF NOT EXISTS recipes (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        title TEXT NOT NULL,
        description TEXT,
        cooking_time INTEGER,
        difficulty TEXT,
        servings INTEGER,
        image TEXT,
        tags TEXT,
        favorite INTEGER DEFAULT 0,
        created_at TEXT DEFAULT CURRENT_TIMESTAMP
    )
");

// ingredients 테이블 생성
$db->exec("
    CREATE TABLE IF NOT EXISTS ingredients (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        recipe_id INTEGER NOT NULL,
        name TEXT NOT NULL,
        quantity TEXT,
        unit TEXT,
        FOREIGN KEY (recipe_id) REFERENCES recipes(id) ON DELETE CASCADE
    )
");

// steps 테이블 생성
$db->exec("
    CREATE TABLE IF NOT EXISTS steps (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        recipe_id INTEGER NOT NULL,
        step_number INTEGER NOT NULL,
        description TEXT NOT NULL,
        FOREIGN KEY (recipe_id) REFERENCES recipes(id) ON DELETE CASCADE
    )
");

// notes 테이블 생성
$db->exec("
    CREATE TABLE IF NOT EXISTS notes (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        recipe_id INTEGER NOT NULL,
        content TEXT NOT NULL,
        created_at TEXT DEFAULT CURRENT_TIMESTAMP,
        FOREIGN KEY (recipe_id) REFERENCES recipes(id) ON DELETE CASCADE
    )
");

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 class="recipe-header" style="text-align: center; margin-bottom: 40px;">
            <h1 style="font-size: 2.5rem; font-weight: 700; color: var(--m-text); margin-bottom: 8px;">🍳 나만의 레시피 북</h1>
            <p style="font-size: 1.1rem; color: var(--m-text-muted);">맛있는 요리를 기록하고, 재료로 검색하세요</p>
        </div>

        <div class="dashboard-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 40px;">
            <div class="stat-card" style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
                <div style="font-size: 2rem; margin-bottom: 8px;">📚</div>
                <div style="font-size: 2rem; font-weight: 700; color: var(--m-text);">0</div>
                <div style="font-size: 0.9rem; color: var(--m-text-muted);">전체 레시피</div>
            </div>
            <div class="stat-card" style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
                <div style="font-size: 2rem; margin-bottom: 8px;">⭐</div>
                <div style="font-size: 2rem; font-weight: 700; color: var(--m-text);">0</div>
                <div style="font-size: 0.9rem; color: var(--m-text-muted);">즐겨찾기</div>
            </div>
            <div class="stat-card" style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
                <div style="font-size: 2rem; margin-bottom: 8px;">🔥</div>
                <div style="font-size: 2rem; font-weight: 700; color: var(--m-text);">0</div>
                <div style="font-size: 0.9rem; color: var(--m-text-muted);">최근 7일</div>
            </div>
        </div>

        <div style="text-align: center; padding: 60px 20px; background: var(--m-surface); border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
            <div style="font-size: 4rem; margin-bottom: 16px;">🍽️</div>
            <p style="font-size: 1.2rem; color: var(--m-text-muted); margin-bottom: 24px;">아직 등록된 레시피가 없습니다</p>
            <a href="/recipes/add" style="display: inline-block; background: #FF6B35; color: white; padding: 12px 32px; border-radius: 8px; text-decoration: none; font-weight: 600;">첫 레시피 추가하기</a>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<?php include_once('./tail.sub.php'); ?>
```

## 3) 확인

브라우저에서 `/recipes`에 접속하면 대시보드 화면이 표시되어야 합니다. DB 파일(`G5_DATA_PATH/modules/recipes.sqlite`)이 자동 생성되고, 4개 테이블(recipes, ingredients, steps, notes)이 만들어집니다.

**목표:** 레시피 추가 페이지 구현 (제목, 설명, 조리시간, 난이도, 분량, 태그 입력)

---

## 1) 폴더 생성

`app/modules/recipes/add/index.php` 파일을 만들어주세요. 이 파일은 `/recipes/add` URL로 자동 매핑됩니다.

## 2) 레시피 추가 폼 구현

아래 코드로 페이지를 만들어주세요:

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

@mkdir(G5_DATA_PATH.'/modules', 0707, true);
@mkdir(G5_DATA_PATH.'/modules/recipes', 0707, true);
$db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/recipes.sqlite');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$error = '';
$success = '';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $title = trim($_POST['title'] ?? '');
    $description = trim($_POST['description'] ?? '');
    $cooking_time = intval($_POST['cooking_time'] ?? 0);
    $difficulty = $_POST['difficulty'] ?? 'easy';
    $servings = intval($_POST['servings'] ?? 1);
    $tags = trim($_POST['tags'] ?? '');
    
    if (empty($title)) {
        $error = '레시피 제목을 입력해주세요.';
    } else {
        // 이미지 업로드 처리
        $image_path = '';
        if (!empty($_FILES['image']['name'])) {
            $upload_dir = G5_DATA_PATH.'/modules/recipes/';
            $ext = strtolower(pathinfo($_FILES['image']['name'], PATHINFO_EXTENSION));
            $allowed = ['jpg', 'jpeg', 'png', 'gif'];
            
            if (in_array($ext, $allowed)) {
                $filename = uniqid('recipe_').'.'.$ext;
                if (move_uploaded_file($_FILES['image']['tmp_name'], $upload_dir.$filename)) {
                    $image_path = $filename;
                }
            }
        }
        
        $stmt = $db->prepare("
            INSERT INTO recipes (title, description, cooking_time, difficulty, servings, image, tags)
            VALUES (?, ?, ?, ?, ?, ?, ?)
        ");
        $stmt->execute([$title, $description, $cooking_time, $difficulty, $servings, $image_path, $tags]);
        
        $recipe_id = $db->lastInsertId();
        
        // 재료 저장
        if (!empty($_POST['ingredients'])) {
            foreach ($_POST['ingredients'] as $ing) {
                if (!empty($ing['name'])) {
                    $stmt = $db->prepare("INSERT INTO ingredients (recipe_id, name, quantity, unit) VALUES (?, ?, ?, ?)");
                    $stmt->execute([$recipe_id, $ing['name'], $ing['quantity'] ?? '', $ing['unit'] ?? '']);
                }
            }
        }
        
        // 조리 단계 저장
        if (!empty($_POST['steps'])) {
            foreach ($_POST['steps'] as $idx => $step_desc) {
                if (!empty($step_desc)) {
                    $stmt = $db->prepare("INSERT INTO steps (recipe_id, step_number, description) VALUES (?, ?, ?)");
                    $stmt->execute([$recipe_id, $idx + 1, $step_desc]);
                }
            }
        }
        
        $success = '레시피가 등록되었습니다!';
        header('Location: /recipes');
        exit;
    }
}

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: 800px; margin: 0 auto;">
            <h1 style="font-size: 2rem; font-weight: 700; color: var(--m-text); margin-bottom: 24px;">새 레시피 추가</h1>
            
            <?php if ($error): ?>
            <div style="background: #fee; color: #c33; padding: 12px 16px; border-radius: 8px; margin-bottom: 20px;">
                <?= htmlspecialchars($error) ?>
            </div>
            <?php endif; ?>
            
            <form method="post" enctype="multipart/form-data" style="background: var(--m-surface); padding: 32px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
                <div style="margin-bottom: 20px;">
                    <label style="display: block; font-weight: 600; color: var(--m-text); margin-bottom: 8px;">레시피 제목 *</label>
                    <input type="text" name="title" required style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; background: var(--m-surface); color: var(--m-text);">
                </div>
                
                <div style="margin-bottom: 20px;">
                    <label style="display: block; font-weight: 600; color: var(--m-text); margin-bottom: 8px;">설명</label>
                    <textarea name="description" rows="3" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; background: var(--m-surface); color: var(--m-text);"></textarea>
                </div>
                
                <div style="display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; margin-bottom: 20px;">
                    <div>
                        <label style="display: block; font-weight: 600; color: var(--m-text); margin-bottom: 8px;">조리시간(분)</label>
                        <input type="number" name="cooking_time" min="1" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; background: var(--m-surface); color: var(--m-text);">
                    </div>
                    <div>
                        <label style="display: block; font-weight: 600; color: var(--m-text); margin-bottom: 8px;">난이도</label>
                        <select name="difficulty" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; background: var(--m-surface); color: var(--m-text);">
                            <option value="easy">쉬움</option>
                            <option value="medium">보통</option>
                            <option value="hard">어려움</option>
                        </select>
                    </div>
                    <div>
                        <label style="display: block; font-weight: 600; color: var(--m-text); margin-bottom: 8px;">분량(인분)</label>
                        <input type="number" name="servings" min="1" value="2" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; background: var(--m-surface); color: var(--m-text);">
                    </div>
                </div>
                
                <div style="margin-bottom: 20px;">
                    <label style="display: block; font-weight: 600; color: var(--m-text); margin-bottom: 8px;">완성 사진</label>
                    <input type="file" name="image" accept="image/*" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; background: var(--m-surface); color: var(--m-text);">
                </div>
                
                <div style="margin-bottom: 20px;">
                    <label style="display: block; font-weight: 600; color: var(--m-text); margin-bottom: 8px;">태그 (쉼표로 구분)</label>
                    <input type="text" name="tags" placeholder="예: 한식, 간편식, 저녁" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; background: var(--m-surface); color: var(--m-text);">
                </div>
                
                <div style="margin-bottom: 20px;">
                    <label style="display: block; font-weight: 600; color: var(--m-text); margin-bottom: 12px;">재료</label>
                    <div id="ingredients-container"></div>
                    <button type="button" onclick="addIngredient()" style="margin-top: 8px; padding: 8px 16px; background: #4CAF50; color: white; border: none; border-radius: 6px; cursor: pointer;">+ 재료 추가</button>
                </div>
                
                <div style="margin-bottom: 20px;">
                    <label style="display: block; font-weight: 600; color: var(--m-text); margin-bottom: 12px;">조리 순서</label>
                    <div id="steps-container"></div>
                    <button type="button" onclick="addStep()" style="margin-top: 8px; padding: 8px 16px; background: #2196F3; color: white; border: none; border-radius: 6px; cursor: pointer;">+ 단계 추가</button>
                </div>
                
                <div style="display: flex; gap: 12px;">
                    <button type="submit" style="flex: 1; padding: 14px; background: #FF6B35; color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer;">레시피 저장</button>
                    <a href="/recipes" style="flex: 1; padding: 14px; background: #666; color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; text-align: center; text-decoration: none; display: block;">취소</a>
                </div>
            </form>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>

<script>
let ingredientCount = 0;
let stepCount = 0;

function addIngredient() {
    const container = document.getElementById('ingredients-container');
    const div = document.createElement('div');
    div.style.cssText = 'display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 8px; margin-bottom: 8px;';
    div.innerHTML = `
        <input type="text" name="ingredients[${ingredientCount}][name]" placeholder="재료명" style="padding: 10px; border: 1px solid #ddd; border-radius: 6px; background: var(--m-surface); color: var(--m-text);">
        <input type="text" name="ingredients[${ingredientCount}][quantity]" placeholder="수량" style="padding: 10px; border: 1px solid #ddd; border-radius: 6px; background: var(--m-surface); color: var(--m-text);">
        <input type="text" name="ingredients[${ingredientCount}][unit]" placeholder="단위" style="padding: 10px; border: 1px solid #ddd; border-radius: 6px; background: var(--m-surface); color: var(--m-text);">
        <button type="button" onclick="this.parentElement.remove()" style="padding: 10px 14px; background: #f44336; color: white; border: none; border-radius: 6px; cursor: pointer;">×</button>
    `;
    container.appendChild(div);
    ingredientCount++;
}

function addStep() {
    const container = document.getElementById('steps-container');
    const div = document.createElement('div');
    div.style.cssText = 'display: flex; gap: 8px; margin-bottom: 8px;';
    div.innerHTML = `
        <div style="padding: 10px; background: #FF6B35; color: white; border-radius: 6px; font-weight: 600; min-width: 40px; text-align: center;">${stepCount + 1}</div>
        <textarea name="steps[${stepCount}]" placeholder="조리 방법을 입력하세요" rows="2" style="flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 6px; background: var(--m-surface); color: var(--m-text);"></textarea>
        <button type="button" onclick="this.parentElement.remove(); renumberSteps()" style="padding: 10px 14px; background: #f44336; color: white; border: none; border-radius: 6px; cursor: pointer;">×</button>
    `;
    container.appendChild(div);
    stepCount++;
}

function renumberSteps() {
    const steps = document.querySelectorAll('#steps-container > div');
    steps.forEach((step, idx) => {
        step.querySelector('div').textContent = idx + 1;
    });
}

// 초기 재료/단계 1개씩 추가
addIngredient();
addStep();
</script>

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

## 3) 확인

- `/recipes/add`에 접속하면 레시피 추가 폼이 표시됩니다
- 재료/단계 추가 버튼을 클릭하면 동적으로 입력 필드가 추가됩니다
- 폼 제출 시 DB에 저장되고 `/recipes`로 리다이렉트됩니다

**목표:** 메인 페이지에 레시피 목록 표시 (카드 그리드 레이아웃 + 통계 업데이트)

---

## 1) `app/modules/recipes/index.php` 수정

기존 파일을 아래 코드로 교체해주세요:

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

@mkdir(G5_DATA_PATH.'/modules', 0707, true);
@mkdir(G5_DATA_PATH.'/modules/recipes', 0707, true);
$db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/recipes.sqlite');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 통계 계산
$total = $db->query("SELECT COUNT(*) FROM recipes")->fetchColumn();
$favorites = $db->query("SELECT COUNT(*) FROM recipes WHERE favorite = 1")->fetchColumn();
$recent = $db->query("SELECT COUNT(*) FROM recipes WHERE created_at >= datetime('now', '-7 days')")->fetchColumn();

// 레시피 목록 가져오기
$recipes = $db->query("
    SELECT * FROM recipes ORDER BY created_at DESC
")->fetchAll(PDO::FETCH_ASSOC);

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 class="recipe-header" style="text-align: center; margin-bottom: 40px;">
            <h1 style="font-size: 2.5rem; font-weight: 700; color: var(--m-text); margin-bottom: 8px;">🍳 나만의 레시피 북</h1>
            <p style="font-size: 1.1rem; color: var(--m-text-muted);">맛있는 요리를 기록하고, 재료로 검색하세요</p>
        </div>

        <div class="dashboard-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-bottom: 40px;">
            <div class="stat-card" style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
                <div style="font-size: 2rem; margin-bottom: 8px;">📚</div>
                <div style="font-size: 2rem; font-weight: 700; color: var(--m-text);"><?= $total ?></div>
                <div style="font-size: 0.9rem; color: var(--m-text-muted);">전체 레시피</div>
            </div>
            <div class="stat-card" style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
                <div style="font-size: 2rem; margin-bottom: 8px;">⭐</div>
                <div style="font-size: 2rem; font-weight: 700; color: var(--m-text);"><?= $favorites ?></div>
                <div style="font-size: 0.9rem; color: var(--m-text-muted);">즐겨찾기</div>
            </div>
            <div class="stat-card" style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
                <div style="font-size: 2rem; margin-bottom: 8px;">🔥</div>
                <div style="font-size: 2rem; font-weight: 700; color: var(--m-text);"><?= $recent ?></div>
                <div style="font-size: 0.9rem; color: var(--m-text-muted);">최근 7일</div>
            </div>
        </div>

        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px;">
            <h2 style="font-size: 1.5rem; font-weight: 700; color: var(--m-text);">레시피 목록</h2>
            <a href="/recipes/add" style="padding: 10px 20px; background: #FF6B35; color: white; border-radius: 8px; text-decoration: none; font-weight: 600;">+ 새 레시피</a>
        </div>

        <?php if (empty($recipes)): ?>
        <div style="text-align: center; padding: 60px 20px; background: var(--m-surface); border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
            <div style="font-size: 4rem; margin-bottom: 16px;">🍽️</div>
            <p style="font-size: 1.2rem; color: var(--m-text-muted); margin-bottom: 24px;">아직 등록된 레시피가 없습니다</p>
            <a href="/recipes/add" style="display: inline-block; background: #FF6B35; color: white; padding: 12px 32px; border-radius: 8px; text-decoration: none; font-weight: 600;">첫 레시피 추가하기</a>
        </div>
        <?php else: ?>
        <div class="recipe-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px;">
            <?php foreach ($recipes as $recipe): ?>
            <a href="/recipes/view?id=<?= $recipe['id'] ?>" style="text-decoration: none; color: inherit;">
                <div class="recipe-card" style="background: var(--m-surface); border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); overflow: hidden; transition: transform 0.2s;" onmouseover="this.style.transform='translateY(-4px)'" onmouseout="this.style.transform='translateY(0)'">
                    <?php if ($recipe['image']): ?>
                    <img src="<?= G5_DATA_URL ?>/modules/recipes/<?= htmlspecialchars($recipe['image']) ?>" alt="<?= htmlspecialchars($recipe['title']) ?>" style="width: 100%; height: 200px; object-fit: cover;">
                    <?php else: ?>
                    <div style="width: 100%; height: 200px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; font-size: 4rem;">🍳</div>
                    <?php endif; ?>
                    
                    <div style="padding: 20px;">
                        <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 12px;">
                            <h3 style="font-size: 1.25rem; font-weight: 700; color: var(--m-text); margin: 0;"><?= htmlspecialchars($recipe['title']) ?></h3>
                            <?php if ($recipe['favorite']): ?>
                            <span style="font-size: 1.2rem;">⭐</span>
                            <?php endif; ?>
                        </div>
                        
                        <?php if ($recipe['description']): ?>
                        <p style="color: var(--m-text-muted); font-size: 0.9rem; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;">
                            <?= htmlspecialchars($recipe['description']) ?>
                        </p>
                        <?php endif; ?>
                        
                        <div style="display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px;">
                            <?php if ($recipe['cooking_time']): ?>
                            <span style="font-size: 0.85rem; color: var(--m-text-muted);">⏱️ <?= $recipe['cooking_time'] ?>분</span>
                            <?php endif; ?>
                            <?php if ($recipe['difficulty']): ?>
                            <span style="font-size: 0.85rem; color: var(--m-text-muted);">
                                <?php 
                                $diff_emoji = ['easy' => '😊', 'medium' => '🤔', 'hard' => '😰'];
                                echo $diff_emoji[$recipe['difficulty']] ?? '';
                                ?>
                                <?= ['easy' => '쉬움', 'medium' => '보통', 'hard' => '어려움'][$recipe['difficulty']] ?? '' ?>
                            </span>
                            <?php endif; ?>
                            <?php if ($recipe['servings']): ?>
                            <span style="font-size: 0.85rem; color: var(--m-text-muted);">👥 <?= $recipe['servings'] ?>인분</span>
                            <?php endif; ?>
                        </div>
                        
                        <?php if ($recipe['tags']): ?>
                        <div style="display: flex; gap: 6px; flex-wrap: wrap;">
                            <?php foreach (explode(',', $recipe['tags']) as $tag): ?>
                            <span style="font-size: 0.8rem; padding: 4px 10px; background: #FF6B35; color: white; border-radius: 12px;"><?= htmlspecialchars(trim($tag)) ?></span>
                            <?php endforeach; ?>
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
            </a>
            <?php endforeach; ?>
        </div>
        <?php endif; ?>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<?php include_once('./tail.sub.php'); ?>
```

## 2) 확인

- `/recipes`에 접속하면 등록된 레시피가 카드 형태로 표시됩니다
- 통계 카드에 실제 데이터가 표시됩니다
- 카드에 이미지(있으면), 제목, 설명, 조리시간, 난이도, 분량, 태그가 표시됩니다
- 카드 호버 시 살짝 올라가는 애니메이션이 적용됩니다

**목표:** 레시피 상세 페이지 구현 (재료, 조리 단계, 메모, 즐겨찾기)

---

## 1) 폴더 생성

`app/modules/recipes/view/index.php` 파일을 만들어주세요. 이 파일은 `/recipes/view` URL로 자동 매핑됩니다.

## 2) 레시피 상세 페이지 구현

아래 코드로 페이지를 만들어주세요:

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

@mkdir(G5_DATA_PATH.'/modules', 0707, true);
@mkdir(G5_DATA_PATH.'/modules/recipes', 0707, true);
$db = new PDO('sqlite:'.G5_DATA_PATH.'/modules/recipes.sqlite');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$id = intval($_GET['id'] ?? 0);
if (!$id) {
    header('Location: /recipes');
    exit;
}

// AJAX 요청 처리
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    header('Content-Type: application/json');
    
    $action = $_POST['action'] ?? '';
    
    if ($action === 'toggle_favorite') {
        $stmt = $db->prepare("UPDATE recipes SET favorite = 1 - favorite WHERE id = ?");
        $stmt->execute([$id]);
        $new_state = $db->query("SELECT favorite FROM recipes WHERE id = $id")->fetchColumn();
        echo json_encode(['success' => true, 'favorite' => $new_state]);
        exit;
    }
    
    if ($action === 'add_note') {
        $content = trim($_POST['content'] ?? '');
        if ($content) {
            $stmt = $db->prepare("INSERT INTO notes (recipe_id, content) VALUES (?, ?)");
            $stmt->execute([$id, $content]);
            echo json_encode(['success' => true]);
        } else {
            echo json_encode(['success' => false, 'error' => '메모 내용을 입력하세요']);
        }
        exit;
    }
    
    if ($action === 'delete_note') {
        $note_id = intval($_POST['note_id'] ?? 0);
        $stmt = $db->prepare("DELETE FROM notes WHERE id = ? AND recipe_id = ?");
        $stmt->execute([$note_id, $id]);
        echo json_encode(['success' => true]);
        exit;
    }
}

// 레시피 정보
$stmt = $db->prepare("SELECT * FROM recipes WHERE id = ?");
$stmt->execute([$id]);
$recipe = $stmt->fetch(PDO::FETCH_ASSOC);

if (!$recipe) {
    header('Location: /recipes');
    exit;
}

// 재료
$stmt = $db->prepare("SELECT * FROM ingredients WHERE recipe_id = ? ORDER BY id");
$stmt->execute([$id]);
$ingredients = $stmt->fetchAll(PDO::FETCH_ASSOC);

// 조리 단계
$stmt = $db->prepare("SELECT * FROM steps WHERE recipe_id = ? ORDER BY step_number");
$stmt->execute([$id]);
$steps = $stmt->fetchAll(PDO::FETCH_ASSOC);

// 메모
$stmt = $db->prepare("SELECT * FROM notes WHERE recipe_id = ? ORDER BY created_at DESC");
$stmt->execute([$id]);
$notes = $stmt->fetchAll(PDO::FETCH_ASSOC);

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: 900px; margin: 0 auto;">
            <div style="margin-bottom: 24px;">
                <a href="/recipes" style="color: var(--m-text-muted); text-decoration: none;">← 목록으로</a>
            </div>
            
            <div style="background: var(--m-surface); border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); overflow: hidden; margin-bottom: 24px;">
                <?php if ($recipe['image']): ?>
                <img src="<?= G5_DATA_URL ?>/modules/recipes/<?= htmlspecialchars($recipe['image']) ?>" alt="<?= htmlspecialchars($recipe['title']) ?>" style="width: 100%; height: 400px; object-fit: cover;">
                <?php endif; ?>
                
                <div style="padding: 32px;">
                    <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 16px;">
                        <h1 style="font-size: 2rem; font-weight: 700; color: var(--m-text); margin: 0;"><?= htmlspecialchars($recipe['title']) ?></h1>
                        <button onclick="toggleFavorite()" id="favorite-btn" style="background: none; border: none; font-size: 2rem; cursor: pointer;">
                            <?= $recipe['favorite'] ? '⭐' : '☆' ?>
                        </button>
                    </div>
                    
                    <?php if ($recipe['description']): ?>
                    <p style="color: var(--m-text-muted); font-size: 1.1rem; margin-bottom: 20px;"><?= htmlspecialchars($recipe['description']) ?></p>
                    <?php endif; ?>
                    
                    <div style="display: flex; gap: 20px; flex-wrap: wrap;">
                        <?php if ($recipe['cooking_time']): ?>
                        <div style="display: flex; align-items: center; gap: 8px;">
                            <span style="font-size: 1.5rem;">⏱️</span>
                            <div>
                                <div style="font-size: 0.85rem; color: var(--m-text-muted);">조리시간</div>
                                <div style="font-weight: 600; color: var(--m-text);"><?= $recipe['cooking_time'] ?>분</div>
                            </div>
                        </div>
                        <?php endif; ?>
                        
                        <?php if ($recipe['difficulty']): ?>
                        <div style="display: flex; align-items: center; gap: 8px;">
                            <span style="font-size: 1.5rem;"><?= ['easy' => '😊', 'medium' => '🤔', 'hard' => '😰'][$recipe['difficulty']] ?? '' ?></span>
                            <div>
                                <div style="font-size: 0.85rem; color: var(--m-text-muted);">난이도</div>
                                <div style="font-weight: 600; color: var(--m-text);"><?= ['easy' => '쉬움', 'medium' => '보통', 'hard' => '어려움'][$recipe['difficulty']] ?? '' ?></div>
                            </div>
                        </div>
                        <?php endif; ?>
                        
                        <?php if ($recipe['servings']): ?>
                        <div style="display: flex; align-items: center; gap: 8px;">
                            <span style="font-size: 1.5rem;">👥</span>
                            <div>
                                <div style="font-size: 0.85rem; color: var(--m-text-muted);">분량</div>
                                <div style="font-weight: 600; color: var(--m-text);"><?= $recipe['servings'] ?>인분</div>
                            </div>
                        </div>
                        <?php endif; ?>
                    </div>
                    
                    <?php if ($recipe['tags']): ?>
                    <div style="margin-top: 20px; display: flex; gap: 8px; flex-wrap: wrap;">
                        <?php foreach (explode(',', $recipe['tags']) as $tag): ?>
                        <span style="font-size: 0.9rem; padding: 6px 14px; background: #FF6B35; color: white; border-radius: 16px;"><?= htmlspecialchars(trim($tag)) ?></span>
                        <?php endforeach; ?>
                    </div>
                    <?php endif; ?>
                </div>
            </div>
            
            <?php if (!empty($ingredients)): ?>
            <div style="background: var(--m-surface); border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); padding: 32px; margin-bottom: 24px;">
                <h2 style="font-size: 1.5rem; font-weight: 700; color: var(--m-text); margin-bottom: 20px;">🥘 재료</h2>
                <div style="display: grid; gap: 12px;">
                    <?php foreach ($ingredients as $ing): ?>
                    <label style="display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--m-surface); border: 1px solid #ddd; border-radius: 8px; cursor: pointer;">
                        <input type="checkbox" style="width: 20px; height: 20px;">
                        <span style="flex: 1; color: var(--m-text); font-weight: 500;"><?= htmlspecialchars($ing['name']) ?></span>
                        <?php if ($ing['quantity'] || $ing['unit']): ?>
                        <span style="color: var(--m-text-muted);"><?= htmlspecialchars($ing['quantity']) ?> <?= htmlspecialchars($ing['unit']) ?></span>
                        <?php endif; ?>
                    </label>
                    <?php endforeach; ?>
                </div>
            </div>
            <?php endif; ?>
            
            <?php if (!empty($steps)): ?>
            <div style="background: var(--m-surface); border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); padding: 32px; margin-bottom: 24px;">
                <h2 style="font-size: 1.5rem; font-weight: 700; color: var(--m-text); margin-bottom: 20px;">👨‍🍳 조리 순서</h2>
                <div style="display: grid; gap: 20px;">
                    <?php foreach ($steps as $step): ?>
                    <div style="display: flex; gap: 16px;">
                        <div style="min-width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: #FF6B35; color: white; border-radius: 50%; font-weight: 700; font-size: 1.2rem;"><?= $step['step_number'] ?></div>
                        <p style="flex: 1; color: var(--m-text); line-height: 1.6; margin: 0; padding-top: 12px;"><?= nl2br(htmlspecialchars($step['description'])) ?></p>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
            <?php endif; ?>
            
            <div style="background: var(--m-surface); border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); padding: 32px;">
                <h2 style="font-size: 1.5rem; font-weight: 700; color: var(--m-text); margin-bottom: 20px;">📝 나만의 메모</h2>
                
                <form onsubmit="addNote(event)" style="margin-bottom: 20px;">
                    <textarea id="note-input" placeholder="조리 팁이나 개선 사항을 메모하세요" rows="3" style="width: 100%; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 1rem; background: var(--m-surface); color: var(--m-text); margin-bottom: 12px;"></textarea>
                    <button type="submit" style="padding: 10px 24px; background: #4CAF50; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer;">메모 추가</button>
                </form>
                
                <div id="notes-container">
                    <?php foreach ($notes as $note): ?>
                    <div class="note-item" data-id="<?= $note['id'] ?>" style="padding: 16px; background: var(--m-surface); border: 1px solid #ddd; border-radius: 8px; margin-bottom: 12px;">
                        <div style="display: flex; justify-content: space-between; align-items: start;">
                            <p style="flex: 1; color: var(--m-text); margin: 0;"><?= nl2br(htmlspecialchars($note['content'])) ?></p>
                            <button onclick="deleteNote(<?= $note['id'] ?>)" style="background: none; border: none; color: #f44336; cursor: pointer; font-size: 1.2rem;">×</button>
                        </div>
                        <div style="font-size: 0.85rem; color: var(--m-text-muted); margin-top: 8px;"><?= date('Y-m-d H:i', strtotime($note['created_at'])) ?></div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>

<script>
function toggleFavorite() {
    fetch('/recipes/view?id=<?= $id ?>', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: 'action=toggle_favorite'
    })
    .then(r => r.json())
    .then(data => {
        document.getElementById('favorite-btn').textContent = data.favorite ? '⭐' : '☆';
    });
}

function addNote(e) {
    e.preventDefault();
    const input = document.getElementById('note-input');
    const content = input.value.trim();
    
    if (!content) return;
    
    fetch('/recipes/view?id=<?= $id ?>', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: 'action=add_note&content=' + encodeURIComponent(content)
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            location.reload();
        }
    });
}

function deleteNote(id) {
    if (!confirm('메모를 삭제하시겠습니까?')) return;
    
    fetch('/recipes/view?id=<?= $id ?>', {
        method: 'POST',
        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
        body: 'action=delete_note&note_id=' + id
    })
    .then(r => r.json())
    .then(data => {
        if (data.success) {
            document.querySelector(`.note-item[data-id="${id}"]`).remove();
        }
    });
}
</script>

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

## 3) 확인

- 레시피 카드 클릭 시 상세 페이지로 이동합니다
- 이미지, 제목, 설명, 조리정보가 표시됩니다
- 재료 체크리스트가 표시되고 체크 가능합니다
- 조리 단계가 번호와 함께 표시됩니다
- 메모를 추가/삭제할 수 있습니다
- 즐겨찾기 버튼을 클릭하면 별 아이콘이 토글됩니다

**목표:** 재료 기반 검색 기능 구현 (쉼표로 구분된 재료 입력 → 해당 재료가 모두 포함된 레시피 필터링)

---

## 1) `app/modules/recipes/index.php` 수정

기존 파일의 레시피 목록 가져오기 부분을 아래 코드로 교체해주세요 (DB 연결 아래, `require_once(G5_THEME_PATH...` 위에):

```php
// 검색 처리
$search_ingredients = [];
if (!empty($_GET['search'])) {
    $search_ingredients = array_map('trim', explode(',', $_GET['search']));
    $search_ingredients = array_filter($search_ingredients);
}

// 레시피 목록 가져오기
if (!empty($search_ingredients)) {
    // 재료 기반 검색
    $placeholders = implode(',', array_fill(0, count($search_ingredients), '?'));
    $sql = "
        SELECT DISTINCT r.* 
        FROM recipes r
        INNER JOIN ingredients i ON r.id = i.recipe_id
        WHERE LOWER(i.name) IN ($placeholders)
        GROUP BY r.id
        HAVING COUNT(DISTINCT LOWER(i.name)) = ?
        ORDER BY r.created_at DESC
    ";
    $stmt = $db->prepare($sql);
    $params = array_map('strtolower', $search_ingredients);
    $params[] = count($search_ingredients);
    $stmt->execute($params);
    $recipes = $stmt->fetchAll(PDO::FETCH_ASSOC);
} else {
    $recipes = $db->query("
        SELECT * FROM recipes ORDER BY created_at DESC
    ")->fetchAll(PDO::FETCH_ASSOC);
}
```

## 2) 검색 UI 추가

`<div class="dashboard-grid">` 아래, `<div style="display: flex; justify-content: space-between...` 위에 아래 코드를 추가해주세요:

```php
<div style="margin-bottom: 32px;">
    <form method="get" style="max-width: 600px; margin: 0 auto;">
        <div style="position: relative;">
            <input type="text" name="search" value="<?= htmlspecialchars($_GET['search'] ?? '') ?>" placeholder="재료로 검색 (예: 계란, 양파, 대파)" style="width: 100%; padding: 16px 120px 16px 20px; border: 2px solid #FF6B35; border-radius: 50px; font-size: 1rem; background: var(--m-surface); color: var(--m-text);">
            <button type="submit" style="position: absolute; right: 8px; top: 50%; transform: translateY(-50%); padding: 10px 24px; background: #FF6B35; color: white; border: none; border-radius: 50px; font-weight: 600; cursor: pointer;">검색</button>
        </div>
        <?php if (!empty($search_ingredients)): ?>
        <div style="margin-top: 12px; text-align: center;">
            <span style="color: var(--m-text-muted);">검색 중: </span>
            <?php foreach ($search_ingredients as $ing): ?>
            <span style="display: inline-block; padding: 4px 12px; background: #FF6B35; color: white; border-radius: 12px; margin: 0 4px; font-size: 0.9rem;"><?= htmlspecialchars($ing) ?></span>
            <?php endforeach; ?>
            <a href="/recipes" style="margin-left: 12px; color: var(--m-text-muted); text-decoration: none;">× 검색 초기화</a>
        </div>
        <?php endif; ?>
    </form>
</div>
```

## 3) 검색 결과 없을 때 메시지 추가

`<?php if (empty($recipes)): ?>` 블록을 아래로 교체해주세요:

```php
<?php if (empty($recipes)): ?>
<div style="text-align: center; padding: 60px 20px; background: var(--m-surface); border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
    <div style="font-size: 4rem; margin-bottom: 16px;">🔍</div>
    <?php if (!empty($search_ingredients)): ?>
    <p style="font-size: 1.2rem; color: var(--m-text-muted); margin-bottom: 12px;">"<?= implode(', ', array_map('htmlspecialchars', $search_ingredients)) ?>"을(를) 모두 포함하는 레시피가 없습니다</p>
    <a href="/recipes" style="display: inline-block; background: #666; color: white; padding: 12px 32px; border-radius: 8px; text-decoration: none; font-weight: 600; margin-top: 12px;">전체 레시피 보기</a>
    <?php else: ?>
    <p style="font-size: 1.2rem; color: var(--m-text-muted); margin-bottom: 24px;">아직 등록된 레시피가 없습니다</p>
    <a href="/recipes/add" style="display: inline-block; background: #FF6B35; color: white; padding: 12px 32px; border-radius: 8px; text-decoration: none; font-weight: 600;">첫 레시피 추가하기</a>
    <?php endif; ?>
</div>
```

## 4) 확인

- 검색창에 "계란, 양파"처럼 쉼표로 구분된 재료를 입력하고 검색하면 두 재료가 모두 포함된 레시피만 표시됩니다
- 검색 중인 재료가 태그 형태로 표시됩니다
- 검색 결과가 없으면 안내 메시지가 표시됩니다
- "검색 초기화" 클릭 시 전체 목록으로 돌아갑니다

**목표:** 태그 필터링 & 난이도/조리시간 필터 추가 (URL 쿼리 파라미터 기반)

---

## 1) `app/modules/recipes/index.php` 수정

기존 레시피 목록 가져오기 코드를 아래로 교체해주세요:

```php
// 필터 처리
$search_ingredients = [];
if (!empty($_GET['search'])) {
    $search_ingredients = array_map('trim', explode(',', $_GET['search']));
    $search_ingredients = array_filter($search_ingredients);
}

$filter_tag = $_GET['tag'] ?? '';
$filter_difficulty = $_GET['difficulty'] ?? '';
$filter_time = $_GET['time'] ?? '';

// 레시피 목록 가져오기
$where_conditions = [];
$params = [];

if (!empty($search_ingredients)) {
    // 재료 기반 검색 (모든 재료 포함)
    $placeholders = implode(',', array_fill(0, count($search_ingredients), '?'));
    $where_conditions[] = "
        id IN (
            SELECT recipe_id FROM ingredients 
            WHERE LOWER(name) IN ($placeholders)
            GROUP BY recipe_id
            HAVING COUNT(DISTINCT LOWER(name)) = ?
        )
    ";
    $params = array_merge($params, array_map('strtolower', $search_ingredients));
    $params[] = count($search_ingredients);
}

if ($filter_tag) {
    $where_conditions[] = "tags LIKE ?";
    $params[] = '%'.$filter_tag.'%';
}

if ($filter_difficulty) {
    $where_conditions[] = "difficulty = ?";
    $params[] = $filter_difficulty;
}

if ($filter_time) {
    if ($filter_time === '30') {
        $where_conditions[] = "cooking_time <= 30";
    } elseif ($filter_time === '60') {
        $where_conditions[] = "cooking_time > 30 AND cooking_time <= 60";
    } else {
        $where_conditions[] = "cooking_time > 60";
    }
}

$sql = "SELECT * FROM recipes";
if (!empty($where_conditions)) {
    $sql .= " WHERE " . implode(' AND ', $where_conditions);
}
$sql .= " ORDER BY created_at DESC";

$stmt = $db->prepare($sql);
$stmt->execute($params);
$recipes = $stmt->fetchAll(PDO::FETCH_ASSOC);

// 전체 태그 목록 (필터 UI용)
$all_tags = [];
$tag_rows = $db->query("SELECT DISTINCT tags FROM recipes WHERE tags IS NOT NULL AND tags != ''")->fetchAll(PDO::FETCH_COLUMN);
foreach ($tag_rows as $tags_str) {
    foreach (explode(',', $tags_str) as $tag) {
        $tag = trim($tag);
        if ($tag && !in_array($tag, $all_tags)) {
            $all_tags[] = $tag;
        }
    }
}
sort($all_tags);
```

## 2) 필터 UI 추가

검색창 아래, `<div style="display: flex; justify-content: space-between...` 위에 아래 코드를 추가해주세요:

```php
<?php if (!empty($all_tags) || !empty($recipes)): ?>
<div style="margin-bottom: 24px; padding: 20px; background: var(--m-surface); border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
    <div style="display: grid; gap: 20px;">
        <?php if (!empty($all_tags)): ?>
        <div>
            <div style="font-weight: 600; color: var(--m-text); margin-bottom: 8px;">🏷️ 태그</div>
            <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                <a href="?<?= http_build_query(array_merge($_GET, ['tag' => ''])) ?>" style="padding: 6px 14px; border-radius: 16px; text-decoration: none; <?= empty($filter_tag) ? 'background: #FF6B35; color: white;' : 'background: #eee; color: #666;' ?>">전체</a>
                <?php foreach ($all_tags as $tag): ?>
                <a href="?<?= http_build_query(array_merge($_GET, ['tag' => $tag])) ?>" style="padding: 6px 14px; border-radius: 16px; text-decoration: none; <?= $filter_tag === $tag ? 'background: #FF6B35; color: white;' : 'background: #eee; color: #666;' ?>"><?= htmlspecialchars($tag) ?></a>
                <?php endforeach; ?>
            </div>
        </div>
        <?php endif; ?>
        
        <div>
            <div style="font-weight: 600; color: var(--m-text); margin-bottom: 8px;">😊 난이도</div>
            <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                <a href="?<?= http_build_query(array_merge($_GET, ['difficulty' => ''])) ?>" style="padding: 6px 14px; border-radius: 16px; text-decoration: none; <?= empty($filter_difficulty) ? 'background: #4CAF50; color: white;' : 'background: #eee; color: #666;' ?>">전체</a>
                <a href="?<?= http_build_query(array_merge($_GET, ['difficulty' => 'easy'])) ?>" style="padding: 6px 14px; border-radius: 16px; text-decoration: none; <?= $filter_difficulty === 'easy' ? 'background: #4CAF50; color: white;' : 'background: #eee; color: #666;' ?>">😊 쉬움</a>
                <a href="?<?= http_build_query(array_merge($_GET, ['difficulty' => 'medium'])) ?>" style="padding: 6px 14px; border-radius: 16px; text-decoration: none; <?= $filter_difficulty === 'medium' ? 'background: #4CAF50; color: white;' : 'background: #eee; color: #666;' ?>">🤔 보통</a>
                <a href="?<?= http_build_query(array_merge($_GET, ['difficulty' => 'hard'])) ?>" style="padding: 6px 14px; border-radius: 16px; text-decoration: none; <?= $filter_difficulty === 'hard' ? 'background: #4CAF50; color: white;' : 'background: #eee; color: #666;' ?>">😰 어려움</a>
            </div>
        </div>
        
        <div>
            <div style="font-weight: 600; color: var(--m-text); margin-bottom: 8px;">⏱️ 조리시간</div>
            <div style="display: flex; gap: 8px; flex-wrap: wrap;">
                <a href="?<?= http_build_query(array_merge($_GET, ['time' => ''])) ?>" style="padding: 6px 14px; border-radius: 16px; text-decoration: none; <?= empty($filter_time) ? 'background: #2196F3; color: white;' : 'background: #eee; color: #666;' ?>">전체</a>
                <a href="?<?= http_build_query(array_merge($_GET, ['time' => '30'])) ?>" style="padding: 6px 14px; border-radius: 16px; text-decoration: none; <?= $filter_time === '30' ? 'background: #2196F3; color: white;' : 'background: #eee; color: #666;' ?>">30분 이하</a>
                <a href="?<?= http_build_query(array_merge($_GET, ['time' => '60'])) ?>" style="padding: 6px 14px; border-radius: 16px; text-decoration: none; <?= $filter_time === '60' ? 'background: #2196F3; color: white;' : 'background: #eee; color: #666;' ?>">30~60분</a>
                <a href="?<?= http_build_query(array_merge($_GET, ['time' => '61'])) ?>" style="padding: 6px 14px; border-radius: 16px; text-decoration: none; <?= $filter_time === '61' ? 'background: #2196F3; color: white;' : 'background: #eee; color: #666;' ?>">60분 이상</a>
            </div>
        </div>
    </div>
    
    <?php if ($filter_tag || $filter_difficulty || $filter_time || !empty($search_ingredients)): ?>
    <div style="margin-top: 16px; padding-top: 16px; border-top: 1px solid #ddd;">
        <a href="/recipes" style="color: var(--m-text-muted); text-decoration: none; font-size: 0.9rem;">🔄 모든 필터 초기화</a>
    </div>
    <?php endif; ?>
</div>
<?php endif; ?>
```

## 3) 확인

- 태그 필터를 클릭하면 해당 태그가 포함된 레시피만 표시됩니다
- 난이도 필터를 클릭하면 해당 난이도의 레시피만 표시됩니다
- 조리시간 필터를 클릭하면 해당 시간대의 레시피만 표시됩니다
- 여러 필터를 동시에 적용할 수 있습니다 (AND 조건)
- "모든 필터 초기화" 클릭 시 전체 목록으로 돌아갑니다
- 활성화된 필터는 색상이 변경됩니다