🎯 g5se 나의 버킷리스트 보드 - 목표 시각화 & 달성 기록

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

이번 단계에서는 **버킷리스트 보드의 기본 골격**을 만듭니다.

1. `app/modules/bucket-list/index.php` 파일을 생성하세요.

2. 파일 최상단에 다음 코드를 작성하세요:
```php
<?php
include_once('./_common.php');

// 로그인 체크
if (!$is_member) {
    alert('로그인이 필요한 서비스입니다.', G5_BBS_URL.'/login.php?url='.urlencode('/bucket-list'));
}

// DB 연결
@mkdir(G5_DATA_PATH.'/modules', 0707, true);
$db_path = G5_DATA_PATH.'/modules/bucket-list.sqlite';
$pdo = new PDO('sqlite:'.$db_path);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 테이블 생성 (첫 접근 시)
$pdo->exec("
CREATE TABLE IF NOT EXISTS buckets (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  mb_id TEXT NOT NULL,
  title TEXT NOT NULL,
  description TEXT,
  category TEXT NOT NULL,
  status TEXT DEFAULT 'planned',
  target_date TEXT,
  completed_at TEXT,
  display_order INTEGER DEFAULT 0,
  created_at TEXT DEFAULT CURRENT_TIMESTAMP
)");

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: 1200px; margin: 0 auto;">
            <header style="margin-bottom: 32px;">
                <h1 style="font-size: 28px; font-weight: 700; color: var(--m-text); margin-bottom: 8px;">🎯 나의 버킷리스트</h1>
                <p style="color: var(--m-text-muted); font-size: 15px;">인생 목표를 시각화하고 달성 여정을 기록하세요</p>
            </header>

            <!-- 카테고리 탭 -->
            <div style="display: flex; gap: 8px; margin-bottom: 24px; flex-wrap: wrap;">
                <button class="cat-tab active" data-cat="all" style="padding: 8px 16px; border: none; border-radius: var(--m-radius-lg); background: var(--m-primary); color: white; cursor: pointer; font-weight: 600;">전체</button>
                <button class="cat-tab" data-cat="travel" style="padding: 8px 16px; border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); background: transparent; color: var(--m-text); cursor: pointer;">✈️ 여행</button>
                <button class="cat-tab" data-cat="learning" style="padding: 8px 16px; border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); background: transparent; color: var(--m-text); cursor: pointer;">📚 학습</button>
                <button class="cat-tab" data-cat="health" style="padding: 8px 16px; border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); background: transparent; color: var(--m-text); cursor: pointer;">💪 건강</button>
                <button class="cat-tab" data-cat="career" style="padding: 8px 16px; border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); background: transparent; color: var(--m-text); cursor: pointer;">💼 경력</button>
                <button class="cat-tab" data-cat="hobby" style="padding: 8px 16px; border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); background: transparent; color: var(--m-text); cursor: pointer;">🎨 취미</button>
                <button class="cat-tab" data-cat="other" style="padding: 8px 16px; border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); background: transparent; color: var(--m-text); cursor: pointer;">🔖 기타</button>
            </div>

            <!-- 통계 영역 (다음 단계에서 구현) -->
            <div id="stats-area" style="margin-bottom: 32px;"></div>

            <!-- 버킷리스트 그리드 -->
            <div id="bucket-grid" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;">
                <!-- 카드들이 여기 렌더링됨 -->
            </div>

            <!-- 새 버킷리스트 추가 버튼 -->
            <button id="add-btn" style="position: fixed; bottom: 32px; right: 32px; width: 60px; height: 60px; border-radius: 50%; border: none; background: var(--m-primary); color: white; font-size: 28px; cursor: pointer; box-shadow: var(--m-shadow); z-index: 100;">+</button>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>

<script>
// 카테고리 탭 전환 로직
document.querySelectorAll('.cat-tab').forEach(tab => {
    tab.addEventListener('click', () => {
        document.querySelectorAll('.cat-tab').forEach(t => {
            t.classList.remove('active');
            t.style.background = 'transparent';
            t.style.color = 'var(--m-text)';
            t.style.border = '1px solid var(--m-border)';
        });
        tab.classList.add('active');
        tab.style.background = 'var(--m-primary)';
        tab.style.color = 'white';
        tab.style.border = 'none';
        
        // 필터링 로직 (다음 단계에서 구현)
        const cat = tab.dataset.cat;
        console.log('Selected category:', cat);
    });
});

// 추가 버튼 클릭 (다음 단계에서 모달 구현)
document.getElementById('add-btn').addEventListener('click', () => {
    alert('다음 단계에서 추가 모달을 구현합니다');
});
</script>

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

3. 브라우저에서 `/bucket-list`에 접속하여 기본 레이아웃이 표시되는지 확인하세요.
   - modern shell의 nav/footer가 보여야 함
   - 카테고리 탭 클릭 시 스타일 변경 확인
   - 우측 하단 + 버튼 확인

이번 단계에서는 **버킷리스트 추가 모달 & CRUD API**를 구현합니다.

1. `app/modules/bucket-list/index.php`의 `<?php` 블록 안에 AJAX 분기를 추가하세요 (DB 연결 코드 바로 아래):
```php
// AJAX 처리
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    header('Content-Type: application/json');
    $action = $_POST['action'] ?? '';
    
    if ($action === 'create') {
        $title = trim($_POST['title'] ?? '');
        $description = trim($_POST['description'] ?? '');
        $category = $_POST['category'] ?? 'other';
        $target_date = $_POST['target_date'] ?? null;
        
        if (empty($title)) {
            echo json_encode(['success' => false, 'message' => '제목을 입력하세요']);
            exit;
        }
        
        $stmt = $pdo->prepare("
            INSERT INTO buckets (mb_id, title, description, category, target_date)
            VALUES (?, ?, ?, ?, ?)
        ");
        $stmt->execute([$member['mb_id'], $title, $description, $category, $target_date]);
        
        echo json_encode(['success' => true, 'id' => $pdo->lastInsertId()]);
        exit;
    }
    
    if ($action === 'list') {
        $category = $_POST['category'] ?? 'all';
        $sql = "SELECT * FROM buckets WHERE mb_id = ?";
        $params = [$member['mb_id']];
        
        if ($category !== 'all') {
            $sql .= " AND category = ?";
            $params[] = $category;
        }
        
        $sql .= " ORDER BY display_order ASC, created_at DESC";
        $stmt = $pdo->prepare($sql);
        $stmt->execute($params);
        $buckets = $stmt->fetchAll(PDO::FETCH_ASSOC);
        
        echo json_encode(['success' => true, 'buckets' => $buckets]);
        exit;
    }
    
    echo json_encode(['success' => false, 'message' => '잘못된 요청']);
    exit;
}
```

2. `<div id="bucket-grid">` 바로 위에 모달 HTML을 추가하세요:
```html
<!-- 추가/수정 모달 -->
<div id="modal" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center;">
    <div style="background: var(--m-surface); border-radius: var(--m-radius-lg); padding: 32px; width: 90%; max-width: 500px; box-shadow: var(--m-shadow);">
        <h2 style="font-size: 22px; font-weight: 700; color: var(--m-text); margin-bottom: 24px;">새 버킷리스트 추가</h2>
        
        <form id="bucket-form">
            <div style="margin-bottom: 16px;">
                <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 var(--m-border); border-radius: var(--m-radius-lg); background: var(--m-surface); color: var(--m-text);">
            </div>
            
            <div style="margin-bottom: 16px;">
                <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 var(--m-border); border-radius: var(--m-radius-lg); background: var(--m-surface); color: var(--m-text); resize: vertical;"></textarea>
            </div>
            
            <div style="margin-bottom: 16px;">
                <label style="display: block; font-weight: 600; color: var(--m-text); margin-bottom: 8px;">카테고리</label>
                <select name="category" style="width: 100%; padding: 12px; border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); background: var(--m-surface); color: var(--m-text);">
                    <option value="travel">✈️ 여행</option>
                    <option value="learning">📚 학습</option>
                    <option value="health">💪 건강</option>
                    <option value="career">💼 경력</option>
                    <option value="hobby">🎨 취미</option>
                    <option value="other">🔖 기타</option>
                </select>
            </div>
            
            <div style="margin-bottom: 24px;">
                <label style="display: block; font-weight: 600; color: var(--m-text); margin-bottom: 8px;">목표 날짜</label>
                <input type="date" name="target_date" style="width: 100%; padding: 12px; border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); background: var(--m-surface); color: var(--m-text);">
            </div>
            
            <div style="display: flex; gap: 12px; justify-content: flex-end;">
                <button type="button" id="cancel-btn" style="padding: 12px 24px; border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); background: transparent; color: var(--m-text); cursor: pointer;">취소</button>
                <button type="submit" style="padding: 12px 24px; border: none; border-radius: var(--m-radius-lg); background: var(--m-primary); color: white; cursor: pointer; font-weight: 600;">추가하기</button>
            </div>
        </form>
    </div>
