From 209b52c924bf0527329b2299c630961dfdcbbaa7 Mon Sep 17 00:00:00 2001
From: SeoJHeasdw <tjwpghangel@naver.com>
Date: Thu, 12 Jun 2025 10:59:12 +0900
Subject: [PATCH] release

---
 src/views/AIRecommendationView.vue | 854 -----------------------------
 src/views/DashboardView.vue        | 735 +++++++++++++++++--------
 2 files changed, 521 insertions(+), 1068 deletions(-)
 delete mode 100644 src/views/AIRecommendationView.vue

diff --git a/src/views/AIRecommendationView.vue b/src/views/AIRecommendationView.vue
deleted file mode 100644
index e161335..0000000
--- a/src/views/AIRecommendationView.vue
+++ /dev/null
@@ -1,854 +0,0 @@
-//* src/views/AIRecommendationView.vue
-<template>
-  <v-container fluid class="pa-4">
-    <!-- AI 추천 대시보드 -->
-    <v-row class="mb-4">
-      <v-col cols="12">
-        <v-card
-          class="pa-6"
-          elevation="2"
-          color="gradient-primary"
-        >
-          <v-row align="center">
-            <v-col cols="12" md="8">
-              <div class="d-flex align-center mb-3">
-                <v-avatar
-                  size="64"
-                  color="white"
-                  class="mr-4"
-                >
-                  <v-icon size="32" color="primary">mdi-robot</v-icon>
-                </v-avatar>
-                <div>
-                  <h2 class="text-h4 font-weight-bold white--text">
-                    AI 마케팅 어시스턴트
-                  </h2>
-                  <p class="text-h6 white--text opacity-90">
-                    데이터 기반 맞춤형 마케팅 전략을 제공합니다
-                  </p>
-                </div>
-              </div>
-            </v-col>
-            <v-col cols="12" md="4" class="text-center">
-              <v-btn
-                size="large"
-                color="white"
-                class="text-primary"
-                @click="generateAllRecommendations"
-                :loading="generatingAll"
-              >
-                <v-icon class="mr-2">mdi-refresh</v-icon>
-                전체 추천 새로고침
-              </v-btn>
-            </v-col>
-          </v-row>
-        </v-card>
-      </v-col>
-    </v-row>
-
-    <!-- 오늘의 추천 카드 -->
-    <v-row class="mb-4">
-      <v-col cols="12">
-        <v-card elevation="2">
-          <v-card-title class="text-h6 pa-4">
-            <v-icon class="mr-2" color="warning">mdi-star</v-icon>
-            오늘의 특별 추천
-            <v-spacer />
-            <v-chip color="success" size="small">
-              {{ getCurrentDate() }}
-            </v-chip>
-          </v-card-title>
-          
-          <v-divider />
-          
-          <v-card-text class="pa-4">
-            <v-card
-              v-if="todayRecommendation"
-              class="pa-4 mb-4"
-              color="amber-lighten-5"
-              variant="tonal"
-            >
-              <v-row align="center">
-                <v-col cols="12" md="8">
-                  <div class="d-flex align-center mb-2">
-                    <v-icon color="amber-darken-2" class="mr-2">mdi-lightbulb</v-icon>
-                    <h4 class="text-h6 font-weight-bold">
-                      {{ todayRecommendation.title }}
-                    </h4>
-                  </div>
-                  <p class="text-body-1 mb-3">
-                    {{ todayRecommendation.content }}
-                  </p>
-                  <div class="d-flex flex-wrap gap-2">
-                    <v-chip
-                      v-for="tag in todayRecommendation.tags"
-                      :key="tag"
-                      size="small"
-                      color="amber"
-                    >
-                      {{ tag }}
-                    </v-chip>
-                  </div>
-                </v-col>
-                <v-col cols="12" md="4" class="text-center">
-                  <v-btn
-                    color="primary"
-                    size="large"
-                    @click="applyRecommendation(todayRecommendation)"
-                  >
-                    <v-icon class="mr-1">mdi-check-circle</v-icon>
-                    추천 적용하기
-                  </v-btn>
-                </v-col>
-              </v-row>
-            </v-card>
-            
-            <div class="text-right">
-              <v-btn
-                color="primary"
-                variant="outlined"
-                size="small"
-                @click="generateTodayRecommendation"
-                :loading="generatingToday"
-              >
-                <v-icon class="mr-1">mdi-refresh</v-icon>
-                새 추천 받기
-              </v-btn>
-            </div>
-          </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="text-h6 pa-4">
-            <v-icon class="mr-2" color="info">mdi-view-grid</v-icon>
-            AI 추천 카테고리
-          </v-card-title>
-          
-          <v-divider />
-          
-          <v-card-text class="pa-4">
-            <v-row>
-              <v-col
-                v-for="category in recommendationCategories"
-                :key="category.id"
-                cols="12"
-                sm="6"
-                md="4"
-              >
-                <v-card
-                  class="recommendation-category-card"
-                  :class="{ 'selected': selectedCategory === category.id }"
-                  @click="selectCategory(category.id)"
-                  hover
-                >
-                  <v-card-text class="text-center pa-6">
-                    <v-icon
-                      :color="category.color"
-                      size="48"
-                      class="mb-3"
-                    >
-                      {{ category.icon }}
-                    </v-icon>
-                    <h4 class="text-h6 font-weight-bold mb-2">
-                      {{ category.title }}
-                    </h4>
-                    <p class="text-body-2 grey--text">
-                      {{ category.description }}
-                    </p>
-                    <v-chip
-                      :color="category.color"
-                      size="small"
-                      class="mt-2"
-                    >
-                      {{ category.count }}개 추천
-                    </v-chip>
-                  </v-card-text>
-                </v-card>
-              </v-col>
-            </v-row>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-
-    <!-- 선택된 카테고리 추천 목록 -->
-    <v-row v-if="selectedCategory">
-      <v-col cols="12">
-        <v-card elevation="2">
-          <v-card-title class="text-h6 pa-4">
-            <v-icon class="mr-2" :color="getCategoryInfo(selectedCategory).color">
-              {{ getCategoryInfo(selectedCategory).icon }}
-            </v-icon>
-            {{ getCategoryInfo(selectedCategory).title }} 추천
-            <v-spacer />
-            <v-btn
-              color="primary"
-              variant="outlined"
-              size="small"
-              @click="generateCategoryRecommendations(selectedCategory)"
-              :loading="generatingCategory"
-            >
-              <v-icon class="mr-1">mdi-refresh</v-icon>
-              새로고침
-            </v-btn>
-          </v-card-title>
-          
-          <v-divider />
-          
-          <v-card-text class="pa-4">
-            <v-row v-if="categoryRecommendations.length > 0">
-              <v-col
-                v-for="(recommendation, index) in categoryRecommendations"
-                :key="index"
-                cols="12"
-                md="6"
-              >
-                <v-card
-                  class="recommendation-item-card"
-                  elevation="1"
-                  hover
-                >
-                  <v-card-text class="pa-4">
-                    <div class="d-flex align-start mb-3">
-                      <v-avatar
-                        size="40"
-                        :color="recommendation.priority === 'high' ? 'error' : 
-                               recommendation.priority === 'medium' ? 'warning' : 'success'"
-                        class="mr-3"
-                      >
-                        <span class="white--text font-weight-bold">
-                          {{ index + 1 }}
-                        </span>
-                      </v-avatar>
-                      <div class="flex-grow-1">
-                        <h4 class="text-h6 font-weight-bold mb-1">
-                          {{ recommendation.title }}
-                        </h4>
-                        <p class="text-body-2 grey--text mb-2">
-                          {{ recommendation.description }}
-                        </p>
-                      </div>
-                    </div>
-                    
-                    <!-- 추천 이유 -->
-                    <v-card
-                      class="pa-3 mb-3"
-                      color="blue-grey-lighten-5"
-                      variant="tonal"
-                    >
-                      <div class="text-caption grey--text mb-1">추천 이유</div>
-                      <div class="text-body-2">{{ recommendation.reason }}</div>
-                    </v-card>
-                    
-                    <!-- 예상 효과 -->
-                    <div class="mb-3">
-                      <div class="text-caption grey--text mb-1">예상 효과</div>
-                      <v-chip
-                        v-for="effect in recommendation.expectedEffects"
-                        :key="effect"
-                        size="small"
-                        color="green"
-                        class="mr-1 mb-1"
-                      >
-                        {{ effect }}
-                      </v-chip>
-                    </div>
-                    
-                    <!-- 우선순위 -->
-                    <div class="d-flex justify-space-between align-center">
-                      <v-chip
-                        :color="recommendation.priority === 'high' ? 'error' : 
-                               recommendation.priority === 'medium' ? 'warning' : 'success'"
-                        size="small"
-                      >
-                        {{ getPriorityText(recommendation.priority) }}
-                      </v-chip>
-                      <v-chip
-                        color="info"
-                        size="small"
-                      >
-                        예상 소요시간: {{ recommendation.estimatedTime }}
-                      </v-chip>
-                    </div>
-                  </v-card-text>
-                  
-                  <v-card-actions class="pt-0 px-4 pb-4">
-                    <v-btn
-                      color="primary"
-                      variant="outlined"
-                      size="small"
-                      @click="viewRecommendationDetail(recommendation)"
-                    >
-                      상세보기
-                    </v-btn>
-                    <v-btn
-                      color="success"
-                      size="small"
-                      @click="applyRecommendation(recommendation)"
-                    >
-                      적용하기
-                    </v-btn>
-                  </v-card-actions>
-                </v-card>
-              </v-col>
-            </v-row>
-            
-            <!-- 로딩 상태 -->
-            <v-card
-              v-else-if="generatingCategory"
-              class="pa-8 text-center"
-            >
-              <v-progress-circular
-                indeterminate
-                color="primary"
-                size="64"
-                class="mb-4"
-              />
-              <p class="text-body-1">AI가 추천을 분석하고 있습니다...</p>
-            </v-card>
-            
-            <!-- 빈 상태 -->
-            <v-card
-              v-else
-              class="pa-6 text-center"
-              color="grey-lighten-4"
-              variant="tonal"
-            >
-              <v-icon size="48" color="grey" class="mb-2">mdi-robot-outline</v-icon>
-              <p class="text-body-2">해당 카테고리의 추천을 생성해주세요</p>
-            </v-card>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-
-    <!-- 추천 상세 다이얼로그 -->
-    <v-dialog
-      v-model="showDetailDialog"
-      max-width="700"
-      scrollable
-    >
-      <v-card v-if="selectedRecommendation">
-        <v-card-title class="text-h6">
-          {{ selectedRecommendation.title }}
-          <v-spacer />
-          <v-btn
-            icon
-            @click="showDetailDialog = false"
-          >
-            <v-icon>mdi-close</v-icon>
-          </v-btn>
-        </v-card-title>
-        
-        <v-divider />
-        
-        <v-card-text class="pa-4">
-          <!-- 기본 정보 -->
-          <div class="mb-4">
-            <h4 class="text-h6 mb-2">📋 추천 개요</h4>
-            <p class="text-body-1">{{ selectedRecommendation.description }}</p>
-          </div>
-          
-          <!-- 추천 이유 -->
-          <div class="mb-4">
-            <h4 class="text-h6 mb-2">🔍 추천 이유</h4>
-            <v-card
-              class="pa-3"
-              color="blue-grey-lighten-5"
-              variant="tonal"
-            >
-              <p class="text-body-1">{{ selectedRecommendation.reason }}</p>
-            </v-card>
-          </div>
-          
-          <!-- 실행 단계 -->
-          <div class="mb-4" v-if="selectedRecommendation.steps">
-            <h4 class="text-h6 mb-2">📝 실행 단계</h4>
-            <v-list>
-              <v-list-item
-                v-for="(step, index) in selectedRecommendation.steps"
-                :key="index"
-                class="px-0"
-              >
-                <template v-slot:prepend>
-                  <v-avatar
-                    size="32"
-                    color="primary"
-                  >
-                    <span class="white--text font-weight-bold">
-                      {{ index + 1 }}
-                    </span>
-                  </v-avatar>
-                </template>
-                <v-list-item-title>{{ step }}</v-list-item-title>
-              </v-list-item>
-            </v-list>
-          </div>
-          
-          <!-- 예상 효과 -->
-          <div class="mb-4">
-            <h4 class="text-h6 mb-2">📈 예상 효과</h4>
-            <v-chip
-              v-for="effect in selectedRecommendation.expectedEffects"
-              :key="effect"
-              color="success"
-              class="mr-1 mb-1"
-            >
-              {{ effect }}
-            </v-chip>
-          </div>
-          
-          <!-- 관련 데이터 -->
-          <div class="mb-4" v-if="selectedRecommendation.relatedData">
-            <h4 class="text-h6 mb-2">📊 관련 데이터</h4>
-            <v-card
-              class="pa-3"
-              color="info"
-              variant="tonal"
-            >
-              <div
-                v-for="(data, key) in selectedRecommendation.relatedData"
-                :key="key"
-                class="d-flex justify-space-between mb-1"
-              >
-                <span>{{ key }}:</span>
-                <strong>{{ data }}</strong>
-              </div>
-            </v-card>
-          </div>
-          
-          <!-- 주의사항 -->
-          <div v-if="selectedRecommendation.warnings">
-            <h4 class="text-h6 mb-2">⚠️ 주의사항</h4>
-            <v-alert
-              color="warning"
-              variant="tonal"
-              icon="mdi-alert"
-            >
-              <ul class="pl-4">
-                <li
-                  v-for="warning in selectedRecommendation.warnings"
-                  :key="warning"
-                >
-                  {{ warning }}
-                </li>
-              </ul>
-            </v-alert>
-          </div>
-        </v-card-text>
-        
-        <v-divider />
-        
-        <v-card-actions class="pa-4">
-          <v-btn
-            color="success"
-            @click="applyRecommendation(selectedRecommendation)"
-          >
-            <v-icon class="mr-1">mdi-check</v-icon>
-            추천 적용하기
-          </v-btn>
-          <v-btn
-            color="primary"
-            variant="outlined"
-            @click="saveRecommendation(selectedRecommendation)"
-          >
-            <v-icon class="mr-1">mdi-bookmark</v-icon>
-            나중에 하기
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <!-- 성공 스낵바 -->
-    <v-snackbar
-      v-model="showSuccess"
-      color="success"
-      timeout="3000"
-    >
-      {{ successMessage }}
-    </v-snackbar>
-    
-    <!-- 에러 스낵바 -->
-    <v-snackbar
-      v-model="showError"
-      color="error"
-      timeout="3000"
-    >
-      {{ errorMessage }}
-    </v-snackbar>
-  </v-container>
-</template>
-
-<script setup>
-import { ref, onMounted } from 'vue'
-import { useRouter } from 'vue-router'
-import * as recommendService from '@/services/recommend'
-
-const router = useRouter()
-
-// 상태 관리
-const selectedCategory = ref('')
-const todayRecommendation = ref(null)
-const categoryRecommendations = ref([])
-const selectedRecommendation = ref(null)
-
-const generatingAll = ref(false)
-const generatingToday = ref(false)
-const generatingCategory = ref(false)
-const showDetailDialog = ref(false)
-const showSuccess = ref(false)
-const showError = ref(false)
-const successMessage = ref('')
-const errorMessage = ref('')
-
-// 추천 카테고리 설정
-const recommendationCategories = ref([
-  {
-    id: 'content',
-    title: '콘텐츠 마케팅',
-    description: 'SNS 게시물 및 홍보 포스터 아이디어',
-    icon: 'mdi-pencil-plus',
-    color: 'purple',
-    count: 5
-  },
-  {
-    id: 'promotion',
-    title: '프로모션 전략',
-    description: '할인 이벤트 및 특가 제안',
-    icon: 'mdi-sale',
-    color: 'orange',
-    count: 4
-  },
-  {
-    id: 'menu',
-    title: '메뉴 최적화',
-    description: '인기 메뉴 분석 및 신메뉴 제안',
-    icon: 'mdi-food',
-    color: 'green',
-    count: 6
-  },
-  {
-    id: 'customer',
-    title: '고객 관리',
-    description: '고객 만족도 향상 방안',
-    icon: 'mdi-account-heart',
-    color: 'pink',
-    count: 3
-  },
-  {
-    id: 'timing',
-    title: '타이밍 전략',
-    description: '최적 홍보 시점 및 계절 마케팅',
-    icon: 'mdi-clock',
-    color: 'blue',
-    count: 4
-  },
-  {
-    id: 'analysis',
-    title: '데이터 분석',
-    description: '매출 분석 및 트렌드 인사이트',
-    icon: 'mdi-chart-line',
-    color: 'teal',
-    count: 5
-  }
-])
-
-/**
- * 현재 날짜 반환
- */
-const getCurrentDate = () => {
-  return new Date().toLocaleDateString('ko-KR', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    weekday: 'long'
-  })
-}
-
-/**
- * 카테고리 정보 반환
- */
-const getCategoryInfo = (categoryId) => {
-  return recommendationCategories.value.find(cat => cat.id === categoryId) || {}
-}
-
-/**
- * 우선순위 텍스트 반환
- */
-const getPriorityText = (priority) => {
-  const priorities = {
-    high: '높음',
-    medium: '보통',
-    low: '낮음'
-  }
-  return priorities[priority] || priority
-}
-
-/**
- * 카테고리 선택
- */
-const selectCategory = async (categoryId) => {
-  selectedCategory.value = categoryId
-  await generateCategoryRecommendations(categoryId)
-}
-
-/**
- * 오늘의 추천 생성
- */
-const generateTodayRecommendation = async () => {
-  generatingToday.value = true
-  try {
-    const response = await recommendService.generateMarketingTips({
-      type: 'daily',
-      includeWeather: true,
-      includeTrends: true
-    })
-    
-    todayRecommendation.value = response
-  } catch (error) {
-    console.error('오늘의 추천 생성 실패:', error)
-    // 샘플 데이터로 대체
-    todayRecommendation.value = {
-      title: '오늘은 날씨가 좋으니 테이크아웃 마케팅을 강화하세요!',
-      content: '맑은 날씨로 인해 야외 활동이 증가할 것으로 예상됩니다. 테이크아웃 전용 할인이나 피크닉 세트 메뉴를 홍보하면 좋은 반응을 얻을 수 있을 것입니다.',
-      tags: ['날씨연동', '테이크아웃', '야외활동', '피크닉']
-    }
-  } finally {
-    generatingToday.value = false
-  }
-}
-
-/**
- * 카테고리별 추천 생성
- */
-const generateCategoryRecommendations = async (categoryId) => {
-  generatingCategory.value = true
-  try {
-    const response = await recommendService.generateMarketingTips({
-      type: 'category',
-      category: categoryId,
-      limit: 6
-    })
-    
-    categoryRecommendations.value = response
-  } catch (error) {
-    console.error('카테고리 추천 생성 실패:', error)
-    // 샘플 데이터로 대체
-    categoryRecommendations.value = getSampleRecommendations(categoryId)
-  } finally {
-    generatingCategory.value = false
-  }
-}
-
-/**
- * 전체 추천 새로고침
- */
-const generateAllRecommendations = async () => {
-  generatingAll.value = true
-  try {
-    await generateTodayRecommendation()
-    if (selectedCategory.value) {
-      await generateCategoryRecommendations(selectedCategory.value)
-    }
-    successMessage.value = '모든 추천이 새로고침되었습니다.'
-    showSuccess.value = true
-  } catch (error) {
-    console.error('전체 추천 새로고침 실패:', error)
-    errorMessage.value = '추천 새로고침 중 오류가 발생했습니다.'
-    showError.value = true
-  } finally {
-    generatingAll.value = false
-  }
-}
-
-/**
- * 추천 상세보기
- */
-const viewRecommendationDetail = (recommendation) => {
-  selectedRecommendation.value = recommendation
-  showDetailDialog.value = true
-}
-
-/**
- * 추천 적용
- */
-const applyRecommendation = async (recommendation) => {
-  try {
-    // 추천 타입에 따라 다른 페이지로 이동
-    if (recommendation.type === 'content' || recommendation.title.includes('콘텐츠')) {
-      router.push({ name: 'ContentCreation' })
-    } else if (recommendation.type === 'menu' || recommendation.title.includes('메뉴')) {
-      router.push({ name: 'MenuManagement' })
-    } else {
-      // 기본적으로 대시보드로 이동
-      router.push({ name: 'Dashboard' })
-    }
-    
-    successMessage.value = '추천이 적용되었습니다!'
-    showSuccess.value = true
-    showDetailDialog.value = false
-  } catch (error) {
-    console.error('추천 적용 실패:', error)
-    errorMessage.value = '추천 적용 중 오류가 발생했습니다.'
-    showError.value = true
-  }
-}
-
-/**
- * 추천 저장
- */
-const saveRecommendation = async (recommendation) => {
-  try {
-    // 실제로는 추천 저장 API 호출
-    successMessage.value = '추천이 저장되었습니다. 나중에 확인해보세요.'
-    showSuccess.value = true
-    showDetailDialog.value = false
-  } catch (error) {
-    console.error('추천 저장 실패:', error)
-    errorMessage.value = '추천 저장 중 오류가 발생했습니다.'
-    showError.value = true
-  }
-}
-
-/**
- * 샘플 추천 데이터 생성
- */
-const getSampleRecommendations = (categoryId) => {
-  const samples = {
-    content: [
-      {
-        title: '인스타그램 스토리 활용 강화',
-        description: '일상적인 요리 과정을 스토리로 공유하여 고객과의 친밀감을 높이세요',
-        reason: '스토리는 24시간 후 사라지는 특성으로 인해 부담 없이 자주 업로드할 수 있고, 고객들의 참여도가 높습니다',
-        priority: 'high',
-        estimatedTime: '30분/일',
-        expectedEffects: ['브랜드 인지도 상승', '고객 참여도 증가', '일상적 소통 증가'],
-        steps: [
-          '매일 요리 과정 1-2장 촬영',
-          '간단한 텍스트와 함께 스토리 업로드',
-          '고객 댓글에 적극적으로 반응',
-          '주간 결산 스토리 하이라이트로 저장'
-        ],
-        type: 'content'
-      },
-      {
-        title: '고객 리뷰 기반 콘텐츠 제작',
-        description: '긍정적인 고객 리뷰를 활용하여 신뢰도 높은 홍보 콘텐츠를 만드세요',
-        reason: '실제 고객의 생생한 후기는 잠재 고객들에게 강한 신뢰감을 줍니다',
-        priority: 'medium',
-        estimatedTime: '1시간/주',
-        expectedEffects: ['신뢰도 향상', '구매 의사결정 도움', 'WOM 효과'],
-        type: 'content'
-      }
-    ],
-    promotion: [
-      {
-        title: '우천 시 특별 할인 이벤트',
-        description: '비 오는 날 방문 고객에게 특별 할인 혜택을 제공하세요',
-        reason: '비 오는 날은 외출을 꺼리는 고객들에게 방문 동기를 부여할 수 있습니다',
-        priority: 'high',
-        estimatedTime: '2시간',
-        expectedEffects: ['비 오는 날 매출 증대', '고객 만족도 상승', '재방문 유도'],
-        relatedData: {
-          '우천 시 평균 매출 감소율': '-23%',
-          '할인 이벤트 시 예상 증가율': '+15%',
-          '타 업체 유사 이벤트 성공률': '78%'
-        },
-        type: 'promotion'
-      }
-    ],
-    menu: [
-      {
-        title: '계절 한정 메뉴 개발',
-        description: '여름철에 어울리는 시원한 메뉴나 음료를 개발해보세요',
-        reason: '계절감 있는 메뉴는 고객들의 관심을 끌고 화제성을 만들 수 있습니다',
-        priority: 'medium',
-        estimatedTime: '1주일',
-        expectedEffects: ['신규 고객 유입', '매출 다양성 확보', '브랜드 이미지 개선'],
-        warnings: [
-          '계절 메뉴는 재료 수급이 불안정할 수 있습니다',
-          '초기 테스트 기간을 거쳐 고객 반응을 확인하세요'
-        ],
-        type: 'menu'
-      }
-    ],
-    customer: [
-      {
-        title: '단골 고객 VIP 프로그램 운영',
-        description: '자주 방문하는 고객들을 위한 특별 혜택 프로그램을 만드세요',
-        reason: '단골 고객의 재방문율을 높이고 신규 고객의 단골화를 유도할 수 있습니다',
-        priority: 'high',
-        estimatedTime: '반나절',
-        expectedEffects: ['고객 충성도 향상', '재방문율 증가', '구전 효과'],
-        type: 'customer'
-      }
-    ],
-    timing: [
-      {
-        title: '점심시간 사전 예약 시스템',
-        description: '바쁜 점심시간에 미리 주문받아 대기시간을 단축하세요',
-        reason: '직장인들의 짧은 점심시간을 고려한 서비스로 고객 만족도를 높일 수 있습니다',
-        priority: 'medium',
-        estimatedTime: '3시간',
-        expectedEffects: ['점심시간 매출 증대', '고객 만족도 상승', '운영 효율성 향상'],
-        type: 'timing'
-      }
-    ],
-    analysis: [
-      {
-        title: '주간 매출 패턴 분석 리포트',
-        description: '요일별, 시간대별 매출 데이터를 분석하여 운영 최적화 방안을 찾으세요',
-        reason: '데이터 기반의 의사결정으로 효율적인 매장 운영이 가능합니다',
-        priority: 'medium',
-        estimatedTime: '2시간/주',
-        expectedEffects: ['운영 효율성 향상', '재고 관리 최적화', '인력 배치 개선'],
-        type: 'analysis'
-      }
-    ]
-  }
-  
-  return samples[categoryId] || []
-}
-
-// 컴포넌트 마운트시 초기 데이터 로드
-onMounted(async () => {
-  await generateTodayRecommendation()
-})
-</script>
-
-<style scoped>
-.gradient-primary {
-  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-}
-
-.recommendation-category-card {
-  transition: all 0.3s;
-  cursor: pointer;
-  border: 2px solid transparent;
-}
-
-.recommendation-category-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
-}
-
-.recommendation-category-card.selected {
-  border-color: #1976D2;
-  background-color: #E3F2FD;
-}
-
-.recommendation-item-card {
-  transition: all 0.3s;
-  height: 100%;
-}
-
-.recommendation-item-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 6px 20px rgba(0,0,0,0.1);
-}
-</style>
\ No newline at end of file
diff --git a/src/views/DashboardView.vue b/src/views/DashboardView.vue
index 4c96326..69cd15e 100644
--- a/src/views/DashboardView.vue
+++ b/src/views/DashboardView.vue
@@ -1,40 +1,50 @@
 //* src/views/DashboardView.vue
 <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?.name || '사용자' }}님! 👋
