views files add
This commit is contained in:
unknown
parent
c052e3300f
commit
43066ca623
478
src/views/DashboardView.vue
Normal file
478
src/views/DashboardView.vue
Normal file
@ -0,0 +1,478 @@
|
||||
<template>
|
||||
<v-container fluid class="pa-4">
|
||||
<!-- 환영 메시지 -->
|
||||
<v-row class="mb-4">
|
||||
<v-col cols="12">
|
||||
<v-card class="bg-gradient-primary" elevation="4">
|
||||
<v-card-text class="pa-6">
|
||||
<div class="d-flex align-center">
|
||||
<div class="flex-grow-1">
|
||||
<h2 class="text-h5 text-white font-weight-bold mb-2">
|
||||
안녕하세요, {{ authStore.user?.nickname }}님! 👋
|
||||
</h2>
|
||||
<p class="text-white opacity-90 mb-0">
|
||||
오늘도 성공적인 마케팅을 위해 함께해요
|
||||
</p>
|
||||
</div>
|
||||
<v-img
|
||||
src="/images/ai-character.png"
|
||||
max-width="80"
|
||||
class="ml-4"
|
||||
/>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- 주요 지표 카드 -->
|
||||
<v-row class="mb-4">
|
||||
<v-col
|
||||
v-for="metric in dashboardMetrics"
|
||||
:key="metric.title"
|
||||
cols="6"
|
||||
md="3"
|
||||
>
|
||||
<v-card elevation="2" class="h-100">
|
||||
<v-card-text class="pa-4">
|
||||
<div class="d-flex align-center justify-space-between mb-2">
|
||||
<v-icon :color="metric.color" size="24">{{ metric.icon }}</v-icon>
|
||||
<v-chip
|
||||
:color="metric.trend === 'up' ? 'success' : metric.trend === 'down' ? 'error' : 'warning'"
|
||||
size="small"
|
||||
variant="tonal"
|
||||
>
|
||||
<v-icon size="16" class="mr-1">
|
||||
{{ metric.trend === 'up' ? 'mdi-trending-up' :
|
||||
metric.trend === 'down' ? 'mdi-trending-down' : 'mdi-minus' }}
|
||||
</v-icon>
|
||||
{{ metric.change }}
|
||||
</v-chip>
|
||||
</div>
|
||||
<p class="text-caption text-grey mb-1">{{ metric.title }}</p>
|
||||
<h3 class="text-h6 font-weight-bold">{{ metric.value }}</h3>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- 빠른 액션 -->
|
||||
<v-row class="mb-4">
|
||||
<v-col cols="12">
|
||||
<v-card elevation="2">
|
||||
<v-card-title class="pa-4">
|
||||
<v-icon class="mr-2" color="primary">mdi-flash</v-icon>
|
||||
빠른 액션
|
||||
</v-card-title>
|
||||
<v-card-text class="pa-4">
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="action in quickActions"
|
||||
:key="action.title"
|
||||
cols="6"
|
||||
md="3"
|
||||
>
|
||||
<v-btn
|
||||
block
|
||||
size="large"
|
||||
:color="action.color"
|
||||
variant="tonal"
|
||||
class="pa-4 flex-column"
|
||||
style="height: 80px;"
|
||||
@click="action.action"
|
||||
>
|
||||
<v-icon size="28" class="mb-1">{{ action.icon }}</v-icon>
|
||||
<span class="text-caption">{{ action.title }}</span>
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- AI 추천 & 매출 차트 -->
|
||||
<v-row class="mb-4">
|
||||
<!-- AI 마케팅 추천 -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card elevation="2" class="h-100">
|
||||
<v-card-title class="pa-4">
|
||||
<v-icon class="mr-2" color="purple">mdi-robot</v-icon>
|
||||
AI 마케팅 추천
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
icon
|
||||
size="small"
|
||||
@click="refreshAIRecommendations"
|
||||
:loading="aiLoading"
|
||||
>
|
||||
<v-icon>mdi-refresh</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
<v-card-text class="pa-4">
|
||||
<div v-if="aiRecommendations.length > 0">
|
||||
<div
|
||||
v-for="(recommendation, index) in aiRecommendations"
|
||||
:key="index"
|
||||
class="mb-4 last:mb-0"
|
||||
>
|
||||
<v-alert
|
||||
:type="recommendation.type"
|
||||
variant="tonal"
|
||||
class="mb-2"
|
||||
>
|
||||
<div class="d-flex align-center">
|
||||
<v-icon class="mr-2">{{ recommendation.icon }}</v-icon>
|
||||
<div class="flex-grow-1">
|
||||
<h4 class="text-subtitle-2 font-weight-bold mb-1">
|
||||
{{ recommendation.title }}
|
||||
</h4>
|
||||
<p class="text-body-2 mb-0">{{ recommendation.content }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</v-alert>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-center pa-4">
|
||||
<v-icon size="48" color="grey-lighten-2">mdi-robot-outline</v-icon>
|
||||
<p class="text-grey mt-2">AI 추천을 가져오는 중...</p>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- 매출 차트 -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card elevation="2" class="h-100">
|
||||
<v-card-title class="pa-4">
|
||||
<v-icon class="mr-2" color="success">mdi-chart-line</v-icon>
|
||||
매출 현황
|
||||
<v-spacer />
|
||||
<v-select
|
||||
v-model="chartPeriod"
|
||||
:items="chartPeriods"
|
||||
item-title="text"
|
||||
item-value="value"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
hide-details
|
||||
style="max-width: 120px;"
|
||||
@update:model-value="updateChart"
|
||||
/>
|
||||
</v-card-title>
|
||||
<v-card-text class="pa-4">
|
||||
<div class="chart-container" style="height: 200px;">
|
||||
<canvas ref="salesChart" />
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- 최근 활동 & 콘텐츠 성과 -->
|
||||
<v-row>
|
||||
<!-- 최근 활동 -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card elevation="2" class="h-100">
|
||||
<v-card-title class="pa-4">
|
||||
<v-icon class="mr-2" color="info">mdi-history</v-icon>
|
||||
최근 활동
|
||||
</v-card-title>
|
||||
<v-card-text class="pa-4">
|
||||
<v-list density="compact">
|
||||
<v-list-item
|
||||
v-for="activity in recentActivities"
|
||||
:key="activity.id"
|
||||
class="px-0"
|
||||
>
|
||||
<template v-slot:prepend>
|
||||
<v-avatar :color="activity.color" size="32">
|
||||
<v-icon color="white" size="16">{{ activity.icon }}</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
<v-list-item-title class="text-body-2">
|
||||
{{ activity.title }}
|
||||
</v-list-item-title>
|
||||
<v-list-item-subtitle class="text-caption">
|
||||
{{ formatRelativeTime(activity.timestamp) }}
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item>
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<!-- 콘텐츠 성과 -->
|
||||
<v-col cols="12" md="6">
|
||||
<v-card elevation="2" class="h-100">
|
||||
<v-card-title class="pa-4">
|
||||
<v-icon class="mr-2" color="orange">mdi-chart-donut</v-icon>
|
||||
콘텐츠 성과
|
||||
</v-card-title>
|
||||
<v-card-text class="pa-4">
|
||||
<div v-if="contentPerformance.length > 0">
|
||||
<div
|
||||
v-for="content in contentPerformance"
|
||||
:key="content.id"
|
||||
class="d-flex align-center justify-space-between py-2"
|
||||
>
|
||||
<div class="d-flex align-center">
|
||||
<v-chip
|
||||
:color="content.platform === 'instagram' ? 'purple' : 'blue'"
|
||||
size="small"
|
||||
class="mr-2"
|
||||
>
|
||||
{{ content.platform }}
|
||||
</v-chip>
|
||||
<span class="text-body-2">{{ content.title }}</span>
|
||||
</div>
|
||||
<div class="text-right">
|
||||
<div class="text-caption text-grey">조회수</div>
|
||||
<div class="font-weight-bold">{{ formatNumber(content.views) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-center pa-4">
|
||||
<v-icon size="48" color="grey-lighten-2">mdi-chart-donut</v-icon>
|
||||
<p class="text-grey mt-2">콘텐츠 성과 데이터가 없습니다</p>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- 로딩 오버레이 -->
|
||||
<v-overlay v-if="loading" class="align-center justify-center">
|
||||
<v-progress-circular
|
||||
color="primary"
|
||||
indeterminate
|
||||
size="64"
|
||||
/>
|
||||
</v-overlay>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, nextTick } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAuthStore, useStoreStore } from '@/store/index'
|
||||
import { formatCurrency, formatNumber, formatRelativeTime } from '@/utils/formatters'
|
||||
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
const storeStore = useStoreStore()
|
||||
|
||||
// 반응형 데이터
|
||||
const loading = ref(false)
|
||||
const aiLoading = ref(false)
|
||||
const chartPeriod = ref('week')
|
||||
const salesChart = ref(null)
|
||||
|
||||
// 대시보드 지표
|
||||
const dashboardMetrics = ref([
|
||||
{
|
||||
title: '오늘 매출',
|
||||
value: '₩567,000',
|
||||
change: '+12%',
|
||||
trend: 'up',
|
||||
icon: 'mdi-cash',
|
||||
color: 'success'
|
||||
},
|
||||
{
|
||||
title: '월 매출',
|
||||
value: '₩12,340,000',
|
||||
change: '+8%',
|
||||
trend: 'up',
|
||||
icon: 'mdi-chart-line',
|
||||
color: 'primary'
|
||||
},
|
||||
{
|
||||
title: '콘텐츠 수',
|
||||
value: '24',
|
||||
change: '+3',
|
||||
trend: 'up',
|
||||
icon: 'mdi-file-document',
|
||||
color: 'info'
|
||||
},
|
||||
{
|
||||
title: '조회수',
|
||||
value: '15.2K',
|
||||
change: '+25%',
|
||||
trend: 'up',
|
||||
icon: 'mdi-eye',
|
||||
color: 'warning'
|
||||
}
|
||||
])
|
||||
|
||||
// 빠른 액션
|
||||
const quickActions = ref([
|
||||
{
|
||||
title: 'SNS 콘텐츠',
|
||||
icon: 'mdi-plus-circle',
|
||||
color: 'primary',
|
||||
action: () => router.push('/content/create?type=sns')
|
||||
},
|
||||
{
|
||||
title: '포스터 생성',
|
||||
icon: 'mdi-image-plus',
|
||||
color: 'secondary',
|
||||
action: () => router.push('/content/create?type=poster')
|
||||
},
|
||||
{
|
||||
title: '메뉴 등록',
|
||||
icon: 'mdi-food-apple',
|
||||
color: 'success',
|
||||
action: () => router.push('/menu')
|
||||
},
|
||||
{
|
||||
title: '매출 분석',
|
||||
icon: 'mdi-chart-bar',
|
||||
color: 'info',
|
||||
action: () => router.push('/sales')
|
||||
}
|
||||
])
|
||||
|
||||
// AI 추천
|
||||
const aiRecommendations = ref([
|
||||
{
|
||||
type: 'info',
|
||||
icon: 'mdi-weather-rainy',
|
||||
title: '날씨 기반 추천',
|
||||
content: '오늘은 비가 와서 따뜻한 음식이 인기 있을 것 같아요. 국물 요리를 추천해보세요!'
|
||||
},
|
||||
{
|
||||
type: 'success',
|
||||
icon: 'mdi-trending-up',
|
||||
title: '트렌드 알림',
|
||||
content: '최근 #떡볶이챌린지가 인기입니다. 관련 콘텐츠를 만들어보세요.'
|
||||
},
|
||||
{
|
||||
type: 'warning',
|
||||
icon: 'mdi-clock-outline',
|
||||
title: '시간대 팁',
|
||||
content: '점심시간(12-14시)에 주문이 집중됩니다. 미리 준비하세요.'
|
||||
}
|
||||
])
|
||||
|
||||
// 차트 기간 옵션
|
||||
const chartPeriods = ref([
|
||||
{ text: '일주일', value: 'week' },
|
||||
{ text: '한달', value: 'month' },
|
||||
{ text: '3개월', value: 'quarter' }
|
||||
])
|
||||
|
||||
// 최근 활동
|
||||
const recentActivities = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: 'SNS 콘텐츠 "떡볶이 신메뉴 출시" 발행',
|
||||
timestamp: new Date(Date.now() - 1000 * 60 * 30),
|
||||
icon: 'mdi-instagram',
|
||||
color: 'purple'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '메뉴 "치즈떡볶이" 등록',
|
||||
timestamp: new Date(Date.now() - 1000 * 60 * 60 * 2),
|
||||
icon: 'mdi-food',
|
||||
color: 'orange'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '매장 정보 업데이트',
|
||||
timestamp: new Date(Date.now() - 1000 * 60 * 60 * 5),
|
||||
icon: 'mdi-store',
|
||||
color: 'blue'
|
||||
}
|
||||
])
|
||||
|
||||
// 콘텐츠 성과
|
||||
const contentPerformance = ref([
|
||||
{
|
||||
id: 1,
|
||||
title: '떡볶이 신메뉴 홍보',
|
||||
platform: 'instagram',
|
||||
views: 1240
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: '매장 소개 포스터',
|
||||
platform: 'blog',
|
||||
views: 850
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: '할인 이벤트 안내',
|
||||
platform: 'instagram',
|
||||
views: 2100
|
||||
}
|
||||
])
|
||||
|
||||
// 메서드
|
||||
const refreshAIRecommendations = async () => {
|
||||
try {
|
||||
aiLoading.value = true
|
||||
// API 호출 시뮬레이션
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
// AI 추천 데이터 갱신 로직
|
||||
} catch (error) {
|
||||
console.error('AI 추천 갱신 실패:', error)
|
||||
} finally {
|
||||
aiLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const updateChart = () => {
|
||||
// 차트 업데이트 로직
|
||||
console.log('차트 업데이트:', chartPeriod.value)
|
||||
}
|
||||
|
||||
const initChart = () => {
|
||||
// Chart.js를 사용한 차트 초기화 로직
|
||||
// 실제 구현에서는 Chart.js 라이브러리 사용
|
||||
console.log('차트 초기화')
|
||||
}
|
||||
|
||||
// 라이프사이클
|
||||
onMounted(async () => {
|
||||
try {
|
||||
loading.value = true
|
||||
|
||||
// 대시보드 데이터 로드
|
||||
await Promise.all([
|
||||
// 매장 정보 로드 (필요시)
|
||||
// storeStore.fetchStoreInfo(),
|
||||
// AI 추천 로드
|
||||
// refreshAIRecommendations()
|
||||
])
|
||||
|
||||
// 차트 초기화
|
||||
await nextTick()
|
||||
initChart()
|
||||
} catch (error) {
|
||||
console.error('대시보드 로드 실패:', error)
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bg-gradient-primary {
|
||||
background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
|
||||
}
|
||||
|
||||
.h-100 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chart-container {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.text-h5 {
|
||||
font-size: 1.3rem !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
343
src/views/LoginView.vue
Normal file
343
src/views/LoginView.vue
Normal file
@ -0,0 +1,343 @@
|
||||
<template>
|
||||
<v-container fluid class="fill-height pa-0">
|
||||
<v-row no-gutters class="fill-height">
|
||||
<v-col cols="12" class="d-flex flex-column">
|
||||
<!-- 로고 및 헤더 -->
|
||||
<div class="text-center pa-8 bg-primary">
|
||||
<v-img
|
||||
src="/images/logo.png"
|
||||
alt="AI 마케팅 로고"
|
||||
max-width="80"
|
||||
class="mx-auto mb-4"
|
||||
/>
|
||||
<h1 class="text-h4 text-white font-weight-bold mb-2">
|
||||
AI 마케팅
|
||||
</h1>
|
||||
<p class="text-white opacity-90">
|
||||
소상공인을 위한 똑똑한 마케팅 솔루션
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 로그인 폼 -->
|
||||
<div class="flex-grow-1 pa-6">
|
||||
<v-card class="mx-auto" max-width="400" elevation="8">
|
||||
<v-card-title class="text-h5 text-center pa-6">
|
||||
로그인
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text class="pa-6">
|
||||
<v-form
|
||||
ref="loginForm"
|
||||
v-model="formValid"
|
||||
@submit.prevent="login"
|
||||
>
|
||||
<v-text-field
|
||||
v-model="loginData.userId"
|
||||
label="아이디"
|
||||
prepend-inner-icon="mdi-account"
|
||||
variant="outlined"
|
||||
:rules="userIdRules"
|
||||
required
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
v-model="loginData.password"
|
||||
label="비밀번호"
|
||||
prepend-inner-icon="mdi-lock"
|
||||
variant="outlined"
|
||||
:type="showPassword ? 'text' : 'password'"
|
||||
:append-inner-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'"
|
||||
:rules="passwordRules"
|
||||
required
|
||||
@click:append-inner="showPassword = !showPassword"
|
||||
@keyup.enter="login"
|
||||
/>
|
||||
|
||||
<v-btn
|
||||
type="submit"
|
||||
block
|
||||
size="large"
|
||||
color="primary"
|
||||
:loading="loading"
|
||||
:disabled="!formValid"
|
||||
class="mb-4"
|
||||
>
|
||||
로그인
|
||||
</v-btn>
|
||||
|
||||
<div class="text-center">
|
||||
<v-btn
|
||||
variant="text"
|
||||
color="primary"
|
||||
@click="showRegisterDialog = true"
|
||||
>
|
||||
회원가입
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
|
||||
<!-- 푸터 -->
|
||||
<div class="text-center pa-4 text-caption text-grey">
|
||||
© 2024 AI Marketing Service. All rights reserved.
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- 회원가입 다이얼로그 -->
|
||||
<v-dialog v-model="showRegisterDialog" max-width="500" scrollable>
|
||||
<v-card>
|
||||
<v-card-title class="text-h6">
|
||||
회원가입
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
icon
|
||||
@click="showRegisterDialog = false"
|
||||
>
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-card-text class="pa-6">
|
||||
<v-form ref="registerForm" v-model="registerFormValid">
|
||||
<v-text-field
|
||||
v-model="registerData.userId"
|
||||
label="아이디"
|
||||
variant="outlined"
|
||||
:rules="userIdRules"
|
||||
required
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
v-model="registerData.password"
|
||||
label="비밀번호"
|
||||
variant="outlined"
|
||||
type="password"
|
||||
:rules="passwordRules"
|
||||
required
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
v-model="registerData.confirmPassword"
|
||||
label="비밀번호 확인"
|
||||
variant="outlined"
|
||||
type="password"
|
||||
:rules="confirmPasswordRules"
|
||||
required
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
v-model="registerData.nickname"
|
||||
label="닉네임"
|
||||
variant="outlined"
|
||||
:rules="nicknameRules"
|
||||
required
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
v-model="registerData.businessNumber"
|
||||
label="사업자등록번호"
|
||||
variant="outlined"
|
||||
:rules="businessNumberRules"
|
||||
required
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<v-text-field
|
||||
v-model="registerData.email"
|
||||
label="이메일"
|
||||
variant="outlined"
|
||||
type="email"
|
||||
:rules="emailRules"
|
||||
required
|
||||
/>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-6">
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
color="grey"
|
||||
variant="text"
|
||||
@click="showRegisterDialog = false"
|
||||
>
|
||||
취소
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="primary"
|
||||
:loading="registerLoading"
|
||||
:disabled="!registerFormValid"
|
||||
@click="register"
|
||||
>
|
||||
가입하기
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- 스낵바 -->
|
||||
<v-snackbar
|
||||
v-model="snackbar.show"
|
||||
:color="snackbar.color"
|
||||
:timeout="3000"
|
||||
location="top"
|
||||
>
|
||||
{{ snackbar.message }}
|
||||
</v-snackbar>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '@/store/index'
|
||||
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
// 반응형 데이터
|
||||
const formValid = ref(false)
|
||||
const registerFormValid = ref(false)
|
||||
const loading = ref(false)
|
||||
const registerLoading = ref(false)
|
||||
const showPassword = ref(false)
|
||||
const showRegisterDialog = ref(false)
|
||||
|
||||
const loginData = reactive({
|
||||
userId: '',
|
||||
password: ''
|
||||
})
|
||||
|
||||
const registerData = reactive({
|
||||
userId: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
nickname: '',
|
||||
businessNumber: '',
|
||||
email: ''
|
||||
})
|
||||
|
||||
const snackbar = reactive({
|
||||
show: false,
|
||||
message: '',
|
||||
color: 'success'
|
||||
})
|
||||
|
||||
// 유효성 검사 규칙
|
||||
const userIdRules = [
|
||||
v => !!v || '아이디를 입력해주세요',
|
||||
v => v.length >= 4 || '아이디는 4자 이상이어야 합니다'
|
||||
]
|
||||
|
||||
const passwordRules = [
|
||||
v => !!v || '비밀번호를 입력해주세요',
|
||||
v => v.length >= 8 || '비밀번호는 8자 이상이어야 합니다',
|
||||
v => /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]/.test(v) || '영문, 숫자, 특수문자를 포함해야 합니다'
|
||||
]
|
||||
|
||||
const confirmPasswordRules = [
|
||||
v => !!v || '비밀번호 확인을 입력해주세요',
|
||||
v => v === registerData.password || '비밀번호가 일치하지 않습니다'
|
||||
]
|
||||
|
||||
const nicknameRules = [
|
||||
v => !!v || '닉네임을 입력해주세요',
|
||||
v => v.length >= 2 || '닉네임은 2자 이상이어야 합니다'
|
||||
]
|
||||
|
||||
const businessNumberRules = [
|
||||
v => !!v || '사업자등록번호를 입력해주세요',
|
||||
v => /^\d{3}-\d{2}-\d{5}$/.test(v) || '올바른 사업자등록번호 형식이 아닙니다 (예: 123-45-67890)'
|
||||
]
|
||||
|
||||
const emailRules = [
|
||||
v => !!v || '이메일을 입력해주세요',
|
||||
v => /.+@.+\..+/.test(v) || '올바른 이메일 형식이 아닙니다'
|
||||
]
|
||||
|
||||
// 메서드
|
||||
const login = async () => {
|
||||
if (!formValid.value) return
|
||||
|
||||
try {
|
||||
loading.value = true
|
||||
await authStore.login(loginData)
|
||||
|
||||
snackbar.show = true
|
||||
snackbar.message = '로그인되었습니다'
|
||||
snackbar.color = 'success'
|
||||
|
||||
setTimeout(() => {
|
||||
router.push('/dashboard')
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
snackbar.show = true
|
||||
snackbar.message = error.response?.data?.message || '로그인에 실패했습니다'
|
||||
snackbar.color = 'error'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const register = async () => {
|
||||
if (!registerFormValid.value) return
|
||||
|
||||
try {
|
||||
registerLoading.value = true
|
||||
await authStore.register(registerData)
|
||||
|
||||
snackbar.show = true
|
||||
snackbar.message = '회원가입이 완료되었습니다'
|
||||
snackbar.color = 'success'
|
||||
|
||||
showRegisterDialog.value = false
|
||||
|
||||
// 폼 초기화
|
||||
Object.assign(registerData, {
|
||||
userId: '',
|
||||
password: '',
|
||||
confirmPassword: '',
|
||||
nickname: '',
|
||||
businessNumber: '',
|
||||
email: ''
|
||||
})
|
||||
} catch (error) {
|
||||
snackbar.show = true
|
||||
snackbar.message = error.response?.data?.message || '회원가입에 실패했습니다'
|
||||
snackbar.color = 'error'
|
||||
} finally {
|
||||
registerLoading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.fill-height {
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.bg-primary {
|
||||
background: linear-gradient(135deg, #1976D2 0%, #1565C0 100%);
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.pa-8 {
|
||||
padding: 2rem !important;
|
||||
}
|
||||
|
||||
.text-h4 {
|
||||
font-size: 1.8rem !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
657
src/views/MenuManagementView.vue
Normal file
657
src/views/MenuManagementView.vue
Normal file
@ -0,0 +1,657 @@
|
||||
<template>
|
||||
<v-container fluid class="pa-4">
|
||||
<!-- 페이지 헤더 -->
|
||||
<v-row class="mb-4">
|
||||
<v-col cols="12">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<h1 class="text-h4 font-weight-bold mb-2">메뉴 관리</h1>
|
||||
<p class="text-grey">매장의 메뉴를 등록하고 관리할 수 있습니다</p>
|
||||
</div>
|
||||
<v-btn
|
||||
color="primary"
|
||||
size="large"
|
||||
prepend-icon="mdi-plus"
|
||||
@click="openCreateDialog"
|
||||
>
|
||||
메뉴 추가
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- 검색 및 필터 -->
|
||||
<v-row class="mb-4">
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
v-model="searchQuery"
|
||||
label="메뉴 검색"
|
||||
prepend-inner-icon="mdi-magnify"
|
||||
variant="outlined"
|
||||
clearable
|
||||
hide-details
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-select
|
||||
v-model="selectedCategory"
|
||||
label="카테고리"
|
||||
variant="outlined"
|
||||
:items="categories"
|
||||
clearable
|
||||
hide-details
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="3">
|
||||
<v-select
|
||||
v-model="sortBy"
|
||||
label="정렬"
|
||||
variant="outlined"
|
||||
:items="sortOptions"
|
||||
hide-details
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- 메뉴가 없는 경우 -->
|
||||
<div v-if="filteredMenus.length === 0 && !menuStore.loading">
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" md="8">
|
||||
<v-card class="text-center pa-8" elevation="4">
|
||||
<v-img
|
||||
src="/images/menu-placeholder.png"
|
||||
max-width="200"
|
||||
class="mx-auto mb-4"
|
||||
/>
|
||||
<h2 class="text-h5 font-weight-bold mb-3">첫 메뉴를 등록해보세요!</h2>
|
||||
<p class="text-grey mb-4">
|
||||
메뉴를 등록하면 AI가 더 정확한 마케팅 콘텐츠를 생성할 수 있습니다
|
||||
</p>
|
||||
<v-btn
|
||||
color="primary"
|
||||
size="large"
|
||||
prepend-icon="mdi-food-apple"
|
||||
@click="openCreateDialog"
|
||||
>
|
||||
메뉴 등록하기
|
||||
</v-btn>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
|
||||
<!-- 메뉴 목록 -->
|
||||
<div v-else>
|
||||
<!-- 메뉴 통계 -->
|
||||
<v-row class="mb-4">
|
||||
<v-col cols="6" sm="3">
|
||||
<v-card elevation="2" class="text-center pa-4">
|
||||
<h3 class="text-h4 font-weight-bold text-primary">{{ menuStore.totalCount }}</h3>
|
||||
<p class="text-caption text-grey">전체 메뉴</p>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="6" sm="3">
|
||||
<v-card elevation="2" class="text-center pa-4">
|
||||
<h3 class="text-h4 font-weight-bold text-success">{{ availableMenuCount }}</h3>
|
||||
<p class="text-caption text-grey">판매중</p>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="6" sm="3">
|
||||
<v-card elevation="2" class="text-center pa-4">
|
||||
<h3 class="text-h4 font-weight-bold text-info">{{ categoriesCount }}</h3>
|
||||
<p class="text-caption text-grey">카테고리</p>
|
||||
</v-card>
|
||||
</v-col>
|
||||
<v-col cols="6" sm="3">
|
||||
<v-card elevation="2" class="text-center pa-4">
|
||||
<h3 class="text-h4 font-weight-bold text-warning">{{ formatCurrency(averagePrice) }}</h3>
|
||||
<p class="text-caption text-grey">평균 가격</p>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- 메뉴 그리드 -->
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="menu in filteredMenus"
|
||||
:key="menu.id"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
lg="3"
|
||||
>
|
||||
<v-card elevation="2" class="h-100">
|
||||
<!-- 메뉴 이미지 -->
|
||||
<v-img
|
||||
:src="menu.imageUrl || '/images/menu-placeholder.png'"
|
||||
:alt="menu.menuName"
|
||||
height="200"
|
||||
cover
|
||||
>
|
||||
<div class="d-flex pa-2">
|
||||
<v-spacer />
|
||||
<v-chip
|
||||
:color="menu.available ? 'success' : 'error'"
|
||||
size="small"
|
||||
variant="elevated"
|
||||
>
|
||||
{{ menu.available ? '판매중' : '품절' }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</v-img>
|
||||
|
||||
<!-- 메뉴 정보 -->
|
||||
<v-card-text class="pa-4">
|
||||
<div class="d-flex align-center justify-space-between mb-2">
|
||||
<v-chip
|
||||
:color="getCategoryColor(menu.category)"
|
||||
size="small"
|
||||
variant="tonal"
|
||||
>
|
||||
{{ menu.category }}
|
||||
</v-chip>
|
||||
<div class="d-flex">
|
||||
<v-btn
|
||||
icon
|
||||
size="small"
|
||||
variant="text"
|
||||
@click="editMenu(menu)"
|
||||
>
|
||||
<v-icon size="20">mdi-pencil</v-icon>
|
||||
</v-btn>
|
||||
<v-btn
|
||||
icon
|
||||
size="small"
|
||||
variant="text"
|
||||
color="error"
|
||||
@click="confirmDelete(menu)"
|
||||
>
|
||||
<v-icon size="20">mdi-delete</v-icon>
|
||||
</v-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h3 class="text-h6 font-weight-bold mb-2">{{ menu.menuName }}</h3>
|
||||
<p class="text-body-2 text-grey mb-3" style="min-height: 40px;">
|
||||
{{ menu.description || '메뉴 설명이 없습니다' }}
|
||||
</p>
|
||||
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<span class="text-h6 font-weight-bold text-primary">
|
||||
{{ formatCurrency(menu.price) }}
|
||||
</span>
|
||||
<v-rating
|
||||
:model-value="menu.rating || 0"
|
||||
readonly
|
||||
size="small"
|
||||
color="warning"
|
||||
density="compact"
|
||||
/>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
|
||||
<!-- 메뉴 등록/수정 다이얼로그 -->
|
||||
<v-dialog
|
||||
v-model="showMenuDialog"
|
||||
max-width="600"
|
||||
persistent
|
||||
scrollable
|
||||
>
|
||||
<v-card>
|
||||
<v-card-title class="pa-4">
|
||||
<span class="text-h6">{{ editMode ? '메뉴 수정' : '메뉴 등록' }}</span>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
icon
|
||||
@click="closeMenuDialog"
|
||||
>
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-card-text class="pa-6" style="max-height: 500px;">
|
||||
<v-form ref="menuForm" v-model="menuFormValid">
|
||||
<!-- 메뉴 이미지 -->
|
||||
<div class="text-center mb-6">
|
||||
<v-img
|
||||
:src="menuFormData.imageUrl || '/images/menu-placeholder.png'"
|
||||
:alt="menuFormData.menuName"
|
||||
max-width="200"
|
||||
max-height="150"
|
||||
class="mx-auto mb-3 rounded"
|
||||
/>
|
||||
<v-btn
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
prepend-icon="mdi-camera"
|
||||
@click="selectMenuImage"
|
||||
>
|
||||
이미지 선택
|
||||
</v-btn>
|
||||
<input
|
||||
ref="menuImageInput"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style="display: none;"
|
||||
@change="handleMenuImageUpload"
|
||||
>
|
||||
</div>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="8">
|
||||
<v-text-field
|
||||
v-model="menuFormData.menuName"
|
||||
label="메뉴명 *"
|
||||
variant="outlined"
|
||||
:rules="[v => !!v || '메뉴명을 입력해주세요']"
|
||||
required
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="4">
|
||||
<v-text-field
|
||||
v-model.number="menuFormData.price"
|
||||
label="가격 *"
|
||||
variant="outlined"
|
||||
type="number"
|
||||
prefix="₩"
|
||||
:rules="priceRules"
|
||||
required
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-combobox
|
||||
v-model="menuFormData.category"
|
||||
label="카테고리 *"
|
||||
variant="outlined"
|
||||
:items="categories"
|
||||
:rules="[v => !!v || '카테고리를 선택해주세요']"
|
||||
required
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-switch
|
||||
v-model="menuFormData.available"
|
||||
label="판매 가능"
|
||||
color="primary"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-textarea
|
||||
v-model="menuFormData.description"
|
||||
label="메뉴 설명"
|
||||
variant="outlined"
|
||||
rows="3"
|
||||
counter="200"
|
||||
:rules="[v => !v || v.length <= 200 || '200자 이내로 입력해주세요']"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-text-field
|
||||
v-model="menuFormData.ingredients"
|
||||
label="주요 재료"
|
||||
variant="outlined"
|
||||
hint="쉼표로 구분하여 입력"
|
||||
persistent-hint
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-select
|
||||
v-model="menuFormData.spicyLevel"
|
||||
label="매운맛 정도"
|
||||
variant="outlined"
|
||||
:items="spicyLevels"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-text-field
|
||||
v-model.number="menuFormData.calories"
|
||||
label="칼로리"
|
||||
variant="outlined"
|
||||
type="number"
|
||||
suffix="kcal"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-switch
|
||||
v-model="menuFormData.recommended"
|
||||
label="추천 메뉴"
|
||||
color="primary"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-4">
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
color="grey"
|
||||
variant="text"
|
||||
@click="closeMenuDialog"
|
||||
>
|
||||
취소
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="primary"
|
||||
:loading="saving"
|
||||
:disabled="!menuFormValid"
|
||||
@click="saveMenu"
|
||||
>
|
||||
{{ editMode ? '수정하기' : '등록하기' }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- 삭제 확인 다이얼로그 -->
|
||||
<v-dialog v-model="showDeleteDialog" max-width="400">
|
||||
<v-card>
|
||||
<v-card-title class="text-h6">메뉴 삭제</v-card-title>
|
||||
<v-card-text>
|
||||
<p>정말로 <strong>{{ deleteTarget?.menuName }}</strong> 메뉴를 삭제하시겠습니까?</p>
|
||||
<v-alert type="warning" variant="tonal" class="mt-3">
|
||||
삭제된 메뉴는 복구할 수 없습니다.
|
||||
</v-alert>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
color="grey"
|
||||
variant="text"
|
||||
@click="showDeleteDialog = false"
|
||||
>
|
||||
취소
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="error"
|
||||
:loading="deleting"
|
||||
@click="deleteMenu"
|
||||
>
|
||||
삭제
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- 로딩 오버레이 -->
|
||||
<v-overlay v-if="menuStore.loading" class="align-center justify-center">
|
||||
<v-progress-circular
|
||||
color="primary"
|
||||
indeterminate
|
||||
size="64"
|
||||
/>
|
||||
</v-overlay>
|
||||
|
||||
<!-- 스낵바 -->
|
||||
<v-snackbar
|
||||
v-model="snackbar.show"
|
||||
:color="snackbar.color"
|
||||
:timeout="3000"
|
||||
location="top"
|
||||
>
|
||||
{{ snackbar.message }}
|
||||
</v-snackbar>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { useMenuStore, useAppStore } from '@/store/index'
|
||||
import { formatCurrency } from '@/utils/formatters'
|
||||
|
||||
const menuStore = useMenuStore()
|
||||
const appStore = useAppStore()
|
||||
|
||||
// 반응형 데이터
|
||||
const searchQuery = ref('')
|
||||
const selectedCategory = ref('')
|
||||
const sortBy = ref('name')
|
||||
const showMenuDialog = ref(false)
|
||||
const showDeleteDialog = ref(false)
|
||||
const editMode = ref(false)
|
||||
const menuFormValid = ref(false)
|
||||
const saving = ref(false)
|
||||
const deleting = ref(false)
|
||||
const deleteTarget = ref(null)
|
||||
const menuImageInput = ref(null)
|
||||
|
||||
const snackbar = reactive({
|
||||
show: false,
|
||||
message: '',
|
||||
color: 'success'
|
||||
})
|
||||
|
||||
// 메뉴 폼 데이터
|
||||
const menuFormData = reactive({
|
||||
menuName: '',
|
||||
price: 0,
|
||||
category: '',
|
||||
description: '',
|
||||
ingredients: '',
|
||||
spicyLevel: '보통',
|
||||
calories: 0,
|
||||
available: true,
|
||||
recommended: false,
|
||||
imageUrl: ''
|
||||
})
|
||||
|
||||
// 옵션 데이터
|
||||
const categories = computed(() => {
|
||||
const menuCategories = menuStore.menus.map(menu => menu.category)
|
||||
const defaultCategories = ['면류', '튀김류', '음료', '안주', '디저트']
|
||||
return [...new Set([...defaultCategories, ...menuCategories])]
|
||||
})
|
||||
|
||||
const sortOptions = [
|
||||
{ title: '이름순', value: 'name' },
|
||||
{ title: '가격 낮은순', value: 'price_asc' },
|
||||
{ title: '가격 높은순', value: 'price_desc' },
|
||||
{ title: '추천순', value: 'recommended' }
|
||||
]
|
||||
|
||||
const spicyLevels = ['안매움', '조금매움', '보통', '매움', '아주매움']
|
||||
|
||||
// 유효성 검사 규칙
|
||||
const priceRules = [
|
||||
v => !!v || '가격을 입력해주세요',
|
||||
v => v > 0 || '0원보다 큰 가격을 입력해주세요'
|
||||
]
|
||||
|
||||
// 컴퓨티드 속성
|
||||
const filteredMenus = computed(() => {
|
||||
let filtered = menuStore.menus
|
||||
|
||||
// 검색 필터
|
||||
if (searchQuery.value) {
|
||||
filtered = filtered.filter(menu =>
|
||||
menu.menuName.toLowerCase().includes(searchQuery.value.toLowerCase())
|
||||
)
|
||||
}
|
||||
|
||||
// 카테고리 필터
|
||||
if (selectedCategory.value) {
|
||||
filtered = filtered.filter(menu => menu.category === selectedCategory.value)
|
||||
}
|
||||
|
||||
// 정렬
|
||||
switch (sortBy.value) {
|
||||
case 'name':
|
||||
filtered.sort((a, b) => a.menuName.localeCompare(b.menuName))
|
||||
break
|
||||
case 'price_asc':
|
||||
filtered.sort((a, b) => a.price - b.price)
|
||||
break
|
||||
case 'price_desc':
|
||||
filtered.sort((a, b) => b.price - a.price)
|
||||
break
|
||||
case 'recommended':
|
||||
filtered.sort((a, b) => (b.recommended ? 1 : 0) - (a.recommended ? 1 : 0))
|
||||
break
|
||||
}
|
||||
|
||||
return filtered
|
||||
})
|
||||
|
||||
const availableMenuCount = computed(() =>
|
||||
menuStore.menus.filter(menu => menu.available).length
|
||||
)
|
||||
|
||||
const categoriesCount = computed(() =>
|
||||
new Set(menuStore.menus.map(menu => menu.category)).size
|
||||
)
|
||||
|
||||
const averagePrice = computed(() => {
|
||||
if (menuStore.menus.length === 0) return 0
|
||||
const total = menuStore.menus.reduce((sum, menu) => sum + menu.price, 0)
|
||||
return Math.round(total / menuStore.menus.length)
|
||||
})
|
||||
|
||||
// 메서드
|
||||
const getCategoryColor = (category) => {
|
||||
const colors = {
|
||||
'면류': 'orange',
|
||||
'튀김류': 'red',
|
||||
'음료': 'blue',
|
||||
'안주': 'purple',
|
||||
'디저트': 'pink'
|
||||
}
|
||||
return colors[category] || 'grey'
|
||||
}
|
||||
|
||||
const openCreateDialog = () => {
|
||||
editMode.value = false
|
||||
resetMenuForm()
|
||||
showMenuDialog.value = true
|
||||
}
|
||||
|
||||
const editMenu = (menu) => {
|
||||
editMode.value = true
|
||||
Object.assign(menuFormData, menu)
|
||||
showMenuDialog.value = true
|
||||
}
|
||||
|
||||
const closeMenuDialog = () => {
|
||||
showMenuDialog.value = false
|
||||
resetMenuForm()
|
||||
}
|
||||
|
||||
const resetMenuForm = () => {
|
||||
Object.assign(menuFormData, {
|
||||
menuName: '',
|
||||
price: 0,
|
||||
category: '',
|
||||
description: '',
|
||||
ingredients: '',
|
||||
spicyLevel: '보통',
|
||||
calories: 0,
|
||||
available: true,
|
||||
recommended: false,
|
||||
imageUrl: ''
|
||||
})
|
||||
}
|
||||
|
||||
const selectMenuImage = () => {
|
||||
menuImageInput.value?.click()
|
||||
}
|
||||
|
||||
const handleMenuImageUpload = (event) => {
|
||||
const file = event.target.files[0]
|
||||
if (file) {
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
menuFormData.imageUrl = e.target.result
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
}
|
||||
|
||||
const saveMenu = async () => {
|
||||
if (!menuFormValid.value) return
|
||||
|
||||
try {
|
||||
saving.value = true
|
||||
|
||||
if (editMode.value) {
|
||||
await menuStore.updateMenu(menuFormData.id, menuFormData)
|
||||
snackbar.message = '메뉴가 수정되었습니다'
|
||||
} else {
|
||||
await menuStore.createMenu(menuFormData)
|
||||
snackbar.message = '메뉴가 등록되었습니다'
|
||||
}
|
||||
|
||||
snackbar.color = 'success'
|
||||
snackbar.show = true
|
||||
closeMenuDialog()
|
||||
} catch (error) {
|
||||
snackbar.message = error.response?.data?.message || '저장 중 오류가 발생했습니다'
|
||||
snackbar.color = 'error'
|
||||
snackbar.show = true
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const confirmDelete = (menu) => {
|
||||
deleteTarget.value = menu
|
||||
showDeleteDialog.value = true
|
||||
}
|
||||
|
||||
const deleteMenu = async () => {
|
||||
if (!deleteTarget.value) return
|
||||
|
||||
try {
|
||||
deleting.value = true
|
||||
await menuStore.deleteMenu(deleteTarget.value.id)
|
||||
|
||||
snackbar.message = '메뉴가 삭제되었습니다'
|
||||
snackbar.color = 'success'
|
||||
snackbar.show = true
|
||||
|
||||
showDeleteDialog.value = false
|
||||
deleteTarget.value = null
|
||||
} catch (error) {
|
||||
snackbar.message = error.response?.data?.message || '삭제 중 오류가 발생했습니다'
|
||||
snackbar.color = 'error'
|
||||
snackbar.show = true
|
||||
} finally {
|
||||
deleting.value = false
|
||||
}
|
||||
}
|
||||
|
||||
// 라이프사이클
|
||||
onMounted(async () => {
|
||||
try {
|
||||
await menuStore.fetchMenus()
|
||||
} catch (error) {
|
||||
console.error('메뉴 목록 로드 실패:', error)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.h-100 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.text-h4 {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
696
src/views/StoreManagementView.vue
Normal file
696
src/views/StoreManagementView.vue
Normal file
@ -0,0 +1,696 @@
|
||||
<template>
|
||||
<v-container fluid class="pa-4">
|
||||
<!-- 페이지 헤더 -->
|
||||
<v-row class="mb-4">
|
||||
<v-col cols="12">
|
||||
<div class="d-flex align-center justify-space-between">
|
||||
<div>
|
||||
<h1 class="text-h4 font-weight-bold mb-2">매장 관리</h1>
|
||||
<p class="text-grey">매장 정보를 관리하고 설정을 변경할 수 있습니다</p>
|
||||
</div>
|
||||
<v-btn
|
||||
v-if="!storeStore.hasStoreInfo"
|
||||
color="primary"
|
||||
size="large"
|
||||
prepend-icon="mdi-plus"
|
||||
@click="showCreateDialog = true"
|
||||
>
|
||||
매장 등록
|
||||
</v-btn>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- 매장 정보가 없는 경우 -->
|
||||
<div v-if="!storeStore.hasStoreInfo && !storeStore.loading">
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" md="8">
|
||||
<v-card class="text-center pa-8" elevation="4">
|
||||
<v-img
|
||||
src="/images/store-placeholder.png"
|
||||
max-width="200"
|
||||
class="mx-auto mb-4"
|
||||
/>
|
||||
<h2 class="text-h5 font-weight-bold mb-3">첫 매장을 등록해볼까요?</h2>
|
||||
<p class="text-grey mb-4">
|
||||
매장 정보를 등록하면 AI 마케팅 서비스를 이용할 수 있습니다
|
||||
</p>
|
||||
<v-btn
|
||||
color="primary"
|
||||
size="large"
|
||||
prepend-icon="mdi-store-plus"
|
||||
@click="showCreateDialog = true"
|
||||
>
|
||||
매장 정보 등록하기
|
||||
</v-btn>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
|
||||
<!-- 매장 정보가 있는 경우 -->
|
||||
<div v-else-if="storeStore.hasStoreInfo">
|
||||
<!-- 탭 메뉴 -->
|
||||
<v-row class="mb-4">
|
||||
<v-col cols="12">
|
||||
<v-tabs v-model="currentTab" color="primary">
|
||||
<v-tab value="basic">기본 정보</v-tab>
|
||||
<v-tab value="operation">운영 설정</v-tab>
|
||||
</v-tabs>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-tabs-window v-model="currentTab">
|
||||
<!-- 기본 정보 탭 -->
|
||||
<v-tabs-window-item value="basic">
|
||||
<v-card elevation="2">
|
||||
<v-card-title class="pa-4 d-flex align-center justify-space-between">
|
||||
<div class="d-flex align-center">
|
||||
<v-icon class="mr-2" color="primary">mdi-store</v-icon>
|
||||
매장 기본 정보
|
||||
</div>
|
||||
<v-btn
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
prepend-icon="mdi-pencil"
|
||||
@click="editBasicInfo"
|
||||
>
|
||||
수정
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-card-text class="pa-6">
|
||||
<v-row>
|
||||
<v-col cols="12" md="4">
|
||||
<div class="text-center">
|
||||
<v-avatar size="120" class="mb-4">
|
||||
<v-img
|
||||
:src="storeInfo.imageUrl || '/images/store-placeholder.png'"
|
||||
:alt="storeInfo.storeName"
|
||||
/>
|
||||
</v-avatar>
|
||||
<h3 class="text-h6 font-weight-bold">{{ storeInfo.storeName }}</h3>
|
||||
<p class="text-caption text-grey">{{ storeInfo.businessType }}</p>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="8">
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6">
|
||||
<div class="mb-4">
|
||||
<h4 class="text-subtitle-2 text-grey mb-1">사업자명</h4>
|
||||
<p class="text-body-1">{{ storeInfo.ownerName }}</p>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<div class="mb-4">
|
||||
<h4 class="text-subtitle-2 text-grey mb-1">사업자등록번호</h4>
|
||||
<p class="text-body-1">{{ storeInfo.businessNumber }}</p>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<div class="mb-4">
|
||||
<h4 class="text-subtitle-2 text-grey mb-1">주소</h4>
|
||||
<p class="text-body-1">{{ storeInfo.address }}</p>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<div class="mb-4">
|
||||
<h4 class="text-subtitle-2 text-grey mb-1">연락처</h4>
|
||||
<p class="text-body-1">{{ storeInfo.phoneNumber }}</p>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<div class="mb-4">
|
||||
<h4 class="text-subtitle-2 text-grey mb-1">좌석 수</h4>
|
||||
<p class="text-body-1">{{ storeInfo.seatCount }}석</p>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- SNS 계정 정보 -->
|
||||
<v-divider class="my-6" />
|
||||
|
||||
<h4 class="text-h6 font-weight-bold mb-4">SNS 계정 정보</h4>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6">
|
||||
<div class="d-flex align-center">
|
||||
<v-icon color="purple" class="mr-3">mdi-instagram</v-icon>
|
||||
<div>
|
||||
<p class="text-body-2 text-grey mb-1">Instagram</p>
|
||||
<p class="text-body-1">{{ storeInfo.instagramUrl || '등록되지 않음' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<div class="d-flex align-center">
|
||||
<v-icon color="green" class="mr-3">mdi-blogger</v-icon>
|
||||
<div>
|
||||
<p class="text-body-2 text-grey mb-1">네이버 블로그</p>
|
||||
<p class="text-body-1">{{ storeInfo.blogUrl || '등록되지 않음' }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
|
||||
<!-- 운영 설정 탭 -->
|
||||
<v-tabs-window-item value="operation">
|
||||
<v-card elevation="2">
|
||||
<v-card-title class="pa-4 d-flex align-center justify-space-between">
|
||||
<div class="d-flex align-center">
|
||||
<v-icon class="mr-2" color="primary">mdi-clock</v-icon>
|
||||
운영 설정
|
||||
</div>
|
||||
<v-btn
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
prepend-icon="mdi-pencil"
|
||||
@click="editOperationInfo"
|
||||
>
|
||||
수정
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-card-text class="pa-6">
|
||||
<!-- 영업시간 -->
|
||||
<div class="mb-6">
|
||||
<h4 class="text-h6 font-weight-bold mb-4">영업시간</h4>
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="day in daysOfWeek"
|
||||
:key="day.value"
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
>
|
||||
<div class="d-flex align-center justify-space-between pa-3 bg-grey-lighten-5 rounded">
|
||||
<span class="font-weight-medium">{{ day.text }}</span>
|
||||
<span class="text-body-2">
|
||||
{{ getOperatingHours(day.value) }}
|
||||
</span>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
|
||||
<!-- 휴무일 -->
|
||||
<div class="mb-6">
|
||||
<h4 class="text-h6 font-weight-bold mb-4">휴무일</h4>
|
||||
<v-chip-group>
|
||||
<v-chip
|
||||
v-for="holiday in storeInfo.holidays"
|
||||
:key="holiday"
|
||||
color="error"
|
||||
variant="tonal"
|
||||
>
|
||||
{{ holiday }}
|
||||
</v-chip>
|
||||
<v-chip v-if="!storeInfo.holidays?.length" color="success" variant="tonal">
|
||||
연중무휴
|
||||
</v-chip>
|
||||
</v-chip-group>
|
||||
</div>
|
||||
|
||||
<!-- 기타 설정 -->
|
||||
<div>
|
||||
<h4 class="text-h6 font-weight-bold mb-4">기타 설정</h4>
|
||||
<v-row>
|
||||
<v-col cols="12" sm="6">
|
||||
<div class="mb-4">
|
||||
<h5 class="text-subtitle-2 text-grey mb-1">배달 서비스</h5>
|
||||
<v-chip
|
||||
:color="storeInfo.deliveryAvailable ? 'success' : 'error'"
|
||||
variant="tonal"
|
||||
>
|
||||
{{ storeInfo.deliveryAvailable ? '이용 가능' : '이용 불가' }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<div class="mb-4">
|
||||
<h5 class="text-subtitle-2 text-grey mb-1">포장 서비스</h5>
|
||||
<v-chip
|
||||
:color="storeInfo.takeoutAvailable ? 'success' : 'error'"
|
||||
variant="tonal"
|
||||
>
|
||||
{{ storeInfo.takeoutAvailable ? '이용 가능' : '이용 불가' }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tabs-window-item>
|
||||
</v-tabs-window>
|
||||
</div>
|
||||
|
||||
<!-- 매장 등록/수정 다이얼로그 -->
|
||||
<v-dialog
|
||||
v-model="showCreateDialog"
|
||||
max-width="800"
|
||||
persistent
|
||||
scrollable
|
||||
>
|
||||
<v-card>
|
||||
<v-card-title class="pa-4">
|
||||
<span class="text-h6">{{ editMode ? '매장 정보 수정' : '매장 정보 등록' }}</span>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
icon
|
||||
@click="closeDialog"
|
||||
>
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-card-text class="pa-6" style="max-height: 500px;">
|
||||
<v-form ref="storeForm" v-model="formValid">
|
||||
<v-row>
|
||||
<!-- 매장 이미지 -->
|
||||
<v-col cols="12">
|
||||
<h4 class="text-subtitle-1 font-weight-bold mb-3">매장 이미지</h4>
|
||||
<div class="text-center mb-4">
|
||||
<v-avatar size="120" class="mb-3">
|
||||
<v-img
|
||||
:src="formData.imageUrl || '/images/store-placeholder.png'"
|
||||
alt="매장 이미지"
|
||||
/>
|
||||
</v-avatar>
|
||||
<br>
|
||||
<v-btn
|
||||
color="primary"
|
||||
variant="outlined"
|
||||
prepend-icon="mdi-camera"
|
||||
@click="selectImage"
|
||||
>
|
||||
이미지 선택
|
||||
</v-btn>
|
||||
<input
|
||||
ref="imageInput"
|
||||
type="file"
|
||||
accept="image/*"
|
||||
style="display: none;"
|
||||
@change="handleImageUpload"
|
||||
>
|
||||
</div>
|
||||
</v-col>
|
||||
|
||||
<!-- 기본 정보 -->
|
||||
<v-col cols="12" sm="6">
|
||||
<v-text-field
|
||||
v-model="formData.storeName"
|
||||
label="매장명 *"
|
||||
variant="outlined"
|
||||
:rules="[v => !!v || '매장명을 입력해주세요']"
|
||||
required
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-select
|
||||
v-model="formData.businessType"
|
||||
label="업종 *"
|
||||
variant="outlined"
|
||||
:items="businessTypes"
|
||||
:rules="[v => !!v || '업종을 선택해주세요']"
|
||||
required
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-text-field
|
||||
v-model="formData.ownerName"
|
||||
label="사업자명 *"
|
||||
variant="outlined"
|
||||
:rules="[v => !!v || '사업자명을 입력해주세요']"
|
||||
required
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-text-field
|
||||
v-model="formData.businessNumber"
|
||||
label="사업자등록번호 *"
|
||||
variant="outlined"
|
||||
:rules="businessNumberRules"
|
||||
required
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
v-model="formData.address"
|
||||
label="주소 *"
|
||||
variant="outlined"
|
||||
:rules="[v => !!v || '주소를 입력해주세요']"
|
||||
required
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-text-field
|
||||
v-model="formData.phoneNumber"
|
||||
label="연락처 *"
|
||||
variant="outlined"
|
||||
:rules="phoneRules"
|
||||
required
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-text-field
|
||||
v-model.number="formData.seatCount"
|
||||
label="좌석 수"
|
||||
variant="outlined"
|
||||
type="number"
|
||||
min="0"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<!-- SNS 정보 -->
|
||||
<v-col cols="12">
|
||||
<h4 class="text-subtitle-1 font-weight-bold mb-3">SNS 계정 정보</h4>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-text-field
|
||||
v-model="formData.instagramUrl"
|
||||
label="Instagram URL"
|
||||
variant="outlined"
|
||||
prepend-inner-icon="mdi-instagram"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-text-field
|
||||
v-model="formData.blogUrl"
|
||||
label="네이버 블로그 URL"
|
||||
variant="outlined"
|
||||
prepend-inner-icon="mdi-blogger"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<!-- 운영 설정 -->
|
||||
<v-col cols="12">
|
||||
<h4 class="text-subtitle-1 font-weight-bold mb-3">운영 설정</h4>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-text-field
|
||||
v-model="formData.openTime"
|
||||
label="오픈 시간"
|
||||
variant="outlined"
|
||||
type="time"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-text-field
|
||||
v-model="formData.closeTime"
|
||||
label="마감 시간"
|
||||
variant="outlined"
|
||||
type="time"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12">
|
||||
<v-select
|
||||
v-model="formData.holidays"
|
||||
label="휴무일"
|
||||
variant="outlined"
|
||||
:items="daysOfWeek"
|
||||
multiple
|
||||
chips
|
||||
closable-chips
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-switch
|
||||
v-model="formData.deliveryAvailable"
|
||||
label="배달 서비스 이용 가능"
|
||||
color="primary"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" sm="6">
|
||||
<v-switch
|
||||
v-model="formData.takeoutAvailable"
|
||||
label="포장 서비스 이용 가능"
|
||||
color="primary"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
|
||||
<v-divider />
|
||||
|
||||
<v-card-actions class="pa-4">
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
color="grey"
|
||||
variant="text"
|
||||
@click="closeDialog"
|
||||
>
|
||||
취소
|
||||
</v-btn>
|
||||
<v-btn
|
||||
color="primary"
|
||||
:loading="saving"
|
||||
:disabled="!formValid"
|
||||
@click="saveStore"
|
||||
>
|
||||
{{ editMode ? '수정하기' : '등록하기' }}
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- 로딩 오버레이 -->
|
||||
<v-overlay v-if="storeStore.loading" class="align-center justify-center">
|
||||
<v-progress-circular
|
||||
color="primary"
|
||||
indeterminate
|
||||
size="64"
|
||||
/>
|
||||
</v-overlay>
|
||||
|
||||
<!-- 스낵바 -->
|
||||
<v-snackbar
|
||||
v-model="snackbar.show"
|
||||
:color="snackbar.color"
|
||||
:timeout="3000"
|
||||
location="top"
|
||||
>
|
||||
{{ snackbar.message }}
|
||||
</v-snackbar>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue'
|
||||
import { useStoreStore, useAppStore } from '@/store/index'
|
||||
|
||||
const storeStore = useStoreStore()
|
||||
const appStore = useAppStore()
|
||||
|
||||
// 반응형 데이터
|
||||
const currentTab = ref('basic')
|
||||
const showCreateDialog = ref(false)
|
||||
const editMode = ref(false)
|
||||
const formValid = ref(false)
|
||||
const saving = ref(false)
|
||||
const imageInput = ref(null)
|
||||
|
||||
const snackbar = reactive({
|
||||
show: false,
|
||||
message: '',
|
||||
color: 'success'
|
||||
})
|
||||
|
||||
// 폼 데이터
|
||||
const formData = reactive({
|
||||
storeName: '',
|
||||
businessType: '',
|
||||
ownerName: '',
|
||||
businessNumber: '',
|
||||
address: '',
|
||||
phoneNumber: '',
|
||||
seatCount: 0,
|
||||
instagramUrl: '',
|
||||
blogUrl: '',
|
||||
openTime: '09:00',
|
||||
closeTime: '21:00',
|
||||
holidays: [],
|
||||
deliveryAvailable: false,
|
||||
takeoutAvailable: true,
|
||||
imageUrl: ''
|
||||
})
|
||||
|
||||
// 컴퓨티드 속성
|
||||
const storeInfo = computed(() => storeStore.storeInfo || {})
|
||||
|
||||
// 옵션 데이터
|
||||
const businessTypes = [
|
||||
'한식',
|
||||
'중식',
|
||||
'일식',
|
||||
'양식',
|
||||
'분식',
|
||||
'치킨',
|
||||
'피자',
|
||||
'카페',
|
||||
'베이커리',
|
||||
'기타'
|
||||
]
|
||||
|
||||
const daysOfWeek = [
|
||||
{ text: '월요일', value: 'monday' },
|
||||
{ text: '화요일', value: 'tuesday' },
|
||||
{ text: '수요일', value: 'wednesday' },
|
||||
{ text: '목요일', value: 'thursday' },
|
||||
{ text: '금요일', value: 'friday' },
|
||||
{ text: '토요일', value: 'saturday' },
|
||||
{ text: '일요일', value: 'sunday' }
|
||||
]
|
||||
|
||||
// 유효성 검사 규칙
|
||||
const businessNumberRules = [
|
||||
v => !!v || '사업자등록번호를 입력해주세요',
|
||||
v => /^\d{3}-\d{2}-\d{5}$/.test(v) || '올바른 사업자등록번호 형식이 아닙니다 (예: 123-45-67890)'
|
||||
]
|
||||
|
||||
const phoneRules = [
|
||||
v => !!v || '연락처를 입력해주세요',
|
||||
v => /^[\d-+().\s]+$/.test(v) || '올바른 전화번호 형식이 아닙니다'
|
||||
]
|
||||
|
||||
// 메서드
|
||||
const editBasicInfo = () => {
|
||||
editMode.value = true
|
||||
Object.assign(formData, storeInfo.value)
|
||||
showCreateDialog.value = true
|
||||
}
|
||||
|
||||
const editOperationInfo = () => {
|
||||
editMode.value = true
|
||||
Object.assign(formData, storeInfo.value)
|
||||
currentTab.value = 'operation'
|
||||
showCreateDialog.value = true
|
||||
}
|
||||
|
||||
const closeDialog = () => {
|
||||
showCreateDialog.value = false
|
||||
editMode.value = false
|
||||
resetForm()
|
||||
}
|
||||
|
||||
const resetForm = () => {
|
||||
Object.assign(formData, {
|
||||
storeName: '',
|
||||
businessType: '',
|
||||
ownerName: '',
|
||||
businessNumber: '',
|
||||
address: '',
|
||||
phoneNumber: '',
|
||||
seatCount: 0,
|
||||
instagramUrl: '',
|
||||
blogUrl: '',
|
||||
openTime: '09:00',
|
||||
closeTime: '21:00',
|
||||
holidays: [],
|
||||
deliveryAvailable: false,
|
||||
takeoutAvailable: true,
|
||||
imageUrl: ''
|
||||
})
|
||||
}
|
||||
|
||||
const selectImage = () => {
|
||||
imageInput.value?.click()
|
||||
}
|
||||
|
||||
const handleImageUpload = (event) => {
|
||||
const file = event.target.files[0]
|
||||
if (file) {
|
||||
const reader = new FileReader()
|
||||
reader.onload = (e) => {
|
||||
formData.imageUrl = e.target.result
|
||||
}
|
||||
reader.readAsDataURL(file)
|
||||
}
|
||||
}
|
||||
|
||||
const saveStore = async () => {
|
||||
if (!formValid.value) return
|
||||
|
||||
try {
|
||||
saving.value = true
|
||||
|
||||
if (editMode.value) {
|
||||
await storeStore.updateStoreInfo(formData)
|
||||
snackbar.message = '매장 정보가 수정되었습니다'
|
||||
} else {
|
||||
await storeStore.createStoreInfo(formData)
|
||||
snackbar.message = '매장 정보가 등록되었습니다'
|
||||
}
|
||||
|
||||
snackbar.color = 'success'
|
||||
snackbar.show = true
|
||||
closeDialog()
|
||||
} catch (error) {
|
||||
snackbar.message = error.response?.data?.message || '저장 중 오류가 발생했습니다'
|
||||
snackbar.color = 'error'
|
||||
snackbar.show = true
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const getOperatingHours = (day) => {
|
||||
if (storeInfo.value.holidays?.includes(day)) {
|
||||
return '휴무'
|
||||
}
|
||||
return `${storeInfo.value.openTime || '09:00'} - ${storeInfo.value.closeTime || '21:00'}`
|
||||
}
|
||||
|
||||
// 라이프사이클
|
||||
onMounted(async () => {
|
||||
try {
|
||||
await storeStore.fetchStoreInfo()
|
||||
} catch (error) {
|
||||
console.error('매장 정보 로드 실패:', error)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.bg-grey-lighten-5 {
|
||||
background-color: #fafafa !important;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.text-h4 {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user