release
This commit is contained in:
SeoJHeasdw
parent
43066ca623
commit
5f963a9cd9
228
src/components/common/AppHeader.vue
Normal file
228
src/components/common/AppHeader.vue
Normal file
@ -0,0 +1,228 @@
|
||||
//* src/components/common/AppHeader.vue
|
||||
<template>
|
||||
<v-app-bar :color="color" :elevation="elevation" :height="height" app>
|
||||
<!-- 뒤로가기 버튼 -->
|
||||
<v-btn v-if="showBackButton" icon @click="handleBackClick" :color="backButtonColor">
|
||||
<v-icon>mdi-arrow-left</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<!-- 메뉴 버튼 (모바일용) -->
|
||||
<v-app-bar-nav-icon
|
||||
v-if="showMenuButton"
|
||||
@click="$emit('toggle-drawer')"
|
||||
:color="menuButtonColor"
|
||||
/>
|
||||
|
||||
<!-- 타이틀 -->
|
||||
<v-app-bar-title :class="titleClass" @click="handleTitleClick">
|
||||
{{ title }}
|
||||
</v-app-bar-title>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<!-- 액션 버튼들 -->
|
||||
<template v-for="action in actions" :key="action.id">
|
||||
<v-btn
|
||||
v-if="action.type === 'icon'"
|
||||
:icon="action.icon"
|
||||
@click="handleActionClick(action)"
|
||||
:color="action.color || 'white'"
|
||||
:loading="action.loading"
|
||||
:disabled="action.disabled"
|
||||
>
|
||||
<v-icon>{{ action.icon }}</v-icon>
|
||||
<v-badge
|
||||
v-if="action.badge && action.badgeCount > 0"
|
||||
:content="action.badgeCount"
|
||||
:color="action.badgeColor || 'error'"
|
||||
offset-x="8"
|
||||
offset-y="8"
|
||||
/>
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
v-else
|
||||
:color="action.color || 'primary'"
|
||||
:variant="action.variant || 'text'"
|
||||
@click="handleActionClick(action)"
|
||||
:loading="action.loading"
|
||||
:disabled="action.disabled"
|
||||
>
|
||||
{{ action.text }}
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<!-- 사용자 아바타 -->
|
||||
<v-menu v-if="showUserMenu" offset-y :close-on-content-click="false">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-btn icon v-bind="props" class="ml-2">
|
||||
<v-avatar size="32" :color="avatarColor">
|
||||
<v-img v-if="userAvatar" :src="userAvatar" :alt="userName" />
|
||||
<span v-else class="text-white font-weight-bold">
|
||||
{{ userInitial }}
|
||||
</span>
|
||||
</v-avatar>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-card min-width="200">
|
||||
<v-card-title class="text-center">
|
||||
{{ userName }}
|
||||
</v-card-title>
|
||||
<v-card-subtitle class="text-center">
|
||||
{{ userEmail }}
|
||||
</v-card-subtitle>
|
||||
<v-divider />
|
||||
<v-list density="compact">
|
||||
<v-list-item
|
||||
v-for="menuItem in userMenuItems"
|
||||
:key="menuItem.id"
|
||||
@click="handleUserMenuClick(menuItem)"
|
||||
:prepend-icon="menuItem.icon"
|
||||
>
|
||||
<v-list-item-title>{{ menuItem.title }}</v-list-item-title>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</v-app-bar>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
/**
|
||||
* AI 마케팅 서비스 - 공통 헤더 컴포넌트
|
||||
* 모바일 최적화된 앱바 컴포넌트
|
||||
*/
|
||||
|
||||
// Props 정의
|
||||
const props = defineProps({
|
||||
// 헤더 스타일 설정
|
||||
title: {
|
||||
type: String,
|
||||
default: 'AI 마케팅',
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
elevation: {
|
||||
type: [Number, String],
|
||||
default: 2,
|
||||
},
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 56,
|
||||
},
|
||||
|
||||
// 네비게이션 버튼
|
||||
showBackButton: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
showMenuButton: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
backButtonColor: {
|
||||
type: String,
|
||||
default: 'white',
|
||||
},
|
||||
menuButtonColor: {
|
||||
type: String,
|
||||
default: 'white',
|
||||
},
|
||||
|
||||
// 타이틀 설정
|
||||
titleClickable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
// 액션 버튼들
|
||||
actions: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
// 사용자 메뉴
|
||||
showUserMenu: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
userName: {
|
||||
type: String,
|
||||
default: '사용자',
|
||||
},
|
||||
userEmail: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
userAvatar: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
avatarColor: {
|
||||
type: String,
|
||||
default: 'secondary',
|
||||
},
|
||||
userMenuItems: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{ id: 'profile', title: '프로필', icon: 'mdi-account' },
|
||||
{ id: 'settings', title: '설정', icon: 'mdi-cog' },
|
||||
{ id: 'logout', title: '로그아웃', icon: 'mdi-logout' },
|
||||
],
|
||||
},
|
||||
})
|
||||
|
||||
// Emits 정의
|
||||
const emit = defineEmits([
|
||||
'toggle-drawer',
|
||||
'back-click',
|
||||
'title-click',
|
||||
'action-click',
|
||||
'user-menu-click',
|
||||
])
|
||||
|
||||
// 라우터
|
||||
const router = useRouter()
|
||||
|
||||
// Computed
|
||||
const titleClass = computed(() => ({
|
||||
'cursor-pointer': props.titleClickable,
|
||||
'text-white': props.color === 'primary',
|
||||
}))
|
||||
|
||||
const userInitial = computed(() => {
|
||||
return props.userName.charAt(0).toUpperCase()
|
||||
})
|
||||
|
||||
// Methods
|
||||
const handleBackClick = () => {
|
||||
emit('back-click')
|
||||
router.go(-1)
|
||||
}
|
||||
|
||||
const handleTitleClick = () => {
|
||||
if (props.titleClickable) {
|
||||
emit('title-click')
|
||||
}
|
||||
}
|
||||
|
||||
const handleActionClick = (action) => {
|
||||
emit('action-click', action)
|
||||
}
|
||||
|
||||
const handleUserMenuClick = (menuItem) => {
|
||||
emit('user-menu-click', menuItem)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.cursor-pointer {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
246
src/components/common/ConfirmDialog.vue
Normal file
246
src/components/common/ConfirmDialog.vue
Normal file
@ -0,0 +1,246 @@
|
||||
//* src/components/common/ConfirmDialog.vue
|
||||
<template>
|
||||
<v-dialog
|
||||
v-model="isVisible"
|
||||
:max-width="maxWidth"
|
||||
:persistent="persistent"
|
||||
:scrollable="scrollable"
|
||||
>
|
||||
<v-card :color="cardColor" :elevation="elevation">
|
||||
<!-- 헤더 -->
|
||||
<v-card-title :class="titleClass" class="d-flex align-center">
|
||||
<v-icon v-if="icon" :color="iconColor" :size="iconSize" class="mr-3">
|
||||
{{ icon }}
|
||||
</v-icon>
|
||||
{{ title }}
|
||||
</v-card-title>
|
||||
|
||||
<!-- 내용 -->
|
||||
<v-card-text :class="textClass">
|
||||
<div v-if="message" class="text-body-1 mb-4">
|
||||
{{ message }}
|
||||
</div>
|
||||
|
||||
<!-- 커스텀 슬롯 -->
|
||||
<slot />
|
||||
|
||||
<!-- 상세 정보 -->
|
||||
<div v-if="details" class="text-caption text-grey-600 mt-4">
|
||||
{{ details }}
|
||||
</div>
|
||||
</v-card-text>
|
||||
|
||||
<!-- 액션 버튼 -->
|
||||
<v-card-actions class="px-6 pb-6">
|
||||
<v-spacer v-if="!fullWidthButtons" />
|
||||
|
||||
<div :class="buttonContainerClass">
|
||||
<!-- 취소 버튼 -->
|
||||
<v-btn
|
||||
v-if="showCancelButton"
|
||||
:color="cancelButtonColor"
|
||||
:variant="cancelButtonVariant"
|
||||
:size="buttonSize"
|
||||
:loading="cancelLoading"
|
||||
:disabled="disabled"
|
||||
@click="handleCancel"
|
||||
:class="{ 'flex-1': fullWidthButtons }"
|
||||
>
|
||||
{{ cancelText }}
|
||||
</v-btn>
|
||||
|
||||
<!-- 확인 버튼 -->
|
||||
<v-btn
|
||||
:color="confirmButtonColor"
|
||||
:variant="confirmButtonVariant"
|
||||
:size="buttonSize"
|
||||
:loading="confirmLoading"
|
||||
:disabled="disabled"
|
||||
@click="handleConfirm"
|
||||
:class="{ 'flex-1': fullWidthButtons }"
|
||||
>
|
||||
{{ confirmText }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, watch } from 'vue'
|
||||
|
||||
/**
|
||||
* AI 마케팅 서비스 - 확인 다이얼로그 컴포넌트
|
||||
* 사용자 확인이 필요한 액션에 사용되는 재사용 가능한 컴포넌트
|
||||
*/
|
||||
|
||||
// Props 정의
|
||||
const props = defineProps({
|
||||
// 다이얼로그 표시 여부
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
// 다이얼로그 설정
|
||||
maxWidth: {
|
||||
type: [String, Number],
|
||||
default: 400,
|
||||
},
|
||||
persistent: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
scrollable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
// 카드 스타일
|
||||
cardColor: {
|
||||
type: String,
|
||||
default: 'white',
|
||||
},
|
||||
elevation: {
|
||||
type: [Number, String],
|
||||
default: 8,
|
||||
},
|
||||
|
||||
// 헤더
|
||||
title: {
|
||||
type: String,
|
||||
default: '확인',
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: 'warning',
|
||||
},
|
||||
iconSize: {
|
||||
type: [String, Number],
|
||||
default: 'large',
|
||||
},
|
||||
|
||||
// 내용
|
||||
message: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
details: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
|
||||
// 버튼 설정
|
||||
confirmText: {
|
||||
type: String,
|
||||
default: '확인',
|
||||
},
|
||||
cancelText: {
|
||||
type: String,
|
||||
default: '취소',
|
||||
},
|
||||
confirmButtonColor: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
cancelButtonColor: {
|
||||
type: String,
|
||||
default: 'grey',
|
||||
},
|
||||
confirmButtonVariant: {
|
||||
type: String,
|
||||
default: 'flat',
|
||||
},
|
||||
cancelButtonVariant: {
|
||||
type: String,
|
||||
default: 'outlined',
|
||||
},
|
||||
buttonSize: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
},
|
||||
showCancelButton: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
fullWidthButtons: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
// 로딩 상태
|
||||
confirmLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
cancelLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
// Emits 정의
|
||||
const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])
|
||||
|
||||
// Computed
|
||||
const isVisible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emit('update:modelValue', value),
|
||||
})
|
||||
|
||||
const titleClass = computed(() => ({
|
||||
'text-warning': props.icon && props.iconColor === 'warning',
|
||||
'text-error': props.icon && props.iconColor === 'error',
|
||||
'text-success': props.icon && props.iconColor === 'success',
|
||||
'text-info': props.icon && props.iconColor === 'info',
|
||||
}))
|
||||
|
||||
const textClass = computed(() => ({
|
||||
'pt-4': true,
|
||||
}))
|
||||
|
||||
const buttonContainerClass = computed(() => ({
|
||||
'd-flex': true,
|
||||
'gap-3': true,
|
||||
'w-100': props.fullWidthButtons,
|
||||
}))
|
||||
|
||||
// Methods
|
||||
const handleConfirm = () => {
|
||||
emit('confirm')
|
||||
}
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('cancel')
|
||||
isVisible.value = false
|
||||
}
|
||||
|
||||
// ESC 키로 닫기 방지 (persistent가 true일 때)
|
||||
watch(
|
||||
() => props.persistent,
|
||||
(newVal) => {
|
||||
if (!newVal && !isVisible.value) {
|
||||
emit('cancel')
|
||||
}
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.flex-1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.gap-3 {
|
||||
gap: 12px;
|
||||
}
|
||||
</style>
|
||||
435
src/components/common/ContentCard.vue
Normal file
435
src/components/common/ContentCard.vue
Normal file
@ -0,0 +1,435 @@
|
||||
//* src/components/common/ContentCard.vue
|
||||
<template>
|
||||
<v-card :class="cardClass" :elevation="elevation" :color="cardColor" @click="handleCardClick">
|
||||
<!-- 카드 헤더 -->
|
||||
<div v-if="showHeader" class="card-header">
|
||||
<div class="header-content">
|
||||
<!-- 타입 아이콘 -->
|
||||
<v-icon v-if="typeIcon" :color="typeIconColor" size="small" class="mr-2">
|
||||
{{ typeIcon }}
|
||||
</v-icon>
|
||||
|
||||
<!-- 제목 -->
|
||||
<div class="header-title">
|
||||
<div class="text-body-2 font-weight-medium">
|
||||
{{ title }}
|
||||
</div>
|
||||
<div v-if="subtitle" class="text-caption text-grey-600">
|
||||
{{ subtitle }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 헤더 액션 -->
|
||||
<div v-if="headerActions.length > 0" class="header-actions">
|
||||
<v-btn
|
||||
v-for="action in headerActions"
|
||||
:key="action.id"
|
||||
:icon="action.icon"
|
||||
:color="action.color || 'grey'"
|
||||
:size="action.size || 'small'"
|
||||
variant="text"
|
||||
@click.stop="handleActionClick(action)"
|
||||
>
|
||||
<v-icon>{{ action.icon }}</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 이미지 섹션 -->
|
||||
<div v-if="image" class="image-section">
|
||||
<v-img
|
||||
:src="image"
|
||||
:alt="imageAlt"
|
||||
:aspect-ratio="imageAspectRatio"
|
||||
cover
|
||||
class="content-image"
|
||||
>
|
||||
<!-- 이미지 오버레이 -->
|
||||
<div v-if="imageOverlay" class="image-overlay">
|
||||
<slot name="image-overlay">
|
||||
{{ imageOverlay }}
|
||||
</slot>
|
||||
</div>
|
||||
</v-img>
|
||||
</div>
|
||||
|
||||
<!-- 컨텐츠 영역 -->
|
||||
<v-card-text :class="contentClass">
|
||||
<!-- 상태 칩 -->
|
||||
<div v-if="status" class="status-section mb-3">
|
||||
<v-chip :color="statusColor" :variant="statusVariant" size="small">
|
||||
{{ status }}
|
||||
</v-chip>
|
||||
</div>
|
||||
|
||||
<!-- 메인 컨텐츠 -->
|
||||
<div class="main-content">
|
||||
<slot>
|
||||
<div v-if="content" class="content-text">
|
||||
{{ content }}
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<!-- 메타 정보 -->
|
||||
<div v-if="showMeta" class="meta-section mt-3">
|
||||
<div class="meta-row">
|
||||
<div v-if="platform" class="meta-item">
|
||||
<v-icon size="x-small" class="mr-1">mdi-web</v-icon>
|
||||
<span class="text-caption">{{ platform }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="createdAt" class="meta-item">
|
||||
<v-icon size="x-small" class="mr-1">mdi-clock-outline</v-icon>
|
||||
<span class="text-caption">{{ formatDate(createdAt) }}</span>
|
||||
</div>
|
||||
|
||||
<div v-if="viewCount" class="meta-item">
|
||||
<v-icon size="x-small" class="mr-1">mdi-eye-outline</v-icon>
|
||||
<span class="text-caption">{{ viewCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 해시태그 -->
|
||||
<div v-if="hashtags && hashtags.length > 0" class="hashtags-section mt-3">
|
||||
<v-chip
|
||||
v-for="(tag, index) in displayHashtags"
|
||||
:key="index"
|
||||
size="x-small"
|
||||
variant="outlined"
|
||||
color="primary"
|
||||
class="mr-1 mb-1"
|
||||
>
|
||||
#{{ tag }}
|
||||
</v-chip>
|
||||
|
||||
<v-btn
|
||||
v-if="hashtags.length > maxHashtags"
|
||||
variant="text"
|
||||
size="x-small"
|
||||
@click.stop="showAllHashtags = !showAllHashtags"
|
||||
>
|
||||
{{ showAllHashtags ? '간략히' : `+${hashtags.length - maxHashtags}개 더` }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-card-text>
|
||||
|
||||
<!-- 카드 액션 -->
|
||||
<v-card-actions v-if="actions.length > 0" class="px-4 pb-4">
|
||||
<v-spacer v-if="actionsAlign === 'right'" />
|
||||
|
||||
<v-btn
|
||||
v-for="action in actions"
|
||||
:key="action.id"
|
||||
:color="action.color || 'primary'"
|
||||
:variant="action.variant || 'text'"
|
||||
:size="action.size || 'small'"
|
||||
:loading="action.loading"
|
||||
:disabled="action.disabled"
|
||||
@click.stop="handleActionClick(action)"
|
||||
>
|
||||
<v-icon v-if="action.icon" :start="action.text" size="small">
|
||||
{{ action.icon }}
|
||||
</v-icon>
|
||||
{{ action.text }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue'
|
||||
|
||||
/**
|
||||
* AI 마케팅 서비스 - 콘텐츠 카드 컴포넌트
|
||||
* 마케팅 콘텐츠를 표시하는 재사용 가능한 카드 컴포넌트
|
||||
*/
|
||||
|
||||
// Props 정의
|
||||
const props = defineProps({
|
||||
// 카드 스타일
|
||||
elevation: {
|
||||
type: [Number, String],
|
||||
default: 2,
|
||||
},
|
||||
cardColor: {
|
||||
type: String,
|
||||
default: 'white',
|
||||
},
|
||||
clickable: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
// 헤더
|
||||
showHeader: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
subtitle: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
typeIcon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
typeIconColor: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
headerActions: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
// 이미지
|
||||
image: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
imageAlt: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
imageAspectRatio: {
|
||||
type: [Number, String],
|
||||
default: '16/9',
|
||||
},
|
||||
imageOverlay: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
|
||||
// 컨텐츠
|
||||
content: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
status: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
statusColor: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
statusVariant: {
|
||||
type: String,
|
||||
default: 'tonal',
|
||||
},
|
||||
|
||||
// 메타 정보
|
||||
showMeta: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
platform: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
createdAt: {
|
||||
type: [String, Date],
|
||||
default: '',
|
||||
},
|
||||
viewCount: {
|
||||
type: [Number, String],
|
||||
default: '',
|
||||
},
|
||||
|
||||
// 해시태그
|
||||
hashtags: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
maxHashtags: {
|
||||
type: Number,
|
||||
default: 3,
|
||||
},
|
||||
|
||||
// 액션
|
||||
actions: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
actionsAlign: {
|
||||
type: String,
|
||||
default: 'left',
|
||||
validator: (value) => ['left', 'center', 'right'].includes(value),
|
||||
},
|
||||
})
|
||||
|
||||
// Emits 정의
|
||||
const emit = defineEmits(['click', 'action-click'])
|
||||
|
||||
// Reactive data
|
||||
const showAllHashtags = ref(false)
|
||||
|
||||
// Computed
|
||||
const cardClass = computed(() => ({
|
||||
'content-card': true,
|
||||
'content-card--clickable': props.clickable,
|
||||
'hover-elevation': props.clickable,
|
||||
}))
|
||||
|
||||
const contentClass = computed(() => ({
|
||||
'pt-4': !props.image,
|
||||
'pt-3': props.image,
|
||||
}))
|
||||
|
||||
const displayHashtags = computed(() => {
|
||||
if (showAllHashtags.value || props.hashtags.length <= props.maxHashtags) {
|
||||
return props.hashtags
|
||||
}
|
||||
return props.hashtags.slice(0, props.maxHashtags)
|
||||
})
|
||||
|
||||
// Methods
|
||||
const handleCardClick = () => {
|
||||
if (props.clickable) {
|
||||
emit('click')
|
||||
}
|
||||
}
|
||||
|
||||
const handleActionClick = (action) => {
|
||||
emit('action-click', action)
|
||||
}
|
||||
|
||||
const formatDate = (date) => {
|
||||
if (!date) return ''
|
||||
|
||||
const dateObj = new Date(date)
|
||||
const now = new Date()
|
||||
const diffMs = now - dateObj
|
||||
const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
|
||||
|
||||
if (diffDays === 0) {
|
||||
return '오늘'
|
||||
} else if (diffDays === 1) {
|
||||
return '어제'
|
||||
} else if (diffDays < 7) {
|
||||
return `${diffDays}일 전`
|
||||
} else {
|
||||
return dateObj.toLocaleDateString('ko-KR', {
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content-card {
|
||||
transition: all 0.3s ease;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.content-card--clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.content-card--clickable:hover {
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 16px 16px 0 16px;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.header-title {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
display: flex;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.image-section {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.content-image {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
|
||||
color: white;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.status-section {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.content-text {
|
||||
line-height: 1.6;
|
||||
color: rgba(0, 0, 0, 0.87);
|
||||
}
|
||||
|
||||
.meta-section {
|
||||
border-top: 1px solid #e0e0e0;
|
||||
padding-top: 12px;
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #757575;
|
||||
}
|
||||
|
||||
.hashtags-section {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.card-header {
|
||||
padding: 12px 12px 0 12px;
|
||||
}
|
||||
|
||||
.meta-row {
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.image-overlay {
|
||||
padding: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
345
src/components/common/ErrorAlert.vue
Normal file
345
src/components/common/ErrorAlert.vue
Normal file
@ -0,0 +1,345 @@
|
||||
//* src/components/common/ErrorAlert.vue
|
||||
<template>
|
||||
<v-alert
|
||||
v-model="isVisible"
|
||||
:type="alertType"
|
||||
:variant="variant"
|
||||
:density="density"
|
||||
:elevation="elevation"
|
||||
:color="alertColor"
|
||||
:icon="alertIcon"
|
||||
:closable="closable"
|
||||
:class="alertClass"
|
||||
@click:close="handleClose"
|
||||
>
|
||||
<!-- 제목 -->
|
||||
<template v-if="title" v-slot:title>
|
||||
<div class="d-flex align-center">
|
||||
{{ title }}
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
v-if="showRetryButton"
|
||||
variant="outlined"
|
||||
size="small"
|
||||
:color="retryButtonColor"
|
||||
:loading="retryLoading"
|
||||
@click="handleRetry"
|
||||
class="ml-3"
|
||||
>
|
||||
{{ retryText }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 메시지 -->
|
||||
<div class="alert-content">
|
||||
<div v-if="message" class="alert-message">
|
||||
{{ message }}
|
||||
</div>
|
||||
|
||||
<!-- 커스텀 슬롯 -->
|
||||
<slot />
|
||||
|
||||
<!-- 상세 정보 -->
|
||||
<div v-if="details" class="alert-details mt-2">
|
||||
<v-expansion-panels variant="accordion" flat>
|
||||
<v-expansion-panel>
|
||||
<v-expansion-panel-title class="text-caption"> 상세 정보 보기 </v-expansion-panel-title>
|
||||
<v-expansion-panel-text>
|
||||
<pre class="text-caption">{{ details }}</pre>
|
||||
</v-expansion-panel-text>
|
||||
</v-expansion-panel>
|
||||
</v-expansion-panels>
|
||||
</div>
|
||||
|
||||
<!-- 추천 액션 -->
|
||||
<div v-if="recommendations && recommendations.length > 0" class="alert-recommendations mt-3">
|
||||
<div class="text-caption text-grey-700 mb-2">해결 방법:</div>
|
||||
<ul class="text-caption">
|
||||
<li v-for="(rec, index) in recommendations" :key="index" class="mb-1">
|
||||
{{ rec }}
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 액션 버튼들 -->
|
||||
<template v-if="actions.length > 0" v-slot:append>
|
||||
<div class="alert-actions">
|
||||
<v-btn
|
||||
v-for="action in actions"
|
||||
:key="action.id"
|
||||
:variant="action.variant || 'text'"
|
||||
:color="action.color || alertType"
|
||||
:size="action.size || 'small'"
|
||||
:loading="action.loading"
|
||||
:disabled="action.disabled"
|
||||
@click="handleActionClick(action)"
|
||||
class="ml-2"
|
||||
>
|
||||
<v-icon v-if="action.icon" size="small" class="mr-1">
|
||||
{{ action.icon }}
|
||||
</v-icon>
|
||||
{{ action.text }}
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
</v-alert>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue'
|
||||
|
||||
/**
|
||||
* AI 마케팅 서비스 - 에러 알림 컴포넌트
|
||||
* 다양한 종류의 에러 및 알림 메시지를 표시하는 컴포넌트
|
||||
*/
|
||||
|
||||
// Props 정의
|
||||
const props = defineProps({
|
||||
// 표시 여부
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
|
||||
// 알림 타입
|
||||
type: {
|
||||
type: String,
|
||||
default: 'error',
|
||||
validator: (value) => ['error', 'warning', 'info', 'success'].includes(value),
|
||||
},
|
||||
|
||||
// 스타일
|
||||
variant: {
|
||||
type: String,
|
||||
default: 'tonal',
|
||||
validator: (value) => ['flat', 'tonal', 'outlined', 'text', 'elevated'].includes(value),
|
||||
},
|
||||
density: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
validator: (value) => ['default', 'comfortable', 'compact'].includes(value),
|
||||
},
|
||||
elevation: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
|
||||
// 닫기 설정
|
||||
closable: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
autoHide: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
autoHideDelay: {
|
||||
type: Number,
|
||||
default: 5000,
|
||||
},
|
||||
|
||||
// 컨텐츠
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
message: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
details: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
recommendations: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
// 재시도 버튼
|
||||
showRetryButton: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
retryText: {
|
||||
type: String,
|
||||
default: '다시 시도',
|
||||
},
|
||||
retryButtonColor: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
retryLoading: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
// 액션 버튼들
|
||||
actions: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
})
|
||||
|
||||
// Emits 정의
|
||||
const emit = defineEmits(['update:modelValue', 'close', 'retry', 'action-click'])
|
||||
|
||||
// Reactive data
|
||||
const autoHideTimer = ref(null)
|
||||
|
||||
// Computed
|
||||
const isVisible = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emit('update:modelValue', value),
|
||||
})
|
||||
|
||||
const alertType = computed(() => props.type)
|
||||
|
||||
const alertColor = computed(() => {
|
||||
if (props.color) return props.color
|
||||
return props.type
|
||||
})
|
||||
|
||||
const alertIcon = computed(() => {
|
||||
if (props.icon) return props.icon
|
||||
|
||||
const iconMap = {
|
||||
error: 'mdi-alert-circle',
|
||||
warning: 'mdi-alert',
|
||||
info: 'mdi-information',
|
||||
success: 'mdi-check-circle',
|
||||
}
|
||||
|
||||
return iconMap[props.type] || 'mdi-information'
|
||||
})
|
||||
|
||||
const alertClass = computed(() => ({
|
||||
'error-alert': true,
|
||||
[`error-alert--${props.type}`]: true,
|
||||
}))
|
||||
|
||||
// Methods
|
||||
const handleClose = () => {
|
||||
isVisible.value = false
|
||||
emit('close')
|
||||
clearAutoHideTimer()
|
||||
}
|
||||
|
||||
const handleRetry = () => {
|
||||
emit('retry')
|
||||
}
|
||||
|
||||
const handleActionClick = (action) => {
|
||||
emit('action-click', action)
|
||||
}
|
||||
|
||||
const startAutoHideTimer = () => {
|
||||
if (props.autoHide && props.autoHideDelay > 0) {
|
||||
autoHideTimer.value = setTimeout(() => {
|
||||
handleClose()
|
||||
}, props.autoHideDelay)
|
||||
}
|
||||
}
|
||||
|
||||
const clearAutoHideTimer = () => {
|
||||
if (autoHideTimer.value) {
|
||||
clearTimeout(autoHideTimer.value)
|
||||
autoHideTimer.value = null
|
||||
}
|
||||
}
|
||||
|
||||
// 자동 숨김 타이머 시작
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newValue) => {
|
||||
if (newValue) {
|
||||
startAutoHideTimer()
|
||||
} else {
|
||||
clearAutoHideTimer()
|
||||
}
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
// 컴포넌트 언마운트시 타이머 정리
|
||||
import { onUnmounted } from 'vue'
|
||||
onUnmounted(() => {
|
||||
clearAutoHideTimer()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.error-alert {
|
||||
margin: 16px 0;
|
||||
}
|
||||
|
||||
.alert-content {
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.alert-message {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.alert-details pre {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
padding: 8px;
|
||||
border-radius: 4px;
|
||||
overflow-x: auto;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.alert-recommendations ul {
|
||||
margin: 0;
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.alert-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* 타입별 커스텀 스타일 */
|
||||
.error-alert--error {
|
||||
border-left: 4px solid rgb(var(--v-theme-error));
|
||||
}
|
||||
|
||||
.error-alert--warning {
|
||||
border-left: 4px solid rgb(var(--v-theme-warning));
|
||||
}
|
||||
|
||||
.error-alert--info {
|
||||
border-left: 4px solid rgb(var(--v-theme-info));
|
||||
}
|
||||
|
||||
.error-alert--success {
|
||||
border-left: 4px solid rgb(var(--v-theme-success));
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.error-alert {
|
||||
margin: 12px 0;
|
||||
}
|
||||
|
||||
.alert-actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.alert-actions .v-btn {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
454
src/components/common/ImageUpload.vue
Normal file
454
src/components/common/ImageUpload.vue
Normal file
@ -0,0 +1,454 @@
|
||||
//* src/components/common/ImageUpload.vue
|
||||
<template>
|
||||
<div class="image-upload-container">
|
||||
<!-- 업로드 영역 -->
|
||||
<div
|
||||
ref="dropZone"
|
||||
:class="dropZoneClass"
|
||||
@click="openFileDialog"
|
||||
@dragover.prevent="handleDragOver"
|
||||
@dragleave.prevent="handleDragLeave"
|
||||
@drop.prevent="handleDrop"
|
||||
>
|
||||
<!-- 파일 선택 input -->
|
||||
<input
|
||||
ref="fileInput"
|
||||
type="file"
|
||||
:accept="acceptTypes"
|
||||
:multiple="multiple"
|
||||
@change="handleFileSelect"
|
||||
style="display: none"
|
||||
/>
|
||||
|
||||
<!-- 업로드 아이콘 및 텍스트 -->
|
||||
<div v-if="!hasImages" class="upload-prompt">
|
||||
<v-icon :size="iconSize" :color="iconColor" class="mb-4">
|
||||
{{ uploadIcon }}
|
||||
</v-icon>
|
||||
|
||||
<div class="text-h6 font-weight-medium mb-2">
|
||||
{{ uploadText }}
|
||||
</div>
|
||||
|
||||
<div class="text-body-2 text-grey-600 mb-4">
|
||||
{{ uploadSubText }}
|
||||
</div>
|
||||
|
||||
<v-chip :color="chipColor" variant="outlined" size="small">
|
||||
{{ acceptTypesText }} | 최대 {{ maxSizeText }}
|
||||
</v-chip>
|
||||
</div>
|
||||
|
||||
<!-- 이미지 미리보기 그리드 -->
|
||||
<div v-else class="image-preview-grid">
|
||||
<div v-for="(image, index) in previewImages" :key="index" class="image-preview-item">
|
||||
<!-- 이미지 -->
|
||||
<div class="image-wrapper">
|
||||
<v-img :src="image.url" :alt="image.name" aspect-ratio="1" cover class="rounded" />
|
||||
|
||||
<!-- 삭제 버튼 -->
|
||||
<v-btn
|
||||
icon
|
||||
size="small"
|
||||
color="error"
|
||||
class="delete-btn"
|
||||
@click.stop="removeImage(index)"
|
||||
>
|
||||
<v-icon size="small">mdi-close</v-icon>
|
||||
</v-btn>
|
||||
|
||||
<!-- 메인 이미지 표시 -->
|
||||
<v-chip
|
||||
v-if="index === 0 && multiple"
|
||||
color="primary"
|
||||
size="x-small"
|
||||
class="main-badge"
|
||||
>
|
||||
메인
|
||||
</v-chip>
|
||||
</div>
|
||||
|
||||
<!-- 이미지 정보 -->
|
||||
<div class="image-info">
|
||||
<div class="text-caption font-weight-medium">
|
||||
{{ image.name }}
|
||||
</div>
|
||||
<div class="text-caption text-grey-600">
|
||||
{{ formatFileSize(image.size) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 추가 업로드 버튼 (다중 업로드시) -->
|
||||
<div
|
||||
v-if="multiple && previewImages.length < maxFiles"
|
||||
class="add-more-btn"
|
||||
@click.stop="openFileDialog"
|
||||
>
|
||||
<v-icon size="large" color="grey-400">mdi-plus</v-icon>
|
||||
<div class="text-caption text-grey-600 mt-2">추가 업로드</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 에러 메시지 -->
|
||||
<v-alert
|
||||
v-if="errorMessage"
|
||||
type="error"
|
||||
variant="tonal"
|
||||
density="compact"
|
||||
class="mt-4"
|
||||
@click:close="clearError"
|
||||
closable
|
||||
>
|
||||
{{ errorMessage }}
|
||||
</v-alert>
|
||||
|
||||
<!-- 업로드 진행률 -->
|
||||
<v-progress-linear
|
||||
v-if="uploading"
|
||||
:model-value="uploadProgress"
|
||||
color="primary"
|
||||
height="4"
|
||||
class="mt-4"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch } from 'vue'
|
||||
|
||||
/**
|
||||
* AI 마케팅 서비스 - 이미지 업로드 컴포넌트
|
||||
* 드래그&드롭 및 클릭 업로드를 지원하는 이미지 업로드 컴포넌트
|
||||
*/
|
||||
|
||||
// Props 정의
|
||||
const props = defineProps({
|
||||
// 모델 값 (업로드된 파일들)
|
||||
modelValue: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
|
||||
// 업로드 설정
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
maxFiles: {
|
||||
type: Number,
|
||||
default: 5,
|
||||
},
|
||||
maxSize: {
|
||||
type: Number,
|
||||
default: 10 * 1024 * 1024, // 10MB
|
||||
},
|
||||
acceptTypes: {
|
||||
type: String,
|
||||
default: 'image/jpeg,image/png,image/webp',
|
||||
},
|
||||
|
||||
// UI 설정
|
||||
uploadText: {
|
||||
type: String,
|
||||
default: '이미지를 업로드하세요',
|
||||
},
|
||||
uploadSubText: {
|
||||
type: String,
|
||||
default: '클릭하거나 파일을 드래그하세요',
|
||||
},
|
||||
uploadIcon: {
|
||||
type: String,
|
||||
default: 'mdi-cloud-upload',
|
||||
},
|
||||
iconSize: {
|
||||
type: [String, Number],
|
||||
default: 64,
|
||||
},
|
||||
iconColor: {
|
||||
type: String,
|
||||
default: 'grey-400',
|
||||
},
|
||||
chipColor: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
|
||||
// 드래그 앤 드롭
|
||||
enableDragDrop: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
})
|
||||
|
||||
// Emits 정의
|
||||
const emit = defineEmits(['update:modelValue', 'upload', 'error'])
|
||||
|
||||
// Reactive data
|
||||
const fileInput = ref(null)
|
||||
const dropZone = ref(null)
|
||||
const isDragging = ref(false)
|
||||
const errorMessage = ref('')
|
||||
const uploading = ref(false)
|
||||
const uploadProgress = ref(0)
|
||||
const previewImages = ref([])
|
||||
|
||||
// Computed
|
||||
const hasImages = computed(() => previewImages.value.length > 0)
|
||||
|
||||
const dropZoneClass = computed(() => ({
|
||||
'drop-zone': true,
|
||||
'drop-zone--dragging': isDragging.value,
|
||||
'drop-zone--has-images': hasImages.value,
|
||||
clickable: true,
|
||||
}))
|
||||
|
||||
const acceptTypesText = computed(() => {
|
||||
return props.acceptTypes
|
||||
.split(',')
|
||||
.map((type) => type.split('/')[1].toUpperCase())
|
||||
.join(', ')
|
||||
})
|
||||
|
||||
const maxSizeText = computed(() => {
|
||||
const size = props.maxSize
|
||||
if (size >= 1024 * 1024) {
|
||||
return `${Math.round(size / (1024 * 1024))}MB`
|
||||
}
|
||||
return `${Math.round(size / 1024)}KB`
|
||||
})
|
||||
|
||||
// Methods
|
||||
const openFileDialog = () => {
|
||||
fileInput.value?.click()
|
||||
}
|
||||
|
||||
const handleFileSelect = (event) => {
|
||||
const files = Array.from(event.target.files)
|
||||
processFiles(files)
|
||||
|
||||
// input 초기화
|
||||
event.target.value = ''
|
||||
}
|
||||
|
||||
const handleDragOver = (event) => {
|
||||
if (!props.enableDragDrop) return
|
||||
|
||||
event.dataTransfer.dropEffect = 'copy'
|
||||
isDragging.value = true
|
||||
}
|
||||
|
||||
const handleDragLeave = () => {
|
||||
if (!props.enableDragDrop) return
|
||||
isDragging.value = false
|
||||
}
|
||||
|
||||
const handleDrop = (event) => {
|
||||
if (!props.enableDragDrop) return
|
||||
|
||||
isDragging.value = false
|
||||
const files = Array.from(event.dataTransfer.files)
|
||||
processFiles(files)
|
||||
}
|
||||
|
||||
const processFiles = (files) => {
|
||||
clearError()
|
||||
|
||||
// 파일 타입 및 크기 검증
|
||||
const validFiles = []
|
||||
const acceptedTypes = props.acceptTypes.split(',').map((type) => type.trim())
|
||||
|
||||
for (const file of files) {
|
||||
// 파일 타입 체크
|
||||
if (!acceptedTypes.includes(file.type)) {
|
||||
setError(`${file.name}: 지원하지 않는 파일 형식입니다.`)
|
||||
continue
|
||||
}
|
||||
|
||||
// 파일 크기 체크
|
||||
if (file.size > props.maxSize) {
|
||||
setError(`${file.name}: 파일 크기가 너무 큽니다. (최대: ${maxSizeText.value})`)
|
||||
continue
|
||||
}
|
||||
|
||||
// 최대 파일 수 체크
|
||||
if (previewImages.value.length + validFiles.length >= props.maxFiles) {
|
||||
setError(`최대 ${props.maxFiles}개의 파일만 업로드할 수 있습니다.`)
|
||||
break
|
||||
}
|
||||
|
||||
validFiles.push(file)
|
||||
}
|
||||
|
||||
// 미리보기 생성
|
||||
validFiles.forEach((file) => {
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
const imageData = {
|
||||
file,
|
||||
url: e.target.result,
|
||||
name: file.name,
|
||||
size: file.size,
|
||||
}
|
||||
|
||||
if (props.multiple) {
|
||||
previewImages.value.push(imageData)
|
||||
} else {
|
||||
previewImages.value = [imageData]
|
||||
}
|
||||
|
||||
updateModelValue()
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
})
|
||||
}
|
||||
|
||||
const removeImage = (index) => {
|
||||
previewImages.value.splice(index, 1)
|
||||
updateModelValue()
|
||||
}
|
||||
|
||||
const updateModelValue = () => {
|
||||
const files = previewImages.value.map((img) => img.file)
|
||||
emit('update:modelValue', files)
|
||||
}
|
||||
|
||||
const formatFileSize = (bytes) => {
|
||||
if (bytes === 0) return '0 Bytes'
|
||||
|
||||
const k = 1024
|
||||
const sizes = ['Bytes', 'KB', 'MB', 'GB']
|
||||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||||
|
||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
|
||||
}
|
||||
|
||||
const setError = (message) => {
|
||||
errorMessage.value = message
|
||||
emit('error', message)
|
||||
}
|
||||
|
||||
const clearError = () => {
|
||||
errorMessage.value = ''
|
||||
}
|
||||
|
||||
// Watch for external model value changes
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
(newFiles) => {
|
||||
if (newFiles.length === 0) {
|
||||
previewImages.value = []
|
||||
}
|
||||
},
|
||||
{ deep: true },
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.image-upload-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.drop-zone {
|
||||
border: 2px dashed #e0e0e0;
|
||||
border-radius: 12px;
|
||||
padding: 24px;
|
||||
text-align: center;
|
||||
transition: all 0.3s ease;
|
||||
background-color: #fafafa;
|
||||
min-height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.drop-zone.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.drop-zone:hover {
|
||||
border-color: #1976d2;
|
||||
background-color: #f3f8ff;
|
||||
}
|
||||
|
||||
.drop-zone--dragging {
|
||||
border-color: #1976d2;
|
||||
background-color: #e3f2fd;
|
||||
transform: scale(1.02);
|
||||
}
|
||||
|
||||
.drop-zone--has-images {
|
||||
padding: 16px;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.upload-prompt {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.image-preview-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||||
gap: 16px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.image-preview-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.image-wrapper {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.delete-btn {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
background-color: rgba(255, 255, 255, 0.9) !important;
|
||||
}
|
||||
|
||||
.main-badge {
|
||||
position: absolute;
|
||||
bottom: 4px;
|
||||
left: 4px;
|
||||
}
|
||||
|
||||
.add-more-btn {
|
||||
border: 2px dashed #e0e0e0;
|
||||
border-radius: 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 120px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.add-more-btn:hover {
|
||||
border-color: #1976d2;
|
||||
background-color: #f3f8ff;
|
||||
}
|
||||
|
||||
.image-info {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.image-preview-grid {
|
||||
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.drop-zone {
|
||||
padding: 16px;
|
||||
min-height: 160px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
136
src/components/common/LoadingSpinner.vue
Normal file
136
src/components/common/LoadingSpinner.vue
Normal file
@ -0,0 +1,136 @@
|
||||
//* src/components/common/LoadingSpinner.vue
|
||||
<template>
|
||||
<div :class="wrapperClass" v-if="show">
|
||||
<!-- 오버레이 배경 -->
|
||||
<v-overlay
|
||||
v-if="overlay"
|
||||
:model-value="show"
|
||||
:persistent="persistent"
|
||||
:opacity="overlayOpacity"
|
||||
class="d-flex align-center justify-center"
|
||||
>
|
||||
<v-card :elevation="cardElevation" class="pa-8 text-center" :color="cardColor" rounded="lg">
|
||||
<v-progress-circular
|
||||
:size="size"
|
||||
:width="width"
|
||||
:color="color"
|
||||
indeterminate
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<div v-if="message" :class="messageClass">
|
||||
{{ message }}
|
||||
</div>
|
||||
|
||||
<div v-if="subMessage" class="text-caption text-grey-600 mt-2">
|
||||
{{ subMessage }}
|
||||
</div>
|
||||
</v-card>
|
||||
</v-overlay>
|
||||
|
||||
<!-- 인라인 스피너 -->
|
||||
<div v-else class="d-flex align-center justify-center flex-column">
|
||||
<v-progress-circular
|
||||
:size="size"
|
||||
:width="width"
|
||||
:color="color"
|
||||
indeterminate
|
||||
:class="spinnerClass"
|
||||
/>
|
||||
|
||||
<div v-if="message" :class="messageClass">
|
||||
{{ message }}
|
||||
</div>
|
||||
|
||||
<div v-if="subMessage" class="text-caption text-grey-600 mt-2">
|
||||
{{ subMessage }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
|
||||
/**
|
||||
* AI 마케팅 서비스 - 로딩 스피너 컴포넌트
|
||||
* 다양한 로딩 상태를 표시하는 재사용 가능한 컴포넌트
|
||||
*/
|
||||
|
||||
// Props 정의
|
||||
const props = defineProps({
|
||||
// 표시 여부
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
|
||||
// 스피너 스타일
|
||||
size: {
|
||||
type: [Number, String],
|
||||
default: 64,
|
||||
},
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: 4,
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
|
||||
// 오버레이 모드
|
||||
overlay: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
persistent: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
overlayOpacity: {
|
||||
type: Number,
|
||||
default: 0.7,
|
||||
},
|
||||
|
||||
// 카드 스타일 (오버레이 모드일 때)
|
||||
cardColor: {
|
||||
type: String,
|
||||
default: 'white',
|
||||
},
|
||||
cardElevation: {
|
||||
type: [Number, String],
|
||||
default: 8,
|
||||
},
|
||||
|
||||
// 메시지
|
||||
message: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
subMessage: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
|
||||
// 커스텀 클래스
|
||||
wrapperClass: {
|
||||
type: [String, Array, Object],
|
||||
default: '',
|
||||
},
|
||||
spinnerClass: {
|
||||
type: [String, Array, Object],
|
||||
default: '',
|
||||
},
|
||||
})
|
||||
|
||||
// Computed
|
||||
const messageClass = computed(() => ({
|
||||
'text-h6': props.overlay,
|
||||
'text-body-1': !props.overlay,
|
||||
'font-weight-medium': true,
|
||||
'text-grey-700': true,
|
||||
'mt-4': props.overlay,
|
||||
'mt-2': !props.overlay,
|
||||
}))
|
||||
</script>
|
||||
288
src/components/layout/BottomNavigation.vue
Normal file
288
src/components/layout/BottomNavigation.vue
Normal file
@ -0,0 +1,288 @@
|
||||
//* src/components/layout/BottomNavigation.vue
|
||||
<template>
|
||||
<v-bottom-navigation
|
||||
v-model="activeTab"
|
||||
:color="color"
|
||||
:bg-color="bgColor"
|
||||
:elevation="elevation"
|
||||
:height="height"
|
||||
:grow="grow"
|
||||
:shift="shift"
|
||||
:selected-class="selectedClass"
|
||||
class="bottom-nav"
|
||||
>
|
||||
<v-btn
|
||||
v-for="item in navigationItems"
|
||||
:key="item.id"
|
||||
:value="item.id"
|
||||
:to="item.route"
|
||||
:color="getItemColor(item)"
|
||||
:stacked="stacked"
|
||||
@click="handleNavClick(item)"
|
||||
>
|
||||
<!-- 배지가 있는 아이콘 -->
|
||||
<v-badge
|
||||
v-if="item.badge && item.badgeCount > 0"
|
||||
:content="item.badgeCount"
|
||||
:color="item.badgeColor || 'error'"
|
||||
offset-x="8"
|
||||
offset-y="8"
|
||||
>
|
||||
<v-icon :size="iconSize">{{ item.icon }}</v-icon>
|
||||
</v-badge>
|
||||
|
||||
<!-- 일반 아이콘 -->
|
||||
<v-icon v-else :size="iconSize">{{ item.icon }}</v-icon>
|
||||
|
||||
<!-- 라벨 -->
|
||||
<span class="nav-label">{{ item.label }}</span>
|
||||
|
||||
<!-- 새로운 기능 표시 -->
|
||||
<v-chip v-if="item.isNew" color="error" size="x-small" class="new-badge"> NEW </v-chip>
|
||||
</v-btn>
|
||||
</v-bottom-navigation>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed, watch } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
|
||||
/**
|
||||
* AI 마케팅 서비스 - 하단 네비게이션 컴포넌트
|
||||
* 모바일 최적화된 하단 탭 네비게이션
|
||||
*/
|
||||
|
||||
// Props 정의
|
||||
const props = defineProps({
|
||||
// 기본 설정
|
||||
modelValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
|
||||
// 스타일 설정
|
||||
color: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: 'white',
|
||||
},
|
||||
elevation: {
|
||||
type: [Number, String],
|
||||
default: 8,
|
||||
},
|
||||
height: {
|
||||
type: [Number, String],
|
||||
default: 64,
|
||||
},
|
||||
grow: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
shift: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
stacked: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
selectedClass: {
|
||||
type: String,
|
||||
default: 'v-btn--active',
|
||||
},
|
||||
iconSize: {
|
||||
type: [String, Number],
|
||||
default: 24,
|
||||
},
|
||||
|
||||
// 네비게이션 아이템들
|
||||
navigationItems: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{
|
||||
id: 'dashboard',
|
||||
label: '홈',
|
||||
icon: 'mdi-home',
|
||||
route: '/dashboard',
|
||||
activeIcon: 'mdi-home',
|
||||
},
|
||||
{
|
||||
id: 'store',
|
||||
label: '매장',
|
||||
icon: 'mdi-store-outline',
|
||||
activeIcon: 'mdi-store',
|
||||
route: '/store',
|
||||
},
|
||||
{
|
||||
id: 'content',
|
||||
label: '콘텐츠',
|
||||
icon: 'mdi-plus-circle-outline',
|
||||
activeIcon: 'mdi-plus-circle',
|
||||
route: '/content/create',
|
||||
},
|
||||
{
|
||||
id: 'content-list',
|
||||
label: '목록',
|
||||
icon: 'mdi-file-document-outline',
|
||||
activeIcon: 'mdi-file-document',
|
||||
route: '/content',
|
||||
},
|
||||
{
|
||||
id: 'menu',
|
||||
label: '더보기',
|
||||
icon: 'mdi-menu',
|
||||
activeIcon: 'mdi-menu',
|
||||
route: '/menu',
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
// 자동 라우팅
|
||||
autoRoute: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
|
||||
// 히든 조건
|
||||
hideOnRoutes: {
|
||||
type: Array,
|
||||
default: () => ['/login', '/register'],
|
||||
},
|
||||
})
|
||||
|
||||
// Emits 정의
|
||||
const emit = defineEmits(['update:modelValue', 'nav-click'])
|
||||
|
||||
// 라우터
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
// Computed
|
||||
const activeTab = computed({
|
||||
get: () => {
|
||||
if (props.modelValue) return props.modelValue
|
||||
|
||||
// 현재 라우트를 기반으로 활성 탭 결정
|
||||
const currentPath = route.path
|
||||
const matchedItem = props.navigationItems.find((item) => {
|
||||
if (!item.route) return false
|
||||
return currentPath === item.route || currentPath.startsWith(item.route + '/')
|
||||
})
|
||||
|
||||
return matchedItem?.id || props.navigationItems[0]?.id || ''
|
||||
},
|
||||
set: (value) => emit('update:modelValue', value),
|
||||
})
|
||||
|
||||
const shouldHide = computed(() => {
|
||||
return props.hideOnRoutes.includes(route.path)
|
||||
})
|
||||
|
||||
// Methods
|
||||
const getItemColor = (item) => {
|
||||
// 활성 상태인 경우 primary 색상, 아니면 기본 색상
|
||||
return activeTab.value === item.id ? props.color : 'grey'
|
||||
}
|
||||
|
||||
const getItemIcon = (item) => {
|
||||
// 활성 상태인 경우 activeIcon 사용, 아니면 기본 icon
|
||||
return activeTab.value === item.id && item.activeIcon ? item.activeIcon : item.icon
|
||||
}
|
||||
|
||||
const handleNavClick = (item) => {
|
||||
emit('nav-click', item)
|
||||
|
||||
// 자동 라우팅이 활성화된 경우 라우터로 이동
|
||||
if (props.autoRoute && item.route) {
|
||||
router.push(item.route)
|
||||
}
|
||||
}
|
||||
|
||||
// 라우트 변경시 활성 탭 업데이트
|
||||
watch(
|
||||
() => route.path,
|
||||
() => {
|
||||
const matchedItem = props.navigationItems.find((item) => {
|
||||
if (!item.route) return false
|
||||
return route.path === item.route || route.path.startsWith(item.route + '/')
|
||||
})
|
||||
|
||||
if (matchedItem && activeTab.value !== matchedItem.id) {
|
||||
activeTab.value = matchedItem.id
|
||||
}
|
||||
},
|
||||
)
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bottom-nav {
|
||||
border-top: 1px solid rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.new-badge {
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 4px;
|
||||
font-size: 8px;
|
||||
min-width: 20px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/* 활성 상태 스타일 */
|
||||
.v-btn--active .nav-label {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.v-btn--active .v-icon {
|
||||
transform: scale(1.1);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
/* 배지 스타일 */
|
||||
.v-badge :deep(.v-badge__badge) {
|
||||
font-size: 10px;
|
||||
min-width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* 터치 영역 확장 */
|
||||
.v-btn {
|
||||
min-width: 64px;
|
||||
padding: 8px 12px;
|
||||
}
|
||||
|
||||
/* 아이콘 전환 애니메이션 */
|
||||
.v-icon {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* 라벨 전환 애니메이션 */
|
||||
.nav-label {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* 다크 테마 지원 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.bottom-nav {
|
||||
border-top-color: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
}
|
||||
|
||||
/* 안전 영역 지원 (노치가 있는 기기) */
|
||||
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
||||
.bottom-nav {
|
||||
padding-bottom: env(safe-area-inset-bottom);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
658
src/components/layout/MainLayout.vue
Normal file
658
src/components/layout/MainLayout.vue
Normal file
@ -0,0 +1,658 @@
|
||||
//* src/components/layout/MainLayout.vue
|
||||
<template>
|
||||
<v-app>
|
||||
<!-- 메인 네비게이션 (데스크톱용 사이드바) -->
|
||||
<Sidebar
|
||||
v-if="!isMobile"
|
||||
v-model="drawer"
|
||||
:rail="rail"
|
||||
:permanent="!isMobile"
|
||||
:temporary="isMobile"
|
||||
:menu-groups="menuGroups"
|
||||
:user-name="userStore.user?.name || '사용자'"
|
||||
:business-name="userStore.user?.businessName || ''"
|
||||
:user-avatar="userStore.user?.avatar || ''"
|
||||
@menu-click="handleMenuClick"
|
||||
@action-click="handleSidebarAction"
|
||||
@update:rail="rail = $event"
|
||||
/>
|
||||
|
||||
<!-- 모바일용 임시 사이드바 -->
|
||||
<Sidebar
|
||||
v-if="isMobile"
|
||||
v-model="drawer"
|
||||
:temporary="true"
|
||||
:menu-groups="menuGroups"
|
||||
:user-name="userStore.user?.name || '사용자'"
|
||||
:business-name="userStore.user?.businessName || ''"
|
||||
:user-avatar="userStore.user?.avatar || ''"
|
||||
@menu-click="handleMenuClick"
|
||||
@action-click="handleSidebarAction"
|
||||
/>
|
||||
|
||||
<!-- 상단 앱바 -->
|
||||
<AppHeader
|
||||
v-if="showHeader"
|
||||
:title="currentPageTitle"
|
||||
:show-back-button="showBackButton"
|
||||
:show-menu-button="isMobile"
|
||||
:show-user-menu="!isMobile"
|
||||
:actions="headerActions"
|
||||
:user-name="userStore.user?.name || '사용자'"
|
||||
:user-email="userStore.user?.email || ''"
|
||||
:user-avatar="userStore.user?.avatar || ''"
|
||||
@toggle-drawer="drawer = !drawer"
|
||||
@back-click="handleBackClick"
|
||||
@action-click="handleHeaderAction"
|
||||
@user-menu-click="handleUserMenuClick"
|
||||
/>
|
||||
|
||||
<!-- 메인 컨텐츠 -->
|
||||
<v-main :class="mainClass">
|
||||
<v-container
|
||||
:fluid="fluidContainer"
|
||||
:class="containerClass"
|
||||
>
|
||||
<!-- 로딩 오버레이 -->
|
||||
<LoadingSpinner
|
||||
v-if="loading"
|
||||
overlay
|
||||
:message="loadingMessage"
|
||||
:sub-message="loadingSubMessage"
|
||||
/>
|
||||
|
||||
<!-- 에러 알림 -->
|
||||
<ErrorAlert
|
||||
v-if="error"
|
||||
v-model="showError"
|
||||
:type="error.type || 'error'"
|
||||
:title="error.title"
|
||||
:message="error.message"
|
||||
:details="error.details"
|
||||
:show-retry-button="error.retryable"
|
||||
@retry="handleErrorRetry"
|
||||
@close="clearError"
|
||||
/>
|
||||
|
||||
<!-- 페이지 컨텐츠 -->
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<transition :name="pageTransition" mode="out-in">
|
||||
<component
|
||||
:is="Component"
|
||||
:key="route.path"
|
||||
@loading="setLoading"
|
||||
@error="setError"
|
||||
/>
|
||||
</transition>
|
||||
</router-view>
|
||||
</v-container>
|
||||
</v-main>
|
||||
|
||||
<!-- 하단 네비게이션 (모바일용) -->
|
||||
<BottomNavigation
|
||||
v-if="isMobile && showBottomNav"
|
||||
:navigation-items="bottomNavItems"
|
||||
:hide-on-routes="bottomNavHideRoutes"
|
||||
@nav-click="handleBottomNavClick"
|
||||
/>
|
||||
|
||||
<!-- 전역 스낵바 -->
|
||||
<v-snackbar
|
||||
v-model="snackbar.show"
|
||||
:color="snackbar.color"
|
||||
:timeout="snackbar.timeout"
|
||||
:location="snackbar.location"
|
||||
:multi-line="snackbar.multiLine"
|
||||
>
|
||||
{{ snackbar.message }}
|
||||
|
||||
<template v-slot:actions>
|
||||
<v-btn
|
||||
v-if="snackbar.action"
|
||||
variant="text"
|
||||
@click="handleSnackbarAction"
|
||||
>
|
||||
{{ snackbar.actionText }}
|
||||
</v-btn>
|
||||
<v-btn
|
||||
icon="mdi-close"
|
||||
variant="text"
|
||||
@click="snackbar.show = false"
|
||||
/>
|
||||
</template>
|
||||
</v-snackbar>
|
||||
|
||||
<!-- 확인 다이얼로그 -->
|
||||
<ConfirmDialog
|
||||
v-model="confirmDialog.show"
|
||||
:title="confirmDialog.title"
|
||||
:message="confirmDialog.message"
|
||||
:icon="confirmDialog.icon"
|
||||
:confirm-text="confirmDialog.confirmText"
|
||||
:cancel-text="confirmDialog.cancelText"
|
||||
:confirm-loading="confirmDialog.loading"
|
||||
@confirm="handleConfirmDialog"
|
||||
@cancel="confirmDialog.show = false"
|
||||
/>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, watch, onMounted, onUnmounted } from 'vue'
|
||||
import { useRoute, useRouter } from 'vue-router'
|
||||
import { useDisplay } from 'vuetify'
|
||||
|
||||
// 컴포넌트 임포트
|
||||
import AppHeader from '../common/AppHeader.vue'
|
||||
import LoadingSpinner from '../common/LoadingSpinner.vue'
|
||||
import ErrorAlert from '../common/ErrorAlert.vue'
|
||||
import ConfirmDialog from '../common/ConfirmDialog.vue'
|
||||
import Sidebar from './Sidebar.vue'
|
||||
import BottomNavigation from './BottomNavigation.vue'
|
||||
|
||||
// 스토어 (Pinia 사용 가정)
|
||||
import { useUserStore } from '@/stores/user'
|
||||
import { useAppStore } from '@/stores/app'
|
||||
|
||||
/**
|
||||
* AI 마케팅 서비스 - 메인 레이아웃 컴포넌트
|
||||
* 전체 애플리케이션의 레이아웃을 관리하는 최상위 컴포넌트
|
||||
*/
|
||||
|
||||
// Props 정의
|
||||
const props = defineProps({
|
||||
// 레이아웃 설정
|
||||
showHeader: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showBottomNav: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
fluidContainer: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
pageTransition: {
|
||||
type: String,
|
||||
default: 'fade'
|
||||
},
|
||||
|
||||
// 커스텀 클래스
|
||||
containerClass: {
|
||||
type: [String, Array, Object],
|
||||
default: 'pa-4'
|
||||
}
|
||||
})
|
||||
|
||||
// 스토어
|
||||
const userStore = useUserStore()
|
||||
const appStore = useAppStore()
|
||||
|
||||
// 라우터
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
|
||||
// Vuetify Display
|
||||
const { mobile } = useDisplay()
|
||||
|
||||
// Reactive data
|
||||
const drawer = ref(false)
|
||||
const rail = ref(false)
|
||||
const loading = ref(false)
|
||||
const loadingMessage = ref('')
|
||||
const loadingSubMessage = ref('')
|
||||
const error = ref(null)
|
||||
const showError = ref(false)
|
||||
|
||||
// 스낵바 상태
|
||||
const snackbar = ref({
|
||||
show: false,
|
||||
message: '',
|
||||
color: 'info',
|
||||
timeout: 4000,
|
||||
location: 'bottom',
|
||||
multiLine: false,
|
||||
action: null,
|
||||
actionText: '확인'
|
||||
})
|
||||
|
||||
// 확인 다이얼로그 상태
|
||||
const confirmDialog = ref({
|
||||
show: false,
|
||||
title: '',
|
||||
message: '',
|
||||
icon: '',
|
||||
confirmText: '확인',
|
||||
cancelText: '취소',
|
||||
loading: false,
|
||||
callback: null
|
||||
})
|
||||
|
||||
// Computed
|
||||
const isMobile = computed(() => mobile.value)
|
||||
|
||||
const mainClass = computed(() => ({
|
||||
'main-content': true,
|
||||
'main-content--rail': rail.value && !isMobile.value,
|
||||
'main-content--mobile': isMobile.value
|
||||
}))
|
||||
|
||||
const showBackButton = computed(() => {
|
||||
// 메인 페이지가 아닌 경우 뒤로가기 버튼 표시
|
||||
const mainRoutes = ['/dashboard', '/store', '/content', '/menu']
|
||||
return !mainRoutes.includes(route.path)
|
||||
})
|
||||
|
||||
const currentPageTitle = computed(() => {
|
||||
return route.meta?.title || 'AI 마케팅'
|
||||
})
|
||||
|
||||
const headerActions = computed(() => {
|
||||
// 라우트별 헤더 액션 버튼들
|
||||
const actions = []
|
||||
|
||||
if (route.path.startsWith('/content')) {
|
||||
actions.push({
|
||||
id: 'add-content',
|
||||
icon: 'mdi-plus',
|
||||
text: '생성',
|
||||
color: 'white'
|
||||
})
|
||||
}
|
||||
|
||||
// 알림 버튼
|
||||
actions.push({
|
||||
id: 'notifications',
|
||||
icon: 'mdi-bell',
|
||||
badge: true,
|
||||
badgeCount: appStore.notificationCount || 0,
|
||||
color: 'white'
|
||||
})
|
||||
|
||||
return actions
|
||||
})
|
||||
|
||||
// 메뉴 구성
|
||||
const menuGroups = computed(() => [
|
||||
{
|
||||
title: '대시보드',
|
||||
items: [
|
||||
{
|
||||
id: 'dashboard',
|
||||
title: '홈',
|
||||
icon: 'mdi-home',
|
||||
route: '/dashboard'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '매장 관리',
|
||||
items: [
|
||||
{
|
||||
id: 'store',
|
||||
title: '매장 정보',
|
||||
icon: 'mdi-store',
|
||||
route: '/store'
|
||||
},
|
||||
{
|
||||
id: 'menu',
|
||||
title: '메뉴 관리',
|
||||
icon: 'mdi-food',
|
||||
route: '/menu'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '마케팅',
|
||||
items: [
|
||||
{
|
||||
id: 'content-create',
|
||||
title: '콘텐츠 생성',
|
||||
icon: 'mdi-plus-circle',
|
||||
route: '/content/create'
|
||||
},
|
||||
{
|
||||
id: 'content-list',
|
||||
title: '콘텐츠 목록',
|
||||
icon: 'mdi-file-document-multiple',
|
||||
route: '/content'
|
||||
},
|
||||
{
|
||||
id: 'ai-recommend',
|
||||
title: 'AI 추천',
|
||||
icon: 'mdi-robot',
|
||||
route: '/recommend'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: '분석',
|
||||
items: [
|
||||
{
|
||||
id: 'sales',
|
||||
title: '매출 분석',
|
||||
icon: 'mdi-chart-line',
|
||||
route: '/sales'
|
||||
}
|
||||
]
|
||||
}
|
||||
])
|
||||
|
||||
// 하단 네비게이션 아이템들
|
||||
const bottomNavItems = computed(() => [
|
||||
{
|
||||
id: 'dashboard',
|
||||
label: '홈',
|
||||
icon: 'mdi-home-outline',
|
||||
activeIcon: 'mdi-home',
|
||||
route: '/dashboard'
|
||||
},
|
||||
{
|
||||
id: 'store',
|
||||
label: '매장',
|
||||
icon: 'mdi-store-outline',
|
||||
activeIcon: 'mdi-store',
|
||||
route: '/store'
|
||||
},
|
||||
{
|
||||
id: 'content-create',
|
||||
label: '생성',
|
||||
icon: 'mdi-plus-circle-outline',
|
||||
activeIcon: 'mdi-plus-circle',
|
||||
route: '/content/create'
|
||||
},
|
||||
{
|
||||
id: 'content-list',
|
||||
label: '목록',
|
||||
icon: 'mdi-file-document-outline',
|
||||
activeIcon: 'mdi-file-document',
|
||||
route: '/content'
|
||||
},
|
||||
{
|
||||
id: 'more',
|
||||
label: '더보기',
|
||||
icon: 'mdi-menu',
|
||||
route: '/more'
|
||||
}
|
||||
])
|
||||
|
||||
const bottomNavHideRoutes = ['/login', '/register']
|
||||
|
||||
// Methods
|
||||
const setLoading = (isLoading, message = '', subMessage = '') => {
|
||||
loading.value = isLoading
|
||||
loadingMessage.value = message
|
||||
loadingSubMessage.value = subMessage
|
||||
}
|
||||
|
||||
const setError = (errorData) => {
|
||||
error.value = errorData
|
||||
showError.value = true
|
||||
}
|
||||
|
||||
const clearError = () => {
|
||||
error.value = null
|
||||
showError.value = false
|
||||
}
|
||||
|
||||
const handleErrorRetry = () => {
|
||||
if (error.value?.retryCallback) {
|
||||
error.value.retryCallback()
|
||||
}
|
||||
clearError()
|
||||
}
|
||||
|
||||
const showSnackbar = (message, options = {}) => {
|
||||
snackbar.value = {
|
||||
show: true,
|
||||
message,
|
||||
color: options.color || 'info',
|
||||
timeout: options.timeout || 4000,
|
||||
location: options.location || 'bottom',
|
||||
multiLine: options.multiLine || false,
|
||||
action: options.action || null,
|
||||
actionText: options.actionText || '확인'
|
||||
}
|
||||
}
|
||||
|
||||
const handleSnackbarAction = () => {
|
||||
if (snackbar.value.action) {
|
||||
snackbar.value.action()
|
||||
}
|
||||
snackbar.value.show = false
|
||||
}
|
||||
|
||||
const showConfirm = (title, message, callback, options = {}) => {
|
||||
confirmDialog.value = {
|
||||
show: true,
|
||||
title,
|
||||
message,
|
||||
icon: options.icon || 'mdi-help-circle',
|
||||
confirmText: options.confirmText || '확인',
|
||||
cancelText: options.cancelText || '취소',
|
||||
loading: false,
|
||||
callback
|
||||
}
|
||||
}
|
||||
|
||||
const handleConfirmDialog = () => {
|
||||
if (confirmDialog.value.callback) {
|
||||
confirmDialog.value.loading = true
|
||||
|
||||
try {
|
||||
const result = confirmDialog.value.callback()
|
||||
|
||||
// Promise 처리
|
||||
if (result && typeof result.then === 'function') {
|
||||
result
|
||||
.then(() => {
|
||||
confirmDialog.value.show = false
|
||||
confirmDialog.value.loading = false
|
||||
})
|
||||
.catch((error) => {
|
||||
confirmDialog.value.loading = false
|
||||
setError({
|
||||
title: '오류 발생',
|
||||
message: error.message || '작업 중 오류가 발생했습니다.',
|
||||
type: 'error'
|
||||
})
|
||||
})
|
||||
} else {
|
||||
confirmDialog.value.show = false
|
||||
confirmDialog.value.loading = false
|
||||
}
|
||||
} catch (error) {
|
||||
confirmDialog.value.loading = false
|
||||
setError({
|
||||
title: '오류 발생',
|
||||
message: error.message || '작업 중 오류가 발생했습니다.',
|
||||
type: 'error'
|
||||
})
|
||||
}
|
||||
} else {
|
||||
confirmDialog.value.show = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleBackClick = () => {
|
||||
router.go(-1)
|
||||
}
|
||||
|
||||
const handleMenuClick = (item) => {
|
||||
console.log('Menu clicked:', item)
|
||||
|
||||
// 모바일에서는 메뉴 클릭 시 drawer 닫기
|
||||
if (isMobile.value) {
|
||||
drawer.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleSidebarAction = (action) => {
|
||||
switch (action.id) {
|
||||
case 'settings':
|
||||
router.push('/settings')
|
||||
break
|
||||
case 'logout':
|
||||
showConfirm(
|
||||
'로그아웃',
|
||||
'정말 로그아웃하시겠습니까?',
|
||||
() => {
|
||||
return userStore.logout().then(() => {
|
||||
router.push('/login')
|
||||
showSnackbar('로그아웃되었습니다.', { color: 'success' })
|
||||
})
|
||||
},
|
||||
{ icon: 'mdi-logout' }
|
||||
)
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const handleHeaderAction = (action) => {
|
||||
switch (action.id) {
|
||||
case 'add-content':
|
||||
router.push('/content/create')
|
||||
break
|
||||
case 'notifications':
|
||||
router.push('/notifications')
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const handleUserMenuClick = (menuItem) => {
|
||||
switch (menuItem.id) {
|
||||
case 'profile':
|
||||
router.push('/profile')
|
||||
break
|
||||
case 'settings':
|
||||
router.push('/settings')
|
||||
break
|
||||
case 'logout':
|
||||
handleSidebarAction({ id: 'logout' })
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
const handleBottomNavClick = (item) => {
|
||||
console.log('Bottom nav clicked:', item)
|
||||
}
|
||||
|
||||
// 모바일 방향 변경 감지
|
||||
const handleOrientationChange = () => {
|
||||
// 방향 변경 시 drawer 닫기
|
||||
if (isMobile.value) {
|
||||
drawer.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 외부에서 접근 가능한 메서드들을 expose
|
||||
defineExpose({
|
||||
setLoading,
|
||||
setError,
|
||||
clearError,
|
||||
showSnackbar,
|
||||
showConfirm
|
||||
})
|
||||
|
||||
// 라이프사이클
|
||||
onMounted(() => {
|
||||
// 모바일 방향 변경 리스너 등록
|
||||
window.addEventListener('orientationchange', handleOrientationChange)
|
||||
|
||||
// 초기 사용자 정보 로드
|
||||
if (!userStore.user) {
|
||||
userStore.fetchUser().catch(error => {
|
||||
setError({
|
||||
title: '사용자 정보 로드 실패',
|
||||
message: '사용자 정보를 불러올 수 없습니다.',
|
||||
details: error.message,
|
||||
retryable: true,
|
||||
retryCallback: () => userStore.fetchUser()
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('orientationchange', handleOrientationChange)
|
||||
})
|
||||
|
||||
// 라우트 변경 감지
|
||||
watch(() => route.path, (newPath) => {
|
||||
// 에러 상태 초기화
|
||||
clearError()
|
||||
|
||||
// 모바일에서 라우트 변경 시 drawer 닫기
|
||||
if (isMobile.value) {
|
||||
drawer.value = false
|
||||
}
|
||||
})
|
||||
|
||||
// 사용자 상태 변경 감지
|
||||
watch(() => userStore.isAuthenticated, (isAuth) => {
|
||||
if (!isAuth && route.meta?.requiresAuth !== false) {
|
||||
router.push('/login')
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.main-content {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.main-content--rail {
|
||||
/* Rail 모드일 때 왼쪽 여백 조정 */
|
||||
margin-left: 72px;
|
||||
}
|
||||
|
||||
.main-content--mobile {
|
||||
/* 모바일에서는 하단 네비게이션 공간 확보 */
|
||||
padding-bottom: 80px;
|
||||
}
|
||||
|
||||
/* 페이지 전환 애니메이션 */
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-enter-active,
|
||||
.slide-leave-active {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.slide-enter-from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
.slide-leave-to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
|
||||
/* 반응형 디자인 */
|
||||
@media (max-width: 960px) {
|
||||
.main-content--rail {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* 안전 영역 지원 */
|
||||
@supports (padding-top: env(safe-area-inset-top)) {
|
||||
.v-app-bar {
|
||||
padding-top: env(safe-area-inset-top);
|
||||
}
|
||||
}
|
||||
|
||||
@supports (padding-bottom: env(safe-area-inset-bottom)) {
|
||||
.main-content--mobile {
|
||||
padding-bottom: calc(80px + env(safe-area-inset-bottom));
|
||||
}
|
||||
}
|
||||
475
src/components/layout/Sidebar.vue
Normal file
475
src/components/layout/Sidebar.vue
Normal file
@ -0,0 +1,475 @@
|
||||
//* src/components/layout/Sidebar.vue
|
||||
<template>
|
||||
<v-navigation-drawer
|
||||
v-model="isOpen"
|
||||
:location="location"
|
||||
:width="width"
|
||||
:rail="rail"
|
||||
:permanent="permanent"
|
||||
:temporary="temporary"
|
||||
:floating="floating"
|
||||
:color="drawerColor"
|
||||
:elevation="elevation"
|
||||
:scrim="scrimColor"
|
||||
>
|
||||
<!-- 헤더 -->
|
||||
<div class="sidebar-header">
|
||||
<div class="header-content">
|
||||
<!-- 로고 -->
|
||||
<div class="sidebar-logo">
|
||||
<v-img :src="logoSrc" :alt="logoAlt" :width="logoWidth" :height="logoHeight" contain />
|
||||
</div>
|
||||
|
||||
<!-- 사용자 정보 -->
|
||||
<div v-if="showUserInfo && !rail" class="user-info">
|
||||
<v-avatar :size="avatarSize" :color="avatarColor" class="mb-2">
|
||||
<v-img v-if="userAvatar" :src="userAvatar" :alt="userName" />
|
||||
<span v-else class="text-white font-weight-bold">
|
||||
{{ userInitial }}
|
||||
</span>
|
||||
</v-avatar>
|
||||
|
||||
<div class="user-details">
|
||||
<div class="text-body-2 font-weight-medium">
|
||||
{{ userName }}
|
||||
</div>
|
||||
<div class="text-caption text-grey-600">
|
||||
{{ userRole }}
|
||||
</div>
|
||||
<div class="text-caption text-grey-600">
|
||||
{{ businessName }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 축소/확장 버튼 -->
|
||||
<v-btn v-if="showToggleButton" icon size="small" @click="toggleRail" class="toggle-btn">
|
||||
<v-icon>{{ rail ? 'mdi-chevron-right' : 'mdi-chevron-left' }}</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<!-- 네비게이션 메뉴 -->
|
||||
<v-list :density="listDensity" nav class="sidebar-menu">
|
||||
<!-- 메뉴 그룹 -->
|
||||
<template v-for="(group, groupIndex) in menuGroups" :key="groupIndex">
|
||||
<!-- 그룹 헤더 -->
|
||||
<v-list-subheader v-if="group.title && !rail" class="text-grey-600 font-weight-medium">
|
||||
{{ group.title }}
|
||||
</v-list-subheader>
|
||||
|
||||
<!-- 메뉴 아이템들 -->
|
||||
<template v-for="item in group.items" :key="item.id">
|
||||
<!-- 단일 메뉴 아이템 -->
|
||||
<v-list-item
|
||||
v-if="!item.children"
|
||||
:to="item.route"
|
||||
:value="item.id"
|
||||
:prepend-icon="item.icon"
|
||||
:title="item.title"
|
||||
:subtitle="item.subtitle"
|
||||
:active="isActiveRoute(item.route)"
|
||||
:class="getMenuItemClass(item)"
|
||||
@click="handleMenuClick(item)"
|
||||
>
|
||||
<!-- 배지 -->
|
||||
<template v-if="item.badge" v-slot:append>
|
||||
<v-chip
|
||||
:color="item.badgeColor || 'primary'"
|
||||
size="x-small"
|
||||
:variant="item.badgeVariant || 'flat'"
|
||||
>
|
||||
{{ item.badge }}
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-list-item>
|
||||
|
||||
<!-- 하위 메뉴가 있는 아이템 -->
|
||||
<v-list-group v-else :value="item.id" :prepend-icon="item.icon">
|
||||
<template v-slot:activator="{ props }">
|
||||
<v-list-item
|
||||
v-bind="props"
|
||||
:title="item.title"
|
||||
:subtitle="item.subtitle"
|
||||
:class="getMenuItemClass(item)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<v-list-item
|
||||
v-for="child in item.children"
|
||||
:key="child.id"
|
||||
:to="child.route"
|
||||
:value="child.id"
|
||||
:title="child.title"
|
||||
:prepend-icon="child.icon"
|
||||
:active="isActiveRoute(child.route)"
|
||||
class="ml-4"
|
||||
@click="handleMenuClick(child)"
|
||||
>
|
||||
<template v-if="child.badge" v-slot:append>
|
||||
<v-chip
|
||||
:color="child.badgeColor || 'primary'"
|
||||
size="x-small"
|
||||
:variant="child.badgeVariant || 'flat'"
|
||||
>
|
||||
{{ child.badge }}
|
||||
</v-chip>
|
||||
</template>
|
||||
</v-list-item>
|
||||
</v-list-group>
|
||||
</template>
|
||||
|
||||
<!-- 그룹 구분선 -->
|
||||
<v-divider v-if="groupIndex < menuGroups.length - 1" class="my-2" />
|
||||
</template>
|
||||
</v-list>
|
||||
|
||||
<!-- 하단 액션 -->
|
||||
<template v-slot:append>
|
||||
<div class="sidebar-footer">
|
||||
<v-divider />
|
||||
|
||||
<v-list density="compact" nav>
|
||||
<v-list-item
|
||||
v-for="action in footerActions"
|
||||
:key="action.id"
|
||||
:prepend-icon="action.icon"
|
||||
:title="action.title"
|
||||
:color="action.color"
|
||||
@click="handleActionClick(action)"
|
||||
/>
|
||||
</v-list>
|
||||
</div>
|
||||
</template>
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
/**
|
||||
* AI 마케팅 서비스 - 사이드바 네비게이션 컴포넌트
|
||||
* 메인 네비게이션을 제공하는 사이드바
|
||||
*/
|
||||
|
||||
// Props 정의
|
||||
const props = defineProps({
|
||||
// 기본 설정
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
location: {
|
||||
type: String,
|
||||
default: 'start',
|
||||
},
|
||||
width: {
|
||||
type: [Number, String],
|
||||
default: 280,
|
||||
},
|
||||
rail: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
permanent: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
temporary: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
floating: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
|
||||
// 스타일
|
||||
drawerColor: {
|
||||
type: String,
|
||||
default: 'white',
|
||||
},
|
||||
elevation: {
|
||||
type: [Number, String],
|
||||
default: 1,
|
||||
},
|
||||
scrimColor: {
|
||||
type: String,
|
||||
default: 'rgba(0, 0, 0, 0.5)',
|
||||
},
|
||||
listDensity: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
},
|
||||
|
||||
// 로고
|
||||
logoSrc: {
|
||||
type: String,
|
||||
default: '/images/logo.png',
|
||||
},
|
||||
logoAlt: {
|
||||
type: String,
|
||||
default: 'AI 마케팅 로고',
|
||||
},
|
||||
logoWidth: {
|
||||
type: [Number, String],
|
||||
default: 40,
|
||||
},
|
||||
logoHeight: {
|
||||
type: [Number, String],
|
||||
default: 40,
|
||||
},
|
||||
|
||||
// 사용자 정보
|
||||
showUserInfo: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
userName: {
|
||||
type: String,
|
||||
default: '사용자',
|
||||
},
|
||||
userRole: {
|
||||
type: String,
|
||||
default: '점주',
|
||||
},
|
||||
businessName: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
userAvatar: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
avatarSize: {
|
||||
type: [Number, String],
|
||||
default: 48,
|
||||
},
|
||||
avatarColor: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
|
||||
// 토글 버튼
|
||||
showToggleButton: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
|
||||
// 메뉴 구성
|
||||
menuGroups: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{
|
||||
title: '대시보드',
|
||||
items: [
|
||||
{
|
||||
id: 'dashboard',
|
||||
title: '홈',
|
||||
icon: 'mdi-home',
|
||||
route: '/dashboard',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '매장 관리',
|
||||
items: [
|
||||
{
|
||||
id: 'store',
|
||||
title: '매장 정보',
|
||||
icon: 'mdi-store',
|
||||
route: '/store',
|
||||
},
|
||||
{
|
||||
id: 'menu',
|
||||
title: '메뉴 관리',
|
||||
icon: 'mdi-food',
|
||||
route: '/menu',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '마케팅',
|
||||
items: [
|
||||
{
|
||||
id: 'content-create',
|
||||
title: '콘텐츠 생성',
|
||||
icon: 'mdi-plus-circle',
|
||||
route: '/content/create',
|
||||
},
|
||||
{
|
||||
id: 'content-list',
|
||||
title: '콘텐츠 목록',
|
||||
icon: 'mdi-file-document-multiple',
|
||||
route: '/content',
|
||||
},
|
||||
{
|
||||
id: 'ai-recommend',
|
||||
title: 'AI 추천',
|
||||
icon: 'mdi-robot',
|
||||
route: '/recommend',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '분석',
|
||||
items: [
|
||||
{
|
||||
id: 'sales',
|
||||
title: '매출 분석',
|
||||
icon: 'mdi-chart-line',
|
||||
route: '/sales',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
// 하단 액션
|
||||
footerActions: {
|
||||
type: Array,
|
||||
default: () => [
|
||||
{
|
||||
id: 'settings',
|
||||
title: '설정',
|
||||
icon: 'mdi-cog',
|
||||
color: 'grey',
|
||||
},
|
||||
{
|
||||
id: 'logout',
|
||||
title: '로그아웃',
|
||||
icon: 'mdi-logout',
|
||||
color: 'error',
|
||||
},
|
||||
],
|
||||
},
|
||||
})
|
||||
|
||||
// Emits 정의
|
||||
const emit = defineEmits(['update:modelValue', 'update:rail', 'menu-click', 'action-click'])
|
||||
|
||||
// 라우터
|
||||
const route = useRoute()
|
||||
|
||||
// Computed
|
||||
const isOpen = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (value) => emit('update:modelValue', value),
|
||||
})
|
||||
|
||||
const userInitial = computed(() => {
|
||||
return props.userName.charAt(0).toUpperCase()
|
||||
})
|
||||
|
||||
// Methods
|
||||
const toggleRail = () => {
|
||||
emit('update:rail', !props.rail)
|
||||
}
|
||||
|
||||
const isActiveRoute = (routePath) => {
|
||||
if (!routePath) return false
|
||||
return route.path === routePath || route.path.startsWith(routePath + '/')
|
||||
}
|
||||
|
||||
const getMenuItemClass = (item) => {
|
||||
return {
|
||||
'menu-item': true,
|
||||
'menu-item--important': item.important,
|
||||
'menu-item--new': item.isNew,
|
||||
}
|
||||
}
|
||||
|
||||
const handleMenuClick = (item) => {
|
||||
emit('menu-click', item)
|
||||
|
||||
// 모바일에서는 메뉴 클릭시 사이드바 닫기
|
||||
if (props.temporary && window.innerWidth < 960) {
|
||||
isOpen.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const handleActionClick = (action) => {
|
||||
emit('action-click', action)
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.sidebar-header {
|
||||
position: relative;
|
||||
padding: 20px 16px 16px;
|
||||
background: linear-gradient(
|
||||
135deg,
|
||||
rgb(var(--v-theme-primary)),
|
||||
rgb(var(--v-theme-primary-darken-1))
|
||||
);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.sidebar-logo {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.user-details {
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.toggle-btn {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
background: rgba(255, 255, 255, 0.1) !important;
|
||||
}
|
||||
|
||||
.sidebar-menu {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.menu-item--important {
|
||||
background: rgba(var(--v-theme-primary), 0.1);
|
||||
border-radius: 8px;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
.menu-item--new::after {
|
||||
content: 'NEW';
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
background: rgb(var(--v-theme-error));
|
||||
color: white;
|
||||
font-size: 10px;
|
||||
padding: 2px 6px;
|
||||
border-radius: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
background: rgb(var(--v-theme-surface-variant));
|
||||
}
|
||||
|
||||
@media (max-width: 960px) {
|
||||
.sidebar-header {
|
||||
padding: 16px 12px 12px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
margin-top: 12px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user