-                </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>
+    <!-- 페이지 헤더 -->
+    <div class="d-flex align-center justify-between mb-6">
+      <div>
+        <h1 class="text-h4 font-weight-bold text-grey-darken-4">대시보드</h1>
+        <p class="text-body-1 text-grey-darken-1 mb-0">
+          {{ businessName }}의 실시간 현황을 확인하세요
+        </p>
+      </div>
+      <v-chip :color="'success'" variant="flat" class="text-body-2 font-weight-medium">
+        <v-icon start size="16">mdi-circle</v-icon>
+        실시간 업데이트
+      </v-chip>
+    </div>
 
-    <!-- 주요 지표 카드 -->
-    <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>
+    <!-- 주요 지표 카드 - 새로운 스타일 적용 (3개 카드) -->
+    <v-row class="mb-6">
+      <v-col
+        v-for="(metric, index) in dashboardMetrics"
+        :key="metric.title"
+        cols="12"
+        sm="4"
+        md="4"
+      >
+        <v-card
+          class="metric-card h-100"
+          :class="`metric-card--${metric.color}`"
+          elevation="0"
+          border
+        >
+          <v-card-text class="pa-6">
+            <!-- 카드 헤더 -->
+            <div class="d-flex align-center justify-between mb-3">
+              <div class="metric-icon-wrapper" :class="`bg-${metric.color}`">
+                <v-icon :icon="metric.icon" size="24" :color="`${metric.color}-darken-2`" />
+              </div>
               <v-chip
                 :color="
                   metric.trend === 'up' ? 'success' : metric.trend === 'down' ? 'error' : 'warning'
                 "
                 size="small"
                 variant="tonal"
