# Mock 데이터 설정 가이드

AI 이미지 생성 기능을 테스트하기 위해 localStorage에 mock 데이터를 설정하는 방법입니다.

## 🚀 빠른 시작

### 방법 1: 웹 인터페이스 사용 (권장)

1. 개발 서버 실행
```bash
npm run dev
```

2. 브라우저에서 mock 데이터 초기화 페이지 열기
```
http://localhost:3000/init-mock-data.html
```

3. "LocalStorage에 저장하기" 버튼 클릭

4. 이미지 생성 페이지로 이동
```
http://localhost:3000/events/create?step=contentPreview
```

### 방법 2: 브라우저 콘솔 사용

1. 개발 서버 실행 후 브라우저에서 아무 페이지나 열기

2. F12 또는 Cmd+Option+I로 개발자 도구 열기

3. Console 탭에서 다음 코드 실행:

```javascript
const mockEventData = {
  eventDraftId: "1761634317010",  // String type (existing eventId with images)
  eventTitle: "맥주 파티 이벤트",
  eventDescription: "강남에서 열리는 신나는 맥주 파티에 참여하세요!",
  industry: "음식점",
  location: "강남",
  trends: ["파티", "맥주", "생맥주"],
  prize: "생맥주 1잔"
};

localStorage.setItem('eventCreationData', JSON.stringify(mockEventData));
console.log('✅ Mock 데이터 저장 완료!');
```

4. 이미지 생성 페이지로 이동

### 방법 3: 테스트 HTML 파일 사용

프로젝트 루트의 `test-localstorage.html` 파일을 브라우저에서 직접 열기:

```bash
open test-localstorage.html
```

## 📊 Mock 데이터 구조

```json
{
  "eventDraftId": "1761634317010",
  "eventTitle": "맥주 파티 이벤트",
  "eventDescription": "강남에서 열리는 신나는 맥주 파티에 참여하세요!",
  "industry": "음식점",
  "location": "강남",
  "trends": ["파티", "맥주", "생맥주"],
  "prize": "생맥주 1잔"
}
```

**참고**:
- `eventDraftId`는 API 변경으로 인해 `string` 타입입니다.
- `"1761634317010"`은 데이터베이스에 이미 생성된 이미지가 있는 eventId입니다.

## 🧪 테스트 시나리오

### 시나리오 1: 전체 이미지 생성 플로우

1. Mock 데이터 설정
2. `/events/create?step=contentPreview` 접속
3. 자동으로 AI 이미지 생성 시작
4. 3가지 스타일(SIMPLE, FANCY, TRENDY) 확인
5. 스타일 선택 후 다음 단계 진행

### 시나리오 2: 다양한 이벤트 데이터 테스트

다른 업종/지역/트렌드로 테스트:

```javascript
// 카페 이벤트 (새로운 이미지 생성 필요)
localStorage.setItem('eventCreationData', JSON.stringify({
  eventDraftId: "test-cafe-001",
  eventTitle: "커피 할인 이벤트",
  eventDescription: "신메뉴 출시 기념 30% 할인",
  industry: "카페",
  location: "홍대",
  trends: ["커피", "할인", "신메뉴"],
  prize: "아메리카노 1잔"
}));
```

```javascript
// 뷰티 이벤트 (새로운 이미지 생성 필요)
localStorage.setItem('eventCreationData', JSON.stringify({
  eventDraftId: "test-beauty-001",
  eventTitle: "봄맞이 피부관리 이벤트",
  eventDescription: "봄맞이 특별 케어 프로그램",
  industry: "뷰티",
  location: "강남",
  trends: ["피부관리", "봄", "케어"],
  prize: "페이셜 케어 1회"
}));
```

## 🔍 디버깅

### localStorage 데이터 확인

```javascript
// 현재 저장된 데이터 확인
const data = localStorage.getItem('eventCreationData');
console.log(JSON.parse(data));
```

### localStorage 데이터 삭제

```javascript
localStorage.removeItem('eventCreationData');
console.log('✅ 데이터 삭제 완료');
```

## ⚠️ 주의사항

1. **같은 도메인**: localStorage는 도메인별로 분리되므로, 같은 localhost:3000에서 설정해야 합니다.

2. **브라우저 제한**: 시크릿 모드에서는 localStorage가 제한될 수 있습니다.

3. **데이터 유지**: 브라우저를 닫아도 localStorage 데이터는 유지됩니다. 새로운 테스트 시 삭제 후 진행하세요.

## 🎯 실제 API 연동 후

Channel Step API가 구현되면 이 mock 데이터 설정은 불필요하며,
실제 플로우에서 자동으로 데이터가 저장됩니다:

```
Objective → Recommendation → Channel (여기서 localStorage 저장) → ContentPreview (이미지 생성)
```