release
This commit is contained in:
SeoJHeasdw
parent
e0a23ed6d2
commit
d03895c81b
32
src/App.vue
32
src/App.vue
@ -54,12 +54,10 @@
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<!-- 알림 버튼 -->
|
||||
<v-btn icon color="white" @click="showNotifications = true">
|
||||
<v-badge v-if="notificationCount > 0" :content="notificationCount" color="error">
|
||||
<v-icon>mdi-bell</v-icon>
|
||||
</v-badge>
|
||||
<v-icon v-else>mdi-bell</v-icon>
|
||||
<!-- 종모양 알림 제거하고 로그아웃 버튼으로 대체 -->
|
||||
<v-btn icon color="white" @click="logout">
|
||||
<v-icon>mdi-logout</v-icon>
|
||||
<v-tooltip activator="parent" location="bottom">로그아웃</v-tooltip>
|
||||
</v-btn>
|
||||
</v-app-bar>
|
||||
|
||||
@ -68,25 +66,6 @@
|
||||
<router-view />
|
||||
</v-main>
|
||||
|
||||
<!-- 알림 다이얼로그 -->
|
||||
<v-dialog v-model="showNotifications" max-width="500">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="text-h6">알림</span>
|
||||
<v-spacer />
|
||||
<v-btn icon variant="text" @click="showNotifications = false">
|
||||
<v-icon>mdi-close</v-icon>
|
||||
</v-btn>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<div v-if="notifications.length === 0" class="text-center pa-4">
|
||||
<v-icon size="48" color="grey-lighten-2">mdi-bell-off</v-icon>
|
||||
<p class="text-grey mt-2">새로운 알림이 없습니다</p>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<!-- 글로벌 스낵바 -->
|
||||
<v-snackbar
|
||||
v-model="snackbar.show"
|
||||
@ -115,15 +94,12 @@ const appStore = useAppStore()
|
||||
|
||||
// 반응형 데이터
|
||||
const drawer = ref(false)
|
||||
const showNotifications = ref(false)
|
||||
const loading = ref(false)
|
||||
|
||||
// 컴퓨티드 속성
|
||||
const isAuthenticated = computed(() => authStore.isAuthenticated)
|
||||
const isLoginPage = computed(() => route.name === 'Login')
|
||||
const userStore = computed(() => authStore)
|
||||
const notificationCount = computed(() => appStore.notificationCount || 0)
|
||||
const notifications = computed(() => appStore.notifications || [])
|
||||
const snackbar = computed(() => appStore.snackbar)
|
||||
|
||||
// 현재 페이지 제목
|
||||
|
||||
@ -314,14 +314,7 @@
|
||||
{{ useAI ? 'AI 콘텐츠 생성' : '콘텐츠 저장' }}
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
variant="outlined"
|
||||
block
|
||||
@click="saveDraft"
|
||||
:disabled="!formData.title"
|
||||
>
|
||||
임시저장
|
||||
</v-btn>
|
||||
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,23 @@
|
||||
//* src/views/DashboardView.vue
|
||||
<template>
|
||||
<v-container fluid class="pa-4">
|
||||
<!-- 주요 지표 카드 - 새로운 스타일 적용 (3개 카드) -->
|
||||
<div>
|
||||
<!-- 상단 AppBar - 로그아웃 버튼을 알림 위치로 이동 -->
|
||||
<v-app-bar color="primary" dark app>
|
||||
<v-app-bar-nav-icon @click="drawer = !drawer"></v-app-bar-nav-icon>
|
||||
|
||||
<v-spacer></v-spacer>
|
||||
|
||||
<!-- 알림 자리에 로그아웃 버튼 배치 (알림 기능 삭제) -->
|
||||
<v-btn icon @click="handleLogout">
|
||||
<v-icon>mdi-logout</v-icon>
|
||||
<v-tooltip activator="parent" location="bottom">로그아웃</v-tooltip>
|
||||
</v-btn>
|
||||
</v-app-bar>
|
||||
|
||||
|
||||
<!-- 메인 컨텐츠 -->
|
||||
<v-container fluid class="pa-4" style="margin-top: 80px;">
|
||||
<!-- 주요 지표 카드 - 제목과 증감율 위치 변경 -->
|
||||
<v-row class="mb-6">
|
||||
<v-col
|
||||
v-for="(metric, index) in dashboardMetrics"
|
||||
@ -17,11 +33,18 @@
|
||||
border
|
||||
>
|
||||
<v-card-text class="pa-6">
|
||||
<!-- 카드 헤더 -->
|
||||
<div class="d-flex align-center justify-between mb-3">
|
||||
<!-- 제목 먼저 표시 -->
|
||||
<div class="d-flex align-center justify-between mb-2">
|
||||
<h4 class="metric-title text-subtitle-1 font-weight-bold">
|
||||
{{ metric.title }}
|
||||
</h4>
|
||||
<div class="metric-icon-wrapper" :class="`bg-${metric.color}`">
|
||||
<v-icon :icon="metric.icon" size="24" :color="`${metric.color}-darken-2`" />
|
||||
<v-icon :icon="metric.icon" size="20" :color="`${metric.color}-darken-2`" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 증감율 두 번째로 표시 -->
|
||||
<div class="mb-3">
|
||||
<v-chip
|
||||
:color="
|
||||
metric.trend === 'up' ? 'success' : metric.trend === 'down' ? 'error' : 'warning'
|
||||
@ -43,7 +66,7 @@
|
||||
</v-chip>
|
||||
</div>
|
||||
|
||||
<!-- 메트릭 값 - 애니메이션 적용 -->
|
||||
<!-- 메트릭 값 세 번째로 표시 -->
|
||||
<div class="metric-value-wrapper mb-2">
|
||||
<span
|
||||
class="metric-value text-h4 font-weight-bold"
|
||||
@ -54,13 +77,8 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- 메트릭 제목 -->
|
||||
<p class="metric-title text-body-2 text-grey-darken-1 mb-0 font-weight-medium">
|
||||
{{ metric.title }}
|
||||
</p>
|
||||
|
||||
<!-- 추가 정보 -->
|
||||
<div class="metric-detail mt-2">
|
||||
<!-- 추가 정보 마지막에 표시 -->
|
||||
<div class="metric-detail">
|
||||
<span class="text-caption text-grey">
|
||||
{{ metric.detail || '전월 대비' }}
|
||||
</span>
|
||||
@ -70,19 +88,19 @@
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<!-- 매출 추이 분석 차트 -->
|
||||
<!-- 매출 추이 분석 차트 - 명확한 임시 데이터로 구성 -->
|
||||
<v-row class="mb-6">
|
||||
<v-col cols="12" lg="8">
|
||||
<v-card elevation="0" border class="chart-card h-100">
|
||||
<v-card-title class="pa-6 pb-0">
|
||||
<div class="d-flex align-center justify-between w-100">
|
||||
<div>
|
||||
<h3 class="text-h6 font-weight-bold mb-1">매출 추이 분석</h3>
|
||||
<h3 class="text-h6 font-weight-bold mb-1">📊 매출 추이 분석</h3>
|
||||
<p class="text-body-2 text-grey-darken-1 mb-0">
|
||||
최근 {{ chartPeriod.replace('d', '일') }}간 매출 현황
|
||||
최근 {{ getCurrentPeriodLabel() }}간 매출 현황
|
||||
</p>
|
||||
</div>
|
||||
<v-btn-toggle
|
||||
<v-btn-toggle class="d-flex align-center justify-end w-100"
|
||||
v-model="chartPeriod"
|
||||
variant="outlined"
|
||||
density="compact"
|
||||
@ -98,25 +116,114 @@
|
||||
</v-card-title>
|
||||
<v-card-text class="pa-6">
|
||||
<div class="sales-chart-container">
|
||||
<!-- Chart.js 차트가 들어갈 영역 -->
|
||||
<canvas id="salesChart" class="sales-chart" style="height: 300px"></canvas>
|
||||
<!-- 실제 같은 차트 구현 -->
|
||||
<div class="real-chart">
|
||||
<!-- 차트 헤더 정보 -->
|
||||
<div class="chart-header-info mb-4">
|
||||
<div class="d-flex justify-between align-center">
|
||||
|
||||
<!-- Chart.js 없을 때 표시될 플레이스홀더 -->
|
||||
<div v-if="!chartInitialized" class="chart-placeholder">
|
||||
<v-icon size="64" color="grey-lighten-2">mdi-chart-line</v-icon>
|
||||
<p class="text-grey mt-2 mb-1">매출 추이 차트</p>
|
||||
<p class="text-caption text-grey">Chart.js를 설치하면 실제 차트가 표시됩니다</p>
|
||||
|
||||
<!-- 간단한 가짜 차트 -->
|
||||
<div class="fake-chart mt-4">
|
||||
<div class="fake-chart-bars">
|
||||
<div v-for="(value, i) in fakeChartData" :key="i" class="fake-bar">
|
||||
<div class="fake-bar-fill" :style="{ height: `${value}%` }"></div>
|
||||
<span class="fake-bar-label">{{ i + 1 }}일</span>
|
||||
<div class="chart-legend d-flex">
|
||||
<div class="legend-item mr-4">
|
||||
<span class="legend-dot" style="background: #1976D2;"></span>
|
||||
<span class="text-caption">실제 매출</span>
|
||||
</div>
|
||||
<div class="legend-item">
|
||||
<span class="legend-dot" style="background: #FF5722;"></span>
|
||||
<span class="text-caption">목표 매출</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 차트 영역 -->
|
||||
<div class="chart-area" style="height: 300px; position: relative;">
|
||||
<!-- Y축 라벨 -->
|
||||
<div class="y-axis-labels">
|
||||
<div v-for="(label, i) in yAxisLabels" :key="i"
|
||||
class="y-label"
|
||||
:style="{ bottom: `${i * 20}%` }">
|
||||
{{ label }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 그리드 -->
|
||||
<div class="chart-grid">
|
||||
<div v-for="i in 6" :key="i"
|
||||
class="grid-line"
|
||||
:style="{ bottom: `${(i-1) * 20}%` }"></div>
|
||||
</div>
|
||||
|
||||
<!-- 실제 라인 차트 (Canvas 활용) -->
|
||||
<canvas
|
||||
ref="chartCanvas"
|
||||
class="chart-canvas"
|
||||
width="800"
|
||||
height="300"
|
||||
@mousemove="handleMouseMove"
|
||||
@mouseleave="hideTooltip">
|
||||
</canvas>
|
||||
|
||||
<!-- 데이터 포인트 -->
|
||||
<div class="data-points">
|
||||
<div
|
||||
v-for="(point, i) in chartDataPoints"
|
||||
:key="i"
|
||||
class="data-point"
|
||||
:style="{
|
||||
left: `${point.x}%`,
|
||||
bottom: `${point.y}%`
|
||||
}"
|
||||
@mouseenter="showDataTooltip(i, $event)"
|
||||
@mouseleave="hideDataTooltip">
|
||||
<div class="point-circle sales-point"></div>
|
||||
<div class="point-circle target-point"
|
||||
:style="{ bottom: `${point.targetY - point.y}%` }"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 툴팁 -->
|
||||
<div v-if="tooltip.show"
|
||||
class="chart-tooltip"
|
||||
:style="{ left: tooltip.x + 'px', top: tooltip.y + 'px' }">
|
||||
<div class="tooltip-content">
|
||||
<div class="tooltip-title">{{ tooltip.title }}</div>
|
||||
<div class="tooltip-sales">매출: {{ formatCurrency(tooltip.sales) }}</div>
|
||||
<div class="tooltip-target">목표: {{ formatCurrency(tooltip.target) }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- X축 라벨 -->
|
||||
<div class="x-axis-labels mt-3">
|
||||
<div class="d-flex justify-between px-8">
|
||||
<span v-for="item in currentChartData" :key="item.label"
|
||||
class="x-label text-caption">
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 차트 통계 정보 -->
|
||||
<div class="chart-stats mt-4 pa-3" style="background: #F5F5F5; border-radius: 8px;">
|
||||
<v-row>
|
||||
<v-col cols="4" class="text-center">
|
||||
<div class="text-caption text-grey-darken-1">평균 매출</div>
|
||||
<div class="text-subtitle-2 font-weight-bold text-primary">{{ avgSales }}</div>
|
||||
</v-col>
|
||||
<v-col cols="4" class="text-center">
|
||||
<div class="text-caption text-grey-darken-1">최고 매출</div>
|
||||
<div class="text-subtitle-2 font-weight-bold text-success">{{ maxSales }}</div>
|
||||
</v-col>
|
||||
<v-col cols="4" class="text-center">
|
||||
<div class="text-caption text-grey-darken-1">목표 달성률</div>
|
||||
<div class="text-subtitle-2 font-weight-bold"
|
||||
:class="achievementRate >= 100 ? 'text-success' : 'text-warning'">
|
||||
{{ achievementRate }}%
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
@ -163,28 +270,35 @@
|
||||
</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>
|
||||
|
||||
<!-- 로그아웃 확인 다이얼로그 -->
|
||||
<v-dialog v-model="logoutDialog" max-width="400">
|
||||
<v-card>
|
||||
<v-card-title class="text-h6">로그아웃 확인</v-card-title>
|
||||
<v-card-text>정말 로그아웃 하시겠습니까?</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="grey" variant="text" @click="logoutDialog = false">취소</v-btn>
|
||||
<v-btn color="error" variant="text" @click="confirmLogout">로그아웃</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { ref, onMounted, onBeforeUnmount, computed, nextTick } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { useAuthStore } from '@/store/auth'
|
||||
import { useAppStore } from '@/store/app'
|
||||
import { formatCurrency, formatNumber, formatRelativeTime } from '@/utils/formatters'
|
||||
|
||||
/**
|
||||
* 대시보드 메인 페이지 - 수정된 버전
|
||||
* - 새로운 카드 스타일 적용
|
||||
* - 숫자 증가 애니메이션 추가
|
||||
* - 빠른 액션 제거
|
||||
* - 매출 추이 분석 차트 추가
|
||||
* - 최근 활동 제거
|
||||
* 대시보드 메인 페이지 - 완전 수정된 버전
|
||||
* - AppBar에서 알림 자리에 로그아웃 버튼 배치 (알림 기능 삭제)
|
||||
* - 카드에서 제목과 증감율 위치 변경
|
||||
* - 매출 추이 분석에 실제같은 차트와 명확한 임시 데이터 적용
|
||||
*/
|
||||
|
||||
const router = useRouter()
|
||||
@ -192,56 +306,92 @@ const authStore = useAuthStore()
|
||||
const appStore = useAppStore()
|
||||
|
||||
// 반응형 데이터
|
||||
const drawer = ref(false)
|
||||
const loading = ref(false)
|
||||
const aiLoading = ref(false)
|
||||
const chartInitialized = ref(false)
|
||||
const chartPeriod = ref('7d')
|
||||
const animatedValues = ref({})
|
||||
const logoutDialog = ref(false)
|
||||
const chartCanvas = ref(null)
|
||||
const currentTime = ref('')
|
||||
|
||||
// 비즈니스 정보
|
||||
const businessName = ref('김사장님의 분식점')
|
||||
// 툴팁 관련
|
||||
const tooltip = ref({
|
||||
show: false,
|
||||
x: 0,
|
||||
y: 0,
|
||||
title: '',
|
||||
sales: 0,
|
||||
target: 0
|
||||
})
|
||||
|
||||
// 대시보드 지표 - 새로운 스타일 적용 (AI 추천 활용 카드 제거)
|
||||
// 대시보드 지표 - 제목과 증감율 위치 변경
|
||||
const dashboardMetrics = ref([
|
||||
{
|
||||
title: '오늘의 매출',
|
||||
value: 123000,
|
||||
displayValue: '₩123,000',
|
||||
change: '+15%',
|
||||
value: 567000,
|
||||
displayValue: '₩567,000',
|
||||
change: '전일 대비 +15%',
|
||||
trend: 'up',
|
||||
icon: 'mdi-cash-multiple',
|
||||
color: 'success',
|
||||
detail: '목표 달성률: 85%',
|
||||
color: 'success'
|
||||
},
|
||||
{
|
||||
title: '이번 달 매출',
|
||||
value: 2450000,
|
||||
displayValue: '₩2,450,000',
|
||||
change: '+8%',
|
||||
value: 12450000,
|
||||
displayValue: '₩12,450,000',
|
||||
change: '전월 대비 +8%',
|
||||
trend: 'up',
|
||||
icon: 'mdi-trending-up',
|
||||
color: 'primary',
|
||||
detail: '목표까지 ₩450,000',
|
||||
color: 'primary'
|
||||
},
|
||||
{
|
||||
title: '일일 조회수',
|
||||
value: 1234,
|
||||
displayValue: '1,234',
|
||||
change: '+23%',
|
||||
value: 2547,
|
||||
displayValue: '2,547',
|
||||
change: '전일 대비 +23%',
|
||||
trend: 'up',
|
||||
icon: 'mdi-eye',
|
||||
color: 'warning',
|
||||
detail: '참여율: 4.2%',
|
||||
color: 'warning'
|
||||
},
|
||||
])
|
||||
|
||||
// AI 추천 (간소화)
|
||||
// 실제 차트 데이터 (더 구체적이고 현실적인 데이터)
|
||||
const chartData = ref({
|
||||
'7d': [
|
||||
{ label: '6일전', sales: 45, target: 50, date: '06-04' },
|
||||
{ label: '5일전', sales: 52, target: 50, date: '06-05' },
|
||||
{ label: '4일전', sales: 38, target: 50, date: '06-06' },
|
||||
{ label: '3일전', sales: 65, target: 50, date: '06-07' },
|
||||
{ label: '2일전', sales: 48, target: 50, date: '06-08' },
|
||||
{ label: '어제', sales: 72, target: 50, date: '06-09' },
|
||||
{ label: '오늘', sales: 57, target: 50, date: '06-10' },
|
||||
],
|
||||
'30d': [
|
||||
{ label: '1주차', sales: 320, target: 350, date: '5/13-19' },
|
||||
{ label: '2주차', sales: 385, target: 350, date: '5/20-26' },
|
||||
{ label: '3주차', sales: 425, target: 350, date: '5/27-6/2' },
|
||||
{ label: '4주차', sales: 468, target: 350, date: '6/3-9' },
|
||||
{ label: '이번주', sales: 380, target: 350, date: '6/10-16' },
|
||||
],
|
||||
'90d': [
|
||||
{ label: '3월', sales: 1250, target: 1400, date: '2024-03' },
|
||||
{ label: '4월', sales: 1380, target: 1400, date: '2024-04' },
|
||||
{ label: '5월', sales: 1520, target: 1400, date: '2024-05' },
|
||||
{ label: '6월', sales: 1450, target: 1400, date: '2024-06' },
|
||||
],
|
||||
})
|
||||
|
||||
// Y축 라벨
|
||||
const yAxisLabels = ref(['0', '25', '50', '75', '100'])
|
||||
|
||||
// AI 추천
|
||||
const aiRecommendations = ref([
|
||||
{
|
||||
type: 'info',
|
||||
icon: 'mdi-weather-rainy',
|
||||
icon: 'mdi-weather-sunny',
|
||||
title: '날씨 기반 추천',
|
||||
content: '오늘은 비가 와서 따뜻한 음식이 인기 있을 것 같아요.',
|
||||
content: '오늘은 맑은 날씨로 야외 테이크아웃 주문이 증가할 예정입니다.',
|
||||
},
|
||||
{
|
||||
type: 'success',
|
||||
@ -253,12 +403,71 @@ const aiRecommendations = ref([
|
||||
type: 'warning',
|
||||
icon: 'mdi-clock-outline',
|
||||
title: '시간대 팁',
|
||||
content: '점심시간(12-14시)에 주문이 집중됩니다.',
|
||||
content: '점심시간(12-14시) 주문 집중. 미리 재료를 준비하세요.',
|
||||
},
|
||||
])
|
||||
|
||||
// 가짜 차트 데이터 (Chart.js 없을 때 표시용)
|
||||
const fakeChartData = ref([65, 78, 82, 45, 90, 67, 88])
|
||||
// 계산된 속성들
|
||||
const currentChartData = computed(() => chartData.value[chartPeriod.value])
|
||||
|
||||
const chartDataPoints = computed(() => {
|
||||
const data = currentChartData.value
|
||||
const maxSales = Math.max(...data.map(d => Math.max(d.sales, d.target)))
|
||||
|
||||
return data.map((item, index) => ({
|
||||
x: 10 + (index * 80 / (data.length - 1)), // 10%에서 90%까지 분산
|
||||
y: 10 + ((item.sales / maxSales) * 80), // 10%에서 90%까지 높이
|
||||
targetY: 10 + ((item.target / maxSales) * 80),
|
||||
sales: item.sales,
|
||||
target: item.target,
|
||||
label: item.label
|
||||
}))
|
||||
})
|
||||
|
||||
const avgSales = computed(() => {
|
||||
const data = currentChartData.value
|
||||
const avg = data.reduce((sum, item) => sum + item.sales, 0) / data.length
|
||||
const unit = chartPeriod.value === '90d' ? 100 : chartPeriod.value === '30d' ? 10 : 1
|
||||
return formatCurrency(avg * unit * 10000)
|
||||
})
|
||||
|
||||
const maxSales = computed(() => {
|
||||
const data = currentChartData.value
|
||||
const max = Math.max(...data.map(d => d.sales))
|
||||
const unit = chartPeriod.value === '90d' ? 100 : chartPeriod.value === '30d' ? 10 : 1
|
||||
return formatCurrency(max * unit * 10000)
|
||||
})
|
||||
|
||||
const achievementRate = computed(() => {
|
||||
const data = currentChartData.value
|
||||
const totalSales = data.reduce((sum, item) => sum + item.sales, 0)
|
||||
const totalTarget = data.reduce((sum, item) => sum + item.target, 0)
|
||||
return Math.round((totalSales / totalTarget) * 100)
|
||||
})
|
||||
|
||||
// 현재 기간 라벨
|
||||
const getCurrentPeriodLabel = () => {
|
||||
switch (chartPeriod.value) {
|
||||
case '7d': return '7일'
|
||||
case '30d': return '30일'
|
||||
case '90d': return '90일'
|
||||
default: return '7일'
|
||||
}
|
||||
}
|
||||
|
||||
// 시간 업데이트
|
||||
const updateTime = () => {
|
||||
const now = new Date()
|
||||
const options = {
|
||||
year: 'numeric',
|
||||
month: '2-digit',
|
||||
day: '2-digit',
|
||||
weekday: 'short',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
}
|
||||
currentTime.value = now.toLocaleString('ko-KR', options)
|
||||
}
|
||||
|
||||
// 숫자 애니메이션 함수
|
||||
const animateNumber = (targetValue, index, duration = 2000) => {
|
||||
@ -301,84 +510,118 @@ const startMetricsAnimation = () => {
|
||||
})
|
||||
}
|
||||
|
||||
// 차트 업데이트
|
||||
const updateChart = (period) => {
|
||||
console.log('차트 기간 변경:', period)
|
||||
// Chart.js 구현 시 여기에 차트 업데이트 로직 추가
|
||||
}
|
||||
// 차트 그리기
|
||||
const drawChart = async () => {
|
||||
await nextTick()
|
||||
|
||||
// Chart.js 초기화 (설치 후 사용)
|
||||
/*
|
||||
const initSalesChart = () => {
|
||||
const ctx = document.getElementById('salesChart')
|
||||
if (ctx && window.Chart) {
|
||||
chartInitialized.value = true
|
||||
if (!chartCanvas.value) return
|
||||
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['6일전', '5일전', '4일전', '3일전', '2일전', '어제', '오늘'],
|
||||
datasets: [{
|
||||
label: '매출액',
|
||||
data: [390000, 425000, 520000, 380000, 450000, 520000, 567000],
|
||||
borderColor: '#1976D2',
|
||||
backgroundColor: 'rgba(25, 118, 210, 0.1)',
|
||||
tension: 0.4,
|
||||
fill: true,
|
||||
pointBackgroundColor: '#1976D2',
|
||||
pointBorderColor: '#ffffff',
|
||||
pointBorderWidth: 2,
|
||||
pointRadius: 6,
|
||||
pointHoverRadius: 8
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
backgroundColor: 'rgba(0, 0, 0, 0.8)',
|
||||
titleColor: '#ffffff',
|
||||
bodyColor: '#ffffff',
|
||||
borderColor: '#1976D2',
|
||||
borderWidth: 1,
|
||||
callbacks: {
|
||||
label: function(context) {
|
||||
return '매출: ₩' + context.parsed.y.toLocaleString()
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
grid: {
|
||||
display: false
|
||||
},
|
||||
ticks: {
|
||||
color: '#666666'
|
||||
}
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: {
|
||||
color: 'rgba(0, 0, 0, 0.1)'
|
||||
},
|
||||
ticks: {
|
||||
color: '#666666',
|
||||
callback: function(value) {
|
||||
return '₩' + (value / 1000) + 'K'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
const canvas = chartCanvas.value
|
||||
const ctx = canvas.getContext('2d')
|
||||
const data = currentChartData.value
|
||||
|
||||
// 캔버스 초기화
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height)
|
||||
|
||||
const padding = 60
|
||||
const chartWidth = canvas.width - padding * 2
|
||||
const chartHeight = canvas.height - padding * 2
|
||||
|
||||
const maxValue = Math.max(...data.map(d => Math.max(d.sales, d.target)))
|
||||
|
||||
// 매출 라인 그리기
|
||||
ctx.beginPath()
|
||||
ctx.strokeStyle = '#1976D2'
|
||||
ctx.lineWidth = 3
|
||||
ctx.lineCap = 'round'
|
||||
ctx.lineJoin = 'round'
|
||||
|
||||
data.forEach((item, index) => {
|
||||
const x = padding + (index * chartWidth / (data.length - 1))
|
||||
const y = padding + chartHeight - ((item.sales / maxValue) * chartHeight)
|
||||
|
||||
if (index === 0) {
|
||||
ctx.moveTo(x, y)
|
||||
} else {
|
||||
ctx.lineTo(x, y)
|
||||
}
|
||||
})
|
||||
|
||||
ctx.stroke()
|
||||
|
||||
// 목표 라인 그리기
|
||||
ctx.beginPath()
|
||||
ctx.strokeStyle = '#FF5722'
|
||||
ctx.lineWidth = 2
|
||||
ctx.setLineDash([5, 5])
|
||||
|
||||
data.forEach((item, index) => {
|
||||
const x = padding + (index * chartWidth / (data.length - 1))
|
||||
const y = padding + chartHeight - ((item.target / maxValue) * chartHeight)
|
||||
|
||||
if (index === 0) {
|
||||
ctx.moveTo(x, y)
|
||||
} else {
|
||||
ctx.lineTo(x, y)
|
||||
}
|
||||
})
|
||||
|
||||
ctx.stroke()
|
||||
ctx.setLineDash([])
|
||||
}
|
||||
|
||||
// 차트 업데이트
|
||||
const updateChart = async (period) => {
|
||||
console.log('차트 기간 변경:', period)
|
||||
await nextTick()
|
||||
drawChart()
|
||||
}
|
||||
|
||||
// 툴팁 표시
|
||||
const showDataTooltip = (index, event) => {
|
||||
const data = currentChartData.value[index]
|
||||
const unit = chartPeriod.value === '90d' ? 100 : chartPeriod.value === '30d' ? 10 : 1
|
||||
|
||||
tooltip.value = {
|
||||
show: true,
|
||||
x: event.clientX,
|
||||
y: event.clientY - 80,
|
||||
title: data.label,
|
||||
sales: data.sales * unit * 10000,
|
||||
target: data.target * unit * 10000
|
||||
}
|
||||
}
|
||||
|
||||
const hideDataTooltip = () => {
|
||||
tooltip.value.show = false
|
||||
}
|
||||
|
||||
const handleMouseMove = (event) => {
|
||||
// 차트 위 마우스 이동 처리
|
||||
}
|
||||
|
||||
const hideTooltip = () => {
|
||||
tooltip.value.show = false
|
||||
}
|
||||
|
||||
// 로그아웃 핸들러
|
||||
const handleLogout = () => {
|
||||
logoutDialog.value = true
|
||||
}
|
||||
|
||||
const confirmLogout = () => {
|
||||
try {
|
||||
// 로그아웃 처리
|
||||
authStore.logout()
|
||||
appStore.showSnackbar('로그아웃되었습니다.', 'success')
|
||||
router.push('/login')
|
||||
} catch (error) {
|
||||
console.error('로그아웃 실패:', error)
|
||||
appStore.showSnackbar('로그아웃에 실패했습니다.', 'error')
|
||||
} finally {
|
||||
logoutDialog.value = false
|
||||
}
|
||||
}
|
||||
*/
|
||||
|
||||
// 데이터 새로고침
|
||||
const refreshData = async () => {
|
||||
@ -402,6 +645,10 @@ onMounted(async () => {
|
||||
console.log('DashboardView 마운트됨')
|
||||
|
||||
try {
|
||||
// 시간 업데이트
|
||||
updateTime()
|
||||
setInterval(updateTime, 60000) // 1분마다 업데이트
|
||||
|
||||
// 초기 데이터 로드
|
||||
await refreshData()
|
||||
|
||||
@ -410,10 +657,10 @@ onMounted(async () => {
|
||||
startMetricsAnimation()
|
||||
}, 500)
|
||||
|
||||
// Chart.js 초기화 (설치 후 주석 해제)
|
||||
// setTimeout(() => {
|
||||
// initSalesChart()
|
||||
// }, 1000)
|
||||
// 차트 그리기
|
||||
setTimeout(() => {
|
||||
drawChart()
|
||||
}, 1000)
|
||||
} catch (error) {
|
||||
console.error('대시보드 초기화 실패:', error)
|
||||
}
|
||||
@ -426,7 +673,12 @@ onBeforeUnmount(() => {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 메트릭 카드 스타일 */
|
||||
/* AppBar 사용자 정보 스타일 */
|
||||
.header-user-info {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* 메트릭 카드 스타일 - 수정된 버전 */
|
||||
.metric-card {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
position: relative;
|
||||
@ -457,13 +709,18 @@ onBeforeUnmount(() => {
|
||||
}
|
||||
|
||||
.metric-icon-wrapper {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 12px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0.1;
|
||||
opacity: 0.15;
|
||||
}
|
||||
|
||||
.metric-title {
|
||||
color: var(--v-theme-on-surface);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
@ -477,11 +734,6 @@ onBeforeUnmount(() => {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.metric-title {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.metric-detail {
|
||||
font-size: 0.75rem;
|
||||
opacity: 0.7;
|
||||
@ -499,69 +751,156 @@ onBeforeUnmount(() => {
|
||||
|
||||
.sales-chart-container {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
.sales-chart {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
|
||||
.chart-placeholder {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
|
||||
border-radius: 12px;
|
||||
border: 2px dashed #e2e8f0;
|
||||
}
|
||||
|
||||
/* 가짜 차트 스타일 */
|
||||
.fake-chart {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.fake-chart-bars {
|
||||
display: flex;
|
||||
align-items: end;
|
||||
gap: 8px;
|
||||
height: 60px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.fake-bar {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fake-bar-fill {
|
||||
/* 실제 차트 스타일 */
|
||||
.real-chart {
|
||||
width: 100%;
|
||||
background: linear-gradient(to top, #1976d2, #42a5f5);
|
||||
border-radius: 2px 2px 0 0;
|
||||
transition: all 0.3s ease;
|
||||
animation: barGrow 1s ease-out forwards;
|
||||
transform-origin: bottom;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.fake-bar-label {
|
||||
.chart-header-info {
|
||||
padding-bottom: 10px;
|
||||
border-bottom: 1px solid #E5E7EB;
|
||||
}
|
||||
|
||||
.chart-legend {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.legend-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 0.75rem;
|
||||
color: #6B7280;
|
||||
}
|
||||
|
||||
.legend-dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.chart-area {
|
||||
position: relative;
|
||||
background: linear-gradient(135deg, #FAFAFA 0%, #F5F5F5 100%);
|
||||
border: 1px solid #E5E7EB;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.y-axis-labels {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
.y-label {
|
||||
position: absolute;
|
||||
font-size: 0.7rem;
|
||||
color: #666;
|
||||
margin-top: 4px;
|
||||
color: #6B7280;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@keyframes barGrow {
|
||||
from {
|
||||
transform: scaleY(0);
|
||||
.chart-grid {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
to {
|
||||
transform: scaleY(1);
|
||||
|
||||
.grid-line {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: #E5E7EB;
|
||||
}
|
||||
|
||||
.chart-canvas {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.data-points {
|
||||
position: absolute;
|
||||
left: 40px;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.data-point {
|
||||
position: absolute;
|
||||
transform: translate(-50%, 50%);
|
||||
}
|
||||
|
||||
.point-circle {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
position: absolute;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.sales-point {
|
||||
background: #1976D2;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 2px 4px rgba(25, 118, 210, 0.3);
|
||||
}
|
||||
|
||||
.target-point {
|
||||
background: #FF5722;
|
||||
border: 2px solid white;
|
||||
box-shadow: 0 2px 4px rgba(255, 87, 34, 0.3);
|
||||
}
|
||||
|
||||
.point-circle:hover {
|
||||
transform: scale(1.5);
|
||||
}
|
||||
|
||||
.x-axis-labels {
|
||||
padding: 0 40px;
|
||||
}
|
||||
|
||||
.x-label {
|
||||
font-size: 0.75rem;
|
||||
color: #6B7280;
|
||||
}
|
||||
|
||||
/* 툴팁 스타일 */
|
||||
.chart-tooltip {
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.tooltip-content {
|
||||
background: rgba(0, 0, 0, 0.8);
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 0.75rem;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.tooltip-title {
|
||||
font-weight: 600;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.tooltip-sales,
|
||||
.tooltip-target {
|
||||
margin: 2px 0;
|
||||
}
|
||||
|
||||
/* AI 추천 카드 스타일 */
|
||||
@ -584,13 +923,21 @@ onBeforeUnmount(() => {
|
||||
|
||||
/* 반응형 디자인 */
|
||||
@media (max-width: 960px) {
|
||||
.header-user-info {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.metric-value {
|
||||
font-size: 1.75rem !important;
|
||||
}
|
||||
|
||||
.metric-icon-wrapper {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
}
|
||||
|
||||
.chart-area {
|
||||
height: 250px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@ -599,12 +946,12 @@ onBeforeUnmount(() => {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
|
||||
.chart-placeholder {
|
||||
padding: 16px;
|
||||
.chart-area {
|
||||
height: 200px !important;
|
||||
}
|
||||
|
||||
.fake-chart-bars {
|
||||
height: 40px;
|
||||
.y-axis-labels {
|
||||
width: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -613,12 +960,17 @@ onBeforeUnmount(() => {
|
||||
background-color: rgb(var(--v-theme-surface-variant));
|
||||
}
|
||||
|
||||
.v-theme--dark .chart-placeholder {
|
||||
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
||||
.v-theme--dark .chart-area {
|
||||
background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
|
||||
border-color: #334155;
|
||||
}
|
||||
|
||||
.v-theme--dark .fake-bar-fill {
|
||||
background: linear-gradient(to top, #60a5fa, #93c5fd);
|
||||
.v-theme--dark .grid-line {
|
||||
background: #334155;
|
||||
}
|
||||
|
||||
.v-theme--dark .chart-stats {
|
||||
background: #1E293B !important;
|
||||
border-color: #334155;
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user