</div>
```

3. `<script>` 블록을 다음으로 교체하세요:
```javascript
const modal = document.getElementById('modal');
const form = document.getElementById('bucket-form');
const grid = document.getElementById('bucket-grid');
let currentCategory = 'all';

// 모달 열기/닫기
document.getElementById('add-btn').addEventListener('click', () => {
    modal.style.display = 'flex';
});

document.getElementById('cancel-btn').addEventListener('click', () => {
    modal.style.display = 'none';
    form.reset();
});

modal.addEventListener('click', (e) => {
    if (e.target === modal) {
        modal.style.display = 'none';
        form.reset();
    }
});

// 버킷리스트 추가
form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData(form);
    formData.append('action', 'create');
    
    const res = await fetch('', {
        method: 'POST',
        body: formData
    });
    const data = await res.json();
    
    if (data.success) {
        modal.style.display = 'none';
        form.reset();
        loadBuckets();
    } else {
        alert(data.message);
    }
});

// 버킷리스트 로드
async function loadBuckets() {
    const formData = new FormData();
    formData.append('action', 'list');
    formData.append('category', currentCategory);
    
    const res = await fetch('', {
        method: 'POST',
        body: formData
    });
    const data = await res.json();
    
    if (data.success) {
        renderBuckets(data.buckets);
    }
}

