kt-event-marketing-fe/MOCK_DATA_SETUP.md

Mock 데이터 설정 가이드

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

🚀 빠른 시작

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

1. 개발 서버 실행

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 탭에서 다음 코드 실행:

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 파일을 브라우저에서 직접 열기:

open test-localstorage.html

📊 Mock 데이터 구조

{
  "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: 다양한 이벤트 데이터 테스트

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

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

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

🔍 디버깅

localStorage 데이터 확인

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

localStorage 데이터 삭제

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

⚠️ 주의사항

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

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

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

🎯 실제 API 연동 후

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

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