From 7315bac5a369f2db5a216f4affa62a9e22cba1ee Mon Sep 17 00:00:00 2001
From: unknown <yyoooona@gmail.com>
Date: Thu, 12 Jun 2025 15:22:05 +0900
Subject: [PATCH] storeManagement contentmanagement edit

---
 src/views/ContentManagementView.vue |   17 +
 src/views/StoreManagementView.vue   | 1424 +++++++++------------------
 2 files changed, 461 insertions(+), 980 deletions(-)

diff --git a/src/views/ContentManagementView.vue b/src/views/ContentManagementView.vue
index 1c947a1..15095b3 100644
--- a/src/views/ContentManagementView.vue
+++ b/src/views/ContentManagementView.vue
@@ -1,6 +1,23 @@
 //* src/views/ContentManagementView.vue
 <template>
   <v-container fluid class="pa-4">
+    <!-- 페이지 헤더 -->
+    <v-row>
+      <v-col cols="12">
+        <div class="d-flex align-center mb-4">
+          <v-btn
+            icon
+            @click="$router.go(-1)"
+            class="mr-3"
+          >
+            <v-icon>mdi-arrow-left</v-icon>
+          </v-btn>
+          <h1 class="text-h5">📝 콘텐츠 관리</h1>
+        </div>
+        <p class="text-subtitle-1 grey--text">생성된 콘텐츠를 관리하고 성과를 분석합니다</p>
+      </v-col>
+    </v-row>
+
     <!-- 필터 섹션 -->
     <v-row class="mb-4">
       <v-col cols="12" md="3">
diff --git a/src/views/StoreManagementView.vue b/src/views/StoreManagementView.vue
index ec2d259..36427fa 100644
--- a/src/views/StoreManagementView.vue
+++ b/src/views/StoreManagementView.vue
@@ -126,104 +126,98 @@
                 </v-col>
               </v-row>
               
-              <!-- SNS 정보 섹션 수정 부분 -->
-              <v-col cols="12">
-                <h4 class="text-subtitle-1 font-weight-bold mb-3">SNS 계정 정보</h4>
-              </v-col>
-
-              <!-- 인스타그램 -->
-              <v-col cols="12">
-                <div class="d-flex align-center" style="gap: 12px;">
-                  <v-text-field
-                    v-model="formData.instagramUrl"
-                    label="Instagram URL"
-                    variant="outlined"
-                    prepend-inner-icon="mdi-instagram"
-                    style="flex: 1;"
-                    placeholder="https://instagram.com/yourstore"
-                  />
-                  <v-btn
-                    color="purple"
-                    variant="tonal"
-                    prepend-icon="mdi-check-circle"
-                    size="default"
-                    style="min-width: 120px; height: 56px;"
-                    @click="checkSnsConnection('instagram')"
-                    :loading="snsCheckLoading.instagram"
-                  >
-                    연동 확인
-                  </v-btn>
-                </div>
-              </v-col>
-
-              <!-- 네이버 블로그 -->
-              <v-col cols="12">
-                <div class="d-flex align-center" style="gap: 12px;">
-                  <v-text-field
-                    v-model="formData.blogUrl"
-                    label="네이버 블로그 URL"
-                    variant="outlined"
-                    prepend-inner-icon="mdi-notebook"
-                    style="flex: 1;"
-                    placeholder="https://blog.naver.com/yourstore"
-                  />
-                  <v-btn
-                    color="green"
-                    variant="tonal"
-                    prepend-icon="mdi-check-circle"
-                    size="default"
-                    style="min-width: 120px; height: 56px;"
-                    @click="checkSnsConnection('naver_blog')"
-                    :loading="snsCheckLoading.naver_blog"
-                  >
-                    연동 확인
-                  </v-btn>
-                </div>
-              </v-col>
-
+              <!-- 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 justify-space-between">
+                    <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-btn
+                      v-if="storeInfo.instagramUrl"
+                      color="purple"
+                      size="small"
+                      variant="tonal"
+                      @click="checkSnsConnection('instagram')"
+                      :loading="snsCheckLoading.instagram"
+                    >
+                      연동 확인
+                    </v-btn>
+                  </div>
+                </v-col>
+                
+                <v-col cols="12" sm="6">
+                  <div class="d-flex align-center justify-space-between">
+                    <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-btn
+                      v-if="storeInfo.blogUrl"
+                      color="green"
+                      size="small"
+                      variant="tonal"
+                      @click="checkSnsConnection('naver_blog')"
+                      :loading="snsCheckLoading.naver_blog"
+                    >
+                      연동 확인
+                    </v-btn>
+                  </div>
+                </v-col>
+              </v-row>
+              
               <!-- 운영 정보 -->
               <v-divider class="my-6" />
               
               <h4 class="text-h6 font-weight-bold mb-4">운영 정보</h4>
               
               <v-row>
-                <v-col cols="12" sm="6">
+                <v-col cols="12" sm="4">
                   <div class="mb-4">
-                    <h5 class="text-subtitle-2 text-grey mb-1">영업 시간</h5>
-                    <p class="text-body-1">{{ storeInfo.openTime || '09:00' }} - {{ storeInfo.closeTime || '21:00' }}</p>
+                    <h4 class="text-subtitle-2 text-grey mb-1">영업시간</h4>
+                    <p class="text-body-1">{{ storeInfo.openTime }} - {{ storeInfo.closeTime }}</p>
                   </div>
                 </v-col>
                 
-                <v-col cols="12" sm="6">
+                <v-col cols="12" sm="4">
                   <div class="mb-4">