// 버킷리스트 렌더링
function renderBuckets(buckets) {
    if (buckets.length === 0) {
        grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: var(--m-text-muted); padding: 48px 0;">아직 버킷리스트가 없습니다. + 버튼을 눌러 추가해보세요!</p>';
        return;
    }
    
    const statusColors = {
        planned: '#6b7280',
        progress: '#3b82f6',
        done: '#10b981',
        paused: '#f59e0b'
    };
    
    const statusLabels = {
        planned: '계획중',
        progress: '진행중',
        done: '완료',
        paused: '보류'
    };
    
    const categoryIcons = {
        travel: '✈️',
        learning: '📚',
        health: '💪',
        career: '💼',
        hobby: '🎨',
        other: '🔖'
    };
    
    grid.innerHTML = buckets.map(b => `
        <div class="bucket-card" style="background: var(--m-surface); border-radius: var(--m-radius-lg); padding: 20px; box-shadow: var(--m-shadow); transition: transform 0.2s; cursor: pointer;">
            <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 12px;">
                <span style="font-size: 24px;">${categoryIcons[b.category]}</span>
                <span style="padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; color: white; background: ${statusColors[b.status]};">${statusLabels[b.status]}</span>
            </div>
            <h3 style="font-size: 18px; font-weight: 700; color: var(--m-text); margin-bottom: 8px; ${b.status === 'done' ? 'text-decoration: line-through; opacity: 0.7;' : ''}">${htmlspecialchars(b.title)}</h3>
            ${b.description ? `<p style="font-size: 14px; color: var(--m-text-muted); margin-bottom: 12px;">${htmlspecialchars(b.description)}</p>` : ''}
            ${b.target_date ? `<p style="font-size: 13px; color: var(--m-text-muted);">🎯 목표: ${b.target_date}</p>` : ''}
        </div>
    `).join('');
    
    // 호버 효과
    document.querySelectorAll('.bucket-card').forEach(card => {
        card.addEventListener('mouseenter', () => {
            card.style.transform = 'translateY(-4px)';
        });
        card.addEventListener('mouseleave', () => {
            card.style.transform = 'translateY(0)';
        });
    });
}

