script.js

// 가격을 가져오는 공통 함수
async function getBitcoinPrice() {
    try {
        const response = await fetch('https://api.coingecko.com/api/v3/simple/price?ids=bitcoin&vs_currencies=usd,krw');
        const data = await response.json();
        return data.bitcoin;
    } catch (error) {
        console.error("데이터를 불러오는데 실패했습니다:", error);
        return null;
    }
}

// 1. 정적 데이터: 페이지 로드 시 딱 한 번만 실행
window.onload = async () => {
    const priceData = await getBitcoinPrice();
    if (priceData) {
        document.getElementById('static-price').innerText = `$${priceData.usd.toLocaleString()} (₩${priceData.krw.toLocaleString()})`;
    }
    
    // 실시간 업데이트 시작
    startRealtimeUpdate();
};

// 2. 실시간 데이터: 주기적으로 실행
function startRealtimeUpdate() {
    const update = async () => {
        const priceData = await getBitcoinPrice();
        if (priceData) {
            const priceTag = document.getElementById('dynamic-price');
            const timeTag = document.getElementById('last-updated');
            
            priceTag.innerText = `$${priceData.usd.toLocaleString()} (₩${priceData.krw.toLocaleString()})`;
            timeTag.innerText = `최근 업데이트: ${new Date().toLocaleTimeString()}`;
            
            // 시각적 효과를 위해 잠깐 깜빡이게 할 수 있습니다.
            priceTag.style.color = '#00ff00';
            setTimeout(() => priceTag.style.color = '#333', 500);
        }
    };

    update(); // 즉시 실행
    setInterval(update, 10000); // 10초마다 갱신 (CoinGecko 무료 티어 권장 주기)
}

const toggleBtn = document.getElementById('theme-toggle');
toggleBtn.addEventListener('click', () => {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const targetTheme = currentTheme === 'dark' ? 'light' : 'dark';
    document.documentElement.setAttribute('data-theme', targetTheme);
});