first commit

frontend/script.js

@@ -0,0 +1,136 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize Lucide Icons
+    lucide.createIcons();
+
+    // 1. Visitor Chart (Line)
+    const ctxVisitor = document.getElementById('visitorChart').getContext('2d');
+    new Chart(ctxVisitor, {
+        type: 'line',
+        data: {
+            labels: ['3/21', '3/22', '3/23', '3/24', '3/25', '3/26', '3/27'],
+            datasets: [{
+                label: '방문자 수',
+                data: [850, 920, 1100, 1240, 1350, 1120, 1480],
+                borderColor: '#2563eb',
+                backgroundColor: 'rgba(37, 99, 235, 0.1)',
+                fill: true,
+                tension: 0.4,
+                borderWidth: 3,
+                pointRadius: 4,
+                pointBackgroundColor: '#2563eb'
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            plugins: {
+                legend: { display: false }
+            },
+            scales: {
+                y: { beginAtZero: false, grid: { color: '#e2e8f0' } },
+                x: { grid: { display: false } }
+            }
+        }
+    });
+
+    // 2. Inflow Chart (Doughnut)
+    const ctxInflow = document.getElementById('inflowChart').getContext('2d');
+    new Chart(ctxInflow, {
+        type: 'doughnut',
+        data: {
+            labels: ['네이버 검색', 'SNS 광고', '직접 유입'],
+            datasets: [{
+                data: [45, 32, 23],
+                backgroundColor: ['#2563eb', '#60a5fa', '#cbd5e1'],
+                borderWidth: 0,
+                hoverOffset: 4
+            }]
+        },
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            cutout: '70%',
+            plugins: {
+                legend: { position: 'bottom', labels: { boxWidth: 12, padding: 15 } }
+            }
+        }
+    });
+
+    // 3. Mini Calendar Render
+    const miniCalendar = document.getElementById('miniCalendar');
+    const daysInMonth = 31;
+    const startDay = 0; // Sun=0, 2026-03-01 is Sunday
+    
+    // Add empty slots for days before the 1st
+    for (let i = 0; i < startDay; i++) {
+        const div = document.createElement('div');
+        div.className = 'cal-day';
+        miniCalendar.appendChild(div);
+    }
+
+    for (let d = 1; d <= daysInMonth; d++) {
+        const div = document.createElement('div');
+        div.className = 'cal-day';
+        div.innerText = d;
+        if (d === 15 || d === 27) div.classList.add('active'); // Highlight deposit dates
+        miniCalendar.appendChild(div);
+    }
+
+    // 4. Set Generated Images
+    document.getElementById('placeholder-a').style.backgroundImage = 'url("exposure_a.png")';
+    document.getElementById('placeholder-b').style.backgroundImage = 'url("exposure_b.png")';
+
+    // 5. Backend Integration (Load data)
+    const companyId = 'WEHAGO_001';
+    const textarea = document.querySelector('.styled-textarea');
+    
+    fetch(`http://localhost:5000/api/report/${companyId}`)
+        .then(res => res.json())
+        .then(data => {
+            if (data.content) textarea.value = data.content;
+        })
+        .catch(err => console.log('Error loading data:', err));
+
+    // 6. Interactions
+    // Save functionality
+    document.querySelector('.btn-outline').addEventListener('click', () => {
+        const content = textarea.value;
+        fetch('http://localhost:5000/api/report', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ companyId, content })
+        })
+        .then(res => res.json())
+        .then(() => alert('저장되었습니다.'))
+        .catch(err => alert('저장 실패: ' + err.message));
+    });
+
+    document.querySelector('.btn-primary').addEventListener('click', () => {
+        window.print();
+    });
+
+    // PDF Export with html2pdf
+    document.querySelector('.btn-pdf').addEventListener('click', () => {
+        const element = document.querySelector('.main-content');
+        const opt = {
+            margin:       [10, 10],
+            filename:     'Business_Report.pdf',
+            image:        { type: 'jpeg', quality: 0.98 },
+            html2canvas:  { scale: 2, useCORS: true },
+            jsPDF:        { unit: 'mm', format: 'a3', orientation: 'portrait' }
+        };
+        
+        // Temporarily hide actions for cleaner PDF
+        document.querySelector('.sidebar').style.display = 'none';
+        document.body.style.backgroundColor = 'white';
+        
+        html2pdf().set(opt).from(element).save().then(() => {
+            document.querySelector('.sidebar').style.display = 'flex';
+            document.body.style.backgroundColor = '';
+        });
+    });
+
+    document.querySelector('.btn-excel').addEventListener('click', () => {
+        alert('입금 내역이 엑셀 파일(XLSX)로 다운로드되었습니다.');
+    });
+});