mirror of
https://github.com/ktds-dg0501/kt-event-marketing-fe.git
synced 2025-12-06 12:56:24 +00:00
6cccafa822
주요 변경사항: - Step flow 통합: localStorage 기반 eventId 사용 - 자동 이미지 생성: 이미지 없을 시 자동 생성 트리거 - 진행률 바 추가: 0-100% 진행률 표시 - 동적 로딩 메시지: 단계별 메시지 업데이트 - Next.js 15 API routes 수정: params를 Promise로 처리 - 실제 배포 API 연동: Content API 서버 URL 설정 기술 세부사항: - API proxy routes 추가 (CORS 우회) - 2초 폴링 메커니즘 (최대 60초) - 환경변수: NEXT_PUBLIC_CONTENT_API_URL 설정 - CDN URL 디버그 오버레이 제거 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
150 lines
4.1 KiB
Markdown
150 lines
4.1 KiB
Markdown
# 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 (이미지 생성)
|
|
```
|