function htmlspecialchars(str) {
    const div = document.createElement('div');
    div.textContent = str;
    return div.innerHTML;
}

// 카테고리 탭 전환
document.querySelectorAll('.cat-tab').forEach(tab => {
    tab.addEventListener('click', () => {
        document.querySelectorAll('.cat-tab').forEach(t => {
            t.classList.remove('active');
            t.style.background = 'transparent';
            t.style.color = 'var(--m-text)';
            t.style.border = '1px solid var(--m-border)';
        });
        tab.classList.add('active');
        tab.style.background = 'var(--m-primary)';
        tab.style.color = 'white';
        tab.style.border = 'none';
        
        currentCategory = tab.dataset.cat;
        loadBuckets();
    });
});

// 초기 로드
loadBuckets();
```

4. 브라우저에서 테스트:
   - + 버튼 클릭 → 모달 열림
   - 버킷리스트 추가 → 카드 표시
   - 카테고리 탭 전환 → 필터링 동작

이번 단계에서는 **상태 변경 & 통계 표시**를 구현합니다.

1. `app/modules/bucket-list/index.php`의 AJAX 분기에 상태 변경 액션을 추가하세요 (`if ($action === 'list')` 블록 아래):
```php
if ($action === 'update_status') {
    $id = (int)$_POST['id'];
    $status = $_POST['status'] ?? 'planned';
    
    // 완료 처리 시 completed_at 기록
    $completed_at = ($status === 'done') ? date('Y-m-d') : null;
    
    $stmt = $pdo->prepare("
        UPDATE buckets SET status = ?, completed_at = ? WHERE id = ? AND mb_id = ?
    ");
    $stmt->execute([$status, $completed_at, $id, $member['mb_id']]);
    
    echo json_encode(['success' => true, 'completed' => ($status === 'done')]);
    exit;
}

if ($action === 'stats') {
    $stmt = $pdo->prepare("
        SELECT category, status, COUNT(*) as count
        FROM buckets
        WHERE mb_id = ?
        GROUP BY category, status
    ");
    $stmt->execute([$member['mb_id']]);
    $rows = $stmt->fetchAll(PDO::FETCH_ASSOC);
    
    $stats = [];
    foreach ($rows as $row) {
        if (!isset($stats[$row['category']])) {
            $stats[$row['category']] = ['total' => 0, 'done' => 0];
        }
        $stats[$row['category']]['total'] += $row['count'];
        if ($row['status'] === 'done') {
            $stats[$row['category']]['done'] += $row['count'];
        }
    }
    
    echo json_encode(['success' => true, 'stats' => $stats]);
    exit;
}
```

2. `<script>` 블록의 `renderBuckets` 함수를 수정하여 카드에 상태 변경 드롭다운을 추가하세요:
```javascript
function renderBuckets(buckets) {
    if (buckets.length === 0) {
        grid.innerHTML = '<p style="grid-column: 1/-1; text-align: center; color: var(--m-text-muted); padding: 48px 0;">아직 버킷리스트가 없습니다. + 버튼을 눌러 추가해보세요!</p>';
        return;
    }
    
    const statusColors = {
        planned: '#6b7280',
        progress: '#3b82f6',
        done: '#10b981',
        paused: '#f59e0b'
    };
    
    const statusLabels = {
        planned: '계획중',
        progress: '진행중',
        done: '완료',
        paused: '보류'
    };
    
    const categoryIcons = {
        travel: '✈️',
        learning: '📚',
        health: '💪',
        career: '💼',
        hobby: '🎨',
        other: '🔖'
    };
    
    grid.innerHTML = buckets.map(b => `
        <div class="bucket-card" data-id="${b.id}" style="background: var(--m-surface); border-radius: var(--m-radius-lg); padding: 20px; box-shadow: var(--m-shadow); transition: transform 0.2s;">
            <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 12px;">
                <span style="font-size: 24px;">${categoryIcons[b.category]}</span>
                <select class="status-select" data-id="${b.id}" style="padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; color: white; background: ${statusColors[b.status]}; border: none; cursor: pointer;">
                    <option value="planned" ${b.status === 'planned' ? 'selected' : ''}>계획중</option>
                    <option value="progress" ${b.status === 'progress' ? 'selected' : ''}>진행중</option>
                    <option value="done" ${b.status === 'done' ? 'selected' : ''}>완료</option>
                    <option value="paused" ${b.status === 'paused' ? 'selected' : ''}>보류</option>
                </select>
            </div>
            <h3 style="font-size: 18px; font-weight: 700; color: var(--m-text); margin-bottom: 8px; ${b.status === 'done' ? 'text-decoration: line-through; opacity: 0.7;' : ''}">${htmlspecialchars(b.title)}</h3>
            ${b.description ? `<p style="font-size: 14px; color: var(--m-text-muted); margin-bottom: 12px;">${htmlspecialchars(b.description)}</p>` : ''}
            ${b.target_date ? `<p style="font-size: 13px; color: var(--m-text-muted);">🎯 목표: ${b.target_date}</p>` : ''}
            ${b.completed_at ? `<p style="font-size: 13px; color: #10b981; font-weight: 600; margin-top: 8px;">✅ 달성: ${b.completed_at}</p>` : ''}
        </div>
    `).join('');
    
    // 호버 효과
    document.querySelectorAll('.bucket-card').forEach(card => {
        card.addEventListener('mouseenter', () => {
            card.style.transform = 'translateY(-4px)';
        });
        card.addEventListener('mouseleave', () => {
            card.style.transform = 'translateY(0)';
        });
    });
    
    // 상태 변경 이벤트
    document.querySelectorAll('.status-select').forEach(select => {
        select.addEventListener('change', async (e) => {
            const id = e.target.dataset.id;
            const status = e.target.value;
            
            const formData = new FormData();
            formData.append('action', 'update_status');
            formData.append('id', id);
            formData.append('status', status);
            
            const res = await fetch('', {
                method: 'POST',
                body: formData
            });
            const data = await res.json();
            
            if (data.success) {
                if (data.completed) {
                    showConfetti();
                }
                loadBuckets();
                loadStats();
            }
        });
    });
}
```

3. 통계 로드 & 렌더링 함수를 추가하세요 (`<script>` 블록 끝에):
```javascript
// 통계 로드
async function loadStats() {
    const formData = new FormData();
    formData.append('action', 'stats');
    
    const res = await fetch('', {
        method: 'POST',
        body: formData
    });
    const data = await res.json();
    
    if (data.success) {
        renderStats(data.stats);
    }
}

// 통계 렌더링
function renderStats(stats) {
    const categories = ['travel', 'learning', 'health', 'career', 'hobby', 'other'];
    const categoryLabels = {
        travel: '✈️ 여행',
        learning: '📚 학습',
        health: '💪 건강',
        career: '💼 경력',
        hobby: '🎨 취미',
        other: '🔖 기타'
    };
    
    let totalCount = 0;
    let totalDone = 0;
    
    const statsHTML = categories.map(cat => {
        const s = stats[cat] || {total: 0, done: 0};
        totalCount += s.total;
        totalDone += s.done;
        const percent = s.total > 0 ? Math.round((s.done / s.total) * 100) : 0;
        
        if (s.total === 0) return '';
        
        return `
            <div style="margin-bottom: 12px;">
                <div style="display: flex; justify-content: space-between; margin-bottom: 4px;">
                    <span style="font-size: 14px; color: var(--m-text);">${categoryLabels[cat]}</span>
                    <span style="font-size: 14px; color: var(--m-text-muted);">${s.done}/${s.total} (${percent}%)</span>
                </div>
                <div style="width: 100%; height: 8px; background: var(--m-border); border-radius: 4px; overflow: hidden;">
                    <div style="width: ${percent}%; height: 100%; background: var(--m-primary); transition: width 0.3s;"></div>
                </div>
            </div>
        `;
    }).join('');
    
    const overallPercent = totalCount > 0 ? Math.round((totalDone / totalCount) * 100) : 0;
    
    document.getElementById('stats-area').innerHTML = `
        <div style="background: var(--m-surface); border-radius: var(--m-radius-lg); padding: 24px; box-shadow: var(--m-shadow);">
            <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
                <h2 style="font-size: 18px; font-weight: 700; color: var(--m-text);">📊 달성 현황</h2>
                <div style="font-size: 32px; font-weight: 700; color: var(--m-primary);">${overallPercent}%</div>
            </div>
            ${statsHTML}
        </div>
    `;
}

// 축하 애니메이션 (간단한 알림으로 대체, 다음 단계에서 confetti 추가)
function showConfetti() {
    alert('🎉 축하합니다! 버킷리스트를 달성하셨습니다!');
}

// 초기 로드 수정
loadBuckets();
loadStats();
```

4. 브라우저에서 테스트:
   - 상단에 통계 영역 표시
   - 카드의 상태 드롭다운 변경 → DB 업데이트 & 재렌더링
   - 완료로 변경 시 달성 날짜 표시 & 알림

이번 단계에서는 **confetti 축하 애니메이션 & 삭제 기능**을 추가합니다.

1. `app/modules/bucket-list/index.php`의 `<head>` 섹션 (`_head.inc.php` 직후)에 canvas-confetti CDN을 추가하세요:
```php
<script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.9.2/dist/confetti.browser.min.js"></script>
```

2. AJAX 분기에 삭제 액션을 추가하세요 (`if ($action === 'stats')` 블록 아래):
```php
if ($action === 'delete') {
    $id = (int)$_POST['id'];
    
    $stmt = $pdo->prepare("DELETE FROM buckets WHERE id = ? AND mb_id = ?");
    $stmt->execute([$id, $member['mb_id']]);
    
    echo json_encode(['success' => true]);
    exit;
}
```

3. `renderBuckets` 함수의 카드 HTML에 삭제 버튼을 추가하세요 (상태 select 옆):
```javascript
<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 12px;">
    <span style="font-size: 24px;">${categoryIcons[b.category]}</span>
    <div style="display: flex; gap: 8px; align-items: center;">
        <select class="status-select" data-id="${b.id}" style="padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; color: white; background: ${statusColors[b.status]}; border: none; cursor: pointer;">
            <option value="planned" ${b.status === 'planned' ? 'selected' : ''}>계획중</option>
            <option value="progress" ${b.status === 'progress' ? 'selected' : ''}>진행중</option>
            <option value="done" ${b.status === 'done' ? 'selected' : ''}>완료</option>
            <option value="paused" ${b.status === 'paused' ? 'selected' : ''}>보류</option>
        </select>
        <button class="delete-btn" data-id="${b.id}" style="background: transparent; border: none; color: var(--m-text-muted); cursor: pointer; font-size: 18px; padding: 4px;" title="삭제">🗑️</button>
    </div>
</div>
```

4. 삭제 버튼 이벤트를 추가하세요 (상태 변경 이벤트 아래):
```javascript
// 삭제 이벤트
document.querySelectorAll('.delete-btn').forEach(btn => {
    btn.addEventListener('click', async (e) => {
        e.stopPropagation();
        
        if (!confirm('정말 삭제하시겠습니까?')) return;
        
        const id = e.target.dataset.id;
        const formData = new FormData();
        formData.append('action', 'delete');
        formData.append('id', id);
        
        const res = await fetch('', {
            method: 'POST',
            body: formData
        });
        const data = await res.json();
        
        if (data.success) {
            loadBuckets();
            loadStats();
        }
    });
});
```

5. `showConfetti` 함수를 canvas-confetti로 교체하세요:
```javascript
function showConfetti() {
    const duration = 3000;
    const end = Date.now() + duration;
    
    const colors = ['#3b82f6', '#10b981', '#f59e0b', '#ef4444', '#8b5cf6'];
    
    (function frame() {
        confetti({
            particleCount: 3,
            angle: 60,
            spread: 55,
            origin: { x: 0 },
            colors: colors
        });
        confetti({
            particleCount: 3,
            angle: 120,
            spread: 55,
            origin: { x: 1 },
            colors: colors
        });
        
        if (Date.now() < end) {
            requestAnimationFrame(frame);
        }
    })();
    
    // 축하 메시지 토스트
    const toast = document.createElement('div');
    toast.textContent = '🎉 축하합니다! 버킷리스트를 달성하셨습니다!';
    toast.style.cssText = `
        position: fixed;
        top: 20px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--m-primary);
        color: white;
        padding: 16px 32px;
        border-radius: var(--m-radius-lg);
        box-shadow: var(--m-shadow);
        z-index: 2000;
        font-weight: 600;
        animation: slideDown 0.3s ease;
    `;
    document.body.appendChild(toast);
    
    setTimeout(() => {
        toast.style.animation = 'slideUp 0.3s ease';
        setTimeout(() => toast.remove(), 300);
    }, 3000);
}
```

6. 애니메이션 keyframes를 추가하세요 (`<style>` 블록을 `</head>` 전에 추가):
```html
<style>
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(-20px);
    }
}
</style>
```

7. 브라우저에서 테스트:
   - 상태를 "완료"로 변경 → confetti 애니메이션 & 토스트 메시지
   - 삭제 버튼 클릭 → 확인 후 카드 제거

마지막 단계에서는 **타임라인 뷰 & 반응형 디자인 완성**을 구현합니다.

1. `app/modules/bucket-list/index.php`의 카테고리 탭 아래에 뷰 전환 토글을 추가하세요:
```html
<!-- 뷰 전환 토글 -->
<div style="display: flex; justify-content: flex-end; margin-bottom: 24px;">
    <div style="display: flex; gap: 4px; background: var(--m-surface); border: 1px solid var(--m-border); border-radius: var(--m-radius-lg); padding: 4px;">
        <button id="grid-view-btn" class="view-toggle active" style="padding: 8px 16px; border: none; border-radius: 8px; background: var(--m-primary); color: white; cursor: pointer; font-size: 14px;">📊 그리드</button>
        <button id="timeline-view-btn" class="view-toggle" style="padding: 8px 16px; border: none; border-radius: 8px; background: transparent; color: var(--m-text); cursor: pointer; font-size: 14px;">📅 타임라인</button>
    </div>