-                    <h5 class="text-subtitle-2 text-grey mb-1">휴무일</h5>
+                    <h4 class="text-subtitle-2 text-grey mb-1">휴무일</h4>
                     <p class="text-body-1">{{ formatHolidays(storeInfo.holidays) }}</p>
                   </div>
                 </v-col>
                 
-                <v-col cols="12" sm="6">
+                <v-col cols="12" sm="4">
                   <div class="mb-4">
-                    <h5 class="text-subtitle-2 text-grey mb-1">배달 서비스</h5>
-                    <v-chip 
-                      :color="storeInfo.deliveryAvailable ? 'success' : 'error'"
-                      variant="tonal"
-                      size="small"
-                    >
-                      {{ 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"
-                      size="small"
-                    >
-                      {{ storeInfo.takeoutAvailable ? '이용 가능' : '이용 불가' }}
-                    </v-chip>
+                    <h4 class="text-subtitle-2 text-grey mb-1">서비스</h4>
+                    <div class="d-flex gap-2">
+                      <v-chip
+                        v-if="storeInfo.deliveryAvailable"
+                        color="success"
+                        size="small"
+                        variant="tonal"
+                      >
+                        배달
+                      </v-chip>
+                      <v-chip
+                        v-if="storeInfo.takeoutAvailable"
+                        color="primary"
+                        size="small"
+                        variant="tonal"
+                      >
+                        포장
+                      </v-chip>
+                    </div>
                   </div>
                 </v-col>
               </v-row>
@@ -233,7 +227,36 @@
 
         <!-- 메뉴 관리 탭 -->
         <v-tabs-window-item value="menu">
-          <v-card elevation="2">
+          <!-- 메뉴 통계 카드 -->
+          <v-row class="mb-4">
+            <v-col cols="6" sm="3">
+              <v-card class="text-center pa-4" variant="tonal" color="primary">
+                <div class="text-h4 font-weight-bold">{{ menus.length }}</div>
+                <div class="text-caption text-grey">전체 메뉴</div>
+              </v-card>
+            </v-col>
+            <v-col cols="6" sm="3">
+              <v-card class="text-center pa-4" variant="tonal" color="success">
+                <div class="text-h4 font-weight-bold">{{ availableMenusCount }}</div>
+                <div class="text-caption text-grey">판매중</div>
+              </v-card>
+            </v-col>
+            <v-col cols="6" sm="3">
+              <v-card class="text-center pa-4" variant="tonal" color="warning">
+                <div class="text-h4 font-weight-bold">{{ recommendedMenusCount }}</div>
+                <div class="text-caption text-grey">추천메뉴</div>
+              </v-card>
+            </v-col>
+            <v-col cols="6" sm="3">
+              <v-card class="text-center pa-4" variant="tonal" color="info">
+                <div class="text-h4 font-weight-bold">{{ averagePrice }}</div>
+                <div class="text-caption text-grey">평균가격</div>
+              </v-card>
+            </v-col>
+          </v-row>
+
+          <!-- 메뉴 관리 도구 -->
+          <v-card class="mb-4">
             <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-food</v-icon>
@@ -241,852 +264,266 @@
               </div>
               <v-btn
                 color="primary"
-                variant="elevated"
                 prepend-icon="mdi-plus"
                 @click="openCreateMenuDialog"
               >
-                메뉴 추가
+                메뉴 등록
               </v-btn>
             </v-card-title>
             
             <v-divider />
-
-            <!-- 검색 및 필터 -->
+            
             <v-card-text class="pa-4">
+              <!-- 검색 및 필터 -->
               <v-row class="mb-4">
-                <v-col cols="12" md="6">
+                <v-col cols="12" sm="6">
                   <v-text-field
-                    v-model="menuSearchQuery"
+                    v-model="menuSearch"
                     label="메뉴 검색"
+                    variant="outlined"
                     prepend-inner-icon="mdi-magnify"
-                    variant="outlined"
                     clearable
                     hide-details
                   />
                 </v-col>
-                <v-col cols="12" md="3">
+                <v-col cols="12" sm="3">
                   <v-select
-                    v-model="selectedMenuCategory"
-                    label="카테고리"
+                    v-model="menuCategoryFilter"
+                    label="카테고리 필터"
                     variant="outlined"
-                    :items="menuCategories"
-                    clearable
+                    :items="['전체', ...menuCategories]"
                     hide-details
                   />
                 </v-col>
-                <v-col cols="12" md="3">
+                <v-col cols="12" sm="3">
                   <v-select
-                    v-model="menuSortBy"
-                    label="정렬"
+                    v-model="menuStatusFilter"
+                    label="상태 필터"
                     variant="outlined"
-                    :items="menuSortOptions"
+                    :items="['전체', '판매중', '품절']"
                     hide-details
                   />
                 </v-col>
               </v-row>
-
-              <!-- 메뉴가 없는 경우 -->
-              <div v-if="filteredMenus.length === 0 && !menuLoading">
-                <v-row justify="center">
-                  <v-col cols="12" md="8">
-                    <v-card class="text-center pa-8" elevation="0" color="grey-lighten-5">
-                      <v-img
-                        src="/images/menu-placeholder.png"
-                        max-width="200"
-                        class="mx-auto mb-4"
-                      />
-                      <h3 class="text-h6 font-weight-bold mb-3">첫 메뉴를 등록해보세요!</h3>
-                      <p class="text-grey mb-4">
-                        메뉴를 등록하면 AI가 더 정확한 마케팅 콘텐츠를 생성할 수 있습니다
-                      </p>
-                      <v-btn
-                        color="primary"
-                        size="large"
-                        prepend-icon="mdi-food-apple"
-                        @click="openCreateMenuDialog"
-                      >
-                        메뉴 등록하기
-                      </v-btn>
-                    </v-card>
-                  </v-col>
-                </v-row>
-              </div>
-
-              <!-- 메뉴 목록 -->
-              <div v-else>                
-                <!-- 메뉴 그리드 -->
-                <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 menu-card" @click="viewMenuDetail(menu)">
-                      <!-- 메뉴 이미지 -->
-                      <div class="position-relative">
-                        <v-img
-                          :src="menu.imageUrl || '/images/menu-placeholder.png'"
-                          height="200"
-                          cover
-                        >
-                          <!-- 상태 칩 -->
-                          <div class="position-absolute top-0 right-0 ma-2">
-                            <v-chip
-                              :color="menu.available ? 'success' : 'error'"
-                              size="small"
-                              variant="elevated"
-                            >
-                              {{ menu.available ? '판매중' : '품절' }}
-                            </v-chip>
-                          </div>
-                          <!-- 추천 배지 -->
-                          <div v-if="menu.recommended" class="position-absolute top-0 left-0 ma-2">
-                            <v-chip
-                              color="warning"
-                              size="small"
-                              variant="elevated"
-                              prepend-icon="mdi-star"
-                            >
-                              추천
-                            </v-chip>
-                          </div>
-                        </v-img>
-                      </div>
-
-                      <!-- 메뉴 정보 -->
-                      <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.stop="editMenu(menu)"
-                            >
-                              <v-icon size="20">mdi-pencil</v-icon>
-                            </v-btn>
-                            <v-btn
-                              icon
-                              size="small"
-                              variant="text"
-                              color="error"
-                              @click.stop="confirmDeleteMenu(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>
-                        </div>
-                      </v-card-text>
-                    </v-card>
-                  </v-col>
-                </v-row>
-              </div>
             </v-card-text>
           </v-card>
+
+          <!-- 메뉴 목록 -->
+          <div v-if="filteredMenus.length > 0">
+            <v-row>
+              <v-col
+                v-for="menu in filteredMenus"
+                :key="menu.id"
+                cols="12"
+                sm="6"
+                md="4"
+                lg="3"
+              >
+                <v-card
+                  class="menu-card h-100 position-relative"
+                  elevation="2"
+                  @click="viewMenuDetail(menu)"
+                >
+                  <!-- 메뉴 상태 배지 -->
+                  <div class="position-absolute top-0 right-0 pa-2" style="z-index: 1;">
+                    <v-chip
+                      :color="menu.available ? 'success' : 'error'"
+                      size="small"
+                      variant="elevated"
+                    >
+                      {{ menu.available ? '판매중' : '품절' }}
+                    </v-chip>
+                  </div>
+                  
+                  <!-- 추천 메뉴 배지 -->
+                  <div
+                    v-if="menu.recommended"
+                    class="position-absolute top-0 left-0 pa-2"
+                    style="z-index: 1;"
+                  >
+                    <v-chip
+                      color="warning"
+                      size="small"
+                      variant="elevated"
+                    >
+                      <v-icon size="small" class="mr-1">mdi-star</v-icon>
+                      추천
+                    </v-chip>
+                  </div>
+
+                  <v-img
+                    :src="menu.imageUrl || '/images/menu-placeholder.png'"
+                    :alt="menu.menuName"
+                    height="200"
+                    cover
+                  />
+
+                  <v-card-title class="pa-3">
+                    <div class="w-100">
+                      <div class="d-flex align-center justify-space-between mb-2">
+                        <h4 class="text-subtitle-1 font-weight-bold text-truncate">
+                          {{ menu.menuName }}
+                        </h4>
+                        <div class="d-flex align-center">
+                          <v-btn
+                            icon
+                            size="small"
+                            variant="text"
+                            @click.stop="editMenu(menu)"
+                          >
+                            <v-icon size="small">mdi-pencil</v-icon>
+                          </v-btn>
+                          <v-btn
+                            icon
+                            size="small"
+                            variant="text"
+                            color="error"
+                            @click.stop="confirmDeleteMenu(menu)"
+                          >
+                            <v-icon size="small">mdi-delete</v-icon>
+                          </v-btn>
+                        </div>
+                      </div>
+                      
+                      <div class="d-flex align-center justify-space-between">
+                        <v-chip
+                          :color="getCategoryColor(menu.category)"
+                          size="small"
+                          variant="tonal"
+                        >
+                          {{ menu.category }}
+                        </v-chip>
+                        <span class="text-h6 font-weight-bold text-primary">
+                          {{ formatCurrency(menu.price) }}
+                        </span>
+                      </div>
+                      
+                      <p class="text-body-2 text-grey mt-2 text-truncate-2">
+                        {{ menu.description }}
+                      </p>
+                    </div>
+                  </v-card-title>
+                </v-card>
+              </v-col>
+            </v-row>
+          </div>
+
+          <!-- 메뉴가 없는 경우 -->
+          <div v-else-if="menus.length === 0" class="empty-state pa-8">
+            <v-img
+              src="/images/menu-placeholder.png"
+              max-width="200"
+              class="mx-auto mb-4"
+            />
+            <h3 class="text-h6 font-weight-bold mb-3 text-center">등록된 메뉴가 없습니다</h3>
+            <p class="text-grey text-center mb-4">
+              첫 메뉴를 등록하여 AI 마케팅 콘텐츠를 생성해보세요
+            </p>
+            <div class="text-center">
+              <v-btn
+                color="primary"
+                prepend-icon="mdi-plus"
+                @click="openCreateMenuDialog"
+              >
+                메뉴 등록하기
+              </v-btn>
+            </div>
+          </div>
+
+          <!-- 필터 결과가 없는 경우 -->
+          <div v-else class="text-center pa-8">
+            <v-icon size="64" color="grey-lighten-2" class="mb-4">mdi-magnify</v-icon>
+            <h3 class="text-h6 font-weight-bold mb-3">검색 결과가 없습니다</h3>
+            <p class="text-grey mb-4">다른 검색 조건을 시도해보세요</p>
+            <v-btn
+              variant="outlined"
+              @click="clearFilters"
+            >
+              필터 초기화
+            </v-btn>
+          </div>
         </v-tabs-window-item>
       </v-tabs-window>
     </div>
 
-    <!-- 메뉴 상세보기 다이얼로그 -->
-    <v-dialog
-      v-model="showMenuDetailDialog"
-      max-width="600"
-      scrollable
-    >
-      <v-card v-if="selectedMenuDetail">
-        <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-food</v-icon>
-            <span class="text-h6">메뉴 상세 정보</span>
-          </div>
-        </v-card-title>
-
-        <v-divider />
-
-        <v-card-text class="pa-6">
-          <!-- 메뉴 이미지 -->
-          <div class="text-center mb-6">
-            <v-img
-              :src="selectedMenuDetail.imageUrl || '/images/menu-placeholder.png'"
-              :alt="selectedMenuDetail.menuName"
-              max-width="300"
-              max-height="200"
-              class="mx-auto rounded"
-            />
-          </div>
-
-          <!-- 메뉴 기본 정보 -->
-          <div class="mb-6">
-            <div class="d-flex align-center justify-space-between mb-4">
-              <h2 class="text-h5 font-weight-bold">{{ selectedMenuDetail.menuName }}</h2>
-              <div class="d-flex gap-2">
-                <v-chip
-                  :color="selectedMenuDetail.available ? 'success' : 'error'"
-                  size="small"
-                  variant="elevated"
-                >
-                  {{ selectedMenuDetail.available ? '판매중' : '품절' }}
-                </v-chip>
-                <v-chip
-                  v-if="selectedMenuDetail.recommended"
-                  color="warning"
-                  size="small"
-                  variant="elevated"
-                  prepend-icon="mdi-star"
-                >
-                  추천
-                </v-chip>
-              </div>
-            </div>
-
-            <div class="d-flex align-center justify-space-between mb-4">
-              <v-chip
-                :color="getCategoryColor(selectedMenuDetail.category)"
-                variant="tonal"
-              >
-                {{ selectedMenuDetail.category }}
-              </v-chip>
-              <span class="text-h4 font-weight-bold text-primary">
-                {{ formatCurrency(selectedMenuDetail.price) }}
-              </span>
-            </div>
-          </div>
-
-          <!-- 메뉴 설명 -->
-          <div class="mb-4">
-            <h4 class="text-h6 font-weight-bold mb-2">메뉴 설명</h4>
-            <p class="text-body-1">
-              {{ selectedMenuDetail.description || '메뉴 설명이 없습니다.' }}
-            </p>
-          </div>
-
-          <!-- 메뉴 정보 카드들 -->
-          <v-row>
-            <v-col cols="6">
-              <v-card variant="tonal" color="primary" class="text-center pa-4">
-                <v-icon size="32" class="mb-2">mdi-food</v-icon>
-                <h4 class="text-subtitle-1 font-weight-bold">카테고리</h4>
-                <p class="text-body-2">{{ selectedMenuDetail.category }}</p>
-              </v-card>
-            </v-col>
-            <v-col cols="6">
-              <v-card variant="tonal" color="success" class="text-center pa-4">
-                <v-icon size="32" class="mb-2">mdi-currency-krw</v-icon>
-                <h4 class="text-subtitle-1 font-weight-bold">가격</h4>
-                <p class="text-body-2">{{ formatCurrency(selectedMenuDetail.price) }}</p>
-              </v-card>
-            </v-col>
-          </v-row>
-        </v-card-text>
-
-        <v-divider />
-
-        <v-card-actions class="pa-4 justify-end">
-          <v-btn
-            variant="text"
-            @click="showMenuDetailDialog = false"
-          >
-            닫기
-          </v-btn>
-          <v-btn
-            color="primary"
-            @click="editFromDetail"
-          >
-            수정하기
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <!-- 매장 등록/수정 다이얼로그 -->
-    <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">
-                <div class="d-flex align-center gap-3">
-                  <v-text-field
-                    v-model="formData.instagramUrl"
-                    label="Instagram URL"
-                    variant="outlined"
-                    prepend-inner-icon="mdi-instagram"
-                    class="flex-grow-1"
-                    placeholder="https://instagram.com/yourstore"
-                  />
-                  <v-btn
-                    color="purple"
-                    variant="tonal"
-                    prepend-icon="mdi-check-circle"
-                    @click="checkSnsConnection('instagram')"
-                    :loading="snsCheckLoading.instagram"
-                    :disabled="!formData.instagramUrl"
-                  >
-                    연동 확인
-                  </v-btn>
-                </div>
-              </v-col>
-
-              <!-- 네이버 블로그 -->
-              <v-col cols="12">
-                <div class="d-flex align-center gap-3">
-                  <v-text-field
-                    v-model="formData.blogUrl"
-                    label="네이버 블로그 URL"
-                    variant="outlined"
-                    prepend-inner-icon="mdi-blogger"
-                    class="flex-grow-1"
-                    placeholder="https://blog.naver.com/yourstore"
-                  />
-                  <v-btn
-                    color="green"
-                    variant="tonal"
-                    prepend-icon="mdi-check-circle"
-                    @click="checkSnsConnection('naver_blog')"
-                    :loading="snsCheckLoading.naver_blog"
-                    :disabled="!formData.blogUrl"
-                  >
-                    연동 확인
-                  </v-btn>
-                </div>
-              </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
-                />
-              </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
-            variant="text"
-            @click="closeDialog"
-          >
-            취소
-          </v-btn>
-          <v-btn
-            color="primary"
-            :loading="saving"
-            :disabled="!formValid"
-            @click="saveStoreInfo"
-          >
-            {{ editMode ? '수정하기' : '등록하기' }}
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <!-- 메뉴 등록/수정 다이얼로그 -->
-    <v-dialog
-      v-model="showMenuDialog"
-      max-width="600"
-      persistent
-      scrollable
-    >
-      <v-card>
-        <v-card-title class="pa-4">
-          <span class="text-h6">{{ editMenuMode ? '메뉴 수정' : '메뉴 등록' }}</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">
-                <v-combobox
-                  v-model="menuFormData.category"
-                  label="카테고리 *"
-                  variant="outlined"
-                  :items="menuCategories"
-                  :rules="[v => !!v || '카테고리를 선택해주세요']"
-                  required
-                />
-              </v-col>
-
-              <v-col cols="12">
-                <v-textarea
-                  v-model="menuFormData.description"
-                  label="메뉴 설명"
-                  variant="outlined"
-                  rows="3"
-                  placeholder="메뉴에 대한 자세한 설명을 입력해주세요"
-                />
-              </v-col>
-
-              <v-col cols="12" sm="6">
-                <div class="d-flex flex-column gap-2 mt-4">
-                  <v-switch
-                    v-model="menuFormData.available"
-                    label="판매 중"
-                    color="success"
-                  />
-                  <v-switch
-                    v-model="menuFormData.recommended"
-                    label="추천 메뉴"
-                    color="warning"
-                  />
-                </div>
-              </v-col>
-            </v-row>
-          </v-form>
-        </v-card-text>
-
-        <v-divider />
-
-        <v-card-actions class="pa-4">
-          <v-spacer />
-          <v-btn
-            variant="text"
-            @click="closeMenuDialog"
-          >
-            취소
-          </v-btn>
-          <v-btn
-            color="primary"
-            :loading="savingMenu"
-            :disabled="!menuFormValid"
-            @click="saveMenu"
-          >
-            {{ editMenuMode ? '수정하기' : '등록하기' }}
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <!-- 메뉴 삭제 확인 다이얼로그 -->
-    <v-dialog v-model="showDeleteMenuDialog" max-width="400">
-      <v-card>
-        <v-card-title class="text-h6">메뉴 삭제</v-card-title>
-        <v-card-text>
-          <p>정말로 <strong>{{ deleteMenuTarget?.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="showDeleteMenuDialog = false"
-          >
-            취소
-          </v-btn>
-          <v-btn
-            color="error"
-            :loading="deletingMenu"
-            @click="deleteMenu"
-          >
-            삭제
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <!-- SNS 연동 확인 결과 다이얼로그 -->
-    <v-dialog v-model="showSnsResultDialog" max-width="400">
-      <v-card>
-        <v-card-title class="pa-4">
-          <v-icon :color="snsConnectionResult.success ? 'success' : 'error'" class="mr-2">
-            {{ snsConnectionResult.success ? 'mdi-check-circle' : 'mdi-alert-circle' }}
-          </v-icon>
-          SNS 연동 확인 결과
-        </v-card-title>
-        <v-card-text class="pa-4">
-          <p>{{ snsConnectionResult.message }}</p>
-        </v-card-text>
-        <v-card-actions>
-          <v-spacer />
-          <v-btn color="primary" @click="showSnsResultDialog = false">확인</v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <!-- 로딩 오버레이 -->
-    <v-overlay v-if="storeStore.loading" class="align-center justify-center">
+    <!-- 로딩 상태 -->
+    <div v-else-if="storeStore.loading" class="text-center pa-8">
       <v-progress-circular
+        size="64"
         color="primary"
         indeterminate
-        size="64"
+        class="mb-4"
       />
-    </v-overlay>
+      <p class="text-body-1">매장 정보를 불러오는 중...</p>
+    </div>
 
     <!-- 스낵바 -->
     <v-snackbar
       v-model="snackbar.show"
       :color="snackbar.color"
       :timeout="3000"
-      location="top"
+      location="bottom"
     >
       {{ snackbar.message }}
     </v-snackbar>
-  </v-container>
-</template>
 
 <script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
-import { useStoreStore, useAppStore } from '@/store/index'
+import { ref, computed, onMounted } from 'vue'
+import { useStoreStore } from '@/stores/store'
 
+/**
+ * AI 마케팅 서비스 - 매장 관리 페이지
+ * 매장 정보 관리 및 메뉴 관리 기능 제공
+ * 유저스토리: STR-005, STR-010, STR-015, STR-020, STR-025, STR-030, STR-035, STR-040
+ */
+
+// 스토어
 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 showSnsResultDialog = ref(false)
-
-// SNS 연동 확인 관련 상태
-const snsCheckLoading = reactive({
-  instagram: false,
-  naver_blog: false
-})
-
-const snsConnectionResult = reactive({
-  success: false,
-  message: '',
-  platform: ''
-})
 
 // 메뉴 관리 관련 상태
-const menuSearchQuery = ref('')
-const selectedMenuCategory = ref('')
-const menuSortBy = ref('name')
 const showMenuDialog = ref(false)
-const showDeleteMenuDialog = ref(false)
 const editMenuMode = ref(false)
 const menuFormValid = ref(false)
 const savingMenu = ref(false)
 const deletingMenu = ref(false)
+const showDeleteMenuDialog = ref(false)
 const deleteMenuTarget = ref(null)
 const menuImageInput = ref(null)
-const menuLoading = ref(false)
+const menuSearch = ref('')
+const menuCategoryFilter = ref('전체')
+const menuStatusFilter = ref('전체')
 
-// 메뉴 폼 데이터
-const menuFormData = reactive({
-  menuName: '',
-  price: 0,
-  category: '',
-  description: '',
-  ingredients: '',
-  spicyLevel: '보통',
-  calories: 0,
-  available: true,
-  recommended: false,
-  imageUrl: ''
+// SNS 연동 관련 상태
+const snsCheckLoading = ref({
+  instagram: false,
+  naver_blog: false
+})
+const showSnsResultDialog = ref(false)
+const snsConnectionResult = ref({
+  success: false,
+  platform: '',
+  message: ''
 })
 
-// 더미 메뉴 데이터
-const menus = ref([
-  {
-    id: 1,
-    menuName: '떡볶이',
-    price: 3000,
-    category: '면류',
-    description: '매콤달콤한 우리 떡볶이입니다',
-    available: true,
-    recommended: true,
-    imageUrl: '/images/menu-tteokbokki.jpg',
-    rating: 4.5
-  },
-  {
-    id: 2,
-    menuName: '김밥',
-    price: 2500,
-    category: '면류',
-    description: '신선한 재료로 만든 김밥',
-    available: true,
-    recommended: false,
-    imageUrl: '/images/menu-kimbap.jpg',
-    rating: 4.2
-  },
-  {
-    id: 3,
-    menuName: '오징어튀김',
-    price: 4000,
-    category: '튀김류',
-    description: '바삭바삭한 오징어튀김',
-    available: false,
-    recommended: false,
-    imageUrl: '/images/menu-squid.jpg',
-    rating: 4.0
-  },
-  {
-    id: 4,
-    menuName: '콜라',
-    price: 1500,
-    category: '음료',
-    description: '시원한 콜라',
-    available: true,
-    recommended: false,
-    imageUrl: '/images/menu-cola.jpg',
-    rating: 3.8
-  }
-])
-
-const snackbar = reactive({
+// 스낵바 상태
+const snackbar = ref({
   show: false,
   message: '',
   color: 'success'
 })
 
 // 폼 데이터
-const formData = reactive({
+const formData = ref({
   storeName: '',
   businessType: '',
   ownerName: '',
@@ -1104,92 +541,115 @@ const formData = reactive({
   imageUrl: ''
 })
 
+// 메뉴 폼 데이터
+const menuFormData = ref({
+  menuName: '',
+  price: 0,
+  category: '',
+  description: '',
+  available: true,
+  recommended: false,
+  imageUrl: ''
+})
+
+// 메뉴 목록 (데모 데이터)
+const menus = ref([
+  {
+    id: 1,
+    menuName: '김치찌개',
+    category: '찌개류',
+    price: 8000,
+    description: '돼지고기와 신김치로 끓인 얼큰한 김치찌개',
+    available: true,
+    recommended: true,
+    imageUrl: '/images/kimchi-jjigae.jpg'
+  },
+  {
+    id: 2,
+    menuName: '된장찌개',
+    category: '찌개류',
+    price: 7000,
+    description: '집된장으로 끓인 구수한 된장찌개',
+    available: true,
+    recommended: false,
+    imageUrl: '/images/doenjang-jjigae.jpg'
+  },
+  {
+    id: 3,
+    menuName: '제육볶음',
+    category: '볶음류',
+    price: 12000,
+    description: '매콤달콤한 양념에 볶은 제육볶음',
+    available: false,
+    recommended: true,
+    imageUrl: '/images/jeyuk-bokkeum.jpg'
+  }
+])
+
 // 컴퓨티드 속성
 const storeInfo = computed(() => storeStore.storeInfo || {})
 
-// 메뉴 관련 컴퓨티드
+const availableMenusCount = computed(() => 
+  menus.value.filter(menu => menu.available).length
+)
+
+const recommendedMenusCount = computed(() => 
+  menus.value.filter(menu => menu.recommended).length
+)
+
+const averagePrice = computed(() => {
+  if (menus.value.length === 0) return '0원'
+  const total = menus.value.reduce((sum, menu) => sum + menu.price, 0)
+  const average = Math.round(total / menus.value.length)
+  return formatCurrency(average)
+})
+
 const filteredMenus = computed(() => {
   let filtered = menus.value
 
-  if (menuSearchQuery.value) {
-    const query = menuSearchQuery.value.toLowerCase()
-    filtered = filtered.filter(menu => 
-      menu.menuName.toLowerCase().includes(query) ||
-      menu.description.toLowerCase().includes(query) ||
-      menu.category.toLowerCase().includes(query)
+  // 검색 필터
+  if (menuSearch.value) {
+    filtered = filtered.filter(menu =>
+      menu.menuName.toLowerCase().includes(menuSearch.value.toLowerCase()) ||
+      menu.description.toLowerCase().includes(menuSearch.value.toLowerCase())
     )
   }
 
-  if (selectedMenuCategory.value) {
-    filtered = filtered.filter(menu => menu.category === selectedMenuCategory.value)
+  // 카테고리 필터
+  if (menuCategoryFilter.value !== '전체') {
+    filtered = filtered.filter(menu => menu.category === menuCategoryFilter.value)
   }
 
-  // 정렬
-  switch (menuSortBy.value) {
-    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
-    default: // name
-      filtered.sort((a, b) => a.menuName.localeCompare(b.menuName))
+  // 상태 필터
+  if (menuStatusFilter.value !== '전체') {
+    const isAvailable = menuStatusFilter.value === '판매중'
+    filtered = filtered.filter(menu => menu.available === isAvailable)
   }
 
   return filtered
 })
 
-const totalMenuCount = computed(() => menus.value.length)
-const availableMenuCount = computed(() => menus.value.filter(m => m.available).length)
-const recommendedMenuCount = computed(() => menus.value.filter(m => m.recommended).length)
-const averagePrice = computed(() => {
-  if (menus.value.length === 0) return '₩0'
-  const avg = menus.value.reduce((sum, menu) => sum + menu.price, 0) / menus.value.length
-  return formatCurrency(Math.round(avg))
+const menuCategories = computed(() => {
+  const categories = [...new Set(menus.value.map(menu => menu.category))]
+  return categories.sort()
 })
 
-// 옵션 데이터
+// 선택 옵션
 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' }
+  { title: '월요일', value: 'monday' },
+  { title: '화요일', value: 'tuesday' },
+  { title: '수요일', value: 'wednesday' },
+  { title: '목요일', value: 'thursday' },
+  { title: '금요일', value: 'friday' },
+  { title: '토요일', value: 'saturday' },
+  { title: '일요일', value: 'sunday' }
 ]
 
-const menuCategories = computed(() => {
-  const categories = [...new Set(menus.value.map(menu => menu.category))]
-  const defaultCategories = ['면류', '튀김류', '음료', '안주', '디저트']
-  return [...new Set([...defaultCategories, ...categories])]
-})
-
-const menuSortOptions = [
-  { title: '이름순', value: 'name' },
-  { title: '가격 낮은순', value: 'price_asc' },
-  { title: '가격 높은순', value: 'price_desc' },
-  { title: '추천순', value: 'recommended' }
-]
-
-const spicyLevels = ['안매움', '조금매움', '보통', '매움', '아주매움']
-
 // 유효성 검사 규칙
 const businessNumberRules = [
   v => !!v || '사업자등록번호를 입력해주세요',
@@ -1234,7 +694,9 @@ const getCategoryColor = (category) => {
     '튀김류': 'amber',
     '음료': 'blue',
     '안주': 'green',
-    '디저트': 'pink'
+    '디저트': 'pink',
+    '찌개류': 'red',
+    '볶음류': 'purple'
   }
   return colors[category] || 'grey'
 }
@@ -1248,7 +710,7 @@ const getCategoryColor = (category) => {
 const checkSnsConnection = async (platform) => {
   console.log(`${platform} 연동 확인 시작`)
   
-  snsCheckLoading[platform] = true
+  snsCheckLoading.value[platform] = true
   
   try {
     // 개발 모드에서는 빠른 시뮬레이션
@@ -1258,15 +720,15 @@ const checkSnsConnection = async (platform) => {
     // 랜덤하게 성공/실패 결정 (실제로는 API 응답에 따라 결정)
     const isSuccess = Math.random() > 0.3
     
-    snsConnectionResult.success = isSuccess
-    snsConnectionResult.platform = platform
+    snsConnectionResult.value.success = isSuccess
+    snsConnectionResult.value.platform = platform
     
     if (isSuccess) {
-      snsConnectionResult.message = platform === 'instagram' 
+      snsConnectionResult.value.message = platform === 'instagram' 
         ? '인스타그램 계정 연동이 확인되었습니다!' 
         : '네이버 블로그 연동이 확인되었습니다!'
     } else {
-      snsConnectionResult.message = platform === 'instagram' 
+      snsConnectionResult.value.message = platform === 'instagram' 
         ? '인스타그램 계정을 찾을 수 없거나 연동할 수 없습니다. URL을 확인해주세요.' 
         : '네이버 블로그를 찾을 수 없거나 연동할 수 없습니다. URL을 확인해주세요.'
     }
@@ -1275,11 +737,11 @@ const checkSnsConnection = async (platform) => {
     
   } catch (error) {
     console.error('SNS 연동 확인 중 오류:', error)
-    snsConnectionResult.success = false
-    snsConnectionResult.message = '연동 확인 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.'
+    snsConnectionResult.value.success = false
+    snsConnectionResult.value.message = '연동 확인 중 오류가 발생했습니다. 잠시 후 다시 시도해주세요.'
     showSnsResultDialog.value = true
   } finally {
-    snsCheckLoading[platform] = false
+    snsCheckLoading.value[platform] = false
   }
 }
 
@@ -1322,7 +784,7 @@ const editBasicInfo = () => {
   editMode.value = true
   
   // 현재 매장 정보를 폼 데이터에 복사
-  Object.assign(formData, {
+  Object.assign(formData.value, {
     storeName: storeInfo.value.storeName || '',
     businessType: storeInfo.value.businessType || '',
     ownerName: storeInfo.value.ownerName || '',
@@ -1359,7 +821,7 @@ const handleImageUpload = (event) => {
     // 실제로는 서버에 업로드하고 URL을 받아옴
     const reader = new FileReader()
     reader.onload = (e) => {
-      formData.imageUrl = e.target.result
+      formData.value.imageUrl = e.target.result
     }
     reader.readAsDataURL(file)
   }
@@ -1387,7 +849,7 @@ const saveStoreInfo = async () => {
       await new Promise(resolve => setTimeout(resolve, 1000))
       
       // 폼 데이터를 스토어에 직접 저장
-      const storeData = { ...formData, id: Date.now() }
+      const storeData = { ...formData.value, id: Date.now() }
       storeStore.storeInfo = storeData
       
       showSnackbar(
@@ -1402,10 +864,10 @@ const saveStoreInfo = async () => {
     let result
     if (editMode.value) {
       // 매장 정보 수정
-      result = await storeStore.updateStore(storeInfo.value.id, formData)
+      result = await storeStore.updateStore(storeInfo.value.id, formData.value)
     } else {
       // 매장 정보 등록
-      result = await storeStore.registerStore(formData)
+      result = await storeStore.registerStore(formData.value)
     }
 
     if (result.success) {
@@ -1436,7 +898,7 @@ const closeDialog = () => {
   editMode.value = false
   
   // 폼 데이터 초기화
-  Object.assign(formData, {
+  Object.assign(formData.value, {
     storeName: '',
     businessType: '',
     ownerName: '',
@@ -1471,7 +933,7 @@ const openCreateMenuDialog = () => {
  */
 const editMenu = (menu) => {
   editMenuMode.value = true
-  Object.assign(menuFormData, menu)
+  Object.assign(menuFormData.value, menu)
   showMenuDialog.value = true
 }
 
@@ -1498,7 +960,7 @@ const handleMenuImageUpload = (event) => {
   if (file) {
     const reader = new FileReader()
     reader.onload = (e) => {
-      menuFormData.imageUrl = e.target.result
+      menuFormData.value.imageUrl = e.target.result
     }
     reader.readAsDataURL(file)
   }
@@ -1521,15 +983,15 @@ const saveMenu = async () => {
 
     if (editMenuMode.value) {
       // 메뉴 수정
-      const index = menus.value.findIndex(m => m.id === menuFormData.id)
+      const index = menus.value.findIndex(m => m.id === menuFormData.value.id)
       if (index !== -1) {
-        menus.value[index] = { ...menuFormData }
+        menus.value[index] = { ...menuFormData.value }
       }
       showSnackbar('메뉴가 수정되었습니다', 'success')
     } else {
       // 메뉴 등록
       const newMenu = {
-        ...menuFormData,
+        ...menuFormData.value,
         id: Date.now(),
         rating: 0
       }
@@ -1581,27 +1043,57 @@ const closeMenuDialog = () => {
  * 메뉴 폼 초기화
  */
 const resetMenuForm = () => {
-  Object.assign(menuFormData, {
+  Object.assign(menuFormData.value, {
     menuName: '',
     price: 0,
     category: '',
     description: '',
-    ingredients: '',      // 누락된 필드 추가
-    spicyLevel: '보통',   // 누락된 필드 추가
-    calories: 0,          // 누락된 필드 추가
     available: true,
     recommended: false,
     imageUrl: ''
   })
 }
 
+/**
+ * 필터 초기화
+ */
+const clearFilters = () => {
+  menuSearch.value = ''
+  menuCategoryFilter.value = '전체'
+  menuStatusFilter.value = '전체'
+}
+
 /**
  * 스낵바 표시
  */
 const showSnackbar = (message, color = 'success') => {
-  snackbar.message = message
-  snackbar.color = color
-  snackbar.show = true
+  snackbar.value.message = message
+  snackbar.value.color = color
+  snackbar.value.show = true
+}
+
+// 메뉴 상세 다이얼로그 관련 상태 (기존 상태들에 추가)
+const showMenuDetailDialog = ref(false)
+const selectedMenuDetail = ref(null)
+
+// 메뉴 관리 메서드에 추가할 함수들
+
+/**
+ * 메뉴 상세보기
+ */
+const viewMenuDetail = (menu) => {
+  selectedMenuDetail.value = { ...menu }
+  showMenuDetailDialog.value = true
+}
+
+/**
+ * 상세화면에서 수정 모드로 전환
+ */
+const editFromDetail = () => {
+  showMenuDetailDialog.value = false
+  editMenuMode.value = true
+  Object.assign(menuFormData.value, selectedMenuDetail.value)
+  showMenuDialog.value = true
 }
 
 /**
@@ -1627,31 +1119,6 @@ onMounted(async () => {
     }
   }
 })
-
-// 메뉴 상세 다이얼로그 관련 상태 (기존 상태들에 추가)
-const showMenuDetailDialog = ref(false)
-const selectedMenuDetail = ref(null)
-
-// 메뉴 관리 메서드에 추가할 함수들
-
-/**
- * 메뉴 상세보기
- */
-const viewMenuDetail = (menu) => {
-  selectedMenuDetail.value = { ...menu }
-  showMenuDetailDialog.value = true
-}
-
-/**
- * 상세화면에서 수정 모드로 전환
- */
-const editFromDetail = () => {
-  showMenuDetailDialog.value = false
-  editMenuMode.value = true
-  Object.assign(menuFormData, selectedMenuDetail.value)
-  showMenuDialog.value = true
-}
-
 </script>
 
 <style scoped>
@@ -1986,6 +1453,13 @@ const editFromDetail = () => {
   white-space: nowrap;
 }
 
+.text-truncate-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
 /* 그리드 레이아웃 개선 */
 .v-row .v-col {
   display: flex;
@@ -2040,6 +1514,7 @@ const editFromDetail = () => {
 /* 메뉴 카드 그림자 효과 */
 .menu-card {
   transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+  cursor: pointer;
 }
 
 .menu-card:hover {
@@ -2153,17 +1628,6 @@ const editFromDetail = () => {
   }
 }
 
-/* 메뉴 카드 클릭 가능 스타일 */
-.menu-card {
-  cursor: pointer;
-  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
-}
-
-.menu-card:hover {
-  transform: translateY(-4px);
-  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-}
-
 /* 메뉴 상세 다이얼로그 스타일 */
 .menu-detail-card {
   border-radius: 16px;
@@ -2186,7 +1650,7 @@ const editFromDetail = () => {
   transition: transform 0.2s ease;
 }
 
-/* SNS 입력 행 레이아웃 */
+/* SNS 입력 행 레이아웃 - 우선순위가 높은 스타일 */
 .sns-input-row {
   display: flex !important;
   align-items: center !important;