# Cloudflare Pages 배포 가이드

## 🚀 즉시 배포 (Direct Upload)

빌드 단계 없이 폴더 통째로 업로드하는 방법입니다. **가장 빠르고 권장**.

### 1. 폴더 압축

`e:\Claude\Phase1\docs\test-scenarios` 폴더 전체를 ZIP으로 압축합니다.

PowerShell:
```powershell
Compress-Archive -Path "e:\Claude\Phase1\docs\test-scenarios\*" -DestinationPath "e:\Claude\golfvx-tc.zip" -Force
```

### 2. Cloudflare Pages 직접 업로드

1. https://dash.cloudflare.com/ 로그인
2. 좌측 **Workers & Pages** → **Create** → **Pages 탭** → **Upload assets**
3. 프로젝트 이름 입력 (예: `golfvx-tc`)
4. ZIP 파일 업로드 또는 폴더 드래그 앤 드롭
5. **Deploy site** 클릭

배포 완료 후 `https://golfvx-tc.pages.dev` 같은 URL이 발급됩니다.

---

## 🔄 GitHub 연동 배포 (자동 갱신)

TC 파일을 수정할 때마다 자동 배포되게 하려면:

### 1. GitHub 푸시
```bash
cd e:\Claude\Phase1\docs\test-scenarios
git init
git add .
git commit -m "GOLFVX 테스트 시나리오 배포"
git branch -M main
git remote add origin https://github.com/<your>/golfvx-tc.git
git push -u origin main
```

### 2. Cloudflare Pages 연결

1. Cloudflare Dashboard → **Workers & Pages** → **Create** → **Connect to Git**
2. GitHub 저장소 선택
3. **빌드 설정**:
   - **Framework preset**: **None**
   - **Build command**: (비워둠)
   - **Build output directory**: `/` (루트)
4. **Save and Deploy**

이후 `git push` 시 자동 재배포됩니다.

---

## ✅ 배포 후 확인

배포된 URL에 접속하면:

- **상단 헤더**: GOLFVX 테스트 시나리오 + 통계(25 / 2,627 / 정상 2,062 / 비정상 473 / 경계값 92)
- **필터 바**: 제품(전체/App/VX/Partner) + 검색 + 정렬
- **카드 그리드**: 25개 페이지 카드(제품별 그룹 헤더로 구분)
- **카드 클릭**: URL이 `#/TC_X.md`로 변경되면서 마크다운 뷰어 모드로 전환
- **뷰어 모드**: 좌측 사이드바(메뉴 트리) + 본문(렌더링된 마크다운) + 이전/다음 버튼

---

## 📁 사이트 구성

```
docs/test-scenarios/
├── index.html       ← 🌐 단일 진입점 (랜딩 + 마크다운 뷰어 통합)
├── .nojekyll        ← 정적 호스팅 설정
├── README.md        ← 텍스트 인덱스
├── DEPLOY.md        ← 이 파일
└── TC_*.md          ← 25개 테스트 시나리오 파일
```

**핵심**: 단일 `index.html`이 라우터·랜딩 카드뷰·마크다운 뷰어를 모두 포함합니다.

| 경로 | 동작 |
|---|---|
| `/` 또는 `/#/` | 🏠 카드뷰 (제품 필터 + 검색 + 정렬) |
| `/#/TC_HOME.md` | 📖 TC_HOME.md 마크다운 뷰어 |
| `/#/README.md` | 📋 텍스트 인덱스 |

> **외부 의존성 없음** — 라이브러리 CDN을 호출하지 않으며, 마크다운 파서가 페이지 내부에 포함되어 있습니다. 오프라인이나 사내망에서도 동작합니다.

---

## 💻 로컬 미리보기

배포 전 확인하려면:

### Python (가장 간단)
```powershell
cd e:\Claude\Phase1\docs\test-scenarios
python -m http.server 3000
```
→ `http://localhost:3000`

### Node.js
```powershell
npx serve e:\Claude\Phase1\docs\test-scenarios -p 3000
```

> **주의**: `index.html`을 `file://`로 직접 열면 마크다운 fetch가 브라우저 보안 정책상 차단됩니다. 반드시 HTTP 서버로 서빙하거나 Cloudflare Pages 등에 배포 후 확인하세요.

---

## 🐛 문제 해결

| 증상 | 원인 / 해결 |
|---|---|
| 카드는 보이는데 클릭해도 마크다운이 안 보임 | `file://`로 열었기 때문 — HTTP 서버로 서빙 필요 |
| "마크다운 파일이 아닌 HTML이 반환되었습니다" 에러 | 호스팅이 SPA 폴백을 적용 중 — Cloudflare Pages 설정에서 SPA 모드 비활성화 또는 `_redirects` 파일 제거 |
| 한글이 깨짐 | 모든 .md 파일이 UTF-8 인코딩인지 확인 (PowerShell 기본은 UTF-16 LE — `Out-File` 시 `-Encoding utf8` 필요) |
| 표가 옆으로 잘림 (모바일) | 정상 — 좌우 스크롤로 확인 |
| 배포 후 변경 안 반영 | Cloudflare 캐시 — Dashboard에서 **Purge cache** 또는 시크릿 창에서 확인 |

---

## 🌐 커스텀 도메인 (선택)

Cloudflare Pages에서 **Custom domains** 메뉴로 자체 도메인 연결 가능:
- `tc.golfvx.com` 같은 서브도메인 입력
- DNS CNAME 레코드 자동 생성됨

---

*단일 페이지 SPA · Cloudflare Pages 호환 · 외부 의존성 없음 · 2026-05-04*