kt-event-marketing-fe/API_CHANGES.md
cherry2250 6cccafa822 AI 이미지 생성 기능 완성 및 실제 API 연동
주요 변경사항:
- 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>
2025-10-28 23:08:57 +09:00

5.9 KiB

Content API 변경사항

📋 주요 변경사항 요약

1. eventDraftId → eventId 타입 변경

항목 기존 (Old) 변경 (New)
필드명 eventDraftId eventId
타입 number string
예시 7777 "7777"

🔄 영향을 받는 인터페이스

GenerateImagesRequest

Before:

interface GenerateImagesRequest {
  eventDraftId: number;
  eventTitle: string;
  eventDescription: string;
  industry?: string;
  location?: string;
  trends?: string[];
  styles: ('SIMPLE' | 'FANCY' | 'TRENDY')[];
  platforms: ('INSTAGRAM' | 'NAVER' | 'KAKAO')[];
}

After:

interface GenerateImagesRequest {
  eventId: string;  // Changed from eventDraftId: number
  eventTitle: string;
  eventDescription: string;
  industry?: string;
  location?: string;
  trends?: string[];
  styles: ('SIMPLE' | 'FANCY' | 'TRENDY')[];
  platforms: ('INSTAGRAM' | 'NAVER' | 'KAKAO')[];
}

JobInfo

Before:

interface JobInfo {
  id: string;
  eventDraftId: number;
  jobType: string;
  status: 'PENDING' | 'PROCESSING' | 'COMPLETED' | 'FAILED';
  progress: number;
  resultMessage?: string;
  errorMessage?: string;
  createdAt: string;
  updatedAt: string;
}

After:

interface JobInfo {
  id: string;
  eventId: string;  // Changed from eventDraftId: number
  jobType: string;
  status: 'PENDING' | 'PROCESSING' | 'COMPLETED' | 'FAILED';
  progress: number;
  resultMessage?: string;
  errorMessage?: string;
  createdAt: string;
  updatedAt: string;
}

ImageInfo

Before:

interface ImageInfo {
  id: number;
  eventDraftId: number;
  style: 'SIMPLE' | 'FANCY' | 'TRENDY';
  platform: 'INSTAGRAM' | 'NAVER' | 'KAKAO';
  cdnUrl: string;
  prompt: string;
  selected: boolean;
  createdAt: string;
  updatedAt: string;
}

After:

interface ImageInfo {
  id: number;
  eventId: string;  // Changed from eventDraftId: number
  style: 'SIMPLE' | 'FANCY' | 'TRENDY';
  platform: 'INSTAGRAM' | 'NAVER' | 'KAKAO';
  cdnUrl: string;
  prompt: string;
  selected: boolean;
  createdAt: string;
  updatedAt: string;
}

ContentInfo

Before:

interface ContentInfo {
  id: number;
  eventDraftId: number;
  eventTitle: string;
  eventDescription: string;
  images: ImageInfo[];
  createdAt: string;
  updatedAt: string;
}

After:

interface ContentInfo {
  id: number;
  eventId: string;  // Changed from eventDraftId: number
  eventTitle: string;
  eventDescription: string;
  images: ImageInfo[];
  createdAt: string;
  updatedAt: string;
}

📝 수정된 파일 목록

1. Type Definitions

  • src/shared/api/contentApi.ts
    • GenerateImagesRequest interface updated
    • JobInfo interface updated
    • ImageInfo interface updated
    • ContentInfo interface updated
    • API function signatures updated

2. Components

  • src/app/(main)/events/create/steps/ContentPreviewStep.tsx
    • EventCreationData interface: eventDraftId: numbereventDraftId: string
    • Mock data updated to use string type
    • API call updated: eventDraftIdeventId

3. Mock Data Files

  • public/init-mock-data.html

    • eventDraftId: 7777eventDraftId: "7777"
  • MOCK_DATA_SETUP.md

    • All mock data examples updated to string type
    • Documentation notes added about type change

4. API Routes (Next.js Proxy)

  • src/app/api/content/images/generate/route.ts (no changes needed)
  • src/app/api/content/images/jobs/[jobId]/route.ts (no changes needed)
  • src/app/api/content/events/[eventDraftId]/images/route.ts
    • Comment added about eventId parameter

🧪 테스트 예시

API 요청 예시

Before:

POST /api/v1/content/images/generate
{
  "eventDraftId": 7777,
  "eventTitle": "맥주 파티 이벤트",
  "eventDescription": "강남에서 열리는 신나는 맥주 파티",
  "industry": "음식점",
  "location": "강남",
  "trends": ["파티", "맥주", "생맥주"],
  "styles": ["SIMPLE", "FANCY", "TRENDY"],
  "platforms": ["INSTAGRAM"]
}

After:

POST /api/v1/content/images/generate
{
  "eventId": "7777",
  "eventTitle": "맥주 파티 이벤트",
  "eventDescription": "강남에서 열리는 신나는 맥주 파티",
  "industry": "음식점",
  "location": "강남",
  "trends": ["파티", "맥주", "생맥주"],
  "styles": ["SIMPLE", "FANCY", "TRENDY"],
  "platforms": ["INSTAGRAM"]
}

localStorage Mock 데이터

Before:

localStorage.setItem('eventCreationData', JSON.stringify({
  eventDraftId: 7777,
  eventTitle: "맥주 파티 이벤트",
  // ...
}));

After:

localStorage.setItem('eventCreationData', JSON.stringify({
  eventDraftId: "7777",  // String type now
  eventTitle: "맥주 파티 이벤트",
  // ...
}));

마이그레이션 체크리스트

  • TypeScript 인터페이스 업데이트
  • API 호출 코드 수정
  • Mock 데이터 타입 변경
  • 문서 업데이트
  • 빌드 성공 확인
  • 개발 서버 테스트
  • 실제 API 연동 테스트

🔗 관련 API 문서


📌 주의사항

  1. 타입 주의: eventId는 이제 string 타입입니다. 숫자로 사용하지 마세요.
  2. Mock 데이터: localStorage에 저장할 때 문자열 타입으로 저장해야 합니다.
  3. API 호출: 프론트엔드에서 백엔드로 전송 시 string으로 전송됩니다.
  4. 하위 호환성: 기존 number 타입 데이터는 작동하지 않으므로 localStorage를 초기화해야 합니다.

🔄 롤백 방법

만약 이전 버전으로 돌아가야 한다면:

  1. git revert 또는 특정 커밋으로 복원
  2. localStorage 초기화: localStorage.removeItem('eventCreationData')
  3. 개발 서버 재시작