# Top Edu Prep — Cloudflare Pages 블로그

WordPress와 동일한 기능을 Cloudflare Pages (정적 호스팅)에서 구현한 시스템입니다.

## 📁 구조

```
topeduprep-site/
├── admin/
│   └── writer.html        ← 로컬 글 작성 도구 (브라우저에서 열기)
├── site/                  ← Cloudflare Pages에 배포하는 폴더
│   ├── index.html         ← 메인 사이트 (전체 기능 포함)
│   ├── sitemap.xml        ← 자동 생성됨
│   ├── posts/
│   │   ├── index.json     ← 전체 글 목록 (자동 생성)
│   │   └── *.json         ← 개별 글 파일
│   └── media/             ← 이미지, 동영상 파일
├── scripts/
│   └── build-index.js     ← 빌드 스크립트
└── package.json
```

## 🚀 시작하기

### 1. Node.js + Wrangler 설치

```bash
# Node.js 설치 후 (https://nodejs.org)
npm install -g wrangler
wrangler login
```

### 2. 의존성 설치

```bash
npm install
```

### 3. 첫 배포

```bash
npm run deploy
```

## ✍️ 매일 글 쓰기

### 방법 A: writer.html 사용 (권장)

1. `admin/writer.html`을 브라우저에서 열기
2. 글 제목, 내용 작성 (마크다운 지원)
3. 이미지는 드래그앤드롭 or 업로드 버튼
4. YouTube URL 입력으로 영상 삽입
5. **저장** → **JSON 복사**
6. `site/posts/[slug].json` 파일로 저장
7. 이미지 파일은 `site/media/` 폴더에 복사

### 방법 B: 직접 JSON 작성

`site/posts/` 폴더에 새 JSON 파일 생성:

```json
{
  "id": "unique-id",
  "slug": "url-friendly-slug",
  "title": "글 제목",
  "content": "## 마크다운 콘텐츠\n\n내용...",
  "excerpt": "글 요약 (SEO용, 150자)",
  "category": "수학",
  "grade": "고등학교 1학년",
  "tags": ["태그1", "태그2"],
  "status": "published",
  "date": "2025-06-12",
  "thumbnail": "media/image.jpg",
  "views": 0
}
```

## 🔄 배포 워크플로우

```bash
# 글 작성 후 매일 실행
npm run deploy
```

이 명령어가 자동으로:
1. `site/posts/*.json` 파일들을 읽어 `index.json` 생성
2. `sitemap.xml` 생성
3. Cloudflare Pages에 배포

## 📝 마크다운 지원 기능

- 제목 (H1~H4)
- **굵게**, *기울임*, ~~취소선~~
- 목록 (순서 있는/없는)
- > 인용구
- `인라인 코드`, 코드 블록
- 이미지 `![alt](url)`
- 링크 `[텍스트](url)`
- 표 (테이블)
- 구분선 `---`
- **수식**: `$인라인$`, `$$블록$$` (MathJax)
- YouTube: `<div class="video-embed"><iframe src="..."></iframe></div>`

## 🔍 SEO 기능

- 동적 메타 태그 (제목, 설명)
- Open Graph (SNS 공유)
- Twitter Card
- 구조화된 URL (`#/post/slug`)
- sitemap.xml 자동 생성
- canonical URL

## 🎨 UI 기능

- 다크모드 토글
- 카테고리 필터
- 태그 필터
- 실시간 검색 (Ctrl+K)
- 목차 자동 생성 (TOC)
- 관련 글 추천
- 이전/다음 글 네비게이션
- 공유 버튼 (카카오톡, 트위터, 링크 복사)
- 반응형 (모바일 최적화)
- 페이지네이션

## 📸 이미지 관리

### 로컬 이미지
- `site/media/` 폴더에 저장
- JSON에서 `"thumbnail": "media/filename.jpg"` 로 참조

### 외부 이미지 (권장)
- Cloudflare Images 사용 시 무료 10만개, 자동 최적화
- 또는 imgur, Cloudinary 등 무료 이미지 호스팅 사용

## 🎬 동영상 지원

### YouTube 임베드
```html
<div class="video-embed"><iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe></div>
```

### 직접 영상 파일
```html
<video controls style="width:100%; border-radius:10px"><source src="media/video.mp4" type="video/mp4"></video>
```

## 💬 댓글 추가 (선택사항)

index.html의 `article-body` 아래에 추가:

```html
<!-- Giscus (GitHub Discussions 기반, 무료) -->
<script src="https://giscus.app/client.js"
  data-repo="username/repo"
  data-repo-id="..."
  data-category="Comments"
  data-category-id="..."
  data-mapping="pathname"
  crossorigin="anonymous"
  async>
</script>
```

## 📊 방문자 통계

Cloudflare Pages Analytics는 자동 제공 (대시보드에서 확인).
더 상세한 분석은 Cloudflare Web Analytics 스크립트 추가:

```html
<script defer src='https://static.cloudflareinsights.com/beacon.min.js' 
  data-cf-beacon='{"token": "YOUR_TOKEN"}'></script>
```