# 🚀 탑에듀프렙 사이트 설정 완전 가이드

## 목차
1. Firebase 프로젝트 생성
2. Firebase Authentication 설정
3. Firestore DB 설정
4. Firebase Storage 설정
5. 사이트 코드에 연결
6. 토스페이먼츠 결제 설정
7. 배포 (GitHub Pages / Firebase Hosting)

---

## 1️⃣ Firebase 프로젝트 생성

### Step 1: Firebase 콘솔 접속
1. https://console.firebase.google.com 접속
2. Google 계정으로 로그인
3. **"프로젝트 추가"** 클릭

### Step 2: 프로젝트 설정
```
프로젝트 이름: topeduprep (또는 원하는 이름)
Google Analytics: 사용 설정 권장
```

### Step 3: 웹 앱 등록
1. 프로젝트 홈에서 **"웹"** 아이콘(`</>`) 클릭
2. 앱 닉네임 입력: `topeduprep-web`
3. **"앱 등록"** 클릭
4. 아래 설정값이 나타납니다 → **복사해두세요!**

```javascript
const firebaseConfig = {
  apiKey: "AIzaSy...",           // ← 복사
  authDomain: "프로젝트명.firebaseapp.com",
  projectId: "프로젝트명",
  storageBucket: "프로젝트명.appspot.com",
  messagingSenderId: "123456789",
  appId: "1:123456789:web:abc123"
};
```

### Step 4: index.html에 붙여넣기
`index.html` 파일을 열고 아래 부분을 찾아 교체:

```javascript
// =====================================================
// 🔧 FIREBASE 설정 - 여기에 본인 Firebase 프로젝트 값 입력
// =====================================================
const firebaseConfig = {
  apiKey: "여기에 apiKey 붙여넣기",
  authDomain: "여기에 authDomain 붙여넣기",
  projectId: "여기에 projectId 붙여넣기",
  storageBucket: "여기에 storageBucket 붙여넣기",
  messagingSenderId: "여기에 messagingSenderId 붙여넣기",
  appId: "여기에 appId 붙여넣기"
};
```

---

## 2️⃣ Firebase Authentication 설정

1. Firebase 콘솔 → 왼쪽 메뉴 **"Authentication"**
2. **"시작하기"** 클릭
3. **"Sign-in method"** 탭 클릭
4. **"이메일/비밀번호"** 클릭 → **"사용 설정"** 토글 ON → 저장

✅ 이제 회원가입/로그인이 작동합니다!

---

## 3️⃣ Firestore DB 설정

### DB 생성
1. Firebase 콘솔 → **"Firestore Database"**
2. **"데이터베이스 만들기"** 클릭
3. **"테스트 모드에서 시작"** 선택 (나중에 보안 규칙 변경)
4. 서버 위치: `asia-northeast3 (Seoul)` 선택 ← 한국 서버

### 보안 규칙 설정
**Firestore → 규칙 탭**에 아래 규칙 입력:

```javascript
rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    
    // 사용자 데이터: 본인만 읽기/쓰기
    match /users/{userId} {
      allow read, write: if request.auth != null && request.auth.uid == userId;
    }
    
    // 사이트 콘텐츠: 누구나 읽기, 인증된 사용자만 쓰기
    match /siteContent/{doc} {
      allow read: if true;
      allow write: if request.auth != null;
    }
    
    // 자료: 누구나 읽기
    match /materials/{doc} {
      allow read: if true;
      allow write: if request.auth != null;
    }
    
    // 주문: 본인만 읽기/쓰기
    match /orders/{orderId} {
      allow read, write: if request.auth != null 
        && request.auth.uid == resource.data.userId;
    }
  }
}
```

### 컬렉션 구조 (자동 생성됨)
```
Firestore
├── users/
│   └── {uid}/
│       ├── name: "홍길동"
│       ├── email: "user@email.com"
│       ├── plan: "free" | "pro" | "premium"
│       ├── exam: "SAT"
│       └── createdAt: timestamp
│
├── siteContent/
│   └── main/
│       ├── hero-title: "목표 대학 합격을..."
│       ├── hero-subtitle: "SAT · TOEFL..."
│       └── updatedAt: timestamp
│
├── materials/
│   └── {materialId}/
│       ├── title: "자료 제목"
│       ├── subject: "SAT"
│       ├── price: 29000
│       └── fileUrl: "storage_url"
│
└── orders/
    └── {orderId}/
        ├── userId: "uid"
        ├── itemId: "material_id"
        ├── amount: 29000
        └── status: "completed"
```

