index.html: 프론트엔드 메인 페이지

`index.html` 파일은 Dream of E&C 웹사이트의 대문 역할을 하는 메인 랜딩 페이지입니다. 이 파일 하나에 페이지의 구조(HTML), 디자인(CSS), 그리고 동적인 기능(JavaScript)이 모두 포함되어 있습니다.

* 페이지의 전체적인 뼈대를 정의합니다. * 중심에는 `.hero-container`가 있으며, 그 안에 메인 타이틀(`h1.main-title`), 서브 텍스트, 방문자 수, 그리고 다른 페이지로 이동하는 버튼들이 배치되어 있습니다. * 버튼은 `quiz_info.html`(게임)과 `/app/blog/blog.html`(블로그)로 연결됩니다.

* `<style>` 태그 내에 모든 디자인 규칙이 정의되어 있습니다. * 다크 테마: `#121212` 배경색과 밝은 텍스트 색상을 사용하여 어두운 테마를 구현합니다. * 화려한 타이틀: `linear-gradient`와 `background-clip: text` 속성을 이용해 제목에 그라데이션 효과를 적용했습니다. * 애니메이션 효과: 버튼에 마우스를 올리면 `transform: translateY(-5px)`와 `box-shadow` 변경을 통해 입체적이고 동적인 느낌을 줍니다. * 반응형 디자인: `@media (max-width: 768px)` 규칙을 사용하여 모바일 기기에서도 제목과 텍스트 크기가 적절하게 보이도록 조정합니다.

* 페이지 하단의 `<script>` 태그 안에 작성되어 있습니다. * 핵심 기능: 페이지가 로드될 때(`DOMContentLoaded` 이벤트), 백엔드 API 서버(`https://api.dreamofenc.com`)에 요청을 보내 총 방문자 수를 가져옵니다. * API 호출:

• `fetch('/api/blog/site-info')` 함수를 사용하여 비동기적으로 API를 호출합니다.
• 이 API는 호출될 때마다 서버의 방문자 수를 1 증가시키고, 현재까지의 총 방문자 수를 반환합니다.

* 화면 업데이트:

• API로부터 성공적으로 응답을 받으면, `id=“visitor-count”`인 `<span>` 태그의 내용을 받아온 방문자 수로 업데이트합니다.
• 숫자는 `toLocaleString()`을 통해 세 자리마다 콤마를 찍어 가독성을 높입니다.
• API 호출에 실패하면, 방문자 수 대신 'N/A'를 표시하여 사용자에게 문제를 인지시킵니다.

// 페이지 로드 시 실행되는 핵심 로직
document.addEventListener('DOMContentLoaded', () => {
    const visitorCountElement = document.getElementById('visitor-count');
    const API_BASE_URL = 'https://api.dreamofenc.com';

    const fetchVisitorCount = async () => {
        try {
            // API 호출
            const response = await fetch(`${API_BASE_URL}/api/blog/site-info`);
            const data = await response.json();
            // 화면 업데이트
            visitorCountElement.textContent = data.total_visitors.toLocaleString();
        } catch (error) {
            // 에러 처리
            visitorCountElement.textContent = 'N/A';
        }
    };

    fetchVisitorCount();
});

이처럼 `index.html`은 별도의 프레임워크 없이 순수 HTML, CSS, JavaScript만으로 구성된 정적 페이지이지만, API 연동을 통해 동적인 데이터를 보여주는 기능을 수행합니다.