🎯 목표 달성 진행 바 - 시각적 동기부여 트래커

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

목표 달성 진행 바 트래커의 기본 골격을 만들어주세요.

**작업 내용:**

1. `app/modules/visual-goal-progress-tracker/index.php` 파일을 생성합니다.

2. modern shell 골격을 적용합니다:
```php
<?php
include_once('./_common.php');

// SQLite DB 연결 (모듈 전용 DB 파일)
$db_dir = G5_DATA_PATH.'/modules';
@mkdir($db_dir, 0707, true);
$db_path = $db_dir.'/visual-goal-progress-tracker.sqlite';
$pdo = new PDO('sqlite:'.$db_path);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

// 테이블 생성 (첫 접근 시)
$pdo->exec("
    CREATE TABLE IF NOT EXISTS goals (
        id INTEGER PRIMARY KEY AUTOINCREMENT,
        title TEXT NOT NULL,
        target INTEGER NOT NULL,
        current INTEGER DEFAULT 0,
        icon TEXT DEFAULT '🎯',
        created_at TEXT DEFAULT CURRENT_TIMESTAMP,
        updated_at TEXT DEFAULT CURRENT_TIMESTAMP
    )
");

// AJAX 처리 (목표 추가/수정/삭제)
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    header('Content-Type: application/json');
    $action = $_POST['action'] ?? '';
    
    if ($action === 'add') {
        $title = trim($_POST['title'] ?? '');
        $target = intval($_POST['target'] ?? 0);
        $icon = trim($_POST['icon'] ?? '🎯');
        
        if ($title && $target > 0) {
            $stmt = $pdo->prepare("INSERT INTO goals (title, target, icon) VALUES (?, ?, ?)");
            $stmt->execute([$title, $target, $icon]);
            echo json_encode(['success' => true, 'id' => $pdo->lastInsertId()]);
        } else {
            echo json_encode(['success' => false, 'error' => '제목과 목표 수치를 입력하세요']);
        }
        exit;
    }
    
    if ($action === 'update') {
        $id = intval($_POST['id'] ?? 0);
        $current = intval($_POST['current'] ?? 0);
        
        if ($id > 0 && $current >= 0) {
            $stmt = $pdo->prepare("UPDATE goals SET current = ?, updated_at = CURRENT_TIMESTAMP WHERE id = ?");
            $stmt->execute([$current, $id]);
            echo json_encode(['success' => true]);
        } else {
            echo json_encode(['success' => false, 'error' => '잘못된 요청']);
        }
        exit;
    }
    
    if ($action === 'delete') {
        $id = intval($_POST['id'] ?? 0);
        
        if ($id > 0) {
            $stmt = $pdo->prepare("DELETE FROM goals WHERE id = ?");
            $stmt->execute([$id]);
            echo json_encode(['success' => true]);
        } else {
            echo json_encode(['success' => false, 'error' => '잘못된 요청']);
        }
        exit;
    }
}

// 목표 목록 조회
$stmt = $pdo->query("SELECT * FROM goals ORDER BY created_at DESC");
$goals = $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;">
            <h1 style="font-size: 28px; font-weight: 700; margin-bottom: 8px; color: var(--m-text);">🎯 목표 달성 진행 바</h1>
            <p style="font-size: 15px; color: var(--m-text-muted); margin-bottom: 32px;">목표를 설정하고 진행 상황을 시각적으로 확인하세요</p>
            
            <!-- 목표 추가 폼 -->
            <div style="background: var(--m-surface); padding: 24px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow); margin-bottom: 32px;">
                <h2 style="font-size: 18px; font-weight: 600; margin-bottom: 16px; color: var(--m-text);">새 목표 추가</h2>
                <form id="addGoalForm" style="display: flex; flex-direction: column; gap: 12px;">
                    <input type="text" id="goalTitle" placeholder="목표 제목 (예: 독서 100권 읽기)" style="padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; background: var(--m-surface); color: var(--m-text);" required>
                    <div style="display: flex; gap: 12px;">
                        <input type="number" id="goalTarget" placeholder="목표 수치" min="1" style="flex: 1; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; background: var(--m-surface); color: var(--m-text);" required>
                        <input type="text" id="goalIcon" placeholder="아이콘 (예: 📚)" maxlength="2" style="width: 80px; padding: 12px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; text-align: center; background: var(--m-surface); color: var(--m-text);">
                    </div>
                    <button type="submit" style="padding: 12px; background: #4F46E5; color: white; border: none; border-radius: 8px; font-weight: 600; cursor: pointer; transition: background 0.2s;">목표 추가</button>
                </form>
            </div>
            
            <!-- 목표 목록 -->
            <div id="goalsList" style="display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px;">
                <?php if (empty($goals)): ?>
                    <p style="grid-column: 1 / -1; text-align: center; color: var(--m-text-muted); padding: 40px;">아직 등록된 목표가 없습니다. 위에서 새 목표를 추가해보세요!</p>
                <?php else: ?>
                    <?php foreach ($goals as $goal): ?>
                        <?php 
                            $percent = $goal['target'] > 0 ? min(100, round(($goal['current'] / $goal['target']) * 100)) : 0;
                            $barColor = $percent >= 100 ? '#10B981' : ($percent >= 71 ? '#F59E0B' : ($percent >= 31 ? '#F97316' : '#EF4444'));
                        ?>
                        <div class="goal-card" data-id="<?= $goal['id'] ?>" style="background: var(--m-surface); padding: 20px; border-radius: var(--m-radius-lg); box-shadow: var(--m-shadow);">
                            <div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 12px;">
                                <div style="display: flex; align-items: center; gap: 8px;">
                                    <span style="font-size: 24px;"><?= htmlspecialchars($goal['icon']) ?></span>
                                    <h3 style="font-size: 16px; font-weight: 600; color: var(--m-text);"><?= htmlspecialchars($goal['title']) ?></h3>
                                </div>
                                <button class="delete-btn" data-id="<?= $goal['id'] ?>" style="background: none; border: none; color: #EF4444; cursor: pointer; font-size: 18px;">🗑️</button>
                            </div>
                            
                            <div style="margin-bottom: 12px;">
                                <div style="display: flex; justify-content: space-between; margin-bottom: 6px;">
                                    <span style="font-size: 14px; color: var(--m-text-muted);"><?= $goal['current'] ?> / <?= $goal['target'] ?></span>
                                    <span style="font-size: 14px; font-weight: 600; color: var(--m-text);"><?= $percent ?>%</span>
                                </div>
                                <div style="width: 100%; height: 12px; background: #E5E7EB; border-radius: 6px; overflow: hidden;">
                                    <div class="progress-bar" style="width: <?= $percent ?>%; height: 100%; background: <?= $barColor ?>; transition: width 0.5s ease;"></div>
                                </div>
                            </div>
                            
                            <div style="display: flex; gap: 8px;">
                                <button class="update-btn" data-id="<?= $goal['id'] ?>" data-increment="1" style="flex: 1; padding: 8px; background: #E0E7FF; color: #4F46E5; border: none; border-radius: 6px; font-weight: 600; cursor: pointer;">+1</button>
                                <button class="update-btn" data-id="<?= $goal['id'] ?>" data-increment="5" style="flex: 1; padding: 8px; background: #DBEAFE; color: #2563EB; border: none; border-radius: 6px; font-weight: 600; cursor: pointer;">+5</button>
                                <button class="update-btn" data-id="<?= $goal['id'] ?>" data-increment="10" style="flex: 1; padding: 8px; background: #D1FAE5; color: #059669; border: none; border-radius: 6px; font-weight: 600; cursor: pointer;">+10</button>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        </div>
    </main>
    <?php require G5_THEME_PATH.'/modern/_footer.inc.php'; ?>
</div>
<?php include_once('./tail.sub.php'); ?>
```