---

## 4️⃣ Firebase Storage 설정

1. Firebase 콘솔 → **"Storage"**
2. **"시작하기"** 클릭
3. 보안 규칙 탭에서:

```javascript
rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    // 자료 파일: 인증된 사용자만 다운로드
    match /materials/{allPaths=**} {
      allow read: if request.auth != null;
      allow write: if request.auth != null;
    }
    // 이미지: 누구나 읽기
    match /images/{allPaths=**} {
      allow read: if true;
      allow write: if request.auth != null;
    }
  }
}
```

---

## 5️⃣ 토스페이먼츠 결제 설정

### Step 1: 토스페이먼츠 가입
1. https://developers.tosspayments.com 접속
2. 회원가입 후 대시보드 로그인

### Step 2: 테스트 키 확인
1. 대시보드 → **"개발 연동"** → **"API 키"**
2. **클라이언트 키** 복사 (test_ck_로 시작)

### Step 3: index.html에 키 입력
```javascript
// 파일에서 이 줄을 찾아 교체
const TOSS_CLIENT_KEY = 'test_ck_YOUR_TOSS_CLIENT_KEY';

// 실제 예시:
const TOSS_CLIENT_KEY = 'test_ck_D5GePWvyJnrK0W0k6q8gLzN97E0p';
```

### Step 4: 실서비스 전환
1. 사업자등록증으로 토스페이먼츠 심사 신청
2. 심사 통과 후 **라이브 클라이언트 키** (`live_ck_`로 시작) 발급
3. 동일하게 교체

### 결제 성공/실패 URL 설정
```javascript
// 현재 코드의 payment 함수에서 수정:
successUrl: 'https://test.topeduprep.uk/payment/success',
failUrl: 'https://test.topeduprep.uk/payment/fail',
```

---

## 6️⃣ SEO 최적화 체크리스트

### 이미 적용된 것들 ✅
- `<meta description>` 설정
- `<meta keywords>` 설정  
- Open Graph 태그 (카카오/SNS 공유)
- Twitter Card 태그
- `<link rel="canonical">`
- Structured Data 준비
- 모바일 최적화 viewport

### 추가 권장 사항
```html
<!-- index.html <head>에 추가 -->

<!-- JSON-LD 구조화 데이터 -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "EducationalOrganization",
  "name": "탑에듀프렙",
  "url": "https://test.topeduprep.uk",
  "telephone": "1555-0982",
  "description": "유학 준비 No.1 학습 플랫폼",
  "offers": {
    "@type": "Offer",
    "priceCurrency": "KRW"
  }
}
</script>

<!-- 파비콘 -->
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-icon.png">
```

---

## 7️⃣ 배포 방법

### 방법 A: Firebase Hosting (추천)
```bash
# Node.js 설치 후
npm install -g firebase-tools
firebase login
firebase init hosting
# public 디렉토리에 index.html 넣기
firebase deploy
```

### 방법 B: GitHub Pages
1. GitHub 저장소 생성
2. index.html 업로드
3. Settings → Pages → main branch 배포

### 방법 C: Vercel (가장 간단)
1. https://vercel.com 접속
2. GitHub 연결 후 자동 배포

---

## 8️⃣ 사이트 편집 기능 사용법

1. 사이트 접속 후 로그인
2. 우측 상단 아바타 클릭 → **"🔧 사이트 편집"**
3. 주황색 점선으로 표시된 텍스트 클릭 → 직접 수정
4. 파란 점선 이미지 클릭 → 이미지 파일 교체
5. 하단 **"💾 저장 후 다운로드"** 클릭
6. HTML 파일이 다운로드됨 → 서버에 다시 업로드

---

## 🆘 문제 해결

| 문제 | 해결 방법 |
|------|-----------|
| 로그인이 안 됨 | Firebase Auth 설정 확인, 이메일/비밀번호 사용 설정 ON |
| DB 저장이 안 됨 | Firestore 보안 규칙 확인, 테스트 모드인지 확인 |
| 결제 창이 안 뜸 | TOSS_CLIENT_KEY 올바르게 입력했는지 확인 |
| 이미지가 안 바뀜 | 편집 모드에서 파란 점선 이미지 클릭 |

---

## 📞 추가 문의
전화: **1555-0982** (평일 09:00~18:00)  
사이트: https://test.topeduprep.uk