+                class="metric-trend"
               >
-                <v-icon size="16" class="mr-1">
+                <v-icon size="12" class="mr-1">
                   {{
                     metric.trend === 'up'
                       ? 'mdi-trending-up'
@@ -46,105 +56,132 @@
                 {{ metric.change }}
               </v-chip>
             </div>
-            <h3 class="text-h6 font-weight-bold mb-1">{{ metric.value }}</h3>
-            <p class="text-body-2 text-grey mb-0">{{ metric.title }}</p>
+
+            <!-- 메트릭 값 - 애니메이션 적용 -->
+            <div class="metric-value-wrapper mb-2">
+              <span
+                class="metric-value text-h4 font-weight-bold"
+                :class="`text-${metric.color}-darken-2`"
+                :ref="`metricValue${index}`"
+              >
+                {{ animatedValues[index] || '0' }}
+              </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">
+              <span class="text-caption text-grey">
+                {{ metric.detail || '전월 대비' }}
+              </span>
+            </div>
           </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="pb-2">빠른 액션</v-card-title>
-          <v-card-text>
-            <v-row>
-              <v-col v-for="action in quickActions" :key="action.title" cols="6" md="3">
-                <v-card
-                  :color="action.color"
-                  variant="tonal"
-                  class="text-center"
-                  @click="action.action"
-                  style="cursor: pointer"
-                >
-                  <v-card-text class="pa-4">
-                    <v-icon :color="action.color" size="32" class="mb-2">
-                      {{ action.icon }}
-                    </v-icon>
-                    <div class="text-body-2 font-weight-medium">
-                      {{ action.title }}
-                    </div>
-                  </v-card-text>
-                </v-card>
-              </v-col>
-            </v-row>
-          </v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
-
-    <!-- AI 추천 -->
-    <v-row class="mb-4">
-      <v-col cols="12" md="8">
-        <v-card elevation="2">
-          <v-card-title class="d-flex align-center">
-            <v-icon color="primary" class="mr-2">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-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>
+                <p class="text-body-2 text-grey-darken-1 mb-0">최근 7일간 매출 현황</p>
+              </div>
+              <v-btn-toggle
+                v-model="chartPeriod"
+                variant="outlined"
+                density="compact"
+                color="primary"
+                rounded="lg"
+                @update:model-value="updateChart"
+              >
+                <v-btn value="7d" size="small">7일</v-btn>
+                <v-btn value="30d" size="small">30일</v-btn>
+                <v-btn value="90d" size="small">90일</v-btn>
+              </v-btn-toggle>
+            </div>
           </v-card-title>
-          <v-card-text>
-            <div v-if="aiRecommendations.length > 0">
-              <v-alert
-                v-for="recommendation in aiRecommendations"
-                :key="recommendation.title"
-                :type="recommendation.type"
-                :icon="recommendation.icon"
-                variant="tonal"
-                class="mb-3"
-              >
-                <v-alert-title>{{ recommendation.title }}</v-alert-title>
-                {{ recommendation.content }}
-              </v-alert>
-            </div>
-            <div v-else class="text-center pa-4">
-              <v-icon size="48" color="grey-lighten-2">mdi-robot</v-icon>
-              <p class="text-grey mt-2">AI 추천을 불러오는 중...</p>
-            </div>
-          </v-card-text>
-        </v-card>
-      </v-col>
+          <v-card-text class="pa-6">
+            <div class="sales-chart-container">
+              <!-- Chart.js 차트가 들어갈 영역 -->
+              <canvas id="salesChart" class="sales-chart" style="height: 300px"></canvas>
 
-      <!-- 최근 활동 -->
-      <v-col cols="12" md="4">
-        <v-card elevation="2">
-          <v-card-title>최근 활동</v-card-title>
-          <v-card-text>
-            <div v-if="recentActivities.length > 0">
-              <div
-                v-for="activity in recentActivities"
-                :key="activity.id"
-                class="d-flex align-center mb-3"
-              >
-                <v-avatar :color="activity.color" size="32" class="mr-3">
-                  <v-icon color="white" size="16">{{ activity.icon }}</v-icon>
-                </v-avatar>
-                <div class="flex-grow-1">
-                  <div class="text-body-2 font-weight-medium">
-                    {{ activity.title }}
-                  </div>
-                  <div class="text-caption text-grey">
-                    {{ formatRelativeTime(activity.timestamp) }}
+              <!-- 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>
                   </div>
                 </div>
               </div>
             </div>
-            <div v-else class="text-center pa-4">
-              <v-icon size="48" color="grey-lighten-2">mdi-history</v-icon>
-              <p class="text-grey mt-2">최근 활동이 없습니다</p>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+      <!-- AI 추천 요약 -->
+      <v-col cols="12" lg="4">
+        <v-card elevation="0" border class="ai-recommend-card h-100">
+          <v-card-title class="pa-6 pb-0">
+            <div class="d-flex align-center mb-1">
+              <v-icon color="primary" class="mr-2">mdi-robot</v-icon>
+              <h3 class="text-h6 font-weight-bold">AI 추천 활용</h3>
+            </div>
+            <p class="text-body-2 text-grey-darken-1 mb-0">맞춤형 마케팅 제안</p>
+          </v-card-title>
+          <v-card-text class="pa-6">
+            <div v-if="aiLoading" class="text-center py-8">
+              <v-progress-circular color="primary" indeterminate size="40" />
+              <p class="text-body-2 text-grey mt-3">AI가 분석 중...</p>
+            </div>
+            <div v-else>
+              <div
+                v-for="(recommendation, index) in aiRecommendations"
+                :key="index"
+                class="ai-recommendation-item mb-4"
+              >
+                <v-alert
+                  :type="recommendation.type"
+                  variant="tonal"
+                  density="compact"
+                  :icon="recommendation.icon"
+                  class="mb-0"
+                >
+                  <v-alert-title class="text-subtitle-2 font-weight-bold mb-1">
+                    {{ recommendation.title }}
+                  </v-alert-title>
+                  <div class="text-body-2">
+                    {{ recommendation.content }}
+                  </div>
+                </v-alert>
+              </div>
+
+              <v-btn
+                color="primary"
+                variant="outlined"
+                block
+                size="small"
+                class="mt-2"
+                @click="router.push('/recommend')"
+              >
+                <v-icon start>mdi-lightbulb-on</v-icon>
+                더 많은 추천 보기
+              </v-btn>
             </div>
           </v-card-text>
         </v-card>
@@ -159,14 +196,19 @@
 </template>
 
 <script setup>
-import { ref, onMounted } from 'vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
 import { useRouter } from 'vue-router'
-import { useAuthStore } from '@/store/auth' // 수정된 import
-import { useAppStore } from '@/store/app' // 추가된 import
+import { useAuthStore } from '@/store/auth'
+import { useAppStore } from '@/store/app'
 import { formatCurrency, formatNumber, formatRelativeTime } from '@/utils/formatters'
 
 /**
- * 대시보드 메인 페이지
+ * 대시보드 메인 페이지 - 수정된 버전
+ * - 새로운 카드 스타일 적용
+ * - 숫자 증가 애니메이션 추가
+ * - 빠른 액션 제거
+ * - 매출 추이 분석 차트 추가
+ * - 최근 활동 제거
  */
 
 const router = useRouter()
@@ -176,78 +218,54 @@ const appStore = useAppStore()
 // 반응형 데이터
 const loading = ref(false)
 const aiLoading = ref(false)
+const chartInitialized = ref(false)
+const chartPeriod = ref('7d')
+const animatedValues = ref({})
 
-// 대시보드 지표
+// 비즈니스 정보
+const businessName = ref('김사장님의 분식점')
+
+// 대시보드 지표 - 새로운 스타일 적용 (AI 추천 활용 카드 제거)
 const dashboardMetrics = ref([
   {
-    title: '오늘 매출',
-    value: '₩567,000',
-    change: '+12%',
+    title: '오늘의 매출',
+    value: 123000,
+    displayValue: '₩123,000',
+    change: '+15%',
     trend: 'up',
-    icon: 'mdi-cash',
+    icon: 'mdi-cash-multiple',
     color: 'success',
+    detail: '목표 달성률: 85%',
   },
   {
-    title: '월 매출',
-    value: '₩12,340,000',
+    title: '이번 달 매출',
+    value: 2450000,
+    displayValue: '₩2,450,000',
     change: '+8%',
     trend: 'up',
-    icon: 'mdi-chart-line',
+    icon: 'mdi-trending-up',
     color: 'primary',
+    detail: '목표까지 ₩450,000',
   },
   {
-    title: '콘텐츠 수',
-    value: '24',
-    change: '+3',
-    trend: 'up',
-    icon: 'mdi-file-document',
-    color: 'info',
-  },
-  {
-    title: '조회수',
-    value: '15.2K',
-    change: '+25%',
+    title: '일일 조회수',
+    value: 1234,
+    displayValue: '1,234',
+    change: '+23%',
     trend: 'up',
     icon: 'mdi-eye',
     color: 'warning',
+    detail: '참여율: 4.2%',
   },
 ])
 
-// 빠른 액션
-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 추천
+// AI 추천 (간소화)
 const aiRecommendations = ref([
   {
     type: 'info',
     icon: 'mdi-weather-rainy',
     title: '날씨 기반 추천',
-    content: '오늘은 비가 와서 따뜻한 음식이 인기 있을 것 같아요. 국물 요리를 추천해보세요!',
+    content: '오늘은 비가 와서 따뜻한 음식이 인기 있을 것 같아요.',
   },
   {
     type: 'success',
@@ -259,83 +277,372 @@ const aiRecommendations = ref([
     type: 'warning',
     icon: 'mdi-clock-outline',
     title: '시간대 팁',
-    content: '점심시간(12-14시)에 주문이 집중됩니다. 미리 준비하세요.',
+    content: '점심시간(12-14시)에 주문이 집중됩니다.',
   },
 ])
 
-// 최근 활동
-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',
-  },
-])
+// 가짜 차트 데이터 (Chart.js 없을 때 표시용)
+const fakeChartData = ref([65, 78, 82, 45, 90, 67, 88])
 
-// 메서드
-const refreshAIRecommendations = async () => {
+// 숫자 애니메이션 함수
+const animateNumber = (targetValue, index, duration = 2000) => {
+  const startValue = 0
+  const startTime = Date.now()
+
+  const updateValue = () => {
+    const elapsed = Date.now() - startTime
+    const progress = Math.min(elapsed / duration, 1)
+
+    // easeOutCubic 애니메이션
+    const easedProgress = 1 - Math.pow(1 - progress, 3)
+    const currentValue = Math.floor(startValue + (targetValue - startValue) * easedProgress)
+
+    // 숫자 형식에 따라 표시
+    if (typeof targetValue === 'number') {
+      if (index === 0 || index === 1) {
+        // 매출 - 원화 표시
+        animatedValues.value[index] = `₩${currentValue.toLocaleString()}`
+      } else {
+        // 일반 숫자 (조회수 등)
+        animatedValues.value[index] = currentValue.toLocaleString()
+      }
+    }
+
+    if (progress < 1) {
+      requestAnimationFrame(updateValue)
+    }
+  }
+
+  updateValue()
+}
+
+// 모든 지표 애니메이션 시작
+const startMetricsAnimation = () => {
+  dashboardMetrics.value.forEach((metric, index) => {
+    setTimeout(() => {
+      animateNumber(metric.value, index, 1500 + index * 200)
+    }, index * 300)
+  })
+}
+
+// 차트 업데이트
+const updateChart = (period) => {
+  console.log('차트 기간 변경:', period)
+  // Chart.js 구현 시 여기에 차트 업데이트 로직 추가
+}
+
+// Chart.js 초기화 (설치 후 사용)
+/*
+const initSalesChart = () => {
+  const ctx = document.getElementById('salesChart')
+  if (ctx && window.Chart) {
+    chartInitialized.value = true
+    
+    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 refreshData = async () => {
   try {
-    aiLoading.value = true
+    loading.value = true
+
     // API 호출 시뮬레이션
     await new Promise((resolve) => setTimeout(resolve, 1000))
-    appStore.showSnackbar('AI 추천이 갱신되었습니다', 'success')
+
+    console.log('대시보드 데이터 새로고침 완료')
   } catch (error) {
-    console.error('AI 추천 갱신 실패:', error)
-    appStore.showSnackbar('AI 추천 갱신에 실패했습니다', 'error')
+    console.error('데이터 새로고침 실패:', error)
+    appStore.showSnackbar('데이터를 불러오는데 실패했습니다.', 'error')
   } finally {
-    aiLoading.value = false
+    loading.value = false
   }
 }
 
 // 라이프사이클
 onMounted(async () => {
   console.log('DashboardView 마운트됨')
-  console.log('사용자 정보:', authStore.user)
 
   try {
-    loading.value = true
+    // 초기 데이터 로드
+    await refreshData()
 
-    // 대시보드 데이터 로드 시뮬레이션
-    await new Promise((resolve) => setTimeout(resolve, 500))
+    // 지표 애니메이션 시작
+    setTimeout(() => {
+      startMetricsAnimation()
+    }, 500)
 
-    console.log('대시보드 데이터 로드 완료')
+    // Chart.js 초기화 (설치 후 주석 해제)
+    // setTimeout(() => {
+    //   initSalesChart()
+    // }, 1000)
   } catch (error) {
-    console.error('대시보드 로드 실패:', error)
-    appStore.showSnackbar('대시보드를 불러오는데 실패했습니다', 'error')
-  } finally {
-    loading.value = false
+    console.error('대시보드 초기화 실패:', error)
   }
 })
+
+onBeforeUnmount(() => {
+  // 애니메이션 정리
+  animatedValues.value = {}
+})
 </script>
 
 <style scoped>
-.bg-gradient-primary {
-  background: linear-gradient(135deg, #1976d2 0%, #1565c0 100%);
+/* 메트릭 카드 스타일 */
+.metric-card {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
 }
 
-.h-100 {
+.metric-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12) !important;
+}
+
+.metric-card::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  background: linear-gradient(90deg, var(--v-theme-primary), var(--v-theme-primary-lighten-1));
+}
+
+.metric-card--success::before {
+  background: linear-gradient(90deg, var(--v-theme-success), var(--v-theme-success-lighten-1));
+}
+
+.metric-card--warning::before {
+  background: linear-gradient(90deg, var(--v-theme-warning), var(--v-theme-warning-lighten-1));
+}
+
+.metric-icon-wrapper {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.1;
+}
+
+.metric-value {
+  font-size: 2rem !important;
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+}
+
+.metric-trend {
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.metric-title {
+  font-size: 0.875rem;
+  line-height: 1.4;
+}
+
+.metric-detail {
+  font-size: 0.75rem;
+  opacity: 0.7;
+}
+
+/* 차트 카드 스타일 */
+.chart-card {
+  transition: all 0.3s ease;
+}
+
+.chart-card:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
+}
+
+.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%;
 }
 
