Merge branch 'main' of https://github.com/won-ktds/smarketing-frontend

src/components/poster/PosterPreview.vue

@@ -28,43 +28,58 @@
     <div v-else class="poster-result">
       <!-- 포스터 이미지 -->
       <div class="poster-image-container mb-4">
+        <!-- ✅ 이미지 URL 유효성 검사 후 렌더링 -->
         <v-img
-          :src="posterData.posterImage || '/images/placeholder-poster.jpg'"
+          v-if="getPosterImageUrl()"
+          :src="getPosterImageUrl()"
           :alt="posterData.title"
           cover
-          class="rounded-lg elevation-4"
+          class="rounded-lg elevation-4 poster-image"
-          style="aspect-ratio: 3/4; max-height: 400px;"
+          style="aspect-ratio: 3/4; max-height: 400px; width: 100%;"
         >
           <template v-slot:placeholder>
             <div class="d-flex align-center justify-center fill-height">
-              <v-progress-circular indeterminate />
+              <v-progress-circular indeterminate color="primary" />
+              <span class="ml-2">이미지 로딩 중...</span>
             </div>
           </template>
           
           <template v-slot:error>
-            <div class="d-flex align-center justify-center fill-height bg-grey-lighten-3">
+            <div class="d-flex flex-column align-center justify-center fill-height bg-grey-lighten-3">
-              <v-icon size="48" color="grey">mdi-image-broken</v-icon>
+              <v-icon size="48" color="grey" class="mb-2">mdi-image-broken</v-icon>
+              <span class="text-body-2 text-grey">이미지를 불러올 수 없습니다</span>
+              <span class="text-caption text-grey mt-1">{{ getPosterImageUrl() }}</span>
             </div>
           </template>
         </v-img>
 
+        <!-- ✅ 이미지가 없거나 유효하지 않은 경우 -->
+        <div v-else class="d-flex flex-column align-center justify-center fill-height bg-grey-lighten-4 rounded-lg" style="aspect-ratio: 3/4; max-height: 400px;">
+          <v-icon size="48" color="grey" class="mb-2">mdi-image-off</v-icon>
+          <span class="text-body-2 text-grey">포스터 이미지가 없습니다</span>
+          <span class="text-caption text-grey mt-1" v-if="posterData.posterImage">
+            URL: {{ posterData.posterImage }}
+          </span>
+        </div>
+
         <!-- 이미지 액션 버튼 -->
-        <div class="image-actions mt-3">
+        <div class="image-actions mt-4 d-flex gap-2 justify-center">
           <v-btn
-            size="small"
+            color="primary"
             variant="outlined"
             prepend-icon="mdi-download"
             @click="downloadPoster"
-            class="mr-2"
+            :disabled="!getPosterImageUrl()"
           >
             다운로드
           </v-btn>
           
           <v-btn
-            size="small"
+            color="secondary"
             variant="outlined"
             prepend-icon="mdi-share-variant"
             @click="sharePoster"
+            :disabled="!getPosterImageUrl()"
           >
             공유
           </v-btn>
@@ -72,97 +87,95 @@
       </div>
 
       <!-- 포스터 정보 -->
-      <v-card variant="outlined" class="mb-4">
+      <v-card class="mb-4" variant="outlined">
         <v-card-title class="text-h6">
-          {{ posterData.title }}
+          {{ posterData.title || '제목 없음' }}
         </v-card-title>
         
         <v-card-text>
-          <div v-if="posterData.content" class="mb-3">
+          <div class="poster-details">
-            <div class="text-subtitle-2 mb-1">포스터 내용:</div>
+            <div v-if="posterData.targetAudience" class="detail-item mb-2">
-            <div class="text-body-2">{{ posterData.content }}</div>
+              <v-icon class="mr-2" size="small">mdi-target</v-icon>
+              <span class="text-body-2">
+                <strong>홍보 대상:</strong> {{ posterData.targetAudience }}
+              </span>
             </div>
             
-          <div class="d-flex align-center mb-2">
+            <div v-if="posterData.imageStyle" class="detail-item mb-2">
+              <v-icon class="mr-2" size="small">mdi-palette</v-icon>
+              <span class="text-body-2">
+                <strong>이미지 스타일:</strong> {{ posterData.imageStyle }}
+              </span>
+            </div>
+            
+            <div v-if="posterData.category" class="detail-item mb-2">
+              <v-icon class="mr-2" size="small">mdi-tag</v-icon>
+              <span class="text-body-2">
+                <strong>카테고리:</strong> {{ posterData.category }}
+              </span>
+            </div>
+            
+            <div v-if="posterData.promotionStartDate" class="detail-item mb-2">
+              <v-icon class="mr-2" size="small">mdi-calendar-start</v-icon>
+              <span class="text-body-2">
+                <strong>홍보 기간:</strong> 
+                {{ formatDate(posterData.promotionStartDate) }} 
+                <span v-if="posterData.promotionEndDate">
+                  ~ {{ formatDate(posterData.promotionEndDate) }}
+                </span>
+              </span>
+            </div>
+
+            <div v-if="posterData.status" class="detail-item">
               <v-chip 
                 :color="getStatusColor(posterData.status)" 
                 size="small"
-              class="mr-2"
+                variant="flat"
               >
                 {{ getStatusText(posterData.status) }}
               </v-chip>
-            <v-chip
-              color="primary"
-              size="small"
-              variant="outlined"
-            >
-              {{ posterData.contentType }}
-            </v-chip>
             </div>
-
-          <div v-if="posterData.imageStyle" class="text-caption text-grey-600">
-            스타일: {{ posterData.imageStyle }}
           </div>
         </v-card-text>
       </v-card>
 
-      <!-- 포스터 사이즈 옵션 -->
+      <!-- 다양한 사이즈 포스터 (있는 경우) -->
       <v-card v-if="posterData.posterSizes && Object.keys(posterData.posterSizes).length > 0" variant="outlined">
-        <v-card-title class="text-subtitle-1">
+        <v-card-title class="text-h6">
           <v-icon class="mr-2">mdi-resize</v-icon>
           다양한 사이즈
         </v-card-title>
         
         <v-card-text>
           <div class="d-flex flex-wrap gap-2">
-            <v-chip
+            <v-btn
               v-for="(url, size) in posterData.posterSizes"
               :key="size"
+              variant="outlined"
+              size="small"
               @click="viewPosterSize(size, url)"
               class="cursor-pointer"
-              variant="outlined"
             >
               {{ size }}
-            </v-chip>
+            </v-btn>
           </div>
         </v-card-text>
       </v-card>
-
-      <!-- 원본 이미지들 -->
-      <div v-if="posterData.originalImages && posterData.originalImages.length > 0" class="mt-4">
-        <div class="text-subtitle-2 mb-2">사용된 원본 이미지:</div>
-        <v-row>
-          <v-col
-            v-for="(image, index) in posterData.originalImages"
-            :key="index"
-            cols="6"
-            sm="4"
-          >
-            <v-img
-              :src="image"
-              :alt="`원본 이미지 ${index + 1}`"
-              cover
-              height="80"
-              class="rounded"
-            />
-          </v-col>
-        </v-row>
-      </div>
     </div>
 
-    <!-- 포스터 사이즈 보기 다이얼로그 -->
+    <!-- 사이즈별 포스터 보기 다이얼로그 -->
-    <v-dialog v-model="showSizeDialog" max-width="600">
+    <v-dialog v-model="showSizeDialog" max-width="600px">
       <v-card>
         <v-card-title>
-          포스터 사이즈: {{ selectedSize }}
+          {{ selectedSize }} 포스터
         </v-card-title>
         
-        <v-card-text class="text-center">
+        <v-card-text>
           <v-img
             :src="selectedSizeUrl"
-            :alt="`포스터 ${selectedSize}`"
+            cover
-            contain
+            class="rounded-lg"
-            max-height="400"
+            style="max-height: 500px;"
           />
         </v-card-text>
         
@@ -185,7 +198,7 @@
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
 /**
  * 포스터 미리보기 컴포넌트
@@ -211,6 +224,38 @@ const showSizeDialog = ref(false)
 const selectedSize = ref('')
 const selectedSizeUrl = ref('')
 
+/**
+ * ✅ 포스터 이미지 URL 검증 및 반환
+ */
+const getPosterImageUrl = () => {
+  if (!props.posterData) return null
+  
+  const posterImage = props.posterData.posterImage
+  
+  // 디버깅을 위한 로그
+  console.log('🖼️ [PosterPreview] 이미지 URL 검증:', {
+    posterImage,
+    type: typeof posterImage,
+    length: posterImage?.length,
+    isString: typeof posterImage === 'string',
+    isValidUrl: posterImage && typeof posterImage === 'string' && posterImage.length > 10
+  })
+  
+  // URL 유효성 검사
+  if (posterImage && typeof posterImage === 'string' && posterImage.length > 10) {
+    // HTTP(S) URL 또는 Data URL 확인
+    if (posterImage.startsWith('http') || 
+        posterImage.startsWith('data:image/') || 
+        posterImage.startsWith('blob:') ||
+        posterImage.startsWith('//')) {
+      return posterImage
+    }
+  }
+  
+  console.warn('⚠️ [PosterPreview] 유효하지 않은 이미지 URL:', posterImage)
+  return null
+}
+
 /**
  * 상태 색상 반환
  */
@@ -236,42 +281,83 @@ const getStatusText = (status) => {
 }
 
 /**
- * 포스터 다운로드
+ * 날짜 포맷팅
  */