3. `/visual-goal-progress-tracker` URL로 접속하면 목표 트래커 페이지가 표시됩니다 (폴더 기반 자동 라우팅).

목표 추가/수정/삭제 기능을 구현하는 JavaScript를 추가해주세요.

**작업 내용:**

1. `app/modules/visual-goal-progress-tracker/index.php` 파일의 `<?php include_once('./tail.sub.php'); ?>` 바로 위에 다음 스크립트를 추가합니다:

```javascript
<script>
// 목표 추가
document.getElementById('addGoalForm').addEventListener('submit', async (e) => {
    e.preventDefault();
    
    const title = document.getElementById('goalTitle').value.trim();
    const target = parseInt(document.getElementById('goalTarget').value);
    const icon = document.getElementById('goalIcon').value.trim() || '🎯';
    
    if (!title || target <= 0) {
        alert('제목과 목표 수치를 올바르게 입력하세요');
        return;
    }
    
    const formData = new FormData();
    formData.append('action', 'add');
    formData.append('title', title);
    formData.append('target', target);
    formData.append('icon', icon);
    
    const response = await fetch('/visual-goal-progress-tracker', {
        method: 'POST',
        body: formData
    });
    
    const result = await response.json();
    
    if (result.success) {
        location.reload();
    } else {
        alert(result.error || '목표 추가에 실패했습니다');
    }
});

// 목표 진행 업데이트
document.querySelectorAll('.update-btn').forEach(btn => {
    btn.addEventListener('click', async () => {
        const id = btn.dataset.id;
        const increment = parseInt(btn.dataset.increment);
        const card = document.querySelector(`.goal-card[data-id="${id}"]`);
        const progressText = card.querySelector('.progress-bar').parentElement.previousElementSibling.querySelector('span:first-child').textContent;
        const [current, target] = progressText.split(' / ').map(n => parseInt(n.trim()));
        
        const newCurrent = Math.min(current + increment, target);
        
        const formData = new FormData();
        formData.append('action', 'update');
        formData.append('id', id);
        formData.append('current', newCurrent);
        
        const response = await fetch('/visual-goal-progress-tracker', {
            method: 'POST',
            body: formData
        });
        
        const result = await response.json();
        
        if (result.success) {
            location.reload();
        } else {
            alert(result.error || '업데이트에 실패했습니다');
        }
    });
});

// 목표 삭제
document.querySelectorAll('.delete-btn').forEach(btn => {
    btn.addEventListener('click', async () => {
        if (!confirm('이 목표를 삭제하시겠습니까?')) return;
        
        const id = btn.dataset.id;
        
        const formData = new FormData();
        formData.append('action', 'delete');
        formData.append('id', id);
        
        const response = await fetch('/visual-goal-progress-tracker', {
            method: 'POST',
            body: formData
        });
        
        const result = await response.json();
        
        if (result.success) {
            location.reload();
        } else {
            alert(result.error || '삭제에 실패했습니다');
        }
    });
});
</script>
```