-@media (max-width: 600px) {
-  .text-h5 {
-    font-size: 1.3rem !important;
+.fake-bar-fill {
+  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;
+}
+
+.fake-bar-label {
+  font-size: 0.7rem;
+  color: #666;
+  margin-top: 4px;
+}
+
+@keyframes barGrow {
+  from {
+    transform: scaleY(0);
+  }
+  to {
+    transform: scaleY(1);
   }
 }
+
+/* AI 추천 카드 스타일 */
+.ai-recommend-card {
+  transition: all 0.3s ease;
+}
+
+.ai-recommend-card:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
+}
+
+.ai-recommendation-item {
+  transition: all 0.2s ease;
+}
+
+.ai-recommendation-item:hover {
+  transform: translateX(2px);
+}
+
+/* 반응형 디자인 */
+@media (max-width: 960px) {
+  .metric-value {
+    font-size: 1.75rem !important;
+  }
+
+  .metric-icon-wrapper {
+    width: 40px;
+    height: 40px;
+  }
+}
+
+@media (max-width: 600px) {
+  .metric-value {
+    font-size: 1.5rem !important;
+  }
+
+  .chart-placeholder {
+    padding: 16px;
+  }
+
+  .fake-chart-bars {
+    height: 40px;
+  }
+}
+
+/* 다크 테마 지원 */
+.v-theme--dark .metric-card {
+  background-color: rgb(var(--v-theme-surface-variant));
+}
+
+.v-theme--dark .chart-placeholder {
+  background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
+  border-color: #334155;
+}
+
+.v-theme--dark .fake-bar-fill {
+  background: linear-gradient(to top, #60a5fa, #93c5fd);
+}
 </style>