# Step 5: 배포 및 실시간 테스트

## 이 문서의 목표
- 로컬에서 빌드 테스트
- Vercel 환경변수 설정
- 배포 후 GA4 실시간 확인

---

## Step 5-1: 로컬 빌드 테스트

### 빌드 실행
```bash
cd PlanitAI_Inc_website/nextjs
pnpm build
```

### 예상 결과
- 에러 없이 빌드 완료
- `.next` 폴더에 빌드 결과물 생성

### 로컬 실행 (선택사항)
```bash
pnpm dev
```
브라우저에서 `http://localhost:3000` 접속 후 개발자 도구에서 gtag 로드 확인

---

## Step 5-2: Vercel 환경변수 설정

### 중요!
로컬 `.env.local`의 값은 Vercel에 자동으로 업로드되지 않습니다.
Vercel 대시보드에서 별도로 설정해야 합니다.

### 설정 방법:

1. **Vercel 대시보드 접속**: https://vercel.com/dashboard
2. **프로젝트 선택**: PlanitAI_Inc_website
3. **Settings** 탭 클릭
4. **Environment Variables** 섹션

### 환경변수 추가:

| Key | Value | Environment |
|-----|-------|-------------|
| `NEXT_PUBLIC_GA_MEASUREMENT_ID` | `G-XXXXXXXXXX` | Production, Preview, Development |

5. **Save** 클릭

---

## Step 5-3: 배포

### 방법 1: Git Push (자동 배포)
```bash
git add .
git commit -m "Add Google Analytics 4"
git push origin main
```

### 방법 2: Vercel CLI
```bash
vercel --prod
```

### 배포 확인
- Vercel 대시보드에서 배포 상태 확인
- 배포 완료 후 실제 URL 접속

---

## Step 5-4: GA4 실시간 테스트

### 테스트 절차:

1. **웹사이트 접속**
   - https://planitai.co.jp 에 접속

2. **Google Analytics 열기**
   - https://analytics.google.com 접속
   - 좌측 메뉴에서 **"보고서"** → **"실시간"** 클릭

3. **실시간 데이터 확인**
   - "지난 30분간의 사용자" 섹션에 **1** 이상 표시되면 성공!

### 실시간 리포트 화면:
```
┌─────────────────────────────────────┐
│  실시간 개요                         │
│                                     │
│  지난 30분간의 사용자: 1              │
│  ████████░░░░░░░░░░░░░░░░░░░░░░░   │
│                                     │
│  분당 사용자: 1                      │
│  인기 페이지: /                      │
└─────────────────────────────────────┘
```

---

## Step 5-5: 브라우저 개발자 도구로 확인

### Network 탭 확인:

1. 웹사이트에서 F12 (개발자 도구) 열기
2. **Network** 탭 선택
3. 필터에 `gtag` 또는 `google` 입력
4. 다음 요청들이 보이면 정상:
   - `gtag/js?id=G-XXXXXXXXXX`
   - `collect?...` (데이터 전송)

### Console 탭 확인:

```javascript
// 콘솔에서 실행
dataLayer
```

결과에 GA 관련 데이터가 있으면 정상 작동

---

## 트러블슈팅

### 실시간에 데이터가 안 보여요
1. **측정 ID 확인**: 오타가 없는지 확인
2. **환경변수 확인**: Vercel에 올바르게 설정되었는지 확인
3. **캐시 문제**: 브라우저 캐시 삭제 후 재접속
4. **광고 차단**: 광고 차단 확장 프로그램 비활성화

### 빌드 에러가 발생해요
1. **import 경로 확인**: `@/components/GoogleAnalytics` 경로 확인
2. **파일명 확인**: 대소문자 정확히 일치하는지 확인

---

## 체크리스트

- [ ] 로컬 빌드 성공
- [ ] Vercel 환경변수 설정 완료
- [ ] 배포 완료
- [ ] GA4 실시간에서 데이터 확인

---

## 다음 단계

v6에서는 GA4 대시보드를 자세히 살펴보고, 각 메뉴의 기능을 알아봅니다.

---

*작성일: 2024-12-05*
*프로젝트: PlanitAI 웹사이트 방문자 분석 설정*