2. 이제 목표 추가, 진행 업데이트, 삭제가 모두 동작합니다.

목표 달성 시 축하 애니메이션과 반응형 디자인을 개선해주세요.

**작업 내용:**

1. `app/modules/visual-goal-progress-tracker/index.php` 파일의 `<main>` 태그 바로 아래에 다음 스타일을 추가합니다:

```html
<style>
@keyframes celebrate {
    0%, 100% { transform: scale(1); }
    25% { transform: scale(1.1) rotate(-5deg); }
    50% { transform: scale(1.15); }
    75% { transform: scale(1.1) rotate(5deg); }
}

.goal-completed {
    animation: celebrate 0.6s ease;
    border: 2px solid #10B981 !important;
}

.confetti {
    position: fixed;
    width: 10px;
    height: 10px;
    background: #F59E0B;
    animation: confetti-fall 2s linear forwards;
    pointer-events: none;
    z-index: 9999;
}

@keyframes confetti-fall {
    to {
        transform: translateY(100vh) rotate(360deg);
        opacity: 0;
    }
}

@media (max-width: 768px) {
    #goalsList {
        grid-template-columns: 1fr !important;
    }
}

.update-btn:hover {
    opacity: 0.8;
    transform: scale(1.05);
    transition: all 0.2s;
}

.delete-btn:hover {
    transform: scale(1.2);
    transition: transform 0.2s;
}

#addGoalForm button[type="submit"]:hover {
    background: #4338CA;
}
</style>
```

2. JavaScript 부분의 '목표 진행 업데이트' 섹션을 다음과 같이 수정합니다 (confetti 효과 추가):

```javascript
// 목표 진행 업데이트
document.querySelectorAll('.update-btn').forEach(btn => {
    btn.addEventListener('click', async () => {
        const id = btn.dataset.id;
        const increment = parseInt(btn.dataset.increment);
        const card = document.querySelector(`.goal-card[data-id="${id}"]`);
        const progressText = card.querySelector('.progress-bar').parentElement.previousElementSibling.querySelector('span:first-child').textContent;
        const [current, target] = progressText.split(' / ').map(n => parseInt(n.trim()));
        
        const newCurrent = Math.min(current + increment, target);
        const wasCompleted = current >= target;
        const isNowCompleted = newCurrent >= target;
        
        const formData = new FormData();
        formData.append('action', 'update');
        formData.append('id', id);
        formData.append('current', newCurrent);
        
        const response = await fetch('/visual-goal-progress-tracker', {
            method: 'POST',
            body: formData
        });
        
        const result = await response.json();
        
        if (result.success) {
            // 목표 달성 순간 축하 효과
            if (!wasCompleted && isNowCompleted) {
                card.classList.add('goal-completed');
                createConfetti();
                setTimeout(() => {
                    location.reload();
                }, 1500);
            } else {
                location.reload();
            }
        } else {
            alert(result.error || '업데이트에 실패했습니다');
        }
    });
});

// Confetti 생성 함수
function createConfetti() {
    const colors = ['#F59E0B', '#10B981', '#3B82F6', '#EF4444', '#8B5CF6'];
    for (let i = 0; i < 30; i++) {
        setTimeout(() => {
            const confetti = document.createElement('div');
            confetti.className = 'confetti';
            confetti.style.left = Math.random() * 100 + 'vw';
            confetti.style.top = '-10px';
            confetti.style.background = colors[Math.floor(Math.random() * colors.length)];
            confetti.style.animationDelay = Math.random() * 0.5 + 's';
            document.body.appendChild(confetti);
            
            setTimeout(() => confetti.remove(), 2000);
        }, i * 50);
    }
}
```

3. 이제 목표를 100% 달성하면 카드에 축하 애니메이션이 재생되고 색색의 confetti가 떨어집니다.