</div>
```

2. `<div id="bucket-grid">` 아래에 타임라인 영역을 추가하세요:
```html
<!-- 타임라인 뷰 -->
<div id="timeline-view" style="display: none; max-width: 800px; margin: 0 auto;">
    <!-- 타임라인 항목들이 여기 렌더링됨 -->
</div>
```

3. `<script>` 블록에 타임라인 렌더링 함수를 추가하세요:
```javascript
// 타임라인 렌더링
function renderTimeline(buckets) {
    const completed = buckets.filter(b => b.status === 'done').sort((a, b) => {
        return new Date(b.completed_at) - new Date(a.completed_at);
    });
    
    if (completed.length === 0) {
        document.getElementById('timeline-view').innerHTML = '<p style="text-align: center; color: var(--m-text-muted); padding: 48px 0;">아직 달성한 버킷리스트가 없습니다.</p>';
        return;
    }
    
    const categoryIcons = {
        travel: '✈️',
        learning: '📚',
        health: '💪',
        career: '💼',
        hobby: '🎨',
        other: '🔖'
    };
    
    document.getElementById('timeline-view').innerHTML = completed.map((b, i) => {
        const createdDate = new Date(b.created_at);
        const completedDate = new Date(b.completed_at);
        const daysTaken = Math.floor((completedDate - createdDate) / (1000 * 60 * 60 * 24));
        
        return `
            <div style="position: relative; padding-left: 40px; padding-bottom: 32px; ${i === completed.length - 1 ? '' : 'border-left: 2px solid var(--m-border);'}">
                <div style="position: absolute; left: -12px; top: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--m-primary); display: flex; align-items: center; justify-content: center; font-size: 12px;">✓</div>
                
                <div style="background: var(--m-surface); border-radius: var(--m-radius-lg); padding: 20px; box-shadow: var(--m-shadow);">
                    <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 12px;">
                        <div>
                            <span style="font-size: 20px; margin-right: 8px;">${categoryIcons[b.category]}</span>
                            <span style="font-size: 14px; font-weight: 600; color: var(--m-primary);">${b.completed_at}</span>
                        </div>
                        <span style="font-size: 13px; color: var(--m-text-muted);">📆 ${daysTaken}일 소요</span>
                    </div>
                    
                    <h3 style="font-size: 18px; font-weight: 700; color: var(--m-text); margin-bottom: 8px;">${htmlspecialchars(b.title)}</h3>
                    ${b.description ? `<p style="font-size: 14px; color: var(--m-text-muted);">${htmlspecialchars(b.description)}</p>` : ''}
                </div>
            </div>
        `;
    }).join('');
}
```

4. 뷰 전환 로직을 추가하세요:
```javascript
// 뷰 전환
let currentView = 'grid';

