release
This commit is contained in:
SeoJHeasdw
parent
d2356fb723
commit
bfc4d600e2
@ -1,157 +1,172 @@
|
||||
//* src/services/content.js - 기존 파일 수정 (API 설계서 기준)
|
||||
//* src/services/content.js
|
||||
import { contentApi, handleApiError, formatSuccessResponse } from './api.js'
|
||||
|
||||
/**
|
||||
* 마케팅 콘텐츠 관련 API 서비스
|
||||
* API 설계서 기준으로 수정됨
|
||||
* 백엔드 SnsContentCreateRequest DTO에 맞게 수정
|
||||
*/
|
||||
class ContentService {
|
||||
/**
|
||||
* SNS 게시물 생성 (CON-005: SNS 게시물 생성)
|
||||
* SNS 게시물 생성
|
||||
* @param {Object} contentData - SNS 콘텐츠 생성 정보
|
||||
* @returns {Promise<Object>} 생성된 SNS 콘텐츠
|
||||
*/
|
||||
async generateSnsContent(contentData) {
|
||||
try {
|
||||
const response = await contentApi.post('/sns/generate', {
|
||||
storeId: contentData.storeId,
|
||||
platform: contentData.platform,
|
||||
console.log('🚀 SNS 콘텐츠 생성 요청:', contentData)
|
||||
|
||||
// 백엔드 SnsContentCreateRequest DTO에 맞는 데이터 구조
|
||||
const requestData = {
|
||||
// === 기본 정보 ===
|
||||
storeId: contentData.storeId || 1,
|
||||
storeName: contentData.storeName || '테스트 매장',
|
||||
storeType: contentData.storeType || '음식점',
|
||||
platform: this.mapPlatform(contentData.platform),
|
||||
title: contentData.title,
|
||||
category: contentData.category,
|
||||
requirement: contentData.requirement || contentData.requirements,
|
||||
toneAndManner: contentData.toneAndManner,
|
||||
emotionalIntensity: contentData.emotionalIntensity || contentData.emotionIntensity,
|
||||
targetAudience: contentData.targetAudience,
|
||||
promotionalType: contentData.promotionalType || contentData.promotionType,
|
||||
eventName: contentData.eventName,
|
||||
eventDate: contentData.eventDate,
|
||||
hashtagStyle: contentData.hashtagStyle,
|
||||
hashtagCount: contentData.hashtagCount || 10,
|
||||
includeCallToAction: contentData.includeCallToAction || false,
|
||||
includeEmoji: contentData.includeEmoji || true,
|
||||
contentLength: contentData.contentLength || '보통'
|
||||
})
|
||||
|
||||
// === 콘텐츠 생성 조건 ===
|
||||
category: contentData.category || this.mapTargetToCategory(contentData.targetType),
|
||||
requirement: contentData.requirements || contentData.content || '',
|
||||
target: contentData.targetType || '일반 고객',
|
||||
contentType: 'SNS 게시물',
|
||||
|
||||
// === 이벤트 정보 ===
|
||||
eventName: contentData.eventName || null,
|
||||
startDate: contentData.startDate ? this.formatDate(contentData.startDate) : null,
|
||||
endDate: contentData.endDate ? this.formatDate(contentData.endDate) : null,
|
||||
|
||||
// === 미디어 정보 ===
|
||||
images: contentData.images || [],
|
||||
photoStyle: this.mapPhotoStyle(contentData.aiOptions?.photoStyle),
|
||||
|
||||
// === 추가 옵션 ===
|
||||
includeHashtags: true,
|
||||
includeEmojis: true,
|
||||
includeCallToAction: true,
|
||||
includeLocationInfo: false
|
||||
}
|
||||
|
||||
return formatSuccessResponse(response.data.data, 'SNS 게시물이 생성되었습니다.')
|
||||
console.log('📤 백엔드 DTO 맞춤 데이터:', requestData)
|
||||
|
||||
const response = await contentApi.post('/sns/generate', requestData)
|
||||
|
||||
console.log('📥 API 응답:', response.data)
|
||||
|
||||
// 응답 데이터 구조에 맞게 처리
|
||||
const responseData = response.data.data || response.data
|
||||
|
||||
return formatSuccessResponse({
|
||||
content: responseData.content || responseData,
|
||||
hashtags: responseData.hashtags || [],
|
||||
...responseData
|
||||
}, 'SNS 게시물이 생성되었습니다.')
|
||||
} catch (error) {
|
||||
console.error('❌ SNS 콘텐츠 생성 실패:', error)
|
||||
return handleApiError(error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* SNS 게시물 저장 (CON-010: SNS 게시물 저장)
|
||||
* 플랫폼 매핑 (프론트엔드 -> 백엔드)
|
||||
*/
|
||||
mapPlatform(platform) {
|
||||
const mapping = {
|
||||
'instagram': 'INSTAGRAM',
|
||||
'naver_blog': 'NAVER_BLOG',
|
||||
'facebook': 'FACEBOOK',
|
||||
'kakao_story': 'KAKAO_STORY'
|
||||
}
|
||||
return mapping[platform] || 'INSTAGRAM'
|
||||
}
|
||||
|
||||
/**
|
||||
* 타겟 타입을 카테고리로 매핑
|
||||
*/
|
||||
mapTargetToCategory(targetType) {
|
||||
const mapping = {
|
||||
'new_menu': '메뉴소개',
|
||||
'discount': '이벤트',
|
||||
'store': '인테리어',
|
||||
'event': '이벤트'
|
||||
}
|
||||
return mapping[targetType] || '메뉴소개'
|
||||
}
|
||||
|
||||
/**
|
||||
* 날짜 형식 변환 (YYYY-MM-DD -> LocalDate)
|
||||
*/
|
||||
formatDate(dateString) {
|
||||
if (!dateString) return null
|
||||
// YYYY-MM-DD 형식이 LocalDate와 호환됨
|
||||
return dateString
|
||||
}
|
||||
|
||||
/**
|
||||
* 사진 스타일 매핑
|
||||
*/
|
||||
mapPhotoStyle(style) {
|
||||
const mapping = {
|
||||
'bright': '밝고 화사한',
|
||||
'calm': '차분하고 세련된',
|
||||
'vintage': '빈티지한',
|
||||
'modern': '모던한',
|
||||
'natural': '자연스러운'
|
||||
}
|
||||
return mapping[style] || '밝고 화사한'
|
||||
}
|
||||
|
||||
/**
|
||||
* SNS 게시물 저장
|
||||
* @param {Object} saveData - 저장할 SNS 콘텐츠 정보
|
||||
* @returns {Promise<Object>} 저장 결과
|
||||
*/
|
||||
async saveSnsContent(saveData) {
|
||||
try {
|
||||
const response = await contentApi.post('/sns/save', {
|
||||
console.log('💾 SNS 콘텐츠 저장 요청:', saveData)
|
||||
|
||||
// 백엔드 SnsContentSaveRequest DTO에 맞는 구조로 변환
|
||||
const requestData = {
|
||||
title: saveData.title,
|
||||
content: saveData.content,
|
||||
hashtags: saveData.hashtags,
|
||||
platform: saveData.platform,
|
||||
category: saveData.category,
|
||||
toneAndManner: saveData.toneAndManner,
|
||||
targetAudience: saveData.targetAudience,
|
||||
promotionalType: saveData.promotionalType,
|
||||
hashtags: saveData.hashtags || [],
|
||||
platform: this.mapPlatform(saveData.platform),
|
||||
category: saveData.category || '메뉴소개',
|
||||
// 백엔드 DTO에서 지원하는 필드들만 포함
|
||||
eventName: saveData.eventName,
|
||||
eventDate: saveData.eventDate,
|
||||
status: saveData.status || 'DRAFT'
|
||||
})
|
||||
}
|
||||
|
||||
console.log('📤 저장 요청 데이터:', requestData)
|
||||
|
||||
const response = await contentApi.post('/sns/save', requestData)
|
||||
|
||||
return formatSuccessResponse(response.data.data, 'SNS 게시물이 저장되었습니다.')
|
||||
} catch (error) {
|
||||
console.error('❌ SNS 콘텐츠 저장 실패:', error)
|
||||
return handleApiError(error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 홍보 포스터 생성 (CON-015: 홍보 포스터 생성)
|
||||
* @param {Object} posterData - 포스터 생성 정보
|
||||
* @returns {Promise<Object>} 생성된 포스터
|
||||
*/
|
||||
async generatePoster(posterData) {
|
||||
try {
|
||||
const response = await contentApi.post('/poster/generate', {
|
||||
storeId: posterData.storeId,
|
||||
title: posterData.title,
|
||||
targetType: posterData.targetType,
|
||||
eventName: posterData.eventName,
|
||||
eventDate: posterData.eventDate,
|
||||
discountInfo: posterData.discountInfo,
|
||||
designStyle: posterData.designStyle,
|
||||
colorScheme: posterData.colorScheme,
|
||||
includeQrCode: posterData.includeQrCode || false,
|
||||
includeContact: posterData.includeContact || true,
|
||||
imageStyle: posterData.imageStyle || posterData.photoStyle,
|
||||
layoutType: posterData.layoutType,
|
||||
sizes: posterData.sizes || ['1:1', '9:16', '16:9']
|
||||
})
|
||||
|
||||
return formatSuccessResponse(response.data.data, '홍보 포스터가 생성되었습니다.')
|
||||
} catch (error) {
|
||||
return handleApiError(error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 홍보 포스터 저장 (CON-016: 홍보 포스터 저장)
|
||||
* @param {Object} saveData - 저장할 포스터 정보
|
||||
* @returns {Promise<Object>} 저장 결과
|
||||
*/
|
||||
async savePoster(saveData) {
|
||||
try {
|
||||
const response = await contentApi.post('/poster/save', {
|
||||
title: saveData.title,
|
||||
images: saveData.images,
|
||||
posterSizes: saveData.posterSizes,
|
||||
targetType: saveData.targetType,
|
||||
eventName: saveData.eventName,
|
||||
status: saveData.status || 'DRAFT'
|
||||
})
|
||||
|
||||
return formatSuccessResponse(response.data.data, '홍보 포스터가 저장되었습니다.')
|
||||
} catch (error) {
|
||||
return handleApiError(error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 콘텐츠 목록 조회 (CON-020: 마케팅 콘텐츠 이력)
|
||||
* @param {Object} filters - 필터링 옵션
|
||||
* 콘텐츠 목록 조회
|
||||
* @param {Object} filters - 필터 조건
|
||||
* @returns {Promise<Object>} 콘텐츠 목록
|
||||
*/
|
||||
async getContents(filters = {}) {
|
||||
async getContentList(filters = {}) {
|
||||
try {
|
||||
const queryParams = new URLSearchParams()
|
||||
|
||||
if (filters.contentType) queryParams.append('contentType', filters.contentType)
|
||||
if (filters.platform) queryParams.append('platform', filters.platform)
|
||||
if (filters.period) queryParams.append('period', filters.period)
|
||||
if (filters.sortBy) queryParams.append('sortBy', filters.sortBy || 'latest')
|
||||
if (filters.page) queryParams.append('page', filters.page)
|
||||
if (filters.size) queryParams.append('size', filters.size || 20)
|
||||
if (filters.search) queryParams.append('search', filters.search)
|
||||
|
||||
const response = await contentApi.get(`/?${queryParams.toString()}`)
|
||||
|
||||
const params = new URLSearchParams()
|
||||
|
||||
if (filters.contentType) params.append('contentType', filters.contentType)
|
||||
if (filters.platform) params.append('platform', filters.platform)
|
||||
if (filters.period) params.append('period', filters.period)
|
||||
if (filters.sortBy) params.append('sortBy', filters.sortBy)
|
||||
|
||||
const response = await contentApi.get(`/list?${params.toString()}`)
|
||||
|
||||
return formatSuccessResponse(response.data.data, '콘텐츠 목록을 조회했습니다.')
|
||||
} catch (error) {
|
||||
return handleApiError(error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 진행 중인 콘텐츠 조회
|
||||
* @param {string} period - 조회 기간
|
||||
* @returns {Promise<Object>} 진행 중인 콘텐츠 목록
|
||||
*/
|
||||
async getOngoingContents(period = 'month') {
|
||||
try {
|
||||
const response = await contentApi.get(`/ongoing?period=${period}`)
|
||||
|
||||
return formatSuccessResponse(response.data.data, '진행 중인 콘텐츠를 조회했습니다.')
|
||||
} catch (error) {
|
||||
console.error('❌ 콘텐츠 목록 조회 실패:', error)
|
||||
return handleApiError(error)
|
||||
}
|
||||
}
|
||||
@ -164,51 +179,29 @@ class ContentService {
|
||||
async getContentDetail(contentId) {
|
||||
try {
|
||||
const response = await contentApi.get(`/${contentId}`)
|
||||
|
||||
|
||||
return formatSuccessResponse(response.data.data, '콘텐츠 상세 정보를 조회했습니다.')
|
||||
} catch (error) {
|
||||
console.error('❌ 콘텐츠 상세 조회 실패:', error)
|
||||
return handleApiError(error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 콘텐츠 수정
|
||||
* @param {number} contentId - 콘텐츠 ID
|
||||
* @param {Object} updateData - 수정할 콘텐츠 정보
|
||||
* @returns {Promise<Object>} 수정 결과
|
||||
*/
|
||||
async updateContent(contentId, updateData) {
|
||||
try {
|
||||
const response = await contentApi.put(`/${contentId}`, {
|
||||
title: updateData.title,
|
||||
content: updateData.content,
|
||||
hashtags: updateData.hashtags,
|
||||
startDate: updateData.startDate,
|
||||
endDate: updateData.endDate,
|
||||
status: updateData.status
|
||||
})
|
||||
|
||||
return formatSuccessResponse(response.data.data, '콘텐츠가 수정되었습니다.')
|
||||
} catch (error) {
|
||||
return handleApiError(error)
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 콘텐츠 삭제 (CON-025: 콘텐츠 삭제)
|
||||
* 콘텐츠 삭제
|
||||
* @param {number} contentId - 콘텐츠 ID
|
||||
* @returns {Promise<Object>} 삭제 결과
|
||||
*/
|
||||
async deleteContent(contentId) {
|
||||
try {
|
||||
await contentApi.delete(`/${contentId}`)
|
||||
|
||||
const response = await contentApi.delete(`/${contentId}`)
|
||||
|
||||
return formatSuccessResponse(null, '콘텐츠가 삭제되었습니다.')
|
||||
} catch (error) {
|
||||
console.error('❌ 콘텐츠 삭제 실패:', error)
|
||||
return handleApiError(error)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const contentService = new ContentService()
|
||||
export default contentService
|
||||
export default new ContentService()
|
||||
@ -1,168 +1,307 @@
|
||||
//* src/store/content.js 수정 - 기존 구조 유지하고 API 연동만 추가
|
||||
//* src/store/content.js
|
||||
import { defineStore } from 'pinia'
|
||||
import { ref, computed } from 'vue'
|
||||
import contentService from '@/services/content'
|
||||
import ContentService from '@/services/content.js'
|
||||
import { PLATFORM_SPECS, PLATFORM_LABELS } from '@/utils/constants'
|
||||
|
||||
export const useContentStore = defineStore('content', () => {
|
||||
// 기존 상태들 유지
|
||||
const contentList = ref([])
|
||||
const ongoingContents = ref([])
|
||||
const selectedContent = ref(null)
|
||||
const generatedContent = ref(null)
|
||||
const isLoading = ref(false)
|
||||
|
||||
// 기존 computed 속성들 유지
|
||||
const contentCount = computed(() => contentList.value.length)
|
||||
const ongoingContentCount = computed(() => ongoingContents.value.length)
|
||||
|
||||
// generateContent를 실제 API 호출로 수정
|
||||
const generateContent = async (type, formData) => {
|
||||
isLoading.value = true
|
||||
/**
|
||||
* 콘텐츠 관련 상태 관리
|
||||
*/
|
||||
export const useContentStore = defineStore('content', {
|
||||
state: () => ({
|
||||
// 콘텐츠 목록
|
||||
contentList: [],
|
||||
totalCount: 0,
|
||||
|
||||
try {
|
||||
let result
|
||||
if (type === 'sns') {
|
||||
result = await contentService.generateSnsContent(formData)
|
||||
} else if (type === 'poster') {
|
||||
result = await contentService.generatePoster(formData)
|
||||
// 선택된 콘텐츠
|
||||
selectedContent: null,
|
||||
|
||||
// 로딩 상태
|
||||
loading: false,
|
||||
generating: false,
|
||||
|
||||
// 필터 상태
|
||||
filters: {
|
||||
contentType: '',
|
||||
platform: '',
|
||||
period: '',
|
||||
sortBy: 'createdAt_desc'
|
||||
},
|
||||
|
||||
// 페이지네이션
|
||||
pagination: {
|
||||
page: 1,
|
||||
itemsPerPage: 10
|
||||
}
|
||||
}),
|
||||
|
||||
getters: {
|
||||
/**
|
||||
* 필터링된 콘텐츠 목록
|
||||
*/
|
||||
filteredContents: (state) => {
|
||||
let filtered = [...state.contentList]
|
||||
|
||||
if (state.filters.contentType) {
|
||||
filtered = filtered.filter(content => content.type === state.filters.contentType)
|
||||
}
|
||||
|
||||
if (result.success) {
|
||||
generatedContent.value = result.data
|
||||
return { success: true, data: result.data }
|
||||
} else {
|
||||
return { success: false, error: result.message }
|
||||
}
|
||||
} catch (error) {
|
||||
return { success: false, error: '네트워크 오류가 발생했습니다.' }
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// saveContent를 실제 API 호출로 수정
|
||||
const saveContent = async (type, contentData) => {
|
||||
isLoading.value = true
|
||||
|
||||
try {
|
||||
let result
|
||||
if (type === 'sns') {
|
||||
result = await contentService.saveSnsContent(contentData)
|
||||
} else if (type === 'poster') {
|
||||
result = await contentService.savePoster(contentData)
|
||||
if (state.filters.platform) {
|
||||
filtered = filtered.filter(content => content.platform === state.filters.platform)
|
||||
}
|
||||
|
||||
if (result.success) {
|
||||
// 콘텐츠 목록 새로고침
|
||||
await fetchContentList()
|
||||
return { success: true, message: '콘텐츠가 저장되었습니다.' }
|
||||
} else {
|
||||
return { success: false, error: result.message }
|
||||
}
|
||||
} catch (error) {
|
||||
return { success: false, error: '네트워크 오류가 발생했습니다.' }
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// fetchContentList를 실제 API 호출로 수정
|
||||
const fetchContentList = async (filters = {}) => {
|
||||
isLoading.value = true
|
||||
|
||||
try {
|
||||
const result = await contentService.getContents(filters)
|
||||
// 정렬
|
||||
const [field, order] = state.filters.sortBy.split('_')
|
||||
filtered.sort((a, b) => {
|
||||
let aValue = a[field]
|
||||
let bValue = b[field]
|
||||
|
||||
if (field === 'createdAt' || field === 'updatedAt') {
|
||||
aValue = new Date(aValue)
|
||||
bValue = new Date(bValue)
|
||||
}
|
||||
|
||||
if (order === 'desc') {
|
||||
return bValue > aValue ? 1 : -1
|
||||
} else {
|
||||
return aValue > bValue ? 1 : -1
|
||||
}
|
||||
})
|
||||
|
||||
if (result.success) {
|
||||
contentList.value = result.data
|
||||
return { success: true }
|
||||
} else {
|
||||
return { success: false, error: result.message }
|
||||
}
|
||||
} catch (error) {
|
||||
return { success: false, error: '네트워크 오류가 발생했습니다.' }
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
return filtered
|
||||
},
|
||||
|
||||
// fetchOngoingContents를 실제 API 호출로 수정
|
||||
const fetchOngoingContents = async (period = 'month') => {
|
||||
isLoading.value = true
|
||||
|
||||
try {
|
||||
const result = await contentService.getOngoingContents(period)
|
||||
/**
|
||||
* 페이지네이션된 콘텐츠 목록
|
||||
*/
|
||||
paginatedContents: (state) => {
|
||||
const start = (state.pagination.page - 1) * state.pagination.itemsPerPage
|
||||
const end = start + state.pagination.itemsPerPage
|
||||
return state.filteredContents.slice(start, end)
|
||||
},
|
||||
|
||||
/**
|
||||
* 총 페이지 수
|
||||
*/
|
||||
totalPages: (state) => {
|
||||
return Math.ceil(state.filteredContents.length / state.pagination.itemsPerPage)
|
||||
}
|
||||
},
|
||||
|
||||
actions: {
|
||||
/**
|
||||
* 콘텐츠 생성 (AI 기반)
|
||||
*/
|
||||
async generateContent(contentData) {
|
||||
this.generating = true
|
||||
|
||||
if (result.success) {
|
||||
ongoingContents.value = result.data
|
||||
return { success: true }
|
||||
} else {
|
||||
return { success: false, error: result.message }
|
||||
try {
|
||||
console.log('🎯 콘텐츠 생성 시작:', contentData)
|
||||
|
||||
// 백엔드 DTO에 맞는 데이터 구조로 변환
|
||||
const requestData = {
|
||||
storeId: 1, // 현재는 하드코딩, 추후 로그인한 사용자의 매장 ID 사용
|
||||
storeName: '테스트 매장', // 추후 실제 매장 정보 사용
|
||||
storeType: '음식점', // 추후 실제 매장 업종 사용
|
||||
platform: contentData.platform,
|
||||
title: contentData.title,
|
||||
category: contentData.category || this.mapTargetToCategory(contentData.targetType),
|
||||
requirement: contentData.requirements || '',
|
||||
target: contentData.targetType || '일반 고객',
|
||||
contentType: 'SNS 게시물',
|
||||
eventName: contentData.eventName,
|
||||
startDate: contentData.startDate,
|
||||
endDate: contentData.endDate,
|
||||
images: contentData.images || [],
|
||||
photoStyle: '밝고 화사한',
|
||||
includeHashtags: true,
|
||||
includeEmojis: true,
|
||||
includeCallToAction: true,
|
||||
includeLocationInfo: false
|
||||
}
|
||||
|
||||
const result = await ContentService.generateSnsContent(requestData)
|
||||
|
||||
if (result.success) {
|
||||
console.log('✅ 콘텐츠 생성 성공:', result.data)
|
||||
return result.data
|
||||
} else {
|
||||
throw new Error(result.message || '콘텐츠 생성에 실패했습니다.')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ 콘텐츠 생성 실패:', error)
|
||||
throw error
|
||||
} finally {
|
||||
this.generating = false
|
||||
}
|
||||
} catch (error) {
|
||||
return { success: false, error: '네트워크 오류가 발생했습니다.' }
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 콘텐츠 수정/삭제 메서드 추가
|
||||
const updateContent = async (contentId, updateData) => {
|
||||
isLoading.value = true
|
||||
|
||||
try {
|
||||
const result = await contentService.updateContent(contentId, updateData)
|
||||
/**
|
||||
* 타겟 타입을 카테고리로 매핑
|
||||
*/
|
||||
mapTargetToCategory(targetType) {
|
||||
const mapping = {
|
||||
'new_menu': '메뉴소개',
|
||||
'discount': '이벤트',
|
||||
'store': '인테리어',
|
||||
'event': '이벤트'
|
||||
}
|
||||
return mapping[targetType] || '메뉴소개'
|
||||
},
|
||||
|
||||
/**
|
||||
* 플랫폼별 특성 조회
|
||||
*/
|
||||
getPlatformSpec(platform) {
|
||||
return PLATFORM_SPECS[platform] || null
|
||||
},
|
||||
|
||||
/**
|
||||
* 플랫폼 유효성 검사
|
||||
*/
|
||||
validatePlatform(platform) {
|
||||
return Object.keys(PLATFORM_SPECS).includes(platform)
|
||||
},
|
||||
|
||||
/**
|
||||
* 콘텐츠 저장
|
||||
*/
|
||||
async saveContent(contentData) {
|
||||
this.loading = true
|
||||
|
||||
if (result.success) {
|
||||
await fetchContentList()
|
||||
return { success: true, message: '콘텐츠가 수정되었습니다.' }
|
||||
} else {
|
||||
return { success: false, error: result.message }
|
||||
try {
|
||||
// 백엔드 DTO에 맞는 형식으로 데이터 정제
|
||||
const saveData = {
|
||||
title: contentData.title,
|
||||
content: contentData.content,
|
||||
hashtags: contentData.hashtags || [],
|
||||
platform: contentData.platform, // 이미 백엔드 형식 (INSTAGRAM, NAVER_BLOG 등)
|
||||
category: contentData.category || '메뉴소개',
|
||||
eventName: contentData.eventName,
|
||||
eventDate: contentData.eventDate,
|
||||
status: contentData.status || 'DRAFT'
|
||||
}
|
||||
|
||||
const result = await ContentService.saveSnsContent(saveData)
|
||||
|
||||
if (result.success) {
|
||||
// 목록 새로고침
|
||||
await this.fetchContentList()
|
||||
return result.data
|
||||
} else {
|
||||
throw new Error(result.message || '콘텐츠 저장에 실패했습니다.')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ 콘텐츠 저장 실패:', error)
|
||||
throw error
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
} catch (error) {
|
||||
return { success: false, error: '네트워크 오류가 발생했습니다.' }
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
const deleteContent = async (contentId) => {
|
||||
isLoading.value = true
|
||||
|
||||
try {
|
||||
const result = await contentService.deleteContent(contentId)
|
||||
/**
|
||||
* 콘텐츠 목록 조회
|
||||
*/
|
||||
async fetchContentList() {
|
||||
this.loading = true
|
||||
|
||||
if (result.success) {
|
||||
await fetchContentList()
|
||||
return { success: true, message: '콘텐츠가 삭제되었습니다.' }
|
||||
} else {
|
||||
return { success: false, error: result.message }
|
||||
try {
|
||||
const result = await ContentService.getContentList(this.filters)
|
||||
|
||||
if (result.success) {
|
||||
this.contentList = result.data || []
|
||||
this.totalCount = this.contentList.length
|
||||
} else {
|
||||
throw new Error(result.message || '콘텐츠 목록 조회에 실패했습니다.')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ 콘텐츠 목록 조회 실패:', error)
|
||||
this.contentList = []
|
||||
this.totalCount = 0
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
} catch (error) {
|
||||
return { success: false, error: '네트워크 오류가 발생했습니다.' }
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
return {
|
||||
// 상태
|
||||
contentList,
|
||||
ongoingContents,
|
||||
selectedContent,
|
||||
generatedContent,
|
||||
isLoading,
|
||||
|
||||
// 컴퓨티드
|
||||
contentCount,
|
||||
ongoingContentCount,
|
||||
|
||||
// 메서드
|
||||
generateContent,
|
||||
saveContent,
|
||||
fetchContentList,
|
||||
fetchOngoingContents,
|
||||
updateContent,
|
||||
deleteContent
|
||||
/**
|
||||
* 콘텐츠 상세 조회
|
||||
*/
|
||||
async fetchContentDetail(contentId) {
|
||||
this.loading = true
|
||||
|
||||
try {
|
||||
const result = await ContentService.getContentDetail(contentId)
|
||||
|
||||
if (result.success) {
|
||||
this.selectedContent = result.data
|
||||
return result.data
|
||||
} else {
|
||||
throw new Error(result.message || '콘텐츠 상세 조회에 실패했습니다.')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ 콘텐츠 상세 조회 실패:', error)
|
||||
throw error
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 콘텐츠 삭제
|
||||
*/
|
||||
async deleteContent(contentId) {
|
||||
this.loading = true
|
||||
|
||||
try {
|
||||
const result = await ContentService.deleteContent(contentId)
|
||||
|
||||
if (result.success) {
|
||||
// 목록에서 제거
|
||||
this.contentList = this.contentList.filter(content => content.id !== contentId)
|
||||
this.totalCount = this.contentList.length
|
||||
return true
|
||||
} else {
|
||||
throw new Error(result.message || '콘텐츠 삭제에 실패했습니다.')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('❌ 콘텐츠 삭제 실패:', error)
|
||||
throw error
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 필터 설정
|
||||
*/
|
||||
setFilters(newFilters) {
|
||||
this.filters = { ...this.filters, ...newFilters }
|
||||
this.pagination.page = 1 // 필터 변경 시 첫 페이지로
|
||||
},
|
||||
|
||||
/**
|
||||
* 페이지네이션 설정
|
||||
*/
|
||||
setPagination(newPagination) {
|
||||
this.pagination = { ...this.pagination, ...newPagination }
|
||||
},
|
||||
|
||||
/**
|
||||
* 상태 초기화
|
||||
*/
|
||||
reset() {
|
||||
this.contentList = []
|
||||
this.selectedContent = null
|
||||
this.totalCount = 0
|
||||
this.filters = {
|
||||
contentType: '',
|
||||
platform: '',
|
||||
period: '',
|
||||
sortBy: 'createdAt_desc'
|
||||
}
|
||||
this.pagination = {
|
||||
page: 1,
|
||||
itemsPerPage: 10
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -7,15 +7,7 @@
|
||||
export const CONTENT_TYPES = {
|
||||
SNS: 'sns',
|
||||
POSTER: 'poster',
|
||||
VIDEO: 'video',
|
||||
BLOG: 'blog',
|
||||
}
|
||||
|
||||
export const CONTENT_TYPE_LABELS = {
|
||||
[CONTENT_TYPES.SNS]: 'SNS 게시물',
|
||||
[CONTENT_TYPES.POSTER]: '홍보 포스터',
|
||||
[CONTENT_TYPES.VIDEO]: '비디오',
|
||||
[CONTENT_TYPES.BLOG]: '블로그 포스트',
|
||||
BLOG: 'blog'
|
||||
}
|
||||
|
||||
// 플랫폼
|
||||
@ -23,191 +15,201 @@ export const PLATFORMS = {
|
||||
INSTAGRAM: 'instagram',
|
||||
NAVER_BLOG: 'naver_blog',
|
||||
FACEBOOK: 'facebook',
|
||||
TWITTER: 'twitter',
|
||||
YOUTUBE: 'youtube',
|
||||
KAKAO: 'kakao',
|
||||
KAKAO_STORY: 'kakao_story'
|
||||
}
|
||||
|
||||
// 플랫폼 라벨
|
||||
export const PLATFORM_LABELS = {
|
||||
[PLATFORMS.INSTAGRAM]: '인스타그램',
|
||||
[PLATFORMS.NAVER_BLOG]: '네이버 블로그',
|
||||
[PLATFORMS.FACEBOOK]: '페이스북',
|
||||
[PLATFORMS.TWITTER]: '트위터',
|
||||
[PLATFORMS.YOUTUBE]: '유튜브',
|
||||
[PLATFORMS.KAKAO]: '카카오',
|
||||
[PLATFORMS.KAKAO_STORY]: '카카오스토리'
|
||||
}
|
||||
|
||||
// 플랫폼 컬러
|
||||
export const PLATFORM_COLORS = {
|
||||
[PLATFORMS.INSTAGRAM]: 'purple',
|
||||
[PLATFORMS.INSTAGRAM]: 'pink',
|
||||
[PLATFORMS.NAVER_BLOG]: 'green',
|
||||
[PLATFORMS.FACEBOOK]: 'blue',
|
||||
[PLATFORMS.TWITTER]: 'light-blue',
|
||||
[PLATFORMS.YOUTUBE]: 'red',
|
||||
[PLATFORMS.KAKAO]: 'yellow',
|
||||
[PLATFORMS.KAKAO_STORY]: 'amber'
|
||||
}
|
||||
|
||||
// 콘텐츠 상태
|
||||
export const CONTENT_STATUS = {
|
||||
DRAFT: 'draft',
|
||||
PUBLISHED: 'published',
|
||||
SCHEDULED: 'scheduled',
|
||||
ARCHIVED: 'archived',
|
||||
FAILED: 'failed',
|
||||
// 플랫폼 아이콘
|
||||
export const PLATFORM_ICONS = {
|
||||
[PLATFORMS.INSTAGRAM]: 'mdi-instagram',
|
||||
[PLATFORMS.NAVER_BLOG]: 'mdi-web',
|
||||
[PLATFORMS.FACEBOOK]: 'mdi-facebook',
|
||||
[PLATFORMS.KAKAO_STORY]: 'mdi-chat'
|
||||
}
|
||||
|
||||
export const CONTENT_STATUS_LABELS = {
|
||||
[CONTENT_STATUS.DRAFT]: '임시저장',
|
||||
[CONTENT_STATUS.PUBLISHED]: '발행됨',
|
||||
[CONTENT_STATUS.SCHEDULED]: '예약됨',
|
||||
[CONTENT_STATUS.ARCHIVED]: '보관됨',
|
||||
[CONTENT_STATUS.FAILED]: '실패',
|
||||
}
|
||||
|
||||
export const CONTENT_STATUS_COLORS = {
|
||||
[CONTENT_STATUS.DRAFT]: 'orange',
|
||||
[CONTENT_STATUS.PUBLISHED]: 'success',
|
||||
[CONTENT_STATUS.SCHEDULED]: 'info',
|
||||
[CONTENT_STATUS.ARCHIVED]: 'grey',
|
||||
[CONTENT_STATUS.FAILED]: 'error',
|
||||
}
|
||||
|
||||
// 매장 업종
|
||||
export const BUSINESS_TYPES = {
|
||||
RESTAURANT: 'restaurant',
|
||||
CAFE: 'cafe',
|
||||
SNACK_BAR: 'snack_bar',
|
||||
FAST_FOOD: 'fast_food',
|
||||
BAKERY: 'bakery',
|
||||
DESSERT: 'dessert',
|
||||
CONVENIENCE: 'convenience',
|
||||
OTHER: 'other',
|
||||
}
|
||||
|
||||
export const BUSINESS_TYPE_LABELS = {
|
||||
[BUSINESS_TYPES.RESTAURANT]: '일반음식점',
|
||||
[BUSINESS_TYPES.CAFE]: '카페',
|
||||
[BUSINESS_TYPES.SNACK_BAR]: '분식점',
|
||||
[BUSINESS_TYPES.FAST_FOOD]: '패스트푸드',
|
||||
[BUSINESS_TYPES.BAKERY]: '제과점',
|
||||
[BUSINESS_TYPES.DESSERT]: '디저트카페',
|
||||
[BUSINESS_TYPES.CONVENIENCE]: '편의점',
|
||||
[BUSINESS_TYPES.OTHER]: '기타',
|
||||
// 플랫폼 사양 정의 (누락된 PLATFORM_SPECS 추가)
|
||||
export const PLATFORM_SPECS = {
|
||||
[PLATFORMS.INSTAGRAM]: {
|
||||
name: '인스타그램',
|
||||
icon: 'mdi-instagram',
|
||||
color: 'pink',
|
||||
maxLength: 2200,
|
||||
hashtags: true,
|
||||
imageRequired: true,
|
||||
format: 'sns'
|
||||
},
|
||||
[PLATFORMS.NAVER_BLOG]: {
|
||||
name: '네이버 블로그',
|
||||
icon: 'mdi-web',
|
||||
color: 'green',
|
||||
maxLength: 5000,
|
||||
hashtags: false,
|
||||
imageRequired: false,
|
||||
format: 'blog'
|
||||
},
|
||||
[PLATFORMS.FACEBOOK]: {
|
||||
name: '페이스북',
|
||||
icon: 'mdi-facebook',
|
||||
color: 'blue',
|
||||
maxLength: 63206,
|
||||
hashtags: true,
|
||||
imageRequired: false,
|
||||
format: 'sns'
|
||||
},
|
||||
[PLATFORMS.KAKAO_STORY]: {
|
||||
name: '카카오스토리',
|
||||
icon: 'mdi-chat',
|
||||
color: 'amber',
|
||||
maxLength: 1000,
|
||||
hashtags: true,
|
||||
imageRequired: false,
|
||||
format: 'sns'
|
||||
}
|
||||
}
|
||||
|
||||
// 톤앤매너
|
||||
export const TONE_AND_MANNER = {
|
||||
FRIENDLY: 'friendly',
|
||||
PROFESSIONAL: 'professional',
|
||||
HUMOROUS: 'humorous',
|
||||
ELEGANT: 'elegant',
|
||||
CASUAL: 'casual',
|
||||
TRENDY: 'trendy',
|
||||
}
|
||||
|
||||
export const TONE_AND_MANNER_LABELS = {
|
||||
[TONE_AND_MANNER.FRIENDLY]: '친근함',
|
||||
[TONE_AND_MANNER.PROFESSIONAL]: '전문적',
|
||||
[TONE_AND_MANNER.HUMOROUS]: '유머러스',
|
||||
[TONE_AND_MANNER.ELEGANT]: '고급스러운',
|
||||
[TONE_AND_MANNER.CASUAL]: '캐주얼',
|
||||
[TONE_AND_MANNER.TRENDY]: '트렌디',
|
||||
HUMOROUS: 'humorous'
|
||||
}
|
||||
|
||||
// 감정 강도
|
||||
export const EMOTION_INTENSITY = {
|
||||
CALM: 'calm',
|
||||
NORMAL: 'normal',
|
||||
ENTHUSIASTIC: 'enthusiastic',
|
||||
EXCITING: 'exciting',
|
||||
}
|
||||
|
||||
export const EMOTION_INTENSITY_LABELS = {
|
||||
[EMOTION_INTENSITY.CALM]: '차분함',
|
||||
[EMOTION_INTENSITY.NORMAL]: '보통',
|
||||
[EMOTION_INTENSITY.ENTHUSIASTIC]: '열정적',
|
||||
[EMOTION_INTENSITY.EXCITING]: '과장된',
|
||||
LOW: 'low',
|
||||
MEDIUM: 'medium',
|
||||
HIGH: 'high'
|
||||
}
|
||||
|
||||
// 프로모션 타입
|
||||
export const PROMOTION_TYPES = {
|
||||
DISCOUNT: 'discount',
|
||||
EVENT: 'event',
|
||||
NEW_MENU: 'new_menu',
|
||||
NONE: 'none',
|
||||
DISCOUNT: 'DISCOUNT',
|
||||
EVENT: 'EVENT',
|
||||
NEW_PRODUCT: 'NEW_PRODUCT',
|
||||
REVIEW: 'REVIEW'
|
||||
}
|
||||
|
||||
export const PROMOTION_TYPE_LABELS = {
|
||||
[PROMOTION_TYPES.DISCOUNT]: '할인 정보',
|
||||
[PROMOTION_TYPES.EVENT]: '이벤트 정보',
|
||||
[PROMOTION_TYPES.NEW_MENU]: '신메뉴 알림',
|
||||
[PROMOTION_TYPES.NONE]: '없음',
|
||||
}
|
||||
|
||||
// 이미지 스타일
|
||||
// 사진 스타일
|
||||
export const PHOTO_STYLES = {
|
||||
MODERN: 'modern',
|
||||
CLASSIC: 'classic',
|
||||
EMOTIONAL: 'emotional',
|
||||
VINTAGE: 'vintage',
|
||||
MINIMALIST: 'minimalist',
|
||||
COLORFUL: 'colorful',
|
||||
BRIGHT: 'bright',
|
||||
CALM: 'calm',
|
||||
NATURAL: 'natural'
|
||||
}
|
||||
|
||||
export const PHOTO_STYLE_LABELS = {
|
||||
[PHOTO_STYLES.MODERN]: '모던',
|
||||
[PHOTO_STYLES.CLASSIC]: '클래식',
|
||||
[PHOTO_STYLES.EMOTIONAL]: '감성적',
|
||||
[PHOTO_STYLES.MINIMALIST]: '미니멀',
|
||||
// 콘텐츠 상태
|
||||
export const CONTENT_STATUS = {
|
||||
DRAFT: 'draft',
|
||||
PUBLISHED: 'published',
|
||||
ARCHIVED: 'archived'
|
||||
}
|
||||
|
||||
// 파일 업로드 제한
|
||||
export const FILE_LIMITS = {
|
||||
MAX_SIZE: 10 * 1024 * 1024, // 10MB
|
||||
ALLOWED_TYPES: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
|
||||
ALLOWED_EXTENSIONS: ['.jpg', '.jpeg', '.png', '.gif', '.webp'],
|
||||
// 타겟 대상
|
||||
export const TARGET_TYPES = {
|
||||
NEW_MENU: 'new_menu',
|
||||
DISCOUNT: 'discount',
|
||||
STORE: 'store',
|
||||
EVENT: 'event'
|
||||
}
|
||||
|
||||
// 타겟 대상 라벨
|
||||
export const TARGET_TYPE_LABELS = {
|
||||
[TARGET_TYPES.NEW_MENU]: '신메뉴',
|
||||
[TARGET_TYPES.DISCOUNT]: '할인 이벤트',
|
||||
[TARGET_TYPES.STORE]: '매장 홍보',
|
||||
[TARGET_TYPES.EVENT]: '일반 이벤트'
|
||||
}
|
||||
|
||||
// 백엔드 플랫폼 매핑 (프론트엔드 -> 백엔드)
|
||||
export const BACKEND_PLATFORM_MAPPING = {
|
||||
[PLATFORMS.INSTAGRAM]: 'INSTAGRAM',
|
||||
[PLATFORMS.NAVER_BLOG]: 'NAVER_BLOG',
|
||||
[PLATFORMS.FACEBOOK]: 'FACEBOOK',
|
||||
[PLATFORMS.KAKAO_STORY]: 'KAKAO_STORY'
|
||||
}
|
||||
|
||||
// 백엔드에서 프론트엔드로 매핑 (백엔드 -> 프론트엔드)
|
||||
export const FRONTEND_PLATFORM_MAPPING = {
|
||||
'INSTAGRAM': PLATFORMS.INSTAGRAM,
|
||||
'NAVER_BLOG': PLATFORMS.NAVER_BLOG,
|
||||
'FACEBOOK': PLATFORMS.FACEBOOK,
|
||||
'KAKAO_STORY': PLATFORMS.KAKAO_STORY
|
||||
}
|
||||
|
||||
// API 응답 상태
|
||||
export const API_STATUS = {
|
||||
SUCCESS: 'success',
|
||||
ERROR: 'error',
|
||||
LOADING: 'loading',
|
||||
IDLE: 'idle',
|
||||
LOADING: 'loading'
|
||||
}
|
||||
|
||||
// 페이지네이션
|
||||
export const PAGINATION = {
|
||||
DEFAULT_PAGE_SIZE: 20,
|
||||
PAGE_SIZE_OPTIONS: [10, 20, 50, 100],
|
||||
// 페이지 크기
|
||||
export const PAGE_SIZES = {
|
||||
SMALL: 10,
|
||||
MEDIUM: 20,
|
||||
LARGE: 50
|
||||
}
|
||||
|
||||
// 정렬 방향
|
||||
export const SORT_DIRECTION = {
|
||||
ASC: 'asc',
|
||||
DESC: 'desc'
|
||||
}
|
||||
|
||||
// 날짜 포맷
|
||||
export const DATE_FORMATS = {
|
||||
DISPLAY: 'YYYY-MM-DD HH:mm',
|
||||
API: 'YYYY-MM-DD',
|
||||
FULL: 'YYYY-MM-DD HH:mm:ss'
|
||||
}
|
||||
|
||||
// 파일 업로드 제한
|
||||
export const FILE_LIMITS = {
|
||||
MAX_SIZE: 10485760, // 10MB
|
||||
ALLOWED_TYPES: ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
|
||||
MAX_FILES: 5
|
||||
}
|
||||
|
||||
// 콘텐츠 생성 제한
|
||||
export const CONTENT_LIMITS = {
|
||||
TITLE_MAX_LENGTH: 100,
|
||||
DESCRIPTION_MAX_LENGTH: 500,
|
||||
REQUIREMENTS_MAX_LENGTH: 1000,
|
||||
MAX_HASHTAGS: 30
|
||||
}
|
||||
|
||||
// 알림 타입
|
||||
export const NOTIFICATION_TYPES = {
|
||||
SUCCESS: 'success',
|
||||
ERROR: 'error',
|
||||
WARNING: 'warning',
|
||||
INFO: 'info'
|
||||
}
|
||||
|
||||
// 로컬 스토리지 키
|
||||
export const STORAGE_KEYS = {
|
||||
AUTH_TOKEN: 'auth_token',
|
||||
USER_INFO: 'user_info',
|
||||
APP_SETTINGS: 'app_settings',
|
||||
CONTENT_FILTERS: 'content_filters',
|
||||
}
|
||||
|
||||
// 시간 관련 상수
|
||||
export const TIME_FORMATS = {
|
||||
DATE: 'YYYY-MM-DD',
|
||||
DATETIME: 'YYYY-MM-DD HH:mm:ss',
|
||||
TIME: 'HH:mm',
|
||||
}
|
||||
|
||||
export const DATE_RANGES = {
|
||||
TODAY: 'today',
|
||||
WEEK: 'week',
|
||||
MONTH: 'month',
|
||||
QUARTER: 'quarter',
|
||||
YEAR: 'year',
|
||||
ALL: 'all',
|
||||
}
|
||||
|
||||
export const DATE_RANGE_LABELS = {
|
||||
[DATE_RANGES.TODAY]: '오늘',
|
||||
[DATE_RANGES.WEEK]: '최근 1주일',
|
||||
[DATE_RANGES.MONTH]: '최근 1개월',
|
||||
[DATE_RANGES.QUARTER]: '최근 3개월',
|
||||
[DATE_RANGES.YEAR]: '최근 1년',
|
||||
[DATE_RANGES.ALL]: '전체',
|
||||
}
|
||||
ACCESS_TOKEN: 'accessToken',
|
||||
REFRESH_TOKEN: 'refreshToken',
|
||||
USER_INFO: 'userInfo',
|
||||
THEME: 'theme',
|
||||
LANGUAGE: 'language'
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@ -122,7 +122,7 @@
|
||||
<div class="y-axis-labels">
|
||||
<div v-for="(label, i) in yAxisLabels" :key="i"
|
||||
class="y-label"
|
||||
:style="{ bottom: `${i * 20}%` }">
|
||||
:style="{ bottom: `${i * 18}%` }">
|
||||
{{ label }}
|
||||
</div>
|
||||
</div>
|
||||
@ -139,7 +139,7 @@
|
||||
ref="chartCanvas"
|
||||
class="chart-canvas"
|
||||
width="800"
|
||||
height="300"
|
||||
height="600"
|
||||
@mousemove="handleMouseMove"
|
||||
@mouseleave="hideTooltip">
|
||||
</canvas>
|
||||
@ -176,7 +176,7 @@
|
||||
|
||||
<!-- X축 라벨 - 데이터 포인트와 동일한 위치에 배치 -->
|
||||
<div class="x-axis-labels mt-3" style="position: relative; height: 20px;">
|
||||
<div class="x-axis-container" style="position: relative; padding-left: 60px; padding-right: 20px;">
|
||||
<div class="x-axis-container" style="position: relative; padding-left: 60px; padding-right: 60px;">
|
||||
<span
|
||||
v-for="(point, index) in chartDataPoints"
|
||||
:key="index"
|
||||
@ -975,13 +975,8 @@ const updateAiRecommendation = (aiData) => {
|
||||
title: aiData.tipContent ? aiData.tipContent.substring(0, 50) + '...' : 'AI 마케팅 추천',
|
||||
sections: {
|
||||
ideas: {
|
||||
title: '1. 추천 아이디어',
|
||||
title: '추천 아이디어',
|
||||
items: [aiData.tipContent || '맞춤형 마케팅 전략을 제안드립니다.']
|
||||
},
|
||||
costs: {
|
||||
title: '2. 예상 효과',
|
||||
items: ['고객 관심 유도 및 매출 상승', 'SNS를 통한 브랜드 인지도 상승'],
|
||||
effects: ['재방문율 및 공유 유도', '지역 내 인지도 향상']
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1025,17 +1020,30 @@ const chartDataPoints = computed(() => {
|
||||
const data = currentChartData.value
|
||||
if (!data || data.length === 0) return []
|
||||
|
||||
const maxSales = Math.max(...data.map(d => Math.max(d.sales, d.target)))
|
||||
const maxValue = Math.max(...data.map(d => Math.max(d.sales, d.target)))
|
||||
|
||||
// Canvas의 실제 padding과 일치하는 좌표 계산
|
||||
const padding = 60 // drawChart에서 사용하는 padding과 동일
|
||||
const canvasWidth = 800 // Canvas width와 동일
|
||||
const canvasHeight = 300 // Canvas height와 동일
|
||||
const chartWidth = canvasWidth - padding * 2
|
||||
const chartHeight = canvasHeight - padding * 2
|
||||
|
||||
return data.map((item, index) => {
|
||||
const chartStartPercent = 8
|
||||
const chartEndPercent = 92
|
||||
const chartWidth = chartEndPercent - chartStartPercent
|
||||
// Canvas에서 그려지는 실제 좌표 계산
|
||||
const canvasX = padding + (index * chartWidth / (data.length - 1))
|
||||
const canvasY = padding + chartHeight - ((item.sales / maxValue) * chartHeight)
|
||||
const targetCanvasY = padding + chartHeight - ((item.target / maxValue) * chartHeight)
|
||||
|
||||
// 백분율로 변환하되, data-points의 padding을 고려
|
||||
const xPercent = (canvasX / canvasWidth) * 100
|
||||
const yPercent = ((canvasHeight - canvasY + padding) / canvasHeight) * 100 - 15
|
||||
const targetYPercent = ((canvasHeight - targetCanvasY + padding) / canvasHeight) * 100 - 15
|
||||
|
||||
return {
|
||||
x: chartStartPercent + (index * chartWidth / (data.length - 1)),
|
||||
y: 10 + ((item.sales / maxSales) * 80),
|
||||
targetY: 10 + ((item.target / maxSales) * 80),
|
||||
x: xPercent,
|
||||
y: yPercent,
|
||||
targetY: targetYPercent,
|
||||
sales: item.sales,
|
||||
target: item.target,
|
||||
label: item.label
|
||||
@ -1479,7 +1487,7 @@ onMounted(async () => {
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 40px;
|
||||
width: 50px;
|
||||
}
|
||||
|
||||
.y-label {
|
||||
@ -1491,8 +1499,8 @@ onMounted(async () => {
|
||||
|
||||
.chart-grid {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
right: 0;
|
||||
left: 60px;
|
||||
right: 60px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
@ -1515,7 +1523,7 @@ onMounted(async () => {
|
||||
|
||||
.data-points {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user