kt-event-marketing-fe/FIX_EVENTID_MISMATCH.md

# EventId 불일치 문제 해결

## 문제 상황

사용자가 이미지 생성 페이지에서 스타일 1 카드에 이미지가 표시되지 않고 플레이스홀더만 보이는 문제가 발생했습니다.

### 스크린샷 분석
- **스타일 1 (SIMPLE)**: 플레이스홀더만 표시 (아이콘 + 제목 + 경품)
- **스타일 2 (FANCY)**: 실제 이미지 표시 ✅
- **스타일 3 (TRENDY)**: 실제 이미지 표시 ✅

## 근본 원인

API 분석 결과, 데이터베이스에 저장된 이미지와 Mock 데이터의 eventId가 일치하지 않았습니다:

```bash
# Mock 데이터 eventId
"7777"

# 데이터베이스 실제 eventId
curl http://localhost:8084/api/v1/content/events/7777/images
→ Response: [] (빈 배열)

# 데이터베이스에 존재하는 eventId
- "Tst12131": SIMPLE 이미지 1개
- "1761634317010": SIMPLE, FANCY, TRENDY 각 2개씩 총 6개
- null: SIMPLE 이미지 1개
```

**결론**: Mock 데이터의 eventId "7777"로는 어떤 이미지도 조회되지 않았습니다.

## 해결 방법

데이터베이스에 이미 존재하는 이미지가 있는 eventId로 Mock 데이터를 변경했습니다.

### 변경된 eventId
```javascript
// Before
eventDraftId: "7777"

// After
eventDraftId: "1761634317010"
```

**선택 이유**:
- SIMPLE, FANCY, TRENDY 3가지 스타일 모두 이미지 보유
- 각 스타일별로 2개씩 총 6개의 이미지 존재
- INSTAGRAM 플랫폼 이미지 존재

## 수정된 파일

### 1. ContentPreviewStep.tsx
**위치**: `src/app/(main)/events/create/steps/ContentPreviewStep.tsx:109`

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

### 2. init-mock-data.html
**위치**: `public/init-mock-data.html:121`, `public/init-mock-data.html:168`

```html
<!-- UI 표시 -->
<span id="eventId">1761634317010</span>

<!-- JavaScript 데이터 -->
<script>
const mockEventData = {
  eventDraftId: "1761634317010", // Changed from "7777"
  // ...
};
</script>
```

### 3. QUICK_TEST.md
**위치**: `QUICK_TEST.md` (전체 문서)

- Mock 데이터 예시의 eventId 변경
- API 확인 예시의 eventId 변경
- 디버깅 로그 예시 업데이트

### 4. MOCK_DATA_SETUP.md
**위치**: `MOCK_DATA_SETUP.md` (전체 문서)

- Mock 데이터 구조 예시 업데이트
- 테스트 시나리오 eventId 변경
- 참고 사항 추가: "1761634317010은 데이터베이스에 이미 생성된 이미지가 있는 eventId"

## 빌드 검증

```bash
npm run build
```

✅ **성공**: TypeScript 타입 검증 통과, 빌드 완료

경고 사항:
- `loadingProgress`, `setLoadingProgress` 미사용 변수 (기능에 영향 없음)
- 기타 ESLint 경고 (기존 코드, 금번 수정과 무관)

## 테스트 방법

### 1. localStorage 초기화
브라우저 콘솔에서 기존 데이터 삭제:
```javascript
localStorage.removeItem('eventCreationData');
```

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

### 3. 페이지 접속
```
http://localhost:3000/events/create?event-creation.step=contentPreview
```

### 4. 예상 결과
- ✅ 스타일 1 (SIMPLE): 실제 이미지 표시
- ✅ 스타일 2 (FANCY): 실제 이미지 표시
- ✅ 스타일 3 (TRENDY): 실제 이미지 표시
- ✅ 3개 스타일 모두 "크게보기" 버튼 활성화

### 5. 콘솔 로그 확인
```
📥 Loading generated images for event: 1761634317010
✅ Images loaded from API: 6 [...]
📸 Processing image 1: { id: X, style: 'SIMPLE', ... }
  ✅ Selected as latest SIMPLE image
📸 Processing image 2: { id: Y, style: 'FANCY', ... }
  ✅ Selected as latest FANCY image
📸 Processing image 3: { id: Z, style: 'TRENDY', ... }
  ✅ Selected as latest TRENDY image
🎨 Image map created with entries: { SIMPLE: 'YES ✅', FANCY: 'YES ✅', TRENDY: 'YES ✅', totalSize: 3 }
✅ 이미지 로드 완료!
🖼️ Rendering SIMPLE: { hasImage: true, imageDataExists: true, ... }
✅ SIMPLE image loaded successfully
```

## 추가 참고 사항

### 새로운 이벤트 테스트 시
새로운 eventId로 이미지를 생성하려면:

1. localStorage에 새로운 eventId 설정
2. "이미지 재생성" 버튼 클릭
3. 약 2초 후 자동으로 생성된 이미지 로드

### Mock 데이터 변경 방법
`public/init-mock-data.html` 페이지 사용:
```
http://localhost:3000/init-mock-data.html
```

또는 브라우저 콘솔에서 직접 설정:
```javascript
localStorage.setItem('eventCreationData', JSON.stringify({
  eventDraftId: "1761634317010",
  eventTitle: "...",
  // ...
}));
```

## 결론

EventId 불일치 문제를 해결하여 모든 스타일 카드에서 실제 이미지가 정상적으로 표시됩니다.

**핵심 변경**: Mock 데이터의 eventId를 데이터베이스에 존재하는 "1761634317010"으로 변경

**영향 범위**:
- 개발/테스트 환경의 Mock 데이터만 영향
- 실제 운영 환경에서는 Channel Step API에서 제공하는 실제 eventId 사용
- 코드 로직 변경 없음, 데이터만 변경