document.getElementById('grid-view-btn').addEventListener('click', () => {
    currentView = 'grid';
    document.getElementById('bucket-grid').style.display = 'grid';
    document.getElementById('timeline-view').style.display = 'none';
    
    document.querySelectorAll('.view-toggle').forEach(btn => {
        btn.style.background = 'transparent';
        btn.style.color = 'var(--m-text)';
    });
    document.getElementById('grid-view-btn').style.background = 'var(--m-primary)';
    document.getElementById('grid-view-btn').style.color = 'white';
});

document.getElementById('timeline-view-btn').addEventListener('click', () => {
    currentView = 'timeline';
    document.getElementById('bucket-grid').style.display = 'none';
    document.getElementById('timeline-view').style.display = 'block';
    
    document.querySelectorAll('.view-toggle').forEach(btn => {
        btn.style.background = 'transparent';
        btn.style.color = 'var(--m-text)';
    });
    document.getElementById('timeline-view-btn').style.background = 'var(--m-primary)';
    document.getElementById('timeline-view-btn').style.color = 'white';
    
    // 타임라인 데이터 로드
    loadTimelineData();
});

async function loadTimelineData() {
    const formData = new FormData();
    formData.append('action', 'list');
    formData.append('category', 'all'); // 타임라인은 전체 표시
    
    const res = await fetch('', {
        method: 'POST',
        body: formData
    });
    const data = await res.json();
    
    if (data.success) {
        renderTimeline(data.buckets);
    }
}
```

5. 반응형 CSS를 추가하세요 (`<style>` 블록에):
```css
@media (max-width: 768px) {
    #bucket-grid {
        grid-template-columns: 1fr !important;
    }
    
    .cat-tab {
        font-size: 13px !important;
        padding: 6px 12px !important;
    }
    
    #add-btn {
        bottom: 20px !important;
        right: 20px !important;
        width: 56px !important;
        height: 56px !important;
        font-size: 24px !important;
    }
    
    #modal > div {
        width: 95% !important;
        padding: 24px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    #bucket-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
```

6. 브라우저에서 최종 테스트:
   - 그리드/타임라인 뷰 전환
   - 모바일(375px), 태블릿(768px), 데스크톱(1200px) 반응형 확인
   - 다크모드 전환 테스트
   - 전체 기능 통합 테스트 (추가/수정/삭제/완료/통계)