kt-event-marketing-fe/QUICK_TEST.md

🚀 AI 이미지 생성 빠른 테스트 가이드

⚡ 가장 빠른 방법 (기존 이미지 확인)

# 1. 개발 서버 실행
npm run dev

# 2. 브라우저에서 바로 접속
http://localhost:3000/events/create?event-creation.step=contentPreview

✨ 끝! 자동으로 Mock 데이터(eventId: "1761634317010")가 생성되고 기존 생성된 이미지를 불러옵니다.

💡 이미지가 없을 경우: "이미지 생성하기" 버튼을 클릭하면 새로운 이미지를 생성합니다.

---

📋 커스텀 데이터로 테스트 (선택사항)

1단계: 개발 서버 실행

npm run dev

2단계: Mock 데이터 설정 (3가지 방법 중 선택)

✨ 방법 A: 웹 UI 사용 (가장 쉬움!)

브라우저에서 열기:

http://localhost:3000/init-mock-data.html

"LocalStorage에 저장하기" 버튼 클릭 → 완료!

---

방법 B: 브라우저 콘솔 사용

1. http://localhost:3000 접속
2. F12 (개발자 도구) → Console 탭
3. 다음 코드 복사 & 붙여넣기:

localStorage.setItem('eventCreationData', JSON.stringify({
  eventDraftId: "1761634317010",
  eventTitle: "맥주 파티 이벤트",
  eventDescription: "강남에서 열리는 신나는 맥주 파티에 참여하세요!",
  industry: "음식점",
  location: "강남",
  trends: ["파티", "맥주", "생맥주"],
  prize: "생맥주 1잔"
}));

---

방법 C: HTML 파일 직접 열기

open test-localstorage.html

3단계: 이미지 생성 페이지 접속

브라우저에서 열기:

http://localhost:3000/events/create?event-creation.step=contentPreview

4단계: 자동 실행 확인 ✅

1. 페이지 로딩되면 자동으로 이미지 생성 시작
2. 로딩 스피너와 진행률 확인
3. 약 60초 후 3가지 스타일 이미지 완성
   • 스타일 1: 심플
   • 스타일 2: 화려
   • 스타일 3: 트렌디

예상 결과

이미지가 있는 경우

• ✅ 즉시 표시: 로딩 후 바로 이미지 미리보기 화면
• ✅ 3개 스타일 이미지: SIMPLE, FANCY, TRENDY 각각 최신 이미지 표시
• ✅ 이미지 선택: 라디오 버튼으로 원하는 스타일 선택
• ✅ 재생성 버튼: "이미지 재생성" 버튼으로 새로운 이미지 생성 가능
• ✅ 크게보기: 각 이미지 클릭 시 전체화면 미리보기

이미지가 없는 경우

• ⚠️ 에러 메시지: "생성된 이미지가 없습니다. 이미지를 먼저 생성해주세요."
• 🔄 생성 버튼: "이미지 생성하기" 버튼 클릭
• ⏳ 생성 대기: API 요청 후 2초 뒤 자동으로 이미지 조회
• ✅ 이미지 표시: 생성 완료된 이미지 자동 표시

문제 해결

"이벤트 정보를 찾을 수 없습니다" 에러

→ ✅ 해결됨! 이제 자동으로 Mock 데이터가 생성됩니다.

Network Error / CORS 에러

→ ✅ 해결됨! Next.js API proxy를 통해 CORS 문제 우회 → 프론트엔드가 /api/content/* → 백엔드 localhost:8084 로 자동 프록시

이미지 생성 실패

→ Content API (localhost:8084) 실행 여부 확인 → 터미널에서 확인: curl http://localhost:8084/api/v1/content/events/7777/images

이미지가 표시되지 않음

→ 네트워크 탭에서 CDN URL 로드 상태 확인 → Azure Blob Storage 접근 권한 확인

API 확인

# 이벤트 1761634317010의 이미지 확인
curl http://localhost:8084/api/v1/content/events/1761634317010/images

# 프론트엔드 프록시를 통한 확인 (개발 서버 실행 중)
curl http://localhost:3000/api/content/events/1761634317010/images

디버깅

브라우저 개발자 도구 (F12) → Console 탭에서 다음 로그 확인:

📥 Loading generated images for event: 1761634317010
✅ Images loaded from API: 6 [...]
📸 Processing image 1: { id: 1, style: 'SIMPLE', platform: 'INSTAGRAM', ... }
  ✅ Selected as latest SIMPLE image
📸 Processing image 2: { id: 3, style: 'FANCY', platform: 'INSTAGRAM', ... }
  ✅ Selected as latest FANCY image
📸 Processing image 3: { id: 5, style: 'TRENDY', platform: 'INSTAGRAM', ... }
  ✅ Selected as latest TRENDY image
🎨 Image map created with entries: { SIMPLE: 'YES ✅', FANCY: 'YES ✅', TRENDY: 'YES ✅', totalSize: 3 }
✅ 이미지 로드 완료! 미리보기 화면으로 전환합니다.
🖼️ Rendering SIMPLE: { hasImage: true, imageDataExists: true, cdnUrl: 'https://blob...' }
✅ SIMPLE image loaded successfully

---

더 자세한 내용은 MOCK_DATA_SETUP.md 참조