Dream of E&C - Wiki

이 문서는 읽기 전용입니다. 원본을 볼 수는 있지만 바꿀 수는 없습니다. 문제가 있다고 생각하면 관리자에게 문의하세요.
====== index.html: 프론트엔드 메인 페이지 ======

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

=== 주요 구성 요소 ===

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

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

==== 3. JavaScript 로직 ====
*   페이지 하단의 `<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'를 표시하여 사용자에게 문제를 인지시킵니다.

<code>
// 페이지 로드 시 실행되는 핵심 로직
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();
});
</code>

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