-const downloadPoster = () => {
+const formatDate = (dateString) => {
-  if (!props.posterData?.posterImage) return
+  if (!dateString) return ''
   
-  const link = document.createElement('a')
+  try {
-  link.href = props.posterData.posterImage
+    const date = new Date(dateString)
-  link.download = `${props.posterData.title || '포스터'}.jpg`
+    return date.toLocaleDateString('ko-KR', {
-  document.body.appendChild(link)
+      year: 'numeric',
-  link.click()
+      month: 'long',
-  document.body.removeChild(link)
+      day: 'numeric'
+    })
+  } catch (error) {
+    return dateString
+  }
 }
 
 /**
- * 포스터 공유
+ * ✅ 포스터 다운로드 - URL 검증 추가
+ */
+const downloadPoster = () => {
+  const imageUrl = getPosterImageUrl()
+  if (!imageUrl) {
+    console.error('❌ [PosterPreview] 다운로드할 이미지 URL이 없습니다')
+    return
+  }
+
+  console.log('📥 [PosterPreview] 포스터 다운로드 시도:', imageUrl)
+
+  try {
+    const link = document.createElement('a')
+    link.href = imageUrl
+    link.download = `${props.posterData.title || '포스터'}.jpg`
+    link.target = '_blank' // 새 탭에서 열기
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    
+    console.log('✅ [PosterPreview] 다운로드 링크 클릭 완료')
+  } catch (error) {
+    console.error('❌ [PosterPreview] 다운로드 실패:', error)
+  }
+}
+
+/**
+ * ✅ 포스터 공유 - URL 검증 추가
  */
 const sharePoster = async () => {
-  if (!props.posterData?.posterImage) return
+  const imageUrl = getPosterImageUrl()
+  if (!imageUrl) {
+    console.error('❌ [PosterPreview] 공유할 이미지 URL이 없습니다')
+    return
+  }
+
+  console.log('🔗 [PosterPreview] 포스터 공유 시도:', imageUrl)
 
   if (navigator.share) {
     try {
       await navigator.share({
-        title: props.posterData.title,
+        title: props.posterData.title || '생성된 포스터',
         text: '생성된 홍보 포스터를 확인해보세요!',
-        url: props.posterData.posterImage
+        url: imageUrl
       })
+      console.log('✅ [PosterPreview] 공유 완료')
     } catch (error) {
-      console.log('공유 취소됨')
+      if (error.name !== 'AbortError') {
+        console.error('❌ [PosterPreview] 공유 실패:', error)
+      }
     }
   } else {
     // 클립보드에 URL 복사
     try {
-      await navigator.clipboard.writeText(props.posterData.posterImage)
+      await navigator.clipboard.writeText(imageUrl)
-      // 성공 알림 표시 (부모 컴포넌트에서 처리)
+      console.log('✅ [PosterPreview] 클립보드 복사 완료')
+      // 성공 알림은 부모 컴포넌트에서 처리
     } catch (error) {
-      console.error('클립보드 복사 실패:', error)
+      console.error('❌ [PosterPreview] 클립보드 복사 실패:', error)
     }
   }
 }
@@ -289,9 +375,12 @@ const viewPosterSize = (size, url) => {
  * 선택된 사이즈 포스터 다운로드
  */
 const downloadSelectedSize = () => {
+  if (!selectedSizeUrl.value) return
+  
   const link = document.createElement('a')
   link.href = selectedSizeUrl.value
   link.download = `${props.posterData.title || '포스터'}_${selectedSize.value}.jpg`
+  link.target = '_blank'
   document.body.appendChild(link)
   link.click()
   document.body.removeChild(link)
@@ -307,12 +396,50 @@ const downloadSelectedSize = () => {
   position: relative;
 }
 
+.poster-image {
+  border: 1px solid #e0e0e0;
+}
+
 .image-actions {
   display: flex;
   justify-content: center;
 }
 
+.detail-item {
+  display: flex;
+  align-items: center;
+}
+
 .cursor-pointer {
   cursor: pointer;
 }
+
+.gap-2 {
+  gap: 8px;
+}
+
+.gap-3 {
+  gap: 12px;
+}
+
+/* 호버 효과 */
+.v-btn:hover {
+  transform: translateY(-1px);
+  transition: transform 0.2s ease;
+}
+
+/* 이미지 로딩 애니메이션 */
+.v-img {
+  transition: opacity 0.3s ease;
+}
+
+/* 상세 정보 스타일링 */
+.poster-details .detail-item {
+  padding: 4px 0;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.poster-details .detail-item:last-child {
+  border-bottom: none;
+}
 </style>

src/store/content.js

@@ -1,4 +1,4 @@
-//* src/store/content.js - 두 파일 완전 통합 버전 (Part 1)
+//* src/store/content.js - 콘텐츠 관리 기능이 통합된 최종 버전
 import { defineStore } from 'pinia'
 import { ref, computed, readonly } from 'vue'
 import contentService from '@/services/content'
@@ -203,32 +203,91 @@ export const useContentStore = defineStore('content', () => {
     }
   }
 
-  /**
+  // ===== 기존 API 호출 함수들을 통합된 방식으로 수정 =====
-   * 콘텐츠 목록 조회 (기존 호환성 유지)
-   */
-  const fetchContentList = async (requestFilters = {}) => {
-    console.log('📋 [STORE] fetchContentList 호출:', requestFilters)
-    return await loadContents(requestFilters)
-  }
   
-  // ===== AI 콘텐츠 생성 =====
   /**
-   * SNS 콘텐츠 생성 (API 설계서 기준) - 이미지 디버깅 강화
+   * generateContent를 실제 API 호출로 수정 - 단일 파라미터로 변경하고 contentService.generateContent 사용
    */
-  const generateSnsContent = async (contentData) => {
+  const generateContent = async (contentData) => {
     generating.value = true
     
     try {
-      console.log('🎯 [STORE] SNS 콘텐츠 생성 요청:', contentData)
+      console.log('🎯 [STORE] generateContent 호출됨:', contentData)
-      console.log('📁 [STORE] SNS 이미지 확인:', {
+      
-        hasImages: !!contentData.images,
+      // contentService의 통합 generateContent 함수 사용
-        imageCount: contentData.images?.length || 0,
+      const result = await contentService.generateContent(contentData)
-        imageTypes: contentData.images?.map(img => typeof img) || [],
+      
-        imageSizes: contentData.images?.map(img => img?.length || 'unknown') || []
+      console.log('🎯 [STORE] API 응답:', result)
-      })
+      
+      if (result && result.success) {
+        generatedContent.value = result.data
+        return { 
+          success: true, 
+          data: result.data, 
+          content: result.data?.content || result.data?.text,
+          hashtags: result.data?.hashtags || []
+        }
+      } else {
+        return { 
+          success: false, 
+          error: result?.message || result?.error || 'API 응답이 올바르지 않습니다.'
+        }
+      }
+    } catch (error) {
+      console.error('❌ [STORE] generateContent 실패:', error)
+      return { 
+        success: false, 
+        error: error.message || '네트워크 오류가 발생했습니다.' 
+      }
+    } finally {
+      generating.value = false
+    }
+  }
+
+  /**
+   * saveContent를 실제 API 호출로 수정 - 단일 파라미터로 변경
+   */
+  const saveContent = async (contentData) => {
+    isLoading.value = true
+    
+    try {
+      console.log('💾 [STORE] saveContent 호출됨:', contentData)
+      
+      // contentService의 통합 saveContent 함수 사용
+      const result = await contentService.saveContent(contentData)
+      
+      if (result && result.success) {
+        // 콘텐츠 목록 새로고침
+        await fetchContentList()
+        return { success: true, message: '콘텐츠가 저장되었습니다.' }
+      } else {
+        return { 
+          success: false, 
+          error: result?.message || result?.error || '저장에 실패했습니다.'
+        }
+      }
+    } catch (error) {
+      console.error('❌ [STORE] saveContent 실패:', error)
+      return { 
+        success: false, 
+        error: error.message || '네트워크 오류가 발생했습니다.' 
+      }
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  /**
+   * 포스터 저장 - 수정된 버전
+   */
+  const savePoster = async (saveData) => {
+    loading.value = true
+    
+    try {
+      console.log('💾 [STORE] 포스터 저장 요청:', saveData)
       
       // 매장 ID 조회 (필요한 경우)
-      let storeId = contentData.storeId
+      let storeId = saveData.storeId
       if (!storeId) {
         try {
           storeId = await getStoreId()
@@ -238,282 +297,64 @@ export const useContentStore = defineStore('content', () => {
         }
       }
       
-      // SnsContentCreateRequest 구조에 맞게 데이터 변환
+      // ✅ PosterContentSaveRequest 구조에 맞게 데이터 변환 (contentId 처리 개선)
       const requestData = {
+        // ✅ contentId 처리: 값이 있으면 사용, 없으면 임시 ID 생성
+        contentId: saveData.contentId || Date.now(),
         storeId: storeId,
-        storeName: contentData.storeName || '',
+        title: saveData.title || '',
-        storeType: contentData.storeType || '',
+        
-        platform: contentData.platform || 'INSTAGRAM',
+        // ✅ content 필드에 실제 값 보장 (null이면 안됨)
-        title: contentData.title || 'SNS 게시물',
+        content: saveData.content || saveData.title || '포스터 콘텐츠',
-        category: contentData.category || '메뉴소개',
+        
-        requirement: contentData.requirement || contentData.requirements || 'SNS 게시물을 생성해주세요',
+        // ✅ images 배열이 비어있지 않도록 보장
-        target: contentData.target || contentData.targetAudience || '',
+        images: Array.isArray(saveData.images) ? saveData.images.filter(img => img) : [],
-        contentType: contentData.contentType || 'SNS 게시물',
+        
-        eventName: contentData.eventName || '',
+        status: saveData.status || 'PUBLISHED',
-        startDate: contentData.startDate,
+        category: saveData.category || '이벤트',
-        endDate: contentData.endDate,
+        requirement: saveData.requirement || '',
-        images: contentData.images || [],
+        toneAndManner: saveData.toneAndManner || '친근함',
-        photoStyle: contentData.photoStyle || '밝고 화사한',
+        emotionIntensity: saveData.emotionIntensity || '보통',
-        targetAge: contentData.targetAge || '20대',
+        eventName: saveData.eventName || '',
-        toneAndManner: contentData.toneAndManner || '친근함',
+        startDate: saveData.startDate,
-        emotionalIntensity: contentData.emotionalIntensity || contentData.emotionIntensity || '보통',
+        endDate: saveData.endDate,
-        promotionalType: contentData.promotionalType || contentData.promotionType || '',
+        photoStyle: saveData.photoStyle || '밝고 화사한'
-        eventDate: contentData.eventDate,
-        hashtagStyle: contentData.hashtagStyle || '',
-        hashtagCount: contentData.hashtagCount || 10,
-        contentLength: contentData.contentLength || '보통',
-        includeHashtags: contentData.includeHashtags !== false,
-        includeEmojis: contentData.includeEmojis !== false,
-        includeEmoji: contentData.includeEmoji !== false,
-        includeCallToAction: contentData.includeCallToAction !== false,
-        includeLocation: contentData.includeLocation || false,
-        forInstagramStory: contentData.forInstagramStory || false,
-        forNaverBlogPost: contentData.forNaverBlogPost || false,
-        alternativeTitleCount: contentData.alternativeTitleCount || 3,
-        alternativeHashtagSetCount: contentData.alternativeHashtagSetCount || 2,
-        preferredAiModel: contentData.preferredAiModel || ''
       }
       
-      console.log('📤 [STORE] SNS 변환된 요청 데이터:', {
+      // ✅ 필수 필드 검증
+      if (!requestData.title) {
+        throw new Error('제목은 필수입니다.')
+      }
+      if (!requestData.images || requestData.images.length === 0) {
+        throw new Error('이미지는 필수입니다.')
+      }
+      
+      console.log('📝 [STORE] 최종 저장 요청 데이터:', {
         ...requestData,
         images: `${requestData.images.length}개 이미지`
       })
       
-      const result = await contentService.generateSnsContent(requestData)
+      const result = await contentService.savePoster(requestData)
       
       if (result.success) {
-        console.log('✅ [STORE] SNS 콘텐츠 생성 성공:', result.data)
+        console.log('✅ [STORE] 포스터 저장 성공')
-        generatedContent.value = result.data
         
-        return {
+        // 목록 새로고침
-          success: true,
+        await loadContents()
-          content: result.data.content || '콘텐츠가 생성되었습니다.',
+        
-          hashtags: result.data.hashtags || [],
+        return { success: true, message: '포스터가 저장되었습니다.' }
-          data: result.data
-        }
       } else {
-        console.error('❌ [STORE] SNS 콘텐츠 생성 실패:', result.message)
+        console.error('❌ [STORE] 포스터 저장 실패:', result.message)
-        return {
+        return { success: false, error: result.message }
-          success: false,
-          message: result.message || 'SNS 콘텐츠 생성에 실패했습니다.',
-          error: result.error
-        }
-      }
-      
-    } catch (error) {
-      console.error('❌ [STORE] SNS 콘텐츠 생성 예외:', error)
-      return {
-        success: false,
-        message: error.message || '네트워크 오류가 발생했습니다.',
-        error: error
-      }
-    } finally {
-      generating.value = false
-    }
-  }
-  //* src/store/content.js - 두 파일 완전 통합 버전 (Part 2)
-  /**
-   * 포스터 생성 (API 설계서 기준) - 이미지 디버깅 대폭 강화
-   */
-  const generatePoster = async (posterData) => {
-    generating.value = true
-    
-    try {
-      console.log('🎯 [STORE] 포스터 생성 요청 받음:', posterData)
-      console.log('📁 [STORE] 포스터 이미지 상세 분석:', {
-        hasImages: !!posterData.images,
-        imageCount: posterData.images?.length || 0,
-        imageArray: Array.isArray(posterData.images),
-        firstImageInfo: posterData.images?.[0] ? {
-          type: typeof posterData.images[0],
-          length: posterData.images[0]?.length || 'unknown',
-          isBase64: posterData.images[0]?.startsWith?.('data:image/') || false,
-          preview: posterData.images[0]?.substring(0, 50) + '...'
-        } : null
-      })
-      
-      // 매장 ID 조회 (필요한 경우)
-      let storeId = posterData.storeId
-      if (storeId === undefined || storeId === null) {
-        try {
-          storeId = await getStoreId()
-        } catch (error) {
-          console.warn('⚠️ 매장 ID 조회 실패, 기본값 사용:', error)
-          storeId = 1
-        }
-      }
-      
-      // ✅ 실제 전달받은 데이터만 사용 (기본값 완전 제거)
-      const requestData = {}
-      
-      // 조건부로 필드 추가 (값이 있을 때만)
-      if (storeId !== undefined) {
-        requestData.storeId = storeId
-        console.log('📝 [STORE] storeId 추가:', requestData.storeId)
-      }
-      
-      if (posterData.title) {
-        requestData.title = posterData.title
-        console.log('📝 [STORE] title 추가:', requestData.title)
-      }
-      
-      if (posterData.targetAudience) {
-        requestData.targetAudience = posterData.targetAudience
-        console.log('📝 [STORE] targetAudience 추가:', requestData.targetAudience)
-      } else if (posterData.targetType) {
-        requestData.targetAudience = posterData.targetType
-        console.log('📝 [STORE] targetAudience 추가 (from targetType):', requestData.targetAudience)
-      }
-      
-      if (posterData.promotionStartDate) {
-        requestData.promotionStartDate = posterData.promotionStartDate
-        console.log('📝 [STORE] promotionStartDate 추가:', requestData.promotionStartDate)
-      }
-      
-      if (posterData.promotionEndDate) {
-        requestData.promotionEndDate = posterData.promotionEndDate
-        console.log('📝 [STORE] promotionEndDate 추가:', requestData.promotionEndDate)
-      }
-      
-      // 선택적 필드들
-      if (posterData.eventName) {
-        requestData.eventName = posterData.eventName
-        console.log('📝 [STORE] eventName 추가:', requestData.eventName)
-      }
-      
-      if (posterData.imageStyle) requestData.imageStyle = posterData.imageStyle
-      if (posterData.promotionType) requestData.promotionType = posterData.promotionType
-      if (posterData.emotionIntensity) requestData.emotionIntensity = posterData.emotionIntensity
-      if (posterData.category) requestData.category = posterData.category
-      if (posterData.requirement || posterData.requirements) {
-        requestData.requirement = posterData.requirement || posterData.requirements
-      }
-      if (posterData.toneAndManner) requestData.toneAndManner = posterData.toneAndManner
-      if (posterData.startDate) requestData.startDate = posterData.startDate
-      if (posterData.endDate) requestData.endDate = posterData.endDate
-      if (posterData.photoStyle) requestData.photoStyle = posterData.photoStyle
-      if (posterData.targetAge) {
-        requestData.targetAge = posterData.targetAge
-        console.log('📝 [STORE] targetAge 추가:', requestData.targetAge)
-      }
-      
-      // ✅ 이미지 처리 - 가장 중요한 부분
-      console.log('📁 [STORE] 이미지 처리 시작...')
-      if (posterData.images && Array.isArray(posterData.images) && posterData.images.length > 0) {
-        console.log('📁 [STORE] 원본 이미지 배열:', posterData.images.length, '개')
-        
-        // 유효한 이미지만 필터링
-        const validImages = posterData.images.filter(img => {
-          const isValid = img && typeof img === 'string' && img.length > 0
-          console.log('📁 [STORE] 이미지 유효성 검사:', { 
-            isValid, 
-            type: typeof img, 
-            length: img?.length,
-            isBase64: img?.startsWith?.('data:image/')
-          })
-          return isValid
-        })
-        
-        requestData.images = validImages
-        console.log('📁 [STORE] 필터링된 이미지:', validImages.length, '개')
-        console.log('📁 [STORE] 첫 번째 이미지 샘플:', validImages[0]?.substring(0, 100) + '...')
-      } else {
-        requestData.images = []
-        console.warn('📁 [STORE] ⚠️  이미지가 없거나 유효하지 않음!')
-        console.warn('📁 [STORE] posterData.images:', posterData.images)
-      }
-      
-      console.log('🔍 [STORE] 최종 요청 데이터 확인:')
-      console.log('  - 제목:', requestData.title)
-      console.log('  - 홍보 대상:', requestData.targetAudience)
-      console.log('  - 타겟 연령층:', requestData.targetAge)
-      console.log('  - 홍보 시작일:', requestData.promotionStartDate)
-      console.log('  - 홍보 종료일:', requestData.promotionEndDate)
-      console.log('  - 이미지 개수:', requestData.images.length)
-      
-      if (requestData.images.length === 0) {
-        console.error('❌ [STORE] 포스터에 이미지가 없습니다!')
-        return {
-          success: false,
-          message: '포스터 생성을 위해서는 최소 1개의 이미지가 필요합니다.'
-        }
-      }
-      
-      const result = await contentService.generatePoster(requestData)
-      
-      if (result.success) {
-        console.log('✅ [STORE] 포스터 생성 성공:', result.data)
-        generatedContent.value = result.data
-        
-        return {
-          success: true,
-          content: result.data.posterImage || result.data.content || '포스터가 생성되었습니다.',
-          posterImage: result.data.posterImage,
-          title: result.data.title,
-          data: result.data
-        }
-      } else {
-        console.error('❌ [STORE] 포스터 생성 실패:', result.message)
-        return {
-          success: false,
-          message: result.message || '포스터 생성에 실패했습니다.',
-          error: result.error
-        }
-      }
-      
-    } catch (error) {
-      console.error('❌ [STORE] 포스터 생성 예외:', error)
-      return {
-        success: false,
-        message: error.message || '네트워크 오류가 발생했습니다.',
-        error: error
-      }
-    } finally {
-      generating.value = false
-    }
-  }
-
-  /**
-   * AI 콘텐츠 생성 통합 메서드 (기존 호환성 유지)
-   */
-  const generateContent = async (type, formData) => {
-    console.log('🎯 [STORE] 콘텐츠 생성 요청 (통합):', { type, formData })
-    console.log('📁 [STORE] 통합 메서드 이미지 확인:', {
-      hasImages: !!formData.images,
-      imageCount: formData.images?.length || 0
-    })
-    
-    isLoading.value = true
-    
-    try {
-      let result
-      
-      // 타입에 따라 적절한 메서드 호출
-      if (type === 'poster' || formData.contentType === 'poster' || formData.type === 'poster') {
-        console.log('🎯 [STORE] 포스터 생성으로 라우팅')
-        result = await generatePoster(formData)
-      } else if (type === 'sns' || type === 'snsContent') {
-        console.log('🎯 [STORE] SNS 생성으로 라우팅')
-        result = await generateSnsContent(formData)
-      } else {
-        console.log('🎯 [STORE] 기본 SNS 생성으로 라우팅')
-        result = await generateSnsContent(formData)
-      }
-      
-      if (result.success) {
-        return { success: true, data: result.data || result }
-      } else {
-        return { success: false, error: result.message || result.error }
       }
     } catch (error) {
-      console.error('❌ [STORE] 통합 콘텐츠 생성 실패:', error)
+      console.error('❌ [STORE] 포스터 저장 예외:', error)
       return { success: false, error: '네트워크 오류가 발생했습니다.' }
     } finally {
-      isLoading.value = false
+      loading.value = false
     }
   }
 
-  // ===== 콘텐츠 저장 =====
   /**
    * SNS 콘텐츠 저장
    */
@@ -536,25 +377,23 @@ export const useContentStore = defineStore('content', () => {
       
       // SnsContentSaveRequest 구조에 맞게 데이터 변환
       const requestData = {
-        contentId: saveData.contentId,
+        contentId: saveData.contentId || Date.now(), // 임시 ID 생성
         storeId: storeId,
         platform: saveData.platform || 'INSTAGRAM',
         title: saveData.title || '',
         content: saveData.content || '',
         hashtags: saveData.hashtags || [],
         images: saveData.images || [],
-        finalTitle: saveData.finalTitle || saveData.title || '',
+        finalTitle: saveData.finalTitle || saveData.title,
-        finalContent: saveData.finalContent || saveData.content || '',
+        finalContent: saveData.finalContent || saveData.content,
         status: saveData.status || 'DRAFT',
         category: saveData.category || '메뉴소개',
         requirement: saveData.requirement || '',
         toneAndManner: saveData.toneAndManner || '친근함',
-        emotionIntensity: saveData.emotionIntensity || saveData.emotionalIntensity || '보통',
+        emotionIntensity: saveData.emotionIntensity || '보통',
         eventName: saveData.eventName || '',
         startDate: saveData.startDate,
-        endDate: saveData.endDate,
+        endDate: saveData.endDate
-        promotionalType: saveData.promotionalType,
-        eventDate: saveData.eventDate
       }
       
       const result = await contentService.saveSnsContent(requestData)
@@ -579,127 +418,39 @@ export const useContentStore = defineStore('content', () => {
   }
 
   /**
-   * 포스터 저장
+   * fetchContentList를 실제 API 호출로 수정 (기존 호환성 유지)
    */
-  const savePoster = async (saveData) => {
+  const fetchContentList = async (requestFilters = {}) => {
-    loading.value = true
+    console.log('📋 [STORE] fetchContentList 호출:', requestFilters)
-    
+    return await loadContents(requestFilters)
-    try {
-      console.log('💾 [STORE] 포스터 저장 요청:', saveData)
-      
-      // 매장 ID 조회 (필요한 경우)
-      let storeId = saveData.storeId
-      if (!storeId) {
-        try {
-          storeId = await getStoreId()
-        } catch (error) {
-          console.warn('⚠️ 매장 ID 조회 실패, 기본값 사용:', error)
-          storeId = 1
-        }
-      }
-      
-      // PosterContentSaveRequest 구조에 맞게 데이터 변환
-      const requestData = {
-        contentId: saveData.contentId,
-        storeId: storeId,
-        title: saveData.title || '',
-        content: saveData.content || '',
-        images: saveData.images || [],
-        status: saveData.status || 'DRAFT',
-        category: saveData.category || '이벤트',
-        requirement: saveData.requirement || '',
-        toneAndManner: saveData.toneAndManner || '친근함',
-        emotionIntensity: saveData.emotionIntensity || '보통',
-        eventName: saveData.eventName || '',
-        startDate: saveData.startDate,
-        endDate: saveData.endDate,
-        photoStyle: saveData.photoStyle || '밝고 화사한',
-        targetAudience: saveData.targetAudience,
-        promotionType: saveData.promotionType,
-        imageStyle: saveData.imageStyle,
-        promotionStartDate: saveData.promotionStartDate,
-        promotionEndDate: saveData.promotionEndDate
-      }
-      
-      const result = await contentService.savePoster(requestData)
-      
-      if (result.success) {
-        console.log('✅ [STORE] 포스터 저장 성공')
-        
-        // 목록 새로고침
-        await loadContents()
-        
-        return { success: true, message: '포스터가 저장되었습니다.' }
-      } else {
-        console.error('❌ [STORE] 포스터 저장 실패:', result.message)
-        return { success: false, error: result.message }
-      }
-    } catch (error) {
-      console.error('❌ [STORE] 포스터 저장 예외:', error)
-      return { success: false, error: '네트워크 오류가 발생했습니다.' }
-    } finally {
-      loading.value = false
-    }
   }
 
   /**
-   * 콘텐츠 저장 통합 메서드 (기존 호환성 유지)
+   * fetchOngoingContents를 실제 API 호출로 수정
-   */
-  const saveContent = async (type, contentData) => {
-    console.log('💾 [STORE] 콘텐츠 저장 요청 (통합):', { type, contentData })
-    
-    isLoading.value = true
-    
-    try {
-      let result
-      
-      // 타입에 따라 적절한 메서드 호출
-      if (type === 'poster' || contentData.contentType === 'poster' || contentData.type === 'poster') {
-        result = await savePoster(contentData)
-      } else if (type === 'sns' || type === 'snsContent') {
-        result = await saveSnsContent(contentData)
-      } else {
-        // 기본적으로 SNS 콘텐츠로 간주
-        result = await saveSnsContent(contentData)
-      }
-      
-      if (result.success) {
-        return { success: true, message: result.message || '콘텐츠가 저장되었습니다.' }
-      } else {
-        return { success: false, error: result.error }
-      }
-    } catch (error) {
-      console.error('❌ [STORE] 통합 콘텐츠 저장 실패:', error)
-      return { success: false, error: '네트워크 오류가 발생했습니다.' }
-    } finally {
-      isLoading.value = false
-    }
-  }
-
-  // ===== 기타 콘텐츠 관리 메서드들 =====
-  /**
-   * 진행 중인 콘텐츠 조회
    */
   const fetchOngoingContents = async (period = 'month') => {
     isLoading.value = true
-    loading.value = true
     
     try {
       const result = await contentService.getOngoingContents(period)
       
-      if (result.success) {
+      if (result && result.success) {
         ongoingContents.value = result.data || []
         return { success: true }
       } else {
-        console.error('❌ 진행 중인 콘텐츠 조회 실패:', result.message)
+        return { 
-        return { success: false, error: result.message }
+          success: false, 
+          error: result?.message || result?.error || '진행 중인 콘텐츠 조회에 실패했습니다.'
+        }
       }
     } catch (error) {
-      console.error('❌ 진행 중인 콘텐츠 조회 예외:', error)
+      console.error('❌ [STORE] fetchOngoingContents 실패:', error)
-      return { success: false, error: '네트워크 오류가 발생했습니다.' }
+      return { 
+        success: false, 
+        error: error.message || '네트워크 오류가 발생했습니다.' 
+      }
     } finally {
       isLoading.value = false
-      loading.value = false
     }
   }
 
@@ -707,25 +458,33 @@ export const useContentStore = defineStore('content', () => {
    * 콘텐츠 상세 조회
    */
   const fetchContentDetail = async (contentId) => {
-    loading.value = true
+    isLoading.value = true
     
     try {
       const result = await contentService.getContentDetail(contentId)
       
-      if (result.success) {
+      if (result && result.success) {
         selectedContent.value = result.data
-        return result.data
+        return { success: true, data: result.data }
       } else {
-        throw new Error(result.message || '콘텐츠 상세 조회에 실패했습니다.')
+        return { 
+          success: false, 
+          error: result?.message || result?.error || '콘텐츠 상세 조회에 실패했습니다.'
+        }
       }
     } catch (error) {
-      console.error('❌ 콘텐츠 상세 조회 실패:', error)
+      console.error('❌ [STORE] fetchContentDetail 실패:', error)
-      throw error
+      return { 
+        success: false, 
+        error: error.message || '네트워크 오류가 발생했습니다.' 
+      }
     } finally {
-      loading.value = false
+      isLoading.value = false
     }
   }
 
+  // ===== 콘텐츠 관리 기능들 =====
+  
   /**
    * 콘텐츠 수정
    */
@@ -781,80 +540,66 @@ export const useContentStore = defineStore('content', () => {
     }
   }
 
-  // ===== 유틸리티 메서드들 =====
   /**
-   * 타겟 타입을 카테고리로 매핑
+   * 콘텐츠 발행
    */
-  const mapTargetToCategory = (targetType) => {
+  const publishContent = async (contentId, publishData) => {
-    const mapping = {
+    isLoading.value = true
-      'new_menu': '메뉴소개',
-      'discount': '이벤트',
-      'store': '인테리어', 
-      'event': '이벤트',
-      'menu': '메뉴소개',
-      'service': '서비스'
-    }
-    return mapping[targetType] || '메뉴소개'
-  }
     
-  /**
+    try {
-   * 플랫폼별 특성 조회
+      const result = await contentService.publishContent(contentId, publishData)
-   */
+      
-  const getPlatformSpec = (platform) => {
+      if (result && result.success) {
-    return PLATFORM_SPECS?.[platform] || null
+        // 목록 새로고침
+        await fetchContentList()
+        return { success: true, message: '콘텐츠가 발행되었습니다.' }
+      } else {
+        return { 
+          success: false, 
+          error: result?.message || result?.error || '발행에 실패했습니다.'
         }
-
-  /**
-   * 플랫폼 유효성 검사
-   */
-  const validatePlatform = (platform) => {
-    return PLATFORM_SPECS ? Object.keys(PLATFORM_SPECS).includes(platform) : true
       }
-
+    } catch (error) {
-  /**
+      console.error('❌ [STORE] publishContent 실패:', error)
-   * 필터 설정
+      return { 
-   */
+        success: false, 
-  const setFilters = (newFilters) => {
+        error: error.message || '네트워크 오류가 발생했습니다.' 
-    filters.value = { ...filters.value, ...newFilters }
-    pagination.value.page = 1 // 필터 변경 시 첫 페이지로
       }
-
+    } finally {
-  /**
-   * 페이지네이션 설정
-   */
-  const setPagination = (newPagination) => {
-    pagination.value = { ...pagination.value, ...newPagination }
-  }
-
-  /**
-   * 상태 초기화
-   */
-  const reset = () => {
-    contentList.value = []
-    contents.value = []
-    ongoingContents.value = []
-    selectedContent.value = null
-    generatedContent.value = null
-    totalCount.value = 0
-    
-    filters.value = {
-      contentType: '',
-      platform: '',
-      period: '',
-      sortBy: 'latest'
-    }
-    
-    pagination.value = {
-      page: 1,
-      itemsPerPage: 10
-    }
-    
       isLoading.value = false
-    loading.value = false
+    }
-    generating.value = false
   }
 
-  // ===== 고급 기능들 (추가) =====
+  /**
+   * 콘텐츠 통계 조회
+   */
+  const fetchContentStats = async (options = {}) => {
+    isLoading.value = true
+    
+    try {
+      const result = await contentService.getContentStats(options)
+      
+      if (result && result.success) {
+        return { success: true, data: result.data }
+      } else {
+        return { 
+          success: false, 
+          error: result?.message || result?.error || '통계 조회에 실패했습니다.'
+        }
+      }
+    } catch (error) {
+      console.error('❌ [STORE] fetchContentStats 실패:', error)
+      return { 
+        success: false, 
+        error: error.message || '네트워크 오류가 발생했습니다.' 
+      }
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  // ===== 추가된 고급 콘텐츠 관리 기능들 =====
+  
   /**
    * 콘텐츠 검색
    */
@@ -881,7 +626,7 @@ export const useContentStore = defineStore('content', () => {
   }
 
   /**
-   * 콘텐츠 통계 조회
+   * 콘텐츠 통계 조회 (추가)
    */
   const getContentStats = async (statsFilters = {}) => {
     loading.value = true
@@ -971,54 +716,81 @@ export const useContentStore = defineStore('content', () => {
     }
   }
 
+  // ===== 유틸리티 메서드들 =====
   /**
-   * 콘텐츠 템플릿 목록 조회
+   * 타겟 타입을 카테고리로 매핑
    */
-  const getContentTemplates = async (type = 'all') => {
+  const mapTargetToCategory = (targetType) => {
-    loading.value = true
+    const mapping = {
-    
+      'new_menu': '메뉴소개',
-    try {
+      'discount': '이벤트',
-      const result = await contentService.getContentTemplates(type)
+      'store': '인테리어', 
-      
+      'event': '이벤트',
-      if (result.success) {
+      'menu': '메뉴소개',
-        return { success: true, data: result.data }
+      'service': '서비스'
-      } else {
-        return { success: false, error: result.message }
     }
-    } catch (error) {
+    return mapping[targetType] || '메뉴소개'
-      console.error('❌ 템플릿 목록 조회 실패:', error)
+  }
-      return { success: false, error: '네트워크 오류가 발생했습니다.' }
+
-    } finally {
+  /**
+   * 플랫폼별 특성 조회
+   */
+  const getPlatformSpec = (platform) => {
+    return PLATFORM_SPECS?.[platform] || null
+  }
+
+  /**
+   * 플랫폼 유효성 검사
+   */
+  const validatePlatform = (platform) => {
+    return PLATFORM_SPECS ? Object.keys(PLATFORM_SPECS).includes(platform) : true
+  }
+
+  /**
+   * 필터 설정
+   */
+  const setFilters = (newFilters) => {
+    filters.value = { ...filters.value, ...newFilters }
+    pagination.value.page = 1 // 필터 변경 시 첫 페이지로
+  }
+
+  /**
+   * 페이지네이션 설정
+   */
+  const setPagination = (newPagination) => {
+    pagination.value = { ...pagination.value, ...newPagination }
+  }
+
+  /**
+   * 상태 초기화
+   */
+  const resetState = () => {
+    contentList.value = []
+    contents.value = []
+    ongoingContents.value = []
+    selectedContent.value = null
+    generatedContent.value = null
+    totalCount.value = 0
+    
+    filters.value = {
+      contentType: '',
+      platform: '',
+      period: '',
+      sortBy: 'latest'
+    }
+    
+    pagination.value = {
+      page: 1,
+      itemsPerPage: 10
+    }
+    
+    isLoading.value = false
     loading.value = false
-    }
-  }
-
-  /**
-   * 템플릿으로 콘텐츠 생성
-   */
-  const generateFromTemplate = async (templateId, customData = {}) => {
-    generating.value = true
-    
-    try {
-      const result = await contentService.generateFromTemplate(templateId, customData)
-      
-      if (result.success) {
-        generatedContent.value = result.data
-        return { success: true, data: result.data }
-      } else {
-        return { success: false, error: result.message }
-      }
-    } catch (error) {
-      console.error('❌ 템플릿 콘텐츠 생성 실패:', error)
-      return { success: false, error: '네트워크 오류가 발생했습니다.' }
-    } finally {
     generating.value = false
   }
-  }
 
-  // ===== 반환할 store 객체 =====
   return {
-    // 상태
+    // 상태 (readonly로 보호)
     contentList: readonly(contentList),
     contents: readonly(contents), // ContentManagementView에서 사용
     ongoingContents: readonly(ongoingContents),
@@ -1038,41 +810,35 @@ export const useContentStore = defineStore('content', () => {
     paginatedContents,
     totalPages,
     
-    // 콘텐츠 목록 조회
+    // 기본 CRUD 액션들
     loadContents, // 새로 추가된 메서드 (매장 정보 조회 포함)
+    generateContent,
+    saveContent,
+    savePoster, // 포스터 전용 저장
+    saveSnsContent, // SNS 콘텐츠 전용 저장
     fetchContentList, // 기존 호환성 유지
-    
-    // AI 콘텐츠 생성
-    generateContent, // 통합 메서드 (타입에 따라 라우팅)
-    generateSnsContent, // SNS 전용
-    generatePoster, // 포스터 전용
-    
-    // 콘텐츠 저장
-    saveContent, // 통합 메서드 (타입에 따라 라우팅)
-    saveSnsContent, // SNS 전용
-    savePoster, // 포스터 전용
-    
-    // 기본 CRUD
     fetchOngoingContents,
     fetchContentDetail,
     updateContent,
     deleteContent,
     
+    // 추가 액션들
+    publishContent,
+    fetchContentStats,
+    
+    // 고급 콘텐츠 관리 기능들
+    searchContents,
+    getContentStats,
+    duplicateContent,
+    updateContentStatus,
+    toggleContentFavorite,
+    
     // 유틸리티
     mapTargetToCategory,
     getPlatformSpec,
     validatePlatform,
     setFilters,
     setPagination,
-    reset,
+    resetState
-    
-    // 고급 기능
-    searchContents,
-    getContentStats,
-    duplicateContent,
-    updateContentStatus,
-    toggleContentFavorite,
-    getContentTemplates,
-    generateFromTemplate
   }
 })

src/views/ContentCreationView.vue

@@ -1,3 +1,5 @@
+//* src/views/ContentCreationView.vue - 수정된 완전한 파일
+
 <template>
   <v-container fluid class="pa-0" style="height: 100vh; overflow: hidden;">
     <!-- 책자 형식 레이아웃 -->
@@ -205,7 +207,7 @@
                   <!-- 요구사항 -->
                   <v-textarea
                     v-model="formData.requirements"
-                    label="구체적인 요구사항 (선택사항)"
+                    label="구체적인 요구사항"
                     variant="outlined"
                     rows="3"
                     density="compact"
@@ -230,7 +232,7 @@
                     multiple
                     accept="image/*"
                     prepend-icon="mdi-camera"
-                    @change="handleFileUpload"
+                    @update:model-value="handleFileUpload"
                     density="compact"
                     :rules="selectedType === 'poster' ? imageRequiredRules : []"
                   />
@@ -270,7 +272,7 @@
                   <v-btn
                     color="primary"
                     size="large"
-                    :disabled="!formValid || remainingGenerations <= 0 || contentStore.generating"
+                    :disabled="!canGenerate || remainingGenerations <= 0 || contentStore.generating"
                     :loading="contentStore.generating"
                     @click="generateContent"
                     class="px-8"
@@ -386,6 +388,41 @@
                   
                   <!-- 콘텐츠 내용 -->
                   <div class="text-body-2 mb-3" style="line-height: 1.6;">
+                    <!-- ✅ 포스터인 경우 이미지로 표시 -->
+                    <div v-if="currentVersion.contentType === 'poster' || currentVersion.type === 'poster'">
+                      <v-img
+                        v-if="currentVersion.posterImage || currentVersion.content"
+                        :src="currentVersion.posterImage || currentVersion.content"
+                        :alt="currentVersion.title"
+                        cover
+                        class="rounded-lg elevation-2 mb-3"
+                        style="max-width: 100%; max-height: 300px; aspect-ratio: 3/4;"
+                        @click="previewImage(currentVersion.posterImage || currentVersion.content, currentVersion.title)"
+                        @error="handleImageError"
+                      >
+                        <template v-slot:placeholder>
+                          <div class="d-flex align-center justify-center fill-height bg-grey-lighten-4">
+                            <v-progress-circular indeterminate color="primary" size="32" />
+                            <span class="ml-2 text-grey">이미지 로딩 중...</span>
+                          </div>
+                        </template>
+                        
+                        <template v-slot:error>
+                          <div class="d-flex flex-column align-center justify-center fill-height bg-grey-lighten-3">
+                            <v-icon size="32" color="grey" class="mb-2">mdi-image-broken</v-icon>
+                            <span class="text-caption text-grey">이미지를 불러올 수 없습니다</span>
+                          </div>
+                        </template>
+                      </v-img>
+                      
+                      <div v-else class="d-flex flex-column align-center justify-center bg-grey-lighten-4 rounded-lg pa-8">
+                        <v-icon size="48" color="grey" class="mb-2">mdi-image-off</v-icon>
+                        <span class="text-body-2 text-grey">포스터 이미지가 없습니다</span>
+                      </div>
+                    </div>
+                    
+                    <!-- ✅ SNS인 경우 기존 텍스트 표시 -->
+                    <div v-else>
                       <div v-if="isHtmlContent(currentVersion.content)" 
                            class="html-content preview-content">
                         <div v-html="truncateHtmlContent(currentVersion.content, 200)"></div>
@@ -395,6 +432,7 @@
                       </div>
                       <div v-else>{{ truncateText(currentVersion.content, 150) }}</div>
                     </div>
+                  </div>
                   
                   <!-- 해시태그 -->
                   <div v-if="currentVersion.hashtags && currentVersion.hashtags.length > 0" class="mb-3">
@@ -466,9 +504,51 @@
         <v-divider />
         
         <v-card-text class="pa-4" style="max-height: 500px;">
-          <!-- 전체 콘텐츠 -->
+          <!-- ✅ 포스터인 경우 이미지 표시, SNS인 경우 텍스트 표시 -->
           <div class="mb-4">
             <h4 class="text-h6 mb-2">콘텐츠</h4>
+            
+            <!-- ✅ 포스터인 경우 이미지로 표시 -->
+            <div v-if="currentVersion.contentType === 'poster' || currentVersion.type === 'poster'">
+              <v-img
+                v-if="currentVersion.posterImage || currentVersion.content"
+                :src="currentVersion.posterImage || currentVersion.content"
+                :alt="currentVersion.title"
+                cover
+                class="rounded-lg elevation-2"
+                style="max-width: 400px; aspect-ratio: 3/4; cursor: pointer;"
+                @click="previewImage(currentVersion.posterImage || currentVersion.content, currentVersion.title)"
+                @error="handleImageError"
+              >
+                <template v-slot:placeholder>
+                  <div class="d-flex align-center justify-center fill-height bg-grey-lighten-4">
+                    <v-progress-circular indeterminate color="primary" size="32" />
+                    <span class="ml-2 text-grey">이미지 로딩 중...</span>
+                  </div>
+                </template>
+                
+                <template v-slot:error>
+                  <div class="d-flex flex-column align-center justify-center fill-height bg-grey-lighten-3">
+                    <v-icon size="32" color="grey" class="mb-2">mdi-image-broken</v-icon>
+                    <span class="text-caption text-grey">이미지를 불러올 수 없습니다</span>
+                    <span class="text-caption text-grey mt-1" style="word-break: break-all; max-width: 200px;">
+                      {{ (currentVersion.posterImage || currentVersion.content)?.substring(0, 50) }}...
+                    </span>
+                  </div>
+                </template>
+              </v-img>
+              
+              <div v-else class="d-flex flex-column align-center justify-center bg-grey-lighten-4 rounded-lg pa-8">
+                <v-icon size="48" color="grey" class="mb-2">mdi-image-off</v-icon>
+                <span class="text-body-2 text-grey">포스터 이미지가 없습니다</span>
+                <span class="text-caption text-grey mt-1" v-if="currentVersion.posterImage || currentVersion.content">
+                  URL: {{ currentVersion.posterImage || currentVersion.content }}
+                </span>
+              </div>
+            </div>
+            
+            <!-- ✅ SNS인 경우 기존 텍스트 표시 -->
+            <div v-else>
               <div v-if="isHtmlContent(currentVersion.content)" 
                    class="pa-3 bg-grey-lighten-5 rounded html-content" 
                    style="line-height: 1.6;"
@@ -480,6 +560,7 @@
                 {{ currentVersion.content }}
               </div>
             </div>
+          </div>
           
           <!-- 해시태그 -->
           <div v-if="currentVersion.hashtags && currentVersion.hashtags.length > 0" class="mb-4">
@@ -583,12 +664,12 @@ const router = useRouter()
 const contentStore = useContentStore()
 const appStore = useAppStore()
 
-// 반응형 데이터
+// ✅ 반응형 데이터 - isGenerating 추가
 const selectedType = ref('sns')
-const formValid = ref(false)
 const uploadedFiles = ref([])
 const previewImages = ref([])
 const isPublishing = ref(false)
+const isGenerating = ref(false) // ✅ 추가
 const publishingIndex = ref(-1)
 const showDetailDialog = ref(false)
 const selectedVersion = ref(0)
@@ -603,14 +684,28 @@ const formData = ref({
   eventName: '',
   startDate: '',
   endDate: '',
-  requirements: '',
+  content: '',
+  hashtags: [],
+  category: '기타',
+  targetAge: '20대',
   promotionStartDate: '',
-  promotionEndDate: ''
+  promotionEndDate: '',
+  requirements: '',
+  toneAndManner: '친근함',
+  emotionIntensity: '보통',
+  imageStyle: '모던',
+  promotionType: '할인 정보',
+  photoStyle: '밝고 화사한'
 })
 
-// AI 옵션 - 타겟 연령층만
+// AI 옵션
 const aiOptions = ref({
-  targetAge: '20대'
+  toneAndManner: 'friendly',
+  promotion: 'general',
+  emotionIntensity: 'normal',
+  photoStyle: '밝고 화사한',
+  imageStyle: '모던',
+  targetAge: '20대',
 })
 
 // 상수 정의
@@ -639,10 +734,9 @@ const platformOptions = [
 ]
 
 const targetTypes = [
-  { title: '신메뉴', value: 'new_menu' },
+  { title: '메뉴', value: 'menu' },
-  { title: '할인 이벤트', value: 'discount' },
+  { title: '매장', value: 'store' },
-  { title: '매장 홍보', value: 'store' },
+  { title: '이벤트', value: 'event' },
-  { title: '일반 이벤트', value: 'event' }
 ]
 
 // 타겟 연령층 옵션
@@ -713,7 +807,68 @@ const promotionEndDateRules = [
   }
 ]
 
-// Computed
+// ✅ Computed 속성들
+const formValid = computed(() => {
+  // 기본 필수 필드 검증
+  if (!formData.value.title || !formData.value.targetType) {
+    return false
+  }
+  
+  // SNS 타입인 경우 플랫폼 필수
+  if (selectedType.value === 'sns' && !formData.value.platform) {
+    return false
+  }
+  
+  // 이벤트 타입인 경우 추가 검증
+  if (formData.value.targetType === 'event') {
+    if (!formData.value.eventName || !formData.value.startDate || !formData.value.endDate) {
+      return false
+    }
+  }
+  
+  // 포스터 타입인 경우 추가 검증
+  if (selectedType.value === 'poster') {
+    if (!formData.value.promotionStartDate || !formData.value.promotionEndDate) {
+      return false
+    }
+    // 포스터는 이미지 필수
+    if (!previewImages.value || previewImages.value.length === 0) {
+      return false
+    }
+  }
+  
+  return true
+})
+
+const canGenerate = computed(() => {
+  try {
+    // 기본 조건들 확인
+    if (!formValid.value) return false
+    if (!selectedType.value) return false
+    if (!formData.value.title) return false
+    
+    // SNS 타입인 경우 플랫폼 필수
+    if (selectedType.value === 'sns' && !formData.value.platform) return false
+    
+    // 포스터 타입인 경우 이미지 필수 및 홍보 기간 필수
+    if (selectedType.value === 'poster') {
+      if (!previewImages.value || previewImages.value.length === 0) return false
+      if (!formData.value.promotionStartDate || !formData.value.promotionEndDate) return false
+    }
+    
+    // 이벤트 타입인 경우 추가 조건들
+    if (formData.value.targetType === 'event') {
+      if (!formData.value.eventName) return false
+      if (!formData.value.startDate || !formData.value.endDate) return false
+    }
+    
+    return true
+  } catch (error) {
+    console.error('❌ canGenerate computed 에러:', error)
+    return false
+  }
+})
+
 const currentVersion = computed(() => {
   return generatedVersions.value[selectedVersion.value] || null
 })
@@ -725,38 +880,76 @@ const selectContentType = (type) => {
 }
 
 const handleFileUpload = (files) => {
-  console.log('📁 파일 업로드 시작:', files)
+  console.log('📁 파일 업로드 이벤트:', files)
   
   // 파일이 없는 경우 처리
-  if (!files || files.length === 0) {
+  if (!files || (Array.isArray(files) && files.length === 0)) {
-    console.log('파일이 선택되지 않음')
+    console.log('📁 파일이 없음 - 기존 이미지 유지')
     return
   }
   
-  // FileList를 배열로 변환
+  // 파일 배열로 변환
-  const fileArray = Array.from(files)
+  let fileArray = []
-  console.log('📁 변환된 파일 배열:', fileArray)
+  if (files instanceof FileList) {
+    fileArray = Array.from(files)
+  } else if (Array.isArray(files)) {
+    fileArray = files
+  } else {
+    console.warn('⚠️ 파일 형태를 인식할 수 없음:', files)
+    return
+  }
   
-  // 기존 이미지 초기화
+  console.log('📁 처리할 파일 개수:', fileArray.length)
+  
+  // 기존 이미지 완전히 초기화 (중복 방지)
   previewImages.value = []
   
+  // 각 파일 개별 처리
   fileArray.forEach((file, index) => {
     if (file && file.type && file.type.startsWith('image/')) {
       const reader = new FileReader()
+      
       reader.onload = (e) => {
+        console.log(`📁 파일 ${index + 1} 읽기 완료: ${file.name}`)
+        
+        // 중복 방지를 위해 기존에 같은 이름의 파일이 있는지 확인
+        const existingIndex = previewImages.value.findIndex(img => img.name === file.name && img.size === file.size)
+        
+        if (existingIndex === -1) {
+          // 새로운 파일이면 추가
           previewImages.value.push({
-          file,
+            file: file,
-          url: e.target.result
+            url: e.target.result,
+            name: file.name,
+            size: file.size
           })
+          console.log(`✅ 파일 추가됨: ${file.name}, 현재 총 ${previewImages.value.length}개`)
+        } else {
+          console.log(`⚠️ 중복 파일 무시됨: ${file.name}`)
         }
+      }
+      
+      reader.onerror = (error) => {
+        console.error(`❌ 파일 ${index + 1} 읽기 실패:`, error)
+      }
+      
       reader.readAsDataURL(file)
+    } else {
+      console.warn(`⚠️ 이미지가 아닌 파일 건너뜀: ${file?.name}`)
     }
   })
 }
 
 const removeImage = (index) => {
+  console.log('🗑️ 이미지 삭제:', index)
   previewImages.value.splice(index, 1)
-  uploadedFiles.value.splice(index, 1)
+  
+  // 업로드된 파일 목록도 업데이트
+  if (uploadedFiles.value && uploadedFiles.value.length > index) {
+    const newFiles = Array.from(uploadedFiles.value)
+    newFiles.splice(index, 1)
+    uploadedFiles.value = newFiles
+  }
 }
 
 const generateContent = async () => {
@@ -770,208 +963,73 @@ const generateContent = async () => {
     return
   }
 
-  try {
+  isGenerating.value = true
-    console.log(`🎯 [UI] ${selectedType.value.toUpperCase()} 콘텐츠 생성 요청 시작`)
-    
-    // ✅ 이미지 상태 상세 로깅
-    console.log('📁 [UI] 현재 이미지 상태:')
-    console.log('  - previewImages.value:', previewImages.value)
-    console.log('  - previewImages 타입:', typeof previewImages.value)
-    console.log('  - previewImages 배열 여부:', Array.isArray(previewImages.value))
-    console.log('  - previewImages 길이:', previewImages.value?.length)
-    
-    if (previewImages.value && Array.isArray(previewImages.value)) {
-      previewImages.value.forEach((img, index) => {
-        console.log(`  - 이미지 ${index + 1}:`, {
-          exists: !!img,
-          hasUrl: !!img?.url,
-          urlType: typeof img?.url,
-          urlLength: img?.url?.length,
-          urlPreview: img?.url?.substring(0, 50)
-        })
-      })
-    }
-    
-    // ✅ 실제 매장 ID 가져오기
-    let actualStoreId = 1
 
   try {
+    console.log('🚀 [UI] 콘텐츠 생성 시작')
+    console.log('📋 [UI] 폼 데이터:', formData.value)
+    console.log('📁 [UI] 이미지 데이터:', previewImages.value)
+    
+    // ✅ 매장 ID 가져오기
+    let storeId = 1 // 기본값
+    
+    try {
+      // localStorage에서 매장 정보 조회 시도
       const storeInfo = JSON.parse(localStorage.getItem('storeInfo') || '{}')
       const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
       
       if (storeInfo.storeId) {
-        actualStoreId = storeInfo.storeId
+        storeId = storeInfo.storeId
       } else if (userInfo.storeId) {
-        actualStoreId = userInfo.storeId
+        storeId = userInfo.storeId
+      } else {
+        console.warn('⚠️ localStorage에서 매장 ID를 찾을 수 없음, 기본값 사용:', storeId)
       }
     } catch (error) {
-      console.warn('⚠️ [UI] 매장 정보 파싱 실패, 기본값 사용:', actualStoreId)
+      console.warn('⚠️ 매장 정보 파싱 실패, 기본값 사용:', storeId)
     }
     
-    // ✅ 이미지 처리 함수 개선 (더 관대한 조건)
+    console.log('🏪 [UI] 사용할 매장 ID:', storeId)
-    const processImages = () => {
-      const images = []
     
-      console.log('📁 [UI] 이미지 처리 시작...')
+    // ✅ Base64 이미지 URL 추출
+    const imageUrls = previewImages.value?.map(img => img.url).filter(url => url) || []
+    console.log('📁 [UI] 추출된 이미지 URL들:', imageUrls)
     
-      // previewImages가 존재하고 배열인지 확인
+    // ✅ 포스터 타입의 경우 이미지 필수 검증
-      if (!previewImages.value) {
+    if (selectedType.value === 'poster' && imageUrls.length === 0) {
-        console.log('📁 [UI] previewImages.value가 null/undefined')
+      throw new Error('포스터 생성을 위해 최소 1개의 이미지가 필요합니다.')
-        return images
     }
 
-      if (!Array.isArray(previewImages.value)) {
+    // ✅ 콘텐츠 생성 데이터 구성
-        console.log('📁 [UI] previewImages.value가 배열이 아님:', typeof previewImages.value)
+    const contentData = {
-        return images
+      title: formData.value.title,
-      }
+      platform: formData.value.platform || (selectedType.value === 'poster' ? 'POSTER' : 'INSTAGRAM'),
-      
-      if (previewImages.value.length === 0) {
-        console.log('📁 [UI] previewImages.value가 빈 배열')
-        return images
-      }
-      
-      // 각 이미지 처리 (조건 완화)
-      previewImages.value.forEach((img, index) => {
-        console.log(`📁 [UI] 이미지 ${index + 1} 처리:`)
-        console.log('  - img 존재:', !!img)
-        console.log('  - img 타입:', typeof img)
-        
-        if (!img) {
-          console.log('  - 결과: null/undefined, 건너뜀')
-          return
-        }
-        
-        let imageUrl = null
-        
-        // 이미지 URL 추출 (여러 형태 지원)
-        if (typeof img === 'string') {
-          // 직접 문자열인 경우
-          imageUrl = img
-          console.log('  - 문자열 이미지:', imageUrl.substring(0, 50))
-        } else if (img.url && typeof img.url === 'string') {
-          // 객체에 url 속성이 있는 경우
-          imageUrl = img.url
-          console.log('  - 객체 이미지 URL:', imageUrl.substring(0, 50))
-        } else if (img.src && typeof img.src === 'string') {
-          // 객체에 src 속성이 있는 경우
-          imageUrl = img.src
-          console.log('  - 객체 이미지 SRC:', imageUrl.substring(0, 50))
-        } else {
-          console.log('  - 알 수 없는 이미지 형태:', Object.keys(img))
-          return
-        }
-        
-        // ✅ URL 유효성 검사 (조건 완화)
-        if (imageUrl && typeof imageUrl === 'string' && imageUrl.length > 20) {
-          // Base64 또는 HTTP URL 확인
-          if (imageUrl.startsWith('data:image/') || 
-              imageUrl.startsWith('http') || 
-              imageUrl.startsWith('blob:') ||
-              imageUrl.startsWith('//')) {
-            
-            images.push(imageUrl)
-            console.log(`  - 결과: 유효한 이미지 추가 (${Math.round(imageUrl.length / 1024)}KB)`)
-          } else {
-            console.log('  - 결과: 유효하지 않은 형식, 건너뜀')
-          }
-        } else {
-          console.log('  - 결과: URL이 너무 짧거나 유효하지 않음, 건너뜀')
-        }
-      })
-      
-      console.log(`📁 [UI] 이미지 처리 완료: ${images.length}개 유효 이미지`)
-      return images
-    }
-    
-    // ✅ 이미지 처리 실행
-    const processedImages = processImages()
-    
-    // ✅ 기본 contentData 객체 생성
-    let contentData = {
-      storeId: actualStoreId,
-      title: (formData.value.title || '').trim(),
       contentType: selectedType.value,
       type: selectedType.value,
-      images: processedImages, // ✅ 처리된 이미지 배열
+      category: getCategory(formData.value.targetType),
-      category: '기타',
+      requirement: formData.value.requirements || `${formData.value.title}에 대한 ${selectedType.value === 'poster' ? '포스터' : 'SNS 게시물'}를 만들어주세요`,
-      platform: '',
+      targetType: formData.value.targetType,
-      targetAudience: '',
+      targetAudience: formData.value.targetType,
-      requirements: formData.value.requirements || '',
+      eventName: formData.value.eventName,
-      eventName: formData.value.eventName || '',
+      eventDate: formData.value.eventDate,
-      startDate: formData.value.startDate || '',
+      startDate: formData.value.startDate,
-      endDate: formData.value.endDate || '',
+      endDate: formData.value.endDate,
-      targetAge: (aiOptions.value && aiOptions.value.targetAge) ? aiOptions.value.targetAge : '20대'
+      toneAndManner: formData.value.toneAndManner || '친근함',
+      emotionIntensity: formData.value.emotionIntensity || '보통',
+      images: imageUrls, // ✅ Base64 이미지 URL 배열
+      storeId: storeId // ✅ 매장 ID 추가
     }
 
-    // ✅ 타입별 처리
+    // ✅ 포스터 전용 필드 추가
     if (selectedType.value === 'poster') {
-      console.log('🎯 [UI] 포스터 생성 데이터 구성')
-      console.log('📁 [UI] 포스터용 이미지 체크:', {
-        processedImagesCount: processedImages.length,
-        previewImagesCount: previewImages.value?.length || 0,
-        hasImages: processedImages.length > 0
-      })
-      
-      // ✅ 포스터 이미지 체크 (상세 로깅)
-      if (processedImages.length === 0) {
-        console.error('❌ [UI] 포스터 이미지 없음!')
-        console.error('❌ [UI] previewImages 상태:', {
-          exists: !!previewImages.value,
-          isArray: Array.isArray(previewImages.value),
-          length: previewImages.value?.length,
-          content: previewImages.value
-        })
-        
-        appStore.showSnackbar('포스터 생성을 위해 최소 1개의 이미지를 업로드해 주세요.', 'warning')
-        return
-      }
-      
-      contentData.targetAudience = formData.value.targetType || 'menu'
-      contentData.category = getCategory(formData.value.targetType)
-      
-      if (formData.value.promotionStartDate) {
       contentData.promotionStartDate = formData.value.promotionStartDate
-      }
-      if (formData.value.promotionEndDate) {
       contentData.promotionEndDate = formData.value.promotionEndDate
+      contentData.imageStyle = formData.value.imageStyle || '모던'
+      contentData.promotionType = formData.value.promotionType
+      contentData.photoStyle = formData.value.photoStyle || '밝고 화사한'
     }
 
-    } else {
+    console.log('📤 [UI] 생성 요청 데이터:', contentData)
-      console.log('🎯 [UI] SNS 생성 데이터 구성')
-      
-      if (!formData.value.platform) {
-        appStore.showSnackbar('플랫폼을 선택해주세요.', 'warning')
-        return
-      }
-      
-      contentData.platform = formData.value.platform
-      contentData.targetType = formData.value.targetType || 'new_menu'
-      contentData.category = getCategory(formData.value.targetType)
-    }
-
-    // ✅ 최종 검증 및 로깅
-    console.log('📤 [UI] 최종 contentData:', {
-      type: contentData.type,
-      title: contentData.title,
-      platform: contentData.platform,
-      category: contentData.category,
-      storeId: contentData.storeId,
-      imageCount: contentData.images.length,
-      firstImagePreview: contentData.images[0]?.substring(0, 50)
-    })
-
-    // ✅ 필수 필드 최종 체크
-    if (!contentData.title) {
-      throw new Error('제목을 입력해주세요.')
-    }
-    
-    if (selectedType.value === 'sns' && !contentData.platform) {
-      throw new Error('플랫폼을 선택해주세요.')
-    }
-    
-    if (selectedType.value === 'poster' && contentData.images.length === 0) {
-      throw new Error('포스터 생성을 위해서는 최소 1개의 이미지가 필요합니다.')
-    }
 
     // ✅ contentData 무결성 체크
     if (!contentData || typeof contentData !== 'object') {
@@ -991,10 +1049,22 @@ const generateContent = async () => {
       throw new Error(generated?.message || '콘텐츠 생성에 실패했습니다.')
     }
 
-    let finalContent = generated.content || generated.data?.content || ''
+    // ✅ 포스터 생성 결과 처리 개선
+    let finalContent = ''
+    let posterImageUrl = ''
+    
+    if (selectedType.value === 'poster') {
+      // 포스터의 경우 generated.data에서 이미지 URL 추출
+      posterImageUrl = generated.data?.posterImage || generated.data?.content || generated.content || ''
+      finalContent = posterImageUrl // content 필드에 이미지 URL 저장
+      
+      console.log('🖼️ [UI] 포스터 이미지 URL:', posterImageUrl)
+    } else {
+      // SNS의 경우 기존 로직 유지
+      finalContent = generated.content || generated.data?.content || ''
       
       // SNS용 이미지 추가
-    if (selectedType.value === 'sns' && contentData.images && contentData.images.length > 0) {
+      if (contentData.images && contentData.images.length > 0) {
         const imageHtml = contentData.images.map(imageUrl => 
           `<div style="margin-bottom: 15px; text-align: center;">
             <img src="${imageUrl}" style="width: 100%; max-width: 400px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);" />
@@ -1007,15 +1077,19 @@ const generateContent = async () => {
           finalContent = imageHtml + `<div style="padding: 15px; font-family: 'Noto Sans KR', Arial, sans-serif; line-height: 1.6;">${finalContent.replace(/\n/g, '<br>')}</div>`
         }
       }
+    }
     
+    // ✅ 생성된 콘텐츠 객체에 이미지 정보 포함
     const newContent = {
       id: Date.now() + Math.random(),
       ...contentData,
       content: finalContent,
+      posterImage: posterImageUrl, // 포스터 이미지 URL 별도 저장
       hashtags: generated.hashtags || generated.data?.hashtags || [],
       createdAt: new Date(),
       status: 'draft',
-      uploadedImages: previewImages.value || [],
+      uploadedImages: previewImages.value || [], // ✅ 업로드된 이미지 정보 보존
+      images: imageUrls, // ✅ Base64 URL 보존
       platform: contentData.platform || 'POSTER'
     }
 
@@ -1029,6 +1103,8 @@ const generateContent = async () => {
     console.error('❌ [UI] 콘텐츠 생성 실패:', error)
     console.error('❌ [UI] 에러 스택:', error.stack)
     appStore.showSnackbar(error.message || '콘텐츠 생성 중 오류가 발생했습니다.', 'error')
+  } finally {
+    isGenerating.value = false
   }
 }
 
@@ -1037,7 +1113,9 @@ const getCategory = (targetType) => {
     'new_menu': '메뉴소개',
     'discount': '이벤트',
     'store': '인테리어',
-    'event': '이벤트'
+    'event': '이벤트',
+    'menu': '메뉴소개',
+    'service': '서비스'
   }
   return mapping[targetType] || '기타'
 }
@@ -1053,16 +1131,140 @@ const saveVersion = async (index) => {
   try {
     const version = generatedVersions.value[index]
     
-    await contentStore.saveContent({
+    console.log('💾 [UI] 저장할 버전 데이터:', version)
+    
+    // ✅ 매장 ID 가져오기
+    let storeId = 1 // 기본값
+    
+    try {
+      const storeInfo = JSON.parse(localStorage.getItem('storeInfo') || '{}')
+      const userInfo = JSON.parse(localStorage.getItem('userInfo') || '{}')
+      
+      if (storeInfo.storeId) {
+        storeId = storeInfo.storeId
+      } else if (userInfo.storeId) {
+        storeId = userInfo.storeId
+      } else {
+        console.warn('⚠️ localStorage에서 매장 ID를 찾을 수 없음, 기본값 사용:', storeId)
+      }
+    } catch (error) {
+      console.warn('⚠️ 매장 정보 파싱 실패, 기본값 사용:', storeId)
+    }
+    
+    console.log('🏪 [UI] 사용할 매장 ID:', storeId)
+    
+    // ✅ 이미지 데이터 준비
+    let imageUrls = []
+    
+    // 포스터의 경우 생성된 포스터 이미지 URL과 업로드된 이미지들을 포함
+    if (selectedType.value === 'poster') {
+      // 1. 생성된 포스터 이미지 URL 추가
+      if (version.posterImage) {
+        imageUrls.push(version.posterImage)
+        console.log('💾 [UI] 생성된 포스터 이미지:', version.posterImage)
+      }
+      
+      // 2. previewImages에서 원본 이미지 URL 추가
+      if (previewImages.value && previewImages.value.length > 0) {
+        const originalImages = previewImages.value.map(img => img.url).filter(url => url)
+        imageUrls = [...imageUrls, ...originalImages]
+        console.log('💾 [UI] 원본 이미지들:', originalImages)
+      }
+      
+      // 3. version에 저장된 이미지도 확인
+      if (version.uploadedImages && version.uploadedImages.length > 0) {
+        const versionImages = version.uploadedImages.map(img => img.url).filter(url => url)
+        imageUrls = [...imageUrls, ...versionImages]
+      }
+      
+      // 4. version.images도 확인
+      if (version.images && Array.isArray(version.images) && version.images.length > 0) {
+        imageUrls = [...imageUrls, ...version.images]
+      }
+      
+      // 중복 제거
+      imageUrls = [...new Set(imageUrls)]
+      
+      console.log('💾 [UI] 포스터 최종 이미지 URL들:', imageUrls)
+      
+      // 이미지가 없으면 에러
+      if (!imageUrls || imageUrls.length === 0) {
+        throw new Error('포스터 저장을 위해 최소 1개의 이미지가 필요합니다.')
+      }
+    } else {
+      // SNS의 경우 선택적으로 이미지 포함
+      if (previewImages.value && previewImages.value.length > 0) {
+        imageUrls = previewImages.value.map(img => img.url).filter(url => url)
+      }
+      if (version.images && Array.isArray(version.images)) {
+        imageUrls = [...new Set([...imageUrls, ...version.images])]
+      }
+    }
+    
+    console.log('💾 [UI] 최종 이미지 URL들:', imageUrls)
+    
+    // ✅ 저장 데이터 구성 - 타입에 따라 다르게 처리
+    let saveData
+    
+    if (selectedType.value === 'poster') {
+      // 포스터용 데이터 구성 (PosterContentSaveRequest에 맞춤)
+      saveData = {
+        // 매장 ID 
+        storeId: storeId,
+        
+        // 기본 콘텐츠 정보 - 포스터는 content에 이미지 URL 저장
+        title: version.title,
+        content: version.posterImage || version.content, // 포스터 이미지 URL을 content에 저장
+        images: imageUrls, // 모든 관련 이미지들
+        
+        // 분류 정보
+        category: getCategory(version.targetType || formData.value.targetType),
+        requirement: formData.value.requirements || `${version.title}에 대한 포스터를 만들어주세요`,
+        
+        // 이벤트 정보
+        eventName: version.eventName || formData.value.eventName,
+        startDate: formData.value.startDate,
+        endDate: formData.value.endDate,
+        
+        // 스타일 정보
+        photoStyle: formData.value.photoStyle || '밝고 화사한'
+      }
+    } else {
+      // SNS용 데이터 구성 (SnsContentSaveRequest에 맞춤)
+      saveData = {
+        // 매장 ID 
+        storeId: storeId,
+        
+        // 필수 필드들
+        contentType: 'SNS',
+        platform: version.platform || formData.value.platform || 'INSTAGRAM',
+        
+        // 기본 콘텐츠 정보
         title: version.title,
         content: version.content,
-      hashtags: version.hashtags,
+        hashtags: version.hashtags || [],
-      platform: version.platform,
+        images: imageUrls,
-      category: getCategory(version.targetType),
+        
-      eventName: version.eventName,
+        // 분류 정보
-      eventDate: version.eventDate,
+        category: getCategory(version.targetType || formData.value.targetType),
+        requirement: formData.value.requirements || `${version.title}에 대한 SNS 게시물을 만들어주세요`,
+        toneAndManner: formData.value.toneAndManner || '친근함',
+        emotionIntensity: formData.value.emotionIntensity || '보통',
+        
+        // 이벤트 정보
+        eventName: version.eventName || formData.value.eventName,
+        startDate: formData.value.startDate,
+        endDate: formData.value.endDate,
+        
+        // 상태 정보
         status: 'PUBLISHED'
-    })
+      }
+    }
+    
+    console.log('💾 [UI] 최종 저장 데이터:', saveData)
+    
+    // ✅ 저장 실행
+    await contentStore.saveContent(saveData)
     
     version.status = 'published'
     version.publishedAt = new Date()
@@ -1127,7 +1329,8 @@ const getPlatformIcon = (platform) => {
     'INSTAGRAM': 'mdi-instagram',
     'NAVER_BLOG': 'mdi-web',
     'FACEBOOK': 'mdi-facebook',
-    'KAKAO_STORY': 'mdi-chat'
+    'KAKAO_STORY': 'mdi-chat',
+    'POSTER': 'mdi-image'
   }
   return icons[platform] || 'mdi-web'
 }
@@ -1141,7 +1344,8 @@ const getPlatformColor = (platform) => {
     'INSTAGRAM': 'pink',
     'NAVER_BLOG': 'green',
     'FACEBOOK': 'blue',
-    'KAKAO_STORY': 'amber'
+    'KAKAO_STORY': 'amber',
+    'POSTER': 'orange'
   }
   return colors[platform] || 'grey'
 }
@@ -1155,7 +1359,8 @@ const getPlatformLabel = (platform) => {
     'INSTAGRAM': '인스타그램',
     'NAVER_BLOG': '네이버 블로그',
     'FACEBOOK': '페이스북',
-    'KAKAO_STORY': '카카오스토리'
+    'KAKAO_STORY': '카카오스토리',
+    'POSTER': '포스터'
   }
   return labels[platform] || platform
 }
@@ -1228,6 +1433,15 @@ const truncateHtmlContent = (html, maxLength) => {
   return `<div style="padding: 10px; font-family: 'Noto Sans KR', Arial, sans-serif;">${truncateText(textContent, maxLength)}</div>`
 }
 
+const previewImage = (imageUrl, title) => {
+  if (!imageUrl) return
+  window.open(imageUrl, '_blank')
+}
+
+const handleImageError = (event) => {
+  console.error('❌ 이미지 로딩 실패:', event.target?.src)
+}
+
 // 라이프사이클
 onMounted(() => {
   console.log('📱 콘텐츠 생성 페이지 로드됨')
@@ -1314,3 +1528,4 @@ onMounted(() => {
   pointer-events: none;
 }
 </style>
+    

src/views/ContentManagementView.vue

@@ -152,8 +152,22 @@
                     {{ getStatusText(content.status) }}
                   </v-chip>
                 </div>
+                
+                <!-- ✅ 포스터인 경우와 SNS인 경우 구분하여 미리보기 표시 -->
                 <div class="text-caption text-truncate grey--text" style="max-width: 400px;">
-                  {{ content.content ? content.content.substring(0, 100) + '...' : '' }}
+                  <div v-if="content.platform === 'POSTER' || content.platform === 'poster'">
+                    <div v-if="content.content && isImageUrl(content.content)" class="d-flex align-center">
+                      <v-icon size="16" color="primary" class="mr-1">mdi-image</v-icon>
+                      <span>포스터 이미지 생성됨</span>
+                    </div>
+                    <div v-else>
+                      {{ content.content ? content.content.substring(0, 100) + '...' : '포스터 콘텐츠' }}
+                    </div>
+                  </div>
+                  <!-- ✅ SNS인 경우 HTML 태그 제거하고 텍스트만 표시 -->
+                  <div v-else>
+                    {{ content.content ? getPlainTextPreview(content.content) : '' }}
+                  </div>
                 </div>
               </div>
             </td>
@@ -272,9 +286,61 @@
               </v-chip>
             </div>
             
+            <!-- ✅ 포스터인 경우 이미지로 표시, SNS인 경우 HTML 렌더링 -->
             <div class="mb-4">
               <div class="text-subtitle-2 text-grey-600 mb-1">내용</div>
-              <div class="text-body-1 content-preview">{{ selectedContent.content }}</div>
+              
+              <!-- ✅ 포스터인 경우 이미지로 표시 -->
+              <div v-if="selectedContent.platform === 'POSTER' || selectedContent.platform === 'poster'">
+                <v-img
+                  v-if="selectedContent.content && isImageUrl(selectedContent.content)"
+                  :src="selectedContent.content"
+                  :alt="selectedContent.title"
+                  cover
+                  class="rounded-lg elevation-2"
+                  style="max-width: 400px; aspect-ratio: 3/4; cursor: pointer;"
+                  @click="previewImage(selectedContent.content, selectedContent.title)"
+                  @error="handleImageError"
+                >
+                  <template v-slot:placeholder>
+                    <div class="d-flex align-center justify-center fill-height bg-grey-lighten-4">
+                      <v-progress-circular indeterminate color="primary" size="32" />
+                      <span class="ml-2 text-grey">이미지 로딩 중...</span>
+                    </div>
+                  </template>
+                  
+                  <template v-slot:error>
+                    <div class="d-flex flex-column align-center justify-center fill-height bg-grey-lighten-3">
+                      <v-icon size="32" color="grey" class="mb-2">mdi-image-broken</v-icon>
+                      <span class="text-caption text-grey">이미지를 불러올 수 없습니다</span>
+                      <span class="text-caption text-grey mt-1" style="word-break: break-all; max-width: 300px;">
+                        {{ selectedContent.content?.substring(0, 50) }}...
+                      </span>
+                    </div>
+                  </template>
+                </v-img>
+                
+                <div v-else class="d-flex flex-column align-center justify-center bg-grey-lighten-4 rounded-lg pa-8">
+                  <v-icon size="48" color="grey" class="mb-2">mdi-image-off</v-icon>
+                  <span class="text-body-2 text-grey">포스터 이미지가 없습니다</span>
+                  <span class="text-caption text-grey mt-1" v-if="selectedContent.content">
+                    URL: {{ selectedContent.content }}
+                  </span>
+                </div>
+              </div>
+              
+              <!-- ✅ SNS인 경우 HTML 렌더링으로 표시 -->
+              <div v-else>
+                <!-- HTML 콘텐츠가 있는 경우 렌더링하여 표시 -->
+                <div v-if="isHtmlContent(selectedContent.content)" 
+                     class="content-preview html-content" 
+                     v-html="selectedContent.content">
+                </div>
+                <!-- 일반 텍스트인 경우 그대로 표시 -->
+                <div v-else class="text-body-1 content-preview">
+                  {{ selectedContent.content }}
+                </div>
+              </div>
             </div>
             
             <div class="mb-4" v-if="selectedContent.hashtags && selectedContent.hashtags.length > 0">
@@ -664,7 +730,78 @@ const deleteSelectedItems = async () => {
   }
 }
 
-// 유틸리티 함수들
+// ✅ 유틸리티 함수들 추가
+/**
+ * URL이 이미지 URL인지 확인
+ */
+const isImageUrl = (url) => {
+  if (!url || typeof url !== 'string') return false
+  
+  // 이미지 확장자 체크
+  const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.webp', '.bmp', '.svg']
+  const lowerUrl = url.toLowerCase()
+  
+  // 확장자로 체크
+  if (imageExtensions.some(ext => lowerUrl.includes(ext))) {
+    return true
+  }
+  
+  // Blob URL 체크
+  if (url.startsWith('blob:') || url.startsWith('data:image/')) {
+    return true
+  }
+  
+  // Azure Blob Storage나 기타 클라우드 스토리지 URL 체크
+  if (url.includes('blob.core.windows.net') || 
+      url.includes('amazonaws.com') || 
+      url.includes('googleusercontent.com') ||
+      url.includes('cloudinary.com')) {
+    return true
+  }
+  
+  return false
+}
+
+/**
+ * ✅ HTML 콘텐츠인지 확인
+ */
+const isHtmlContent = (content) => {
+  if (!content || typeof content !== 'string') return false
+  
+  // HTML 태그가 포함되어 있는지 확인
+  const htmlTagRegex = /<[^>]+>/g
+  return htmlTagRegex.test(content)
+}
+
+/**
+ * ✅ HTML 태그를 제거하고 텍스트만 추출하여 미리보기용으로 반환
+ */
+const getPlainTextPreview = (content) => {
+  if (!content) return ''
+  
+  // HTML 태그 제거
+  const textContent = content.replace(/<[^>]*>/g, '').trim()
+  
+  // 100자로 제한하고 ... 추가
+  return textContent.length > 100 ? textContent.substring(0, 100) + '...' : textContent
+}
+
+/**
+ * 이미지 미리보기
+ */
+const previewImage = (imageUrl, title) => {
+  if (!imageUrl) return
+  window.open(imageUrl, '_blank')
+}
+
+/**
+ * 이미지 로딩 에러 처리
+ */
+const handleImageError = (event) => {
+  console.error('❌ 이미지 로딩 실패:', event.target?.src)
+}
+
+// 기존 유틸리티 함수들
 const getStatusColor = (status) => {
   const statusColors = {
     'DRAFT': 'orange',
@@ -783,4 +920,61 @@ onMounted(() => {
 .cursor-pointer {
   cursor: pointer;
 }
+
+/* ✅ HTML 콘텐츠 스타일링 */
+:deep(.html-content) {
+  font-family: 'Noto Sans KR', Arial, sans-serif;
+  line-height: 1.6;
+  padding: 20px;
+  max-width: 600px;
+}
+
+:deep(.html-content h1),
+:deep(.html-content h2),
+:deep(.html-content h3) {
+  margin: 0 0 10px 0;
+  font-weight: bold;
+}
+
+:deep(.html-content h3) {
+  font-size: 18px;
+  color: #1976d2;
+}
+
+:deep(.html-content p) {
+  margin: 0 0 10px 0;
+}
+
+:deep(.html-content div[style*="background"]) {
+  border-radius: 10px;
+  padding: 15px;
+  margin: 10px 0;
+}
+
+:deep(.html-content div[style*="border"]) {
+  border-radius: 8px;
+  padding: 20px;
+  margin: 10px 0;
+  border: 1px solid #e1e8ed;
+}
+
+:deep(.html-content img) {
+  max-width: 100%;
+  height: auto;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+  margin: 20px 0;
+}
+
+:deep(.html-content span[style*="#1DA1F2"]) {
+  color: #1976d2 !important;
+}
+
+:deep(.html-content span[style*="#1EC800"]) {
+  color: #4caf50 !important;
+}
+
+:deep(.html-content span[style*="#00B33C"]) {
+  color: #2e7d32 !important;
+}
 </style>

src/views/DashboardView.vue

@@ -252,12 +252,7 @@
               <div v-else-if="aiRecommendation" class="ai-recommendation-content">
                 <!-- 추천 제목 -->
                 <div class="recommendation-header mb-4">
-                  <div class="d-flex align-center mb-2">
+ 
-                    <span class="recommendation-emoji mr-2">{{ aiRecommendation.emoji }}</span>
-                    <h4 class="text-h6 font-weight-bold text-primary">
-                      {{ aiRecommendation.title }}
-                    </h4>
-                  </div>
                 </div>
 
                 <!-- 스크롤 가능한 콘텐츠 영역 -->

src/views/PosterCreationView.vue

@@ -167,7 +167,7 @@ const generatePoster = async (formData) => {
 }
 
 /**
- * 포스터 저장
+ * 포스터 저장 - 수정된 버전
  */
 const savePoster = async () => {
   if (!generatedPoster.value) {
@@ -181,12 +181,22 @@ const savePoster = async () => {
     loadingMessage.value = '포스터 저장 중...'
     loadingSubMessage.value = '잠시만 기다려주세요'
 
+    // ✅ 생성된 포스터의 실제 데이터를 사용하고 contentId 처리 개선
     const result = await posterStore.savePoster({
-      contentId: generatedPoster.value.contentId,
+      // ✅ contentId: 임시 ID 사용 (백엔드에서 @NotNull이므로)
+      contentId: generatedPoster.value.contentId || Date.now(), // 임시 ID 생성
       storeId: authStore.currentStore?.id || 1,
       title: posterForm.value.title,
-      content: generatedPoster.value.content,
+      
-      images: [generatedPoster.value.posterImage],
+      // ✅ 생성된 포스터의 실제 콘텐츠 정보 사용
+      content: generatedPoster.value.content || generatedPoster.value.description || posterForm.value.title,
+      
+      // ✅ 원본 이미지와 생성된 포스터 이미지 모두 포함
+      images: [
+        ...posterForm.value.images, // 원본 업로드 이미지들
+        generatedPoster.value.posterImage || generatedPoster.value.imageUrl // 생성된 포스터 이미지
+      ].filter(img => img), // null/undefined 제거
+      
       status: 'PUBLISHED',
       category: posterForm.value.category,
       requirement: posterForm.value.requirement,