diff --git a/public/images/menu-placeholder.png b/public/images/menu-placeholder.png
new file mode 100644
index 0000000..f097a4b
Binary files /dev/null and b/public/images/menu-placeholder.png differ
diff --git a/src/services/api.js b/src/services/api.js
index 6fbd09d..6ac5977 100644
--- a/src/services/api.js
+++ b/src/services/api.js
@@ -1,4 +1,5 @@
-//* src/services/api.js - 수정된 API URL 설정
+//* src/services/api.js - 수정된 버전 (createImageApiInstance 함수 추가)
+
 import axios from 'axios'
 
 // 런타임 환경 설정에서 API URL 가져오기
@@ -11,10 +12,9 @@ const getApiUrls = () => {
     STORE_URL: config.STORE_URL || 'http://localhost:8082/api/store',
     CONTENT_URL: config.CONTENT_URL || 'http://localhost:8083/api/content',
     MENU_URL: config.MENU_URL || 'http://localhost:8082/api/menu',
-    // ⚠️ 수정: 매출 API는 store 서비스 (포트 8082)
     SALES_URL: config.SALES_URL || 'http://localhost:8082/api/sales',
-    // ⚠️ 수정: 추천 API는 ai-recommend 서비스 (포트 8084)
-    RECOMMEND_URL: config.RECOMMEND_URL || 'http://localhost:8084/api/recommendations'
+    RECOMMEND_URL: config.RECOMMEND_URL || 'http://localhost:8084/api/recommendations',
+    IMAGE_URL: config.IMAGE_URL || 'http://localhost:8082/api/images'
   }
 }
 
@@ -37,7 +37,6 @@ const createApiInstance = (baseURL) => {
         config.headers.Authorization = `Bearer ${token}`
       }
       
-      // ⚠️ 추가: 요청 로깅 (개발 환경에서만)
       if (import.meta.env.DEV) {
         console.log(`🌐 [API_REQ] ${config.method?.toUpperCase()} ${config.baseURL}${config.url}`)
       }
@@ -52,14 +51,12 @@ const createApiInstance = (baseURL) => {
   // 응답 인터셉터 - 토큰 갱신 및 에러 처리
   instance.interceptors.response.use(
     (response) => {
-      // ⚠️ 추가: 응답 로깅 (개발 환경에서만)
       if (import.meta.env.DEV) {
         console.log(`✅ [API_RES] ${response.status} ${response.config?.method?.toUpperCase()} ${response.config?.url}`)
       }
       return response
     },
     async (error) => {
-      // ⚠️ 추가: 에러 로깅 (개발 환경에서만)
       if (import.meta.env.DEV) {
         console.error(`❌ [API_ERR] ${error.response?.status || 'Network'} ${error.config?.method?.toUpperCase()} ${error.config?.url}`, error.response?.data)
       }
@@ -102,10 +99,155 @@ const createApiInstance = (baseURL) => {
   return instance
 }
 
+// ✅ 이미지 업로드 전용 API 인스턴스 생성 함수 추가
+const createImageApiInstance = (baseURL) => {
+  const instance = axios.create({
+    baseURL,
+    timeout: 60000, // 이미지 업로드는 시간이 더 걸릴 수 있음
+    headers: {
+      Accept: 'application/json',
+    },
+  })
+
+  // 요청 인터셉터 - JWT 토큰 자동 추가
+  instance.interceptors.request.use(
+    (config) => {
+      const token = localStorage.getItem('accessToken')
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`
+      }
+      
+      if (import.meta.env.DEV) {
+        console.log(`🌐 [IMG_REQ] ${config.method?.toUpperCase()} ${config.baseURL}${config.url}`)
+        console.log('FormData 포함:', config.data instanceof FormData)
+      }
+      
+      return config
+    },
+    (error) => {
+      return Promise.reject(error)
+    },
+  )
+
+  // 응답 인터셉터
+  instance.interceptors.response.use(
+    (response) => {
+      if (import.meta.env.DEV) {
+        console.log(`✅ [IMG_RES] ${response.status} ${response.config?.method?.toUpperCase()} ${response.config?.url}`)
+      }
+      return response
+    },
+    async (error) => {
+      if (import.meta.env.DEV) {
+        console.error(`❌ [IMG_ERR] ${error.response?.status || 'Network'} ${error.config?.method?.toUpperCase()} ${error.config?.url}`, error.response?.data)
+      }
+      
+      // 토큰 갱신 로직은 기존과 동일
+      const originalRequest = error.config
+      if (error.response?.status === 401 && !originalRequest._retry) {
+        originalRequest._retry = true
+        try {
+          const refreshToken = localStorage.getItem('refreshToken')
+          if (refreshToken) {
+            const refreshResponse = await axios.post(`${getApiUrls().AUTH_URL}/refresh`, {
+              refreshToken,
+            })
+            const { accessToken, refreshToken: newRefreshToken } = refreshResponse.data.data
+            localStorage.setItem('accessToken', accessToken)
+            localStorage.setItem('refreshToken', newRefreshToken)
+            originalRequest.headers.Authorization = `Bearer ${accessToken}`
+            return instance(originalRequest)
+          }
+        } catch (refreshError) {
+          localStorage.removeItem('accessToken')
+          localStorage.removeItem('refreshToken')
+          localStorage.removeItem('userInfo')
+          window.location.href = '/login'
+        }
+      }
+      return Promise.reject(error)
+    },
+  )
+
+  return instance
+}
+
+// ✅ 메뉴 이미지 업로드 전용 API 인스턴스 생성 함수 추가
+const createMenuImageApiInstance = (baseURL) => {
+  const instance = axios.create({
+    baseURL,
+    timeout: 60000, // 이미지 업로드는 시간이 더 걸릴 수 있음
+    headers: {
+      Accept: 'application/json',
+    },
+  })
+
+  // 요청 인터셉터 - JWT 토큰 자동 추가
+  instance.interceptors.request.use(
+    (config) => {
+      const token = localStorage.getItem('accessToken')
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`
+      }
+      
+      if (import.meta.env.DEV) {
+        console.log(`🌐 [MENU_IMG_REQ] ${config.method?.toUpperCase()} ${config.baseURL}${config.url}`)
+        console.log('FormData 포함:', config.data instanceof FormData)
+      }
+      
+      return config
+    },
+    (error) => {
+      return Promise.reject(error)
+    },
+  )
+
+  // 응답 인터셉터
+  instance.interceptors.response.use(
+    (response) => {
+      if (import.meta.env.DEV) {
+        console.log(`✅ [MENU_IMG_RES] ${response.status} ${response.config?.method?.toUpperCase()} ${response.config?.url}`)
+      }
+      return response
+    },
+    async (error) => {
+      if (import.meta.env.DEV) {
+        console.error(`❌ [MENU_IMG_ERR] ${error.response?.status || 'Network'} ${error.config?.method?.toUpperCase()} ${error.config?.url}`, error.response?.data)
+      }
+      
+      // 토큰 갱신 로직은 기존과 동일
+      const originalRequest = error.config
+      if (error.response?.status === 401 && !originalRequest._retry) {
+        originalRequest._retry = true
+        try {
+          const refreshToken = localStorage.getItem('refreshToken')
+          if (refreshToken) {
+            const refreshResponse = await axios.post(`${getApiUrls().AUTH_URL}/refresh`, {
+              refreshToken,
+            })
+            const { accessToken, refreshToken: newRefreshToken } = refreshResponse.data.data
+            localStorage.setItem('accessToken', accessToken)
+            localStorage.setItem('refreshToken', newRefreshToken)
+            originalRequest.headers.Authorization = `Bearer ${accessToken}`
+            return instance(originalRequest)
+          }
+        } catch (refreshError) {
+          localStorage.removeItem('accessToken')
+          localStorage.removeItem('refreshToken')
+          localStorage.removeItem('userInfo')
+          window.location.href = '/login'
+        }
+      }
+      return Promise.reject(error)
+    },
+  )
+
+  return instance
+}
+
 // API 인스턴스들 생성
 const apiUrls = getApiUrls()
 
-// ⚠️ 추가: API URL 확인 로깅 (개발 환경에서만)
 if (import.meta.env.DEV) {
   console.log('🔧 [API_CONFIG] API URLs 설정:', apiUrls)
 }
@@ -115,8 +257,11 @@ export const authApi = createApiInstance(apiUrls.AUTH_URL)
 export const storeApi = createApiInstance(apiUrls.STORE_URL)
 export const contentApi = createApiInstance(apiUrls.CONTENT_URL)
 export const menuApi = createApiInstance(apiUrls.MENU_URL)
+export const menuImageApi = createMenuImageApiInstance(apiUrls.MENU_URL) // ✅ 추가
 export const salesApi = createApiInstance(apiUrls.SALES_URL)
 export const recommendApi = createApiInstance(apiUrls.RECOMMEND_URL)
+export const imageApi = createApiInstance(apiUrls.IMAGE_URL)
+export const apiWithImage = imageApi // 별칭 (기존 코드 호환성)
 
 // 기본 API 인스턴스 (Gateway URL 사용)
 export const api = createApiInstance(apiUrls.GATEWAY_URL)
@@ -185,7 +330,7 @@ export const formatSuccessResponse = (data, message = '요청이 성공적으로
   }
 }
 
-// ⚠️ 추가: API 상태 확인 함수
+// API 상태 확인 함수
 export const checkApiHealth = async () => {
   const results = {}
   
@@ -214,11 +359,14 @@ export const checkApiHealth = async () => {
   return results
 }
 
-// ⚠️ 추가: 개발 환경에서 전역 노출
+// 개발 환경에서 전역 노출
 if (import.meta.env.DEV) {
   window.__api_debug__ = {
     urls: apiUrls,
-    instances: { memberApi, authApi, storeApi, contentApi, menuApi, salesApi, recommendApi },
+    instances: { 
+      memberApi, authApi, storeApi, contentApi, menuApi, menuImageApi, 
+      salesApi, recommendApi, imageApi 
+    },
     checkHealth: checkApiHealth
   }
   console.log('🔧 [DEBUG] API 인스턴스가 window.__api_debug__에 노출됨')
diff --git a/src/store/index.js b/src/store/index.js
index 8ff224a..98da823 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -79,80 +79,88 @@ export const useStoreStore = defineStore('store', {
       }
     },
 
-    /**
-     * 메뉴 목록 조회 - 실제 API 연동 (매장 ID 필요) - ✅ ID 필드 보장
-     */
-    async fetchMenus() {
-      console.log('=== Store 스토어: 메뉴 목록 조회 시작 ===')
+    // src/store/index.js에서 fetchMenus 부분만 수정
+
+/**
+ * 메뉴 목록 조회 - 실제 API 연동 (매장 ID 필요) - ✅ 이미지 필드 매핑 수정
+ */
+async fetchMenus() {
+  console.log('=== Store 스토어: 메뉴 목록 조회 시작 ===')
+  
+  try {
+    // 매장 정보에서 storeId 가져오기
+    const storeId = this.storeInfo?.storeId
+    if (!storeId) {
+      console.warn('매장 ID가 없습니다. 매장 정보를 먼저 조회해주세요.')
+      return { success: false, message: '매장 정보가 필요합니다', data: [] }
+    }
+    
+    // 메뉴 서비스 임포트
+    const { menuService } = await import('@/services/menu')
+    
+    console.log('메뉴 목록 API 호출, 매장 ID:', storeId)
+    const result = await menuService.getMenus(storeId)
+    
+    console.log('=== Store 스토어: 메뉴 API 응답 분석 ===')
+    console.log('Result:', result)
+    console.log('Result.success:', result.success)
+    console.log('Result.data:', result.data)
+    console.log('Result.message:', result.message)
+    
+    if (result.success && result.data) {
+      // ✅ 백엔드 MenuResponse의 필드명에 맞게 매핑 수정
+      const menusWithId = (result.data || []).map(menu => {
+        // ID 필드가 확실히 있도록 보장
+        const menuId = menu.menuId || menu.id
+        
+        if (!menuId) {
+          console.warn('⚠️ 메뉴 ID가 없는 항목 발견:', menu)
+        }
+        
+        console.log('메뉴 원본 데이터:', menu) // 디버깅용
+        
+        return {
+          ...menu,
+          id: menuId, // ✅ id 필드 확실히 설정
+          menuId: menuId, // ✅ menuId 필드도 설정
+          // 기타 필드들 보장
+          menuName: menu.menuName || menu.name || '이름 없음',
+          category: menu.category || '기타',
+          price: menu.price || 0,
+          description: menu.description || '',
+          available: menu.available !== undefined ? menu.available : true,
+          recommended: menu.recommended !== undefined ? menu.recommended : false,
+          // ✅ 이미지 필드 수정: 백엔드는 'image' 필드 사용
+          imageUrl: menu.image || menu.imageUrl || '/images/menu-placeholder.png',
+          image: menu.image || menu.imageUrl, // 백엔드 호환성
+          createdAt: menu.createdAt,
+          updatedAt: menu.updatedAt
+        }
+      })
       
-      try {
-        // 매장 정보에서 storeId 가져오기
-        const storeId = this.storeInfo?.storeId
-        if (!storeId) {
-          console.warn('매장 ID가 없습니다. 매장 정보를 먼저 조회해주세요.')
-          return { success: false, message: '매장 정보가 필요합니다', data: [] }
-        }
-        
-        // 메뉴 서비스 임포트
-        const { menuService } = await import('@/services/menu')
-        
-        console.log('메뉴 목록 API 호출, 매장 ID:', storeId)
-        const result = await menuService.getMenus(storeId)
-        
-        console.log('=== Store 스토어: 메뉴 API 응답 분석 ===')
-        console.log('Result:', result)
-        console.log('Result.success:', result.success)
-        console.log('Result.data:', result.data)
-        console.log('Result.message:', result.message)
-        
-        if (result.success && result.data) {
-          // ✅ 메뉴 데이터 ID 필드 보장 처리
-          const menusWithId = (result.data || []).map(menu => {
-            // ID 필드가 확실히 있도록 보장
-            const menuId = menu.menuId || menu.id
-            
-            if (!menuId) {
-              console.warn('⚠️ 메뉴 ID가 없는 항목 발견:', menu)
-            }
-            
-            return {
-              ...menu,
-              id: menuId, // ✅ id 필드 확실히 설정
-              menuId: menuId, // ✅ menuId 필드도 설정
-              // 기타 필드들 보장
-              menuName: menu.menuName || menu.name || '이름 없음',
-              category: menu.category || '기타',
-              price: menu.price || 0,
-              description: menu.description || '',
-              available: menu.available !== undefined ? menu.available : true,
-              recommended: menu.recommended !== undefined ? menu.recommended : false,
-              imageUrl: menu.imageUrl || '/images/menu-placeholder.png'
-            }
-          })
-          
-          // 메뉴 목록이 있는 경우
-          console.log('✅ 메뉴 목록 설정 (ID 보장됨):', menusWithId)
-          this.menus = menusWithId
-          return { success: true, data: menusWithId }
-        } else {
-          // 메뉴가 없거나 조회 실패한 경우
-          console.log('⚠️ 메뉴 목록 없음 또는 조회 실패')
-          this.menus = []
-          
-          if (result.message === '등록된 메뉴가 없습니다') {
-            return { success: false, message: '등록된 메뉴가 없습니다', data: [] }
-          } else {
-            return { success: false, message: result.message || '메뉴 목록 조회에 실패했습니다', data: [] }
-          }
-        }
-      } catch (error) {
-        console.error('=== Store 스토어: 메뉴 목록 조회 실패 ===')
-        console.error('Error:', error)
-        
-        this.menus = []
-        return { success: false, message: error.message || '메뉴 목록을 불러오는데 실패했습니다', data: [] }
+      // 메뉴 목록이 있는 경우
+      console.log('✅ 메뉴 목록 설정 (이미지 필드 매핑 완료):', menusWithId)
+      this.menus = menusWithId
+      return { success: true, data: menusWithId }
+    } else {
+      // 메뉴가 없거나 조회 실패한 경우
+      console.log('⚠️ 메뉴 목록 없음 또는 조회 실패')
+      this.menus = []
+      
+      if (result.message === '등록된 메뉴가 없습니다') {
+        return { success: false, message: '등록된 메뉴가 없습니다', data: [] }
+      } else {
+        return { success: false, message: result.message || '메뉴 목록 조회에 실패했습니다', data: [] }
       }
-    },
+    }
+    } catch (error) {
+      console.error('=== Store 스토어: 메뉴 목록 조회 실패 ===')
+      console.error('Error:', error)
+      
+      this.menus = []
+      return { success: false, message: error.message || '메뉴 목록을 불러오는데 실패했습니다', data: [] }
+    }
+  },
 
     /**
      * 매장 등록
diff --git a/src/views/ContentManagementView.vue b/src/views/ContentManagementView.vue
index 26006c9..c927e13 100644
--- a/src/views/ContentManagementView.vue
+++ b/src/views/ContentManagementView.vue
@@ -1,351 +1,359 @@
 //* src/views/ContentManagementView.vue
 <template>
-  <v-container fluid class="pa-4">
-    <!-- 필터 영역 -->
-    <v-card class="mb-6">
-      <v-card-text>
-        <v-row align="center">
-          <!-- 콘텐츠 타입 필터 - 칩 형태로 변경 -->
-          <v-col cols="12" md="6">
-            <div class="d-flex align-center flex-wrap ga-2">
-              <span class="text-subtitle-2 font-weight-medium mr-2">콘텐츠 타입:</span>
-              <v-chip
-                v-for="type in contentTypeOptions"
-                :key="type.value"
-                :color="selectedContentType === type.value ? type.color : 'default'"
-                :variant="selectedContentType === type.value ? 'flat' : 'outlined'"
-                size="small"
-                class="mr-1 chip-hover"
-                @click="selectContentType(type.value)"
-              >
-                <span class="mr-1">{{ type.emoji }}</span>
-                {{ type.title.replace(type.emoji + ' ', '') }}
-                <span v-if="type.value !== 'all'" class="ml-1">({{ getTypeCount(type.value) }})</span>
-                <span v-else class="ml-1">({{ getTotalCount() }})</span>
-              </v-chip>
-            </div>
-          </v-col>
-
-          <!-- 검색 및 새콘텐츠생성 버튼 -->
-          <v-col cols="12" md="6">
-            <div class="d-flex align-center ga-2">
-              <!-- 제목 검색 -->
-              <v-text-field
-                v-model="searchQuery"
-                label="제목, 해시태그로 검색"
-                prepend-inner-icon="mdi-magnify"
-                variant="outlined"
-                density="compact"
-                clearable
-                hide-details
-                @update:model-value="applyFilters"
-              />
-              
-              <!-- 새 콘텐츠 생성 버튼 -->
-              <v-btn
-                color="primary"
-                prepend-icon="mdi-plus"
-                @click="$router.push('/content/create')"
-                class="ml-2"
-              >
-                새콘텐츠생성
-              </v-btn>
-            </div>
-          </v-col>
-        </v-row>
-      </v-card-text>
-    </v-card>
-
-    <!-- 선택된 항목 일괄 작업 -->
-    <div v-if="selectedItems.length > 0" class="mb-4">
-      <v-alert color="info" variant="tonal">
-        <div class="d-flex justify-space-between align-center">
-          <span>{{ selectedItems.length }}개 항목이 선택됨</span>
-          <v-btn
-            color="error"
-            variant="text"
-            @click="deleteSelectedItems"
-          >
-            선택 항목 삭제
-          </v-btn>
-        </div>
-      </v-alert>
+  <v-container fluid class="pa-6">
+    <!-- 페이지 헤더 -->
+    <div class="d-flex align-center mb-6">
+      <v-icon @click="$router.go(-1)" class="mr-3 cursor-pointer">mdi-arrow-left</v-icon>
+      <h1 class="text-h4 font-weight-bold">콘텐츠 관리</h1>
     </div>
 
-    <!-- 콘텐츠 목록 -->
-    <v-card>
-      <v-card-text class="pa-0">
-        <div v-if="loading" class="text-center pa-8">
-          <v-progress-circular indeterminate color="primary" />
-          <div class="mt-4">콘텐츠를 불러오는 중...</div>
-        </div>
-
-        <div v-else-if="paginatedContents.length === 0" class="text-center pa-8">
-          <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-file-document-outline</v-icon>
-          <div class="text-h6 mb-2">표시할 콘텐츠가 없습니다</div>
-          <div class="text-body-2 text-grey-600 mb-4">새로운 콘텐츠를 생성해보세요</div>
-          <v-btn
-            color="primary"
-            @click="$router.push('/content/create')"
+    <!-- 컨트롤 영역 -->
+    <v-row class="mb-4">
+      <!-- 콘텐츠 타입 필터 -->
+      <v-col cols="12" md="6">
+        <v-chip-group
+          v-model="selectedContentType"
+          selected-class="text-white"
+          mandatory
+          class="mb-3"
+        >
+          <v-chip
+            v-for="option in contentTypeOptions"
+            :key="option.value"
+            :value="option.value"
+            :color="option.color"
+            @click="selectContentType(option.value)"
+            class="mr-2"
           >
-            콘텐츠 생성하기
-          </v-btn>
-        </div>
+            <span class="mr-1">{{ option.emoji }}</span>
+            {{ option.title }}
+          </v-chip>
+        </v-chip-group>
+      </v-col>
 
-        <!-- 리스트 뷰 - 정렬 가능한 테이블 -->
-        <div v-else>
-          <v-table>
-            <thead>
-              <tr>
-                <th width="50">
-                  <v-checkbox
-                    v-model="selectAll"
-                    @change="toggleSelectAll"
-                    density="compact"
-                  />
-                </th>
-                <th width="450">제목</th>
-                <th width="150">플랫폼</th>
-                <!-- 프로모션 기간 - 정렬 가능 -->
-                <th 
-                  width="200" 
-                  class="sortable-header cursor-pointer"
-                  @click="sortByPromotionDate"
+      <!-- 검색 및 정렬 -->
+      <v-col cols="12" md="6">
+        <div class="d-flex gap-3">
+          <!-- 검색 -->
+          <v-text-field
+            v-model="searchQuery"
+            placeholder="제목, 내용, 해시태그로 검색..."
+            prepend-inner-icon="mdi-magnify"
+            variant="outlined"
+            density="compact"
+            hide-details
+            clearable
+            @input="applyFilters"
+            class="flex-grow-1"
+          />
+          
+          <!-- 정렬 -->
+          <v-select
+            v-model="sortBy"
+            :items="sortOptions"
+            item-title="title"
+            item-value="value"
+            variant="outlined"
+            density="compact"
+            hide-details
+            style="min-width: 140px;"
+          />
+        </div>
+      </v-col>
+    </v-row>
+
+    <!-- 액션 버튼 영역 -->
+    <div class="d-flex justify-space-between align-center mb-4">
+      <div class="d-flex align-center">
+        <span class="text-body-2 text-grey-600">
+          총 {{ filteredContents.length }}개 콘텐츠
+        </span>
+        <v-btn
+          v-if="selectedItems.length > 0"
+          color="error"
+          variant="text"
+          prepend-icon="mdi-delete"
+          @click="deleteSelectedItems"
+          class="ml-4"
+        >
+          선택 삭제 ({{ selectedItems.length }})
+        </v-btn>
+      </div>
+
+      <v-btn
+        color="primary"
+        prepend-icon="mdi-plus"
+        @click="$router.push('/content/create')"
+      >
+        새 콘텐츠 생성
+      </v-btn>
+    </div>
+
+    <!-- 로딩 상태 -->
+    <div v-if="loading" class="text-center py-8">
+      <v-progress-circular indeterminate color="primary" size="64" />
+      <div class="mt-4 text-body-1">콘텐츠를 불러오는 중...</div>
+    </div>
+
+    <!-- 콘텐츠가 없는 경우 -->
+    <div v-else-if="filteredContents.length === 0" class="text-center py-12">
+      <v-icon size="120" color="grey-lighten-2" class="mb-4">mdi-file-document-outline</v-icon>
+      <div class="text-h6 mb-2">표시할 콘텐츠가 없습니다</div>
+      <div class="text-body-2 text-grey-600 mb-4">새로운 콘텐츠를 생성해보세요</div>
+      <v-btn color="primary" @click="$router.push('/content/create')">
+        콘텐츠 생성하기
+      </v-btn>
+    </div>
+
+    <!-- 리스트 뷰 - 정렬 가능한 테이블 -->
+    <div v-else>
+      <v-table>
+        <thead>
+          <tr>
+            <th width="50">
+              <v-checkbox
+                v-model="selectAll"
+                @change="toggleSelectAll"
+                density="compact"
+              />
+            </th>
+            <th width="450">제목</th>
+            <th width="150">플랫폼</th>
+            <!-- 프로모션 기간 - 정렬 가능 -->
+            <th 
+              width="200" 
+              class="sortable-header cursor-pointer"
+              @click="sortByPromotionDate"
+            >
+              <div class="d-flex align-center">
+                <span>프로모션 기간</span>
+                <v-icon 
+                  :color="promotionSortOrder === 'none' ? 'grey-lighten-1' : 'primary'"
+                  size="16" 
+                  class="ml-1"
                 >
-                  <div class="d-flex align-center">
-                    <span>프로모션 기간</span>
-                    <v-icon 
-                      :color="promotionSortOrder === 'none' ? 'grey-lighten-1' : 'primary'"
-                      size="16" 
-                      class="ml-1"
-                    >
-                      {{
-                        promotionSortOrder === 'asc' ? 'mdi-arrow-up' :
-                        promotionSortOrder === 'desc' ? 'mdi-arrow-down' :
-                        'mdi-unfold-more-horizontal'
-                      }}
-                    </v-icon>
-                  </div>
-                </th>
-                <th width="120">액션</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr v-for="content in paginatedContents" :key="content.id" class="cursor-pointer" @click="showDetail(content)">
-                <td @click.stop>
-                  <v-checkbox
-                    v-model="selectedItems"
-                    :value="content.id"
-                    density="compact"
-                  />
-                </td>
-                <td>
-                  <div class="d-flex flex-column">
-                    <div class="d-flex align-center mb-1">
-                      <span class="font-weight-medium text-subtitle-2 mr-2">{{ content.title }}</span>
-                      <v-chip
-                        :color="getStatusColor(content.status)"
-                        size="x-small"
-                        variant="tonal"
-                      >
-                        {{ getStatusText(content.status) }}
-                      </v-chip>
-                    </div>
-                    <div class="text-caption text-truncate grey--text" style="max-width: 400px;">
-                      {{ content.content ? content.content.substring(0, 80) + '...' : '' }}
-                    </div>
-                  </div>
-                </td>
-                <td>
+                  {{
+                    promotionSortOrder === 'asc' ? 'mdi-arrow-up' :
+                    promotionSortOrder === 'desc' ? 'mdi-arrow-down' :
+                    'mdi-unfold-more-horizontal'
+                  }}
+                </v-icon>
+              </div>
+            </th>
+            <th width="120">액션</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr v-for="content in paginatedContents" :key="content.id" class="cursor-pointer" @click="showDetail(content)">
+            <td @click.stop>
+              <v-checkbox
+                v-model="selectedItems"
+                :value="content.id"
+                density="compact"
+              />
+            </td>
+            <td>
+              <div class="d-flex flex-column">
+                <div class="d-flex align-center mb-1">
+                  <span class="font-weight-medium text-subtitle-2 mr-2">{{ content.title }}</span>
                   <v-chip
-                    :color="getPlatformColor(content.platform)"
-                    size="small"
+                    :color="getStatusColor(content.status)"
+                    size="x-small"
                     variant="tonal"
                   >
-                    {{ getPlatformText(content.platform) }}
+                    {{ getStatusText(content.status) }}
                   </v-chip>
-                </td>
-                <td>
-                  <div class="text-body-2">
-                    {{ formatDateRange(content.startDate, content.endDate) }}
-                  </div>
-                </td>
-                <td @click.stop>
-                  <div class="d-flex ga-1">
-                    <v-btn
-                      icon="mdi-eye"
-                      size="small"
-                      variant="text"
-                      @click="showDetail(content)"
-                    />
-                    <v-btn
-                      icon="mdi-pencil"
-                      size="small"
-                      variant="text"
-                      @click="showDetailWithEdit(content)"
-                    />
-                    <v-btn
-                      icon="mdi-delete"
-                      size="small"
-                      variant="text"
-                      color="error"
-                      @click="confirmDelete(content)"
-                    />
-                  </div>
-                </td>
-              </tr>
-            </tbody>
-          </v-table>
-        </div>
-      </v-card-text>
-    </v-card>
+                </div>
+                <div class="text-caption text-truncate grey--text" style="max-width: 400px;">
+                  {{ content.content ? content.content.substring(0, 100) + '...' : '' }}
+                </div>
+              </div>
+            </td>
+            <td>
+              <v-chip
+                :color="getPlatformColor(content.platform)"
+                size="small"
+                variant="tonal"
+              >
+                {{ getPlatformText(content.platform) }}
+              </v-chip>
+            </td>
+            <td>
+              <div class="text-body-2">
+                {{ formatDateRange(content.startDate, content.endDate) }}
+              </div>
+            </td>
+            <td @click.stop>
+              <div class="d-flex">
+                <v-btn
+                  icon="mdi-pencil"
+                  size="small"
+                  variant="text"
+                  @click="showDetailWithEdit(content)"
+                />
+                <v-btn
+                  icon="mdi-delete"
+                  size="small"
+                  variant="text"
+                  color="error"
+                  @click="confirmDelete(content)"
+                />
+              </div>
+            </td>
+          </tr>
+        </tbody>
+      </v-table>
 
-    <!-- 페이지네이션 -->
-    <div v-if="totalPages > 1" class="d-flex justify-center mt-6">
-      <v-pagination
-        v-model="currentPage"
-        :length="totalPages"
-        :total-visible="7"
-        color="primary"
-        @update:model-value="scrollToTop"
-      />
+      <!-- 페이지네이션 -->
+      <div class="d-flex justify-center mt-6" v-if="totalPages > 1">
+        <v-pagination
+          v-model="currentPage"
+          :length="totalPages"
+          :total-visible="7"
+          @update:model-value="scrollToTop"
+        />
+      </div>
     </div>
 
-    <!-- 상세 보기/수정 다이얼로그 -->
+    <!-- 상세/수정 다이얼로그 -->
     <v-dialog v-model="showDetailDialog" max-width="800px" scrollable>
       <v-card>
         <v-card-title class="d-flex justify-space-between align-center">
-          <span>{{ isEditMode ? '콘텐츠 수정' : '콘텐츠 상세 정보' }}</span>
-          <v-btn
-            icon="mdi-close"
-            variant="text"
-            @click="closeDialog"
-          />
+          <span class="text-h6">{{ isEditMode ? '콘텐츠 수정' : '콘텐츠 상세' }}</span>
+          <v-btn icon="mdi-close" variant="text" @click="closeDialog" />
         </v-card-title>
-        
-        <v-divider />
-        
-        <v-card-text class="pa-4" style="max-height: 70vh;">
-          <v-form ref="editForm" v-model="editFormValid" v-if="selectedContent">
-            <!-- 제목 -->
-            <div class="mb-4">
-              <label class="text-subtitle-2 font-weight-medium mb-2 d-block">제목</label>
-              <v-text-field
-                v-if="isEditMode"
-                v-model="editingContent.title"
-                :rules="titleRules"
-                variant="outlined"
-                density="compact"
-              />
-              <div v-else class="text-body-1 font-weight-medium">
-                {{ selectedContent.title }}
-              </div>
-            </div>
 
-            <!-- 플랫폼 (수정 시 비활성화) -->
-            <div class="mb-4">
-              <label class="text-subtitle-2 font-weight-medium mb-2 d-block">플랫폼</label>
-              <v-chip :color="getPlatformColor(selectedContent.platform)" variant="tonal">
-                {{ getPlatformText(selectedContent.platform) }}
-              </v-chip>
-              <div v-if="isEditMode" class="text-caption text-grey-600 mt-1">
-                플랫폼은 수정할 수 없습니다.
-              </div>
-            </div>
-
-            <!-- 홍보 기간 -->
-            <div class="mb-4">
-              <label class="text-subtitle-2 font-weight-medium mb-2 d-block">홍보 기간</label>
-              <div v-if="isEditMode" class="d-flex ga-2">
+        <v-card-text v-if="selectedContent">
+          <v-form ref="editForm" v-model="editFormValid" v-if="isEditMode">
+            <!-- 수정 모드 -->
+            <v-text-field
+              v-model="editingContent.title"
+              label="제목"
+              :rules="titleRules"
+              variant="outlined"
+              class="mb-4"
+            />
+            
+            <v-textarea
+              v-model="editingContent.content"
+              label="내용"
+              rows="8"
+              variant="outlined"
+              class="mb-4"
+            />
+            
+            <v-text-field
+              v-model="editingContent.hashtags"
+              label="해시태그 (쉼표로 구분)"
+              variant="outlined"
+              class="mb-4"
+              hint="예: #맛집, #신메뉴, #이벤트"
+            />
+            
+            <v-row>
+              <v-col cols="6">
                 <v-text-field
                   v-model="editingContent.startDate"
-                  type="date"
                   label="시작일"
+                  type="date"
                   variant="outlined"
-                  density="compact"
                 />
+              </v-col>
+              <v-col cols="6">
                 <v-text-field
                   v-model="editingContent.endDate"
-                  type="date"
                   label="종료일"
+                  type="date"
                   variant="outlined"
-                  density="compact"
                 />
-              </div>
-              <div v-else class="text-body-1">
-                {{ formatDateRange(selectedContent.startDate, selectedContent.endDate) }}
-              </div>
-            </div>
+              </v-col>
+            </v-row>
+          </v-form>
 
-            <!-- 내용 (수정 시 비활성화) -->
+          <div v-else>
+            <!-- 상세 보기 모드 -->
             <div class="mb-4">
-              <label class="text-subtitle-2 font-weight-medium mb-2 d-block">내용</label>
-              <div v-if="isEditMode" class="pa-3 bg-grey-lighten-4 rounded">
-                <div class="text-body-2 text-grey-600 mb-2">
-                  내용은 수정할 수 없습니다. 새로 생성해주세요.
-                </div>
-              </div>
-              <div v-else class="text-body-1" style="white-space: pre-wrap;">
-                {{ selectedContent.content }}
-              </div>
+              <div class="text-subtitle-2 text-grey-600 mb-1">제목</div>
+              <div class="text-body-1">{{ selectedContent.title }}</div>
             </div>
-
-            <!-- 해시태그 (수정 시 비활성화) -->
+            
             <div class="mb-4">
-              <label class="text-subtitle-2 font-weight-medium mb-2 d-block">해시태그</label>
-              <div class="d-flex flex-wrap ga-1">
+              <div class="text-subtitle-2 text-grey-600 mb-1">플랫폼</div>
+              <v-chip :color="getPlatformColor(selectedContent.platform)" size="small" variant="tonal">
+                {{ getPlatformText(selectedContent.platform) }}
+              </v-chip>
+            </div>
+            
+            <div class="mb-4">
+              <div class="text-subtitle-2 text-grey-600 mb-1">내용</div>
+              <div class="text-body-1 content-preview">{{ selectedContent.content }}</div>
+            </div>
+            
+            <div class="mb-4" v-if="selectedContent.hashtags && selectedContent.hashtags.length > 0">
+              <div class="text-subtitle-2 text-grey-600 mb-1">해시태그</div>
+              <div class="d-flex flex-wrap gap-1">
                 <v-chip
                   v-for="tag in selectedContent.hashtags"
                   :key="tag"
-                  class="mr-1 mb-1"
                   size="small"
+                  variant="outlined"
                   color="primary"
                 >
-                  #{{ tag }}
+                  {{ tag }}
                 </v-chip>
               </div>
-              <div v-if="isEditMode" class="text-caption text-grey-600 mt-1">
-                해시태그는 수정할 수 없습니다. 새로 생성해주세요.
-              </div>
             </div>
-          </v-form>
+            
+            <div class="mb-4">
+              <div class="text-subtitle-2 text-grey-600 mb-1">프로모션 기간</div>
+              <div class="text-body-1">{{ formatDateRange(selectedContent.startDate, selectedContent.endDate) }}</div>
+            </div>
+            
+            <div class="mb-4">
+              <div class="text-subtitle-2 text-grey-600 mb-1">상태</div>
+              <v-chip :color="getStatusColor(selectedContent.status)" size="small" variant="tonal">
+                {{ getStatusText(selectedContent.status) }}
+              </v-chip>
+            </div>
+            
+            <div class="mb-4">
+              <div class="text-subtitle-2 text-grey-600 mb-1">생성일</div>
+              <div class="text-body-1">{{ formatDateTime(selectedContent.createdAt) }}</div>
+            </div>
+          </div>
         </v-card-text>
-        
-        <!-- 개선된 버튼 영역 -->
-        <v-card-actions class="pa-4">
-          <v-spacer />
-          <div v-if="isEditMode" class="d-flex ga-3">
-            <v-btn 
+
+        <v-card-actions v-if="selectedContent">
+          <div v-if="isEditMode" class="d-flex justify-end w-100 gap-2">
+            <v-btn
               variant="outlined"
-              color="grey"
               @click="cancelEdit"
-              class="px-6"
+              :disabled="updating"
             >
               취소
             </v-btn>
-            <v-btn 
-              color="primary" 
+            <v-btn
+              color="primary"
               @click="saveEdit"
               :loading="updating"
               :disabled="!editFormValid"
-              class="px-6 elevation-2"
+              class="px-6 elevation-1"
             >
               저장
             </v-btn>
           </div>
-          <div v-else class="d-flex ga-3">
-            <v-btn 
+          
+          <div v-else class="d-flex justify-end w-100 gap-2">
+            <v-btn
               variant="outlined"
-              color="primary"
-              prepend-icon="mdi-pencil"
               @click="showEditMode"
               class="px-6 elevation-1"
             >
               수정
             </v-btn>
-            <v-btn 
-              variant="outlined"
+            <v-btn
               color="error"
+              variant="outlined"
               prepend-icon="mdi-delete"
               @click="confirmDelete(selectedContent)"
               class="px-6 elevation-1"
@@ -372,6 +380,7 @@
 import { ref, computed, onMounted, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import { useContentStore } from '@/store/content'
+import { useAuthStore } from '@/store/auth'
 
 /**
  * 콘텐츠 관리 화면
@@ -383,6 +392,7 @@ import { useContentStore } from '@/store/content'
 
 // 스토어 및 라우터
 const contentStore = useContentStore()
+const authStore = useAuthStore()
 const router = useRouter()
 
 // 반응형 데이터
@@ -519,26 +529,73 @@ const totalPages = computed(() => {
 const loadContents = async () => {
   loading.value = true
   try {
-    await contentStore.loadContents()
+    console.log('=== 콘텐츠 목록 조회 시작 ===')
+    
+    // 📋 API 설계서에 따른 쿼리 파라미터 준비
+    const filters = {
+      contentType: selectedContentType.value !== 'all' ? selectedContentType.value : null,
+      platform: getPlatformForAPI(selectedContentType.value),
+      period: 'all', // 기본값
+      sortBy: sortBy.value || 'latest'
+    }
+    
+    console.log('API 요청 필터:', filters)
+    
+    // 📡 콘텐츠 스토어를 통해 API 호출
+    await contentStore.loadContents(filters)
+    
+    console.log('✅ 콘텐츠 로딩 완료, 개수:', contentStore.contents?.length || 0)
+    
   } catch (error) {
-    console.error('콘텐츠 로딩 실패:', error)
+    console.error('❌ 콘텐츠 로딩 실패:', error)
     showError.value = true
-    errorMessage.value = '콘텐츠를 불러오는데 실패했습니다.'
+    errorMessage.value = error.message || '콘텐츠를 불러오는데 실패했습니다.'
   } finally {
     loading.value = false
   }
 }
 
+// 플랫폼 값을 API 요청용으로 변환
+const getPlatformForAPI = (contentType) => {
+  const platformMapping = {
+    'instagram': 'INSTAGRAM',
+    'blog': 'NAVER_BLOG', 
+    'poster': 'POSTER',
+    'all': null
+  }
+  return platformMapping[contentType] || null
+}
+
 const selectContentType = (type) => {
   selectedContentType.value = type
   currentPage.value = 1
-  // 필터 변경 시 정렬 상태 초기화하지 않음 (별도 처리)
+  // 타입 변경 시 다시 로딩
+  loadContents()
 }
 
 const applyFilters = () => {
   currentPage.value = 1
 }
 
+const sortByPromotionDate = () => {
+  // 프로모션 기간 정렬 토글
+  if (promotionSortOrder.value === 'none') {
+    promotionSortOrder.value = 'desc'
+  } else if (promotionSortOrder.value === 'desc') {
+    promotionSortOrder.value = 'asc'
+  } else {
+    promotionSortOrder.value = 'none'
+  }
+}
+
+const toggleSelectAll = () => {
+  if (selectAll.value) {
+    selectedItems.value = paginatedContents.value.map(content => content.id)
+  } else {
+    selectedItems.value = []
+  }
+}
+
 const scrollToTop = () => {
   window.scrollTo({ top: 0, behavior: 'smooth' })
 }
@@ -626,274 +683,123 @@ const deleteSelectedItems = async () => {
   }
 }
 
-const toggleSelectAll = () => {
-  if (selectAll.value) {
-    selectedItems.value = paginatedContents.value.map(content => content.id)
-  } else {
-    selectedItems.value = []
+// 유틸리티 함수들
+const getStatusColor = (status) => {
+  const statusColors = {
+    'DRAFT': 'orange',
+    'PUBLISHED': 'green', 
+    'SCHEDULED': 'blue',
+    'ARCHIVED': 'grey'
   }
+  return statusColors[status] || 'grey'
 }
 
-const sortByPromotionDate = () => {
-  if (promotionSortOrder.value === 'none') {
-    promotionSortOrder.value = 'asc'
-  } else if (promotionSortOrder.value === 'asc') {
-    promotionSortOrder.value = 'desc'
-  } else {
-    promotionSortOrder.value = 'none'
+const getStatusText = (status) => {
+  const statusTexts = {
+    'DRAFT': '임시저장',
+    'PUBLISHED': '발행됨',
+    'SCHEDULED': '예약됨', 
+    'ARCHIVED': '보관됨'
   }
-}
-
-// 헬퍼 메서드
-const getTotalCount = () => {
-  return contentStore.contents?.length || 0
-}
-
-const getTypeCount = (type) => {
-  if (type === 'all') return getTotalCount()
-  return contentStore.contents?.filter(content => {
-    // 플랫폼 매핑 처리
-    const platformMapping = {
-      'instagram': ['instagram', 'INSTAGRAM'],
-      'blog': ['blog', 'NAVER_BLOG', 'naver_blog'],
-      'poster': ['poster', 'POSTER']
-    }
-    
-    const allowedPlatforms = platformMapping[type] || [type]
-    return allowedPlatforms.includes(content.platform)
-  }).length || 0
+  return statusTexts[status] || status
 }
 
 const getPlatformColor = (platform) => {
-  const colors = {
-    'instagram': 'pink',
+  const platformColors = {
     'INSTAGRAM': 'pink',
-    'blog': 'green',
+    'instagram': 'pink',
     'NAVER_BLOG': 'green',
-    'poster': 'orange',
-    'POSTER': 'orange'
+    'blog': 'green',
+    'naver_blog': 'green',
+    'POSTER': 'orange',
+    'poster': 'orange'
   }
-  return colors[platform] || 'grey'
+  return platformColors[platform] || 'grey'
 }
 
 const getPlatformText = (platform) => {
-  const texts = {
-    'instagram': 'Instagram',
-    'INSTAGRAM': 'Instagram',
-    'blog': '네이버 블로그',
+  const platformTexts = {
+    'INSTAGRAM': '인스타그램',
+    'instagram': '인스타그램',
     'NAVER_BLOG': '네이버 블로그',
-    'poster': '포스터',
-    'POSTER': '포스터'
+    'blog': '네이버 블로그',
+    'naver_blog': '네이버 블로그',
+    'POSTER': '포스터',
+    'poster': '포스터'
   }
-  return texts[platform] || platform
-}
-
-const getStatusColor = (status) => {
-  const colors = {
-    'published': 'success',
-    'draft': 'warning',
-    'archived': 'grey'
-  }
-  return colors[status] || 'grey'
+  return platformTexts[platform] || platform
 }
 
 const formatDateRange = (startDate, endDate) => {
-  if (!startDate && !endDate) return '-'
-  
-  const formatDate = (date) => {
-    if (!date) return ''
-    return new Date(date).toLocaleDateString('ko-KR', {
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric'
-    })
-  }
-  
-  const start = formatDate(startDate)
-  const end = formatDate(endDate)
-  
-  if (start && end) {
-    return `${start} ~ ${end}`
-  } else if (start) {
-    return `${start} ~`
-  } else if (end) {
-    return `~ ${end}`
-  }
-  
-  return '-'
+  if (!startDate && !endDate) return '기간 미설정'
+  if (!endDate) return formatDate(startDate) + ' ~'
+  if (!startDate) return '~ ' + formatDate(endDate)
+  return formatDate(startDate) + ' ~ ' + formatDate(endDate)
 }
 
-// 라이프사이클
-onMounted(async () => {
-  loading.value = true
+const formatDate = (dateString) => {
+  if (!dateString) return ''
   try {
-    await contentStore.loadContents()
+    const date = new Date(dateString)
+    return date.toLocaleDateString('ko-KR', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit'
+    })
   } catch (error) {
-    console.error('콘텐츠 로딩 실패:', error)
-    showError.value = true
-    errorMessage.value = '콘텐츠를 불러오는데 실패했습니다.'
-  } finally {
-    loading.value = false
+    return dateString
   }
+}
+
+const formatDateTime = (dateString) => {
+  if (!dateString) return ''
+  try {
+    const date = new Date(dateString)
+    return date.toLocaleString('ko-KR', {
+      year: 'numeric',
+      month: '2-digit',
+      day: '2-digit',
+      hour: '2-digit',
+      minute: '2-digit'
+    })
+  } catch (error) {
+    return dateString
+  }
+}
+
+// 정렬 변경 감지
+watch(sortBy, () => {
+  // 일반 정렬 선택 시 프로모션 정렬 초기화
+  promotionSortOrder.value = 'none'
 })
 
-// 와처
-watch(selectedItems, (newVal) => {
-  selectAll.value = newVal.length === paginatedContents.value.length && newVal.length > 0
-})
-
-// 프로모션 정렬 상태가 변경될 때 다른 정렬 옵션 리셋
-watch(promotionSortOrder, (newVal) => {
-  if (newVal !== 'none') {
-    // 프로모션 정렬이 활성화될 때는 다른 정렬 옵션을 비활성화
-    console.log(`프로모션 기간 정렬: ${newVal === 'asc' ? '오름차순' : '내림차순'}`)
+// 컴포넌트 마운트 시 데이터 로드
+onMounted(() => {
+  console.log('🔄 ContentManagementView 마운트됨')
+  
+  // 인증 확인
+  if (!authStore.isAuthenticated) {
+    console.log('❌ 인증되지 않은 사용자')
+    router.push('/login')
+    return
   }
+  
+  // 콘텐츠 로딩
+  loadContents()
 })
 </script>
 
 <style scoped>
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.text-truncate {
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-/* 정렬 가능한 헤더 스타일 */
-.sortable-header {
-  transition: background-color 0.2s ease-in-out;
-}
-
 .sortable-header:hover {
   background-color: rgba(0, 0, 0, 0.04);
 }
 
-.sortable-header .v-icon {
-  transition: color 0.2s ease-in-out;
+.content-preview {
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 
-/* 칩 hover 효과 강화 */
-.v-chip {
+.cursor-pointer {
   cursor: pointer;
-  transition: all 0.2s ease-in-out;
-}
-
-.v-chip:hover {
-  transform: translateY(-1px);
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.chip-hover:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-}
-
-/* 선택된 칩 강조 */
-.v-chip.v-chip--variant-flat {
-  font-weight: 600;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
-}
-
-/* 버튼 hover 효과 */
-.v-btn {
-  transition: all 0.2s ease-in-out;
-}
-
-.v-btn:hover {
-  transform: translateY(-1px);
-}
-
-/* 테이블 행 hover 효과 */
-.v-table tbody tr:hover {
-  background-color: rgba(0, 0, 0, 0.04);
-}
-
-/* 카드 hover 효과 */
-.v-card.cursor-pointer:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  transition: all 0.2s ease-in-out;
-}
-
-/* 다이얼로그 버튼 스타일링 */
-.v-card-actions .v-btn {
-  font-weight: 500;
-  letter-spacing: 0.5px;
-}
-
-.v-card-actions .v-btn.elevation-2:hover {
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-.v-card-actions .v-btn.elevation-1:hover {
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
-}
-
-/* 비활성화된 입력 필드 스타일 */
-.bg-grey-lighten-4 {
-  background-color: #f5f5f5;
-  border: 1px solid #e0e0e0;
-}
-
-/* 테이블 스타일 개선 */
-.v-table {
-  border-radius: 8px;
-  overflow: hidden;
-}
-
-.v-table thead th {
-  background-color: #f8f9fa;
-  font-weight: 600;
-  color: #495057;
-  position: relative;
-}
-
-.v-table tbody td {
-  vertical-align: middle;
-}
-
-/* 필터 카드 스타일 */
-.v-card {
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-/* 반응형 디자인 */
-@media (max-width: 768px) {
-  .d-flex.justify-space-between.align-center {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 16px;
-  }
-  
-  .v-row .v-col {
-    margin-bottom: 8px;
-  }
-  
-  .v-table {
-    font-size: 0.875rem;
-  }
-  
-  .v-table th,
-  .v-table td {
-    padding: 8px 4px;
-  }
-  
-  .sortable-header {
-    font-size: 0.8rem;
-  }
-}
-
-/* 정렬 아이콘 애니메이션 */
-@keyframes sortActive {
-  0% { transform: scale(1); }
-  50% { transform: scale(1.1); }
-  100% { transform: scale(1); }
-}
-
-.sortable-header .v-icon[style*="color: rgb(25, 118, 210)"] {
-  animation: sortActive 0.3s ease-in-out;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/StoreManagementView.vue b/src/views/StoreManagementView.vue
index ddea127..7584086 100644
--- a/src/views/StoreManagementView.vue
+++ b/src/views/StoreManagementView.vue
@@ -1,7 +1,18 @@
-//* src/views/StoreManagementView.vue - 완전한 매장 관리 화면 (이미지 업로드 포함)
-
 <template>
   <v-container fluid class="pa-4">
+    <!-- 뒤로가기 버튼과 제목 -->
+    <div class="d-flex align-center mb-4">
+      <v-btn
+        icon
+        variant="text"
+        @click="$router.go(-1)"
+        class="me-2"
+      >
+        <v-icon>mdi-arrow-left</v-icon>
+      </v-btn>
+      <h1 class="text-h5 font-weight-bold">매장 관리</h1>
+    </div>
+
     <!-- 매장 정보가 없는 경우 -->
     <div v-if="!storeStore.hasStoreInfo && !storeStore.loading">
       <v-row justify="center">
@@ -113,50 +124,44 @@
                 
                     <v-col cols="12" sm="6">
                       <div class="info-item">
-                        <v-icon class="mr-2" color="grey">mdi-calendar-remove</v-icon>
+                        <v-icon class="mr-2" color="grey">mdi-account-group</v-icon>
                         <div>
-                          <div class="text-caption text-grey">휴무일</div>
-                          <div class="text-body-1">
-                            {{ formatClosedDays(storeInfo.closedDays) }}
-                          </div>
-                        </div>
-                      </div>
-                    </v-col>
-                  </v-row>
-
-                  <!-- SNS 정보 -->
-                  <v-divider class="my-6" />
-                  
-                  <h4 class="text-h6 font-weight-bold mb-4">
-                    <v-icon class="mr-2" color="primary">mdi-share-variant</v-icon>
-                    SNS 정보
-                  </h4>
-                  
-                  <v-row>
-                    <v-col cols="12" sm="6">
-                      <div class="info-item">
-                        <v-icon class="mr-2" color="pink">mdi-instagram</v-icon>
-                        <div>
-                          <div class="text-caption text-grey">인스타그램</div>
-                          <div class="text-body-1">
-                            {{ storeInfo.instaAccounts || '미연동' }}
-                          </div>
+                          <div class="text-caption text-grey">좌석 수</div>
+                          <div class="text-body-1">{{ storeInfo.seatCount || 0 }}석</div>
                         </div>
                       </div>
                     </v-col>
                     
                     <v-col cols="12" sm="6">
                       <div class="info-item">
-                        <v-icon class="mr-2" color="green">mdi-post</v-icon>
+                        <v-icon class="mr-2" color="grey">mdi-calendar-off</v-icon>
                         <div>
-                          <div class="text-caption text-grey">네이버 블로그</div>
-                          <div class="text-body-1">
-                            {{ storeInfo.blogAccounts || '미연동' }}
-                          </div>
+                          <div class="text-caption text-grey">휴무일</div>
+                          <div class="text-body-1">{{ formatClosedDays(storeInfo.holidays) }}</div>
+                        </div>
+                      </div>
+                    </v-col>
+                    
+                    <v-col cols="12" sm="6">
+                      <div class="info-item">
+                        <v-icon class="mr-2" color="grey">mdi-instagram</v-icon>
+                        <div>
+                          <div class="text-caption text-grey">인스타그램</div>
+                          <div class="text-body-1">{{ storeInfo.instaAccounts || '미입력' }}</div>
                         </div>
                       </div>
                     </v-col>
                   </v-row>
+                  
+                  <!-- 매장 소개 -->
+                  <v-divider class="my-4" />
+                  <div class="info-item">
+                    <v-icon class="mr-2" color="grey">mdi-text</v-icon>
+                    <div>
+                      <div class="text-caption text-grey">매장 소개</div>
+                      <div class="text-body-1">{{ storeInfo.description || '매장 소개가 없습니다' }}</div>
+                    </div>
+                  </div>
                 </v-col>
               </v-row>
             </v-card-text>
@@ -165,46 +170,48 @@
 
         <!-- 메뉴 관리 탭 -->
         <v-tabs-window-item value="menu">
-          <!-- 메뉴 관리 도구 -->
-          <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>
-                메뉴 관리
-              </div>
-              <v-btn
-                color="primary"
-                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" sm="6">
+          <!-- 검색 및 필터 섹션 -->
+          <v-card class="mb-4" elevation="2">
+            <v-card-text>
+              <v-row>
+                <v-col cols="12" md="6">
                   <v-text-field
                     v-model="menuSearch"
+                    prepend-inner-icon="mdi-magnify"
                     label="메뉴 검색"
                     variant="outlined"
-                    prepend-inner-icon="mdi-magnify"
+                    density="compact"
                     clearable
-                    hide-details
                   />
                 </v-col>
-                <v-col cols="12" sm="3">
+                <v-col cols="12" md="3">
                   <v-select
                     v-model="menuCategoryFilter"
-                    label="카테고리 필터"
-                    variant="outlined"
                     :items="['전체', ...menuCategories]"
-                    hide-details
+                    label="카테고리"
+                    variant="outlined"
+                    density="compact"
                   />
                 </v-col>
+                <v-col cols="12" md="3" class="d-flex align-center gap-2">
+                  <v-btn
+                    color="primary"
+                    variant="outlined"
+                    prepend-icon="mdi-filter-off"
+                    @click="clearFilters"
+                    size="small"
+                  >
+                    필터 초기화
+                  </v-btn>
+                  <v-btn
+                    color="primary"
+                    prepend-icon="mdi-plus"
+                    @click="openCreateMenuDialog"
+                    size="small"
+                  >
+                    메뉴 추가
+                  </v-btn>
+                </v-col>
               </v-row>
             </v-card-text>
           </v-card>
@@ -214,166 +221,147 @@
             <v-row>
               <v-col
                 v-for="menu in filteredMenus"
-                :key="menu.id"
+                :key="menu.id || menu.menuId"
                 cols="12"
                 sm="6"
                 md="4"
                 lg="3"
               >
                 <v-card
-                  class="menu-card h-100 position-relative"
+                  class="menu-card h-100"
                   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"
+                  <div class="position-relative">
+                    <!-- 메뉴 카드에서 이미지 표시 수정 -->
+                    <v-img
+                      :src="getMenuImageUrl(menu)"
+                      height="200"
+                      cover
+                      class="grey lighten-2"
+                      @error="handleImageError($event, menu)"
                     >
-                      {{ menu.available ? '판매중' : '품절' }}
-                    </v-chip>
+                      <template v-slot:placeholder>
+                        <div class="d-flex align-center justify-center fill-height">
+                          <v-progress-circular
+                            color="grey-lighten-4"
+                            indeterminate
+                          />
+                        </div>
+                      </template>
+                      <!-- 이미지 로딩 실패 시 플레이스홀더 표시 -->
+                      <template v-slot:error>
+                        <div class="d-flex align-center justify-center fill-height">
+                          <v-icon size="64" color="grey-lighten-2">mdi-image-off</v-icon>
+                        </div>
+                      </template>
+                    </v-img>
+                    
+                    <!-- 상태 뱃지 -->
+                    <div class="position-absolute top-0 right-0 pa-2">
+                      <v-chip
+                        v-if="!menu.available"
+                        color="red"
+                        size="small"
+                        class="mb-1"
+                      >
+                        품절
+                      </v-chip>
+                      <v-chip
+                        v-if="menu.recommended"
+                        color="orange"
+                        size="small"
+                      >
+                        추천
+                      </v-chip>
+                    </div>
+                    
+                    <!-- 액션 버튼 -->
+                    <div class="position-absolute top-0 left-0 pa-2">
+                      <v-btn
+                        icon="mdi-pencil"
+                        size="small"
+                        color="white"
+                        variant="elevated"
+                        @click.stop="editMenu(menu)"
+                        class="me-1"
+                      />
+                      <v-btn
+                        icon="mdi-delete"
+                        size="small"
+                        color="red"
+                        variant="elevated"
+                        @click.stop="confirmDeleteMenu(menu)"
+                      />
+                    </div>
                   </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 || menu.image || '/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"
-                            color="error"
-                            @click="deleteMenuDirect(menu, $event)"
-                          >
-                            <v-icon size="small">mdi-delete</v-icon>
-                          </v-btn>
-                          <!-- 수정 버튼 -->
-                          <v-btn
-                            icon
-                            size="small"
-                            variant="text"
-                            @click="editMenuDirect(menu, $event)"
-                          >
-                            <v-icon size="small">mdi-pencil</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>
+                  <v-card-text class="pa-3">
+                    <div class="d-flex justify-space-between align-start mb-2">
+                      <h4 class="text-subtitle-1 font-weight-bold">
+                        {{ menu.menuName || menu.name }}
+                      </h4>
+                      <v-chip
+                        :color="menu.available ? 'green' : 'red'"
+                        size="small"
+                        variant="tonal"
+                      >
+                        {{ menu.available ? '판매중' : '품절' }}
+                      </v-chip>
                     </div>
-                  </v-card-title>
+                    
+                    <p class="text-body-2 text-grey text-truncate-2 mb-2">
+                      {{ menu.description || '설명이 없습니다' }}
+                    </p>
+                    
+                    <div class="d-flex justify-space-between align-center">
+                      <span class="text-h6 font-weight-bold text-primary">
+                        {{ menu.price ? menu.price.toLocaleString() : '0' }}원
+                      </span>
+                      <v-chip
+                        size="small"
+                        variant="outlined"
+                        color="primary"
+                      >
+                        {{ menu.category }}
+                      </v-chip>
+                    </div>
+                  </v-card-text>
                 </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-card v-else class="text-center pa-8" elevation="2">
+            <v-icon size="64" color="grey-lighten-1" class="mb-4">mdi-food-off</v-icon>
+            <h3 class="text-h6 mb-2">등록된 메뉴가 없습니다</h3>
+            <p class="text-grey mb-4">첫 번째 메뉴를 등록해보세요</p>
             <v-btn
-              variant="outlined"
-              @click="clearFilters"
+              color="primary"
+              prepend-icon="mdi-plus"
+              @click="openCreateMenuDialog"
             >
-              필터 초기화
+              메뉴 등록하기
             </v-btn>
-          </div>
+          </v-card>
         </v-tabs-window-item>
       </v-tabs-window>
     </div>
 
     <!-- 로딩 상태 -->
-    <div v-else-if="storeStore.loading" class="text-center pa-8">
-      <v-progress-circular
-        size="64"
-        color="primary"
-        indeterminate
-        class="mb-4"
-      />
-      <p class="text-body-1">매장 정보를 불러오는 중...</p>
+    <div v-else class="text-center pa-8">
+      <v-progress-circular indeterminate color="primary" size="64" />
+      <p class="text-grey mt-4">매장 정보를 불러오는 중...</p>
     </div>
 
     <!-- 매장 등록/수정 다이얼로그 -->
-    <!-- 기존 매장 등록/수정 다이얼로그를 다음 내용으로 교체해주세요 -->
-
-    <!-- 매장 등록/수정 다이얼로그 -->
-    <v-dialog
-      v-model="showCreateDialog"
-      max-width="600"
-      persistent
-    >
+    <v-dialog v-model="showCreateDialog" max-width="600" persistent>
       <v-card>
         <v-card-title class="pa-4">
           <div class="d-flex align-center">
-            <v-icon class="mr-2" color="primary">mdi-store-plus</v-icon>
-            {{ editMode ? '매장 정보 수정' : '매장 정보 등록' }}
+            <v-icon class="mr-2" color="primary">mdi-store</v-icon>
+            {{ editMode ? '매장 정보 수정' : '새 매장 등록' }}
           </div>
         </v-card-title>
         
@@ -382,138 +370,135 @@
         <v-card-text class="pa-4">
           <v-form ref="storeFormRef" v-model="formValid">
             <v-row>
-              <!-- 매장명 -->
               <v-col cols="12">
                 <v-text-field
                   v-model="formData.storeName"
                   label="매장명 *"
                   :rules="[v => !!v || '매장명을 입력해주세요']"
-                  prepend-inner-icon="mdi-store"
                   variant="outlined"
+                  density="compact"
+                  required
                 />
               </v-col>
-
-              <!-- 업종 -->
+              
               <v-col cols="12" sm="6">
                 <v-select
                   v-model="formData.businessType"
-                  label="업종 *"
                   :items="businessTypes"
+                  label="업종 *"
                   :rules="[v => !!v || '업종을 선택해주세요']"
-                  prepend-inner-icon="mdi-domain"
                   variant="outlined"
+                  density="compact"
+                  required
                 />
               </v-col>
-
-              <!-- 좌석수 -->
+              
               <v-col cols="12" sm="6">
                 <v-text-field
                   v-model.number="formData.seatCount"
-                  label="좌석수"
+                  label="좌석 수"
                   type="number"
-                  prepend-inner-icon="mdi-chair-school"
                   variant="outlined"
-                  :min="0"
-                  :max="500"
+                  density="compact"
                 />
               </v-col>
-
-              <!-- 주소 -->
+              
               <v-col cols="12">
                 <v-text-field
                   v-model="formData.address"
                   label="주소 *"
                   :rules="[v => !!v || '주소를 입력해주세요']"
-                  prepend-inner-icon="mdi-map-marker"
                   variant="outlined"
+                  density="compact"
+                  required
                 />
               </v-col>
-
-              <!-- 전화번호 -->
-              <v-col cols="12">
+              
+              <v-col cols="12" sm="6">
                 <v-text-field
                   v-model="formData.phoneNumber"
                   label="전화번호"
-                  prepend-inner-icon="mdi-phone"
                   variant="outlined"
-                  placeholder="예) 02-1234-5678"
+                  density="compact"
                 />
               </v-col>
-
-              <!-- 영업시간 -->
+              
+              <v-col cols="12" sm="6">
+                <v-text-field
+                  v-model="formData.instagramUrl"
+                  label="인스타그램 URL"
+                  variant="outlined"
+                  density="compact"
+                />
+              </v-col>
+              
               <v-col cols="12" sm="6">
                 <v-text-field
                   v-model="formData.openTime"
                   label="오픈 시간"
                   type="time"
-                  prepend-inner-icon="mdi-clock-start"
                   variant="outlined"
+                  density="compact"
                 />
               </v-col>
-
+              
               <v-col cols="12" sm="6">
                 <v-text-field
                   v-model="formData.closeTime"
                   label="마감 시간"
                   type="time"
-                  prepend-inner-icon="mdi-clock-end"
                   variant="outlined"
+                  density="compact"
                 />
               </v-col>
-
-              <!-- 휴무일 -->
+              
               <v-col cols="12">
                 <v-select
                   v-model="formData.holidays"
-                  label="휴무일"
                   :items="weekDays"
-                  prepend-inner-icon="mdi-calendar-remove"
-                  variant="outlined"
+                  item-title="title"
+                  item-value="value"
+                  label="휴무일"
                   multiple
                   chips
-                  closable-chips
-                />
-              </v-col>
-
-              <!-- SNS 계정 -->
-              <v-col cols="12">
-                <v-text-field
-                  v-model="formData.instagramUrl"
-                  label="인스타그램 계정"
-                  prepend-inner-icon="mdi-instagram"
                   variant="outlined"
-                  placeholder="예) @your_instagram"
+                  density="compact"
                 />
               </v-col>
-
+              
               <v-col cols="12">
                 <v-text-field
                   v-model="formData.blogUrl"
-                  label="네이버 블로그"
-                  prepend-inner-icon="mdi-post"
+                  label="블로그 URL"
                   variant="outlined"
-                  placeholder="예) blog.naver.com/your_blog"
+                  density="compact"
+                />
+              </v-col>
+              
+              <v-col cols="12">
+                <v-textarea
+                  v-model="formData.description"
+                  label="매장 소개"
+                  variant="outlined"
+                  density="compact"
+                  rows="3"
                 />
               </v-col>
             </v-row>
           </v-form>
         </v-card-text>
         
-        <v-divider />
-        
         <v-card-actions class="pa-4">
           <v-spacer />
           <v-btn
-            color="grey"
-            variant="outlined"
-            @click="cancelForm"
-            :disabled="saving"
+            variant="text"
+            @click="showCreateDialog = false"
           >
             취소
           </v-btn>
           <v-btn
             color="primary"
-            @click="saveStoreInfo"
+            @click="saveStore"
             :loading="saving"
             :disabled="!formValid"
           >
@@ -522,226 +507,104 @@
         </v-card-actions>
       </v-card>
     </v-dialog>
-    <!-- 누락된 다이얼로그들을 매장 등록 다이얼로그 뒤에 추가해주세요 -->
 
-    <!-- 메뉴 상세 다이얼로그 -->
-    <v-dialog
-      v-model="showMenuDetailDialog"
-      max-width="600"
+    <!-- 메뉴 등록/수정 다이얼로그 -->
+    <v-dialog 
+      v-model="showMenuDialog" 
+      max-width="600" 
       persistent
+      :style="{ zIndex: 2000 }"
+      class="menu-dialog"
     >
-      <v-card v-if="selectedMenu">
-        <v-card-title class="pa-4">
-          <div class="d-flex align-center justify-space-between w-100">
-            <div class="d-flex align-center">
-              <v-icon class="mr-2" color="primary">mdi-food</v-icon>
-              메뉴 상세 정보
-            </div>
-            <div class="d-flex align-center">
-              <!-- 상태 배지 -->
-              <v-chip
-                :color="selectedMenu.available ? 'success' : 'error'"
-                size="small"
-                variant="elevated"
-                class="mr-2"
-              >
-                {{ selectedMenu.available ? '판매중' : '품절' }}
-              </v-chip>
-              
-              <!-- 추천 메뉴 배지 -->
-              <v-chip
-                v-if="selectedMenu.recommended"
-                color="warning"
-                size="small"
-                variant="elevated"
-              >
-                <v-icon size="small" class="mr-1">mdi-star</v-icon>
-                추천
-              </v-chip>
-            </div>
-          </div>
-        </v-card-title>
-        
-        <v-divider />
-        
-        <v-card-text class="pa-0">
-          <!-- 메뉴 이미지 -->
-          <v-img
-            :src="selectedMenu.imageUrl || selectedMenu.image || '/images/menu-placeholder.png'"
-            :alt="selectedMenu.menuName"
-            height="300"
-            cover
-            class="mb-4"
-          >
-            <template v-slot:placeholder>
-              <div class="d-flex align-center justify-center fill-height">
-                <v-icon size="64" color="grey-lighten-2">mdi-food</v-icon>
-              </div>
-            </template>
-          </v-img>
-          
-          <div class="pa-4">
-            <!-- 메뉴 기본 정보 -->
-            <div class="mb-4">
-              <div class="d-flex align-center justify-space-between mb-2">
-                <h2 class="text-h5 font-weight-bold">{{ selectedMenu.menuName }}</h2>
-                <span class="text-h4 font-weight-bold text-primary">
-                  {{ formatCurrency(selectedMenu.price) }}
-                </span>
-              </div>
-              
-              <v-chip
-                :color="getCategoryColor(selectedMenu.category)"
-                size="small"
-                variant="tonal"
-                class="mb-3"
-              >
-                {{ selectedMenu.category }}
-              </v-chip>
-              
-              <p class="text-body-1 text-grey-darken-1 mb-0">
-                {{ selectedMenu.description || '메뉴 설명이 없습니다.' }}
-              </p>
-            </div>
-            
-            <!-- 메뉴 상세 정보 -->
-            <v-divider class="my-4" />
-            
-            <div class="mb-4">
-              <h4 class="text-h6 font-weight-bold mb-3 d-flex align-center">
-                <v-icon class="mr-2" color="primary">mdi-information</v-icon>
-                상세 정보
-              </h4>
-              
-              <v-row>
-                <v-col cols="6">
-                  <div class="info-item">
-                    <v-icon class="mr-2" color="grey">mdi-tag</v-icon>
-                    <div>
-                      <div class="text-caption text-grey">카테고리</div>
-                      <div class="text-body-1">{{ selectedMenu.category }}</div>
-                    </div>
-                  </div>
-                </v-col>
-                
-                <v-col cols="6">
-                  <div class="info-item">
-                    <v-icon class="mr-2" color="grey">mdi-currency-krw</v-icon>
-                    <div>
-                      <div class="text-caption text-grey">가격</div>
-                      <div class="text-body-1">{{ formatCurrency(selectedMenu.price) }}</div>
-                    </div>
-                  </div>
-                </v-col>
-              </v-row>
-            </div>
-          </div>
-        </v-card-text>
-        
-        <v-divider />
-        
-        <v-card-actions class="pa-4">
-          <v-spacer />
-          <v-btn
-            color="grey"
-            variant="outlined"
-            @click="closeMenuDetail"
-          >
-            닫기
-          </v-btn>
-          <v-btn
-            color="primary"
-            variant="outlined"
-            prepend-icon="mdi-pencil"
-            @click="editMenuFromDetail"
-            :disabled="!selectedMenu"
-          >
-            수정
-          </v-btn>
-          <v-btn
-            color="error"
-            variant="outlined"
-            prepend-icon="mdi-delete"
-            @click="deleteMenuFromDetail"
-            :disabled="!selectedMenu"
-          >
-            삭제
-          </v-btn>
-        </v-card-actions>
-      </v-card>
-    </v-dialog>
-
-    <!-- 메뉴 등록/수정 다이얼로그 (✅ 이미지 업로드 기능 추가) -->
-    <v-dialog
-      v-model="showMenuDialog"
-      max-width="700"
-      persistent
-    >
-      <v-card>
+      <v-card class="menu-dialog-card">
         <v-card-title class="pa-4">
           <div class="d-flex align-center">
-            <v-icon class="mr-2" color="primary">mdi-food-plus</v-icon>
-            {{ menuEditMode ? '메뉴 수정' : '메뉴 등록' }}
+            <v-icon class="mr-2" color="primary">mdi-food</v-icon>
+            {{ menuEditMode ? '메뉴 수정' : '새 메뉴 등록' }}
           </div>
         </v-card-title>
         
         <v-divider />
         
-        <v-card-text class="pa-4">
-          <v-form ref="menuFormRef" v-model="formValid">
+        <!-- ✅ 스크롤 가능한 컨텐츠 영역 -->
+        <v-card-text class="pa-4 dialog-content">
+          <v-form ref="menuFormRef" v-model="menuFormValid">
             <v-row>
-              <!-- ✅ 메뉴 이미지 업로드 섹션 추가 -->
+              <!-- 메뉴 이미지 업로드 -->
               <v-col cols="12">
-                <div class="image-upload-section">
+                <div class="mb-4">
                   <h4 class="text-subtitle-1 font-weight-bold mb-3 d-flex align-center">
                     <v-icon class="mr-2" color="primary">mdi-image</v-icon>
-                    메뉴 이미지
+                    메뉴 이미지 {{ !menuEditMode ? '*' : '' }}
                   </h4>
                   
                   <!-- 이미지 미리보기 -->
-                  <div v-if="menuFormData.imagePreview" class="mb-3">
+                  <div v-if="shouldShowImagePreview" class="mb-3">
                     <v-img
-                      :src="menuFormData.imagePreview"
-                      max-height="200"
-                      max-width="300"
+                      :src="shouldShowImagePreview"
+                      max-height="180"
+                      max-width="280"
                       class="rounded mx-auto"
+                      style="border: 2px solid #e0e0e0;"
                     />
                     <div class="text-center mt-2">
+                      <v-chip 
+                        v-if="previewImageUrl" 
+                        color="success" 
+                        size="small" 
+                        class="mr-2"
+                      >
+                        새 이미지 선택됨
+                      </v-chip>
+                      <v-chip 
+                        v-else-if="menuEditMode" 
+                        color="info" 
+                        size="small" 
+                        class="mr-2"
+                      >
+                        현재 이미지
+                      </v-chip>
                       <v-btn
                         size="small"
-                        color="error"
+                        color="primary"
                         variant="outlined"
-                        prepend-icon="mdi-delete"
-                        @click="removeImage"
+                        prepend-icon="mdi-image-edit"
+                        @click="resetImageSelection"
                       >
-                        이미지 제거
+                        다른 이미지 선택
                       </v-btn>
                     </div>
                   </div>
                   
-                  <!-- 이미지 업로드 영역 -->
+                  <!-- 이미지 선택 섹션 -->
                   <div v-else>
                     <v-file-input
-                      v-model="menuFormData.imageFile"
-                      label="메뉴 이미지 선택"
-                      variant="outlined"
-                      prepend-icon="mdi-camera"
+                      v-model="selectedImageFile"
+                      label="메뉴 이미지 선택 *"
                       accept="image/*"
+                      prepend-icon="mdi-camera"
+                      variant="outlined"
+                      density="compact"
+                      :rules="[
+                        v => menuEditMode || !!v || '메뉴 이미지는 필수입니다',
+                        v => !v || v.size < 10485760 || '파일 크기는 10MB 이하여야 합니다',
+                        v => !v || v.type.startsWith('image/') || '이미지 파일만 업로드 가능합니다'
+                      ]"
+                      @update:modelValue="onFileInputChange"
                       show-size
-                      @change="onImageSelected"
-                      :rules="imageRules"
-                      class="mb-3"
+                      required
                     />
                     
-                    <!-- 드래그앤드롭 영역 -->
+                    <!-- 드래그앤드롭 영역 - 높이 축소 -->
                     <div
-                      class="drop-zone"
-                      @drop="onDrop"
+                      class="drop-zone pa-3 text-center"
+                      style="border: 2px dashed #ccc; border-radius: 8px; background: #fafafa; min-height: 80px;"
+                      @drop="onDropImage"
                       @dragover.prevent
                       @dragenter.prevent
                     >
-                      <v-icon size="48" color="grey-lighten-2">mdi-cloud-upload</v-icon>
-                      <p class="text-grey text-center mt-2 mb-1">
+                      <v-icon size="32" color="grey-lighten-2">mdi-cloud-upload</v-icon>
+                      <p class="text-grey text-center mt-1 mb-1 text-caption">
                         이미지를 드래그하여 업로드하거나 위의 버튼을 클릭하세요
                       </p>
                       <p class="text-caption text-grey text-center">
@@ -751,100 +614,156 @@
                   </div>
                 </div>
               </v-col>
-
-              <!-- 기존 메뉴 정보 필드들 -->
+              
               <v-col cols="12">
                 <v-text-field
                   v-model="menuFormData.menuName"
                   label="메뉴명 *"
                   :rules="[v => !!v || '메뉴명을 입력해주세요']"
-                  prepend-inner-icon="mdi-food"
                   variant="outlined"
+                  density="compact"
+                  required
                 />
               </v-col>
-
+              
               <v-col cols="12" sm="6">
                 <v-select
                   v-model="menuFormData.category"
-                  label="카테고리 *"
                   :items="menuCategories"
+                  label="카테고리 *"
                   :rules="[v => !!v || '카테고리를 선택해주세요']"
-                  prepend-inner-icon="mdi-tag"
                   variant="outlined"
+                  density="compact"
+                  required
                 />
               </v-col>
-
+              
               <v-col cols="12" sm="6">
                 <v-text-field
                   v-model.number="menuFormData.price"
-                  label="가격 *"
+                  label="가격 (원) *"
                   type="number"
-                  :rules="[v => !!v || '가격을 입력해주세요', v => v > 0 || '가격은 0원보다 커야 합니다']"
-                  prepend-inner-icon="mdi-currency-krw"
+                  :rules="[
+                    v => !!v || '가격을 입력해주세요',
+                    v => v > 0 || '가격은 0보다 커야 합니다'
+                  ]"
                   variant="outlined"
-                  :min="0"
+                  density="compact"
+                  required
                 />
               </v-col>
-
+              
               <v-col cols="12">
                 <v-textarea
                   v-model="menuFormData.description"
                   label="메뉴 설명"
-                  prepend-inner-icon="mdi-text"
                   variant="outlined"
-                  rows="3"
-                  :rules="[v => !v || v.length <= 500 || '설명은 500자 이하로 입력해주세요']"
+                  density="compact"
+                  rows="2"
                 />
               </v-col>
-
-              <!-- 메뉴 옵션 -->
-              <v-col cols="12">
-                <v-row>
-                  <v-col cols="6">
-                    <v-switch
-                      v-model="menuFormData.available"
-                      label="판매 중"
-                      color="success"
-                      hide-details
-                    />
-                  </v-col>
-                  <v-col cols="6">
-                    <v-switch
-                      v-model="menuFormData.recommended"
-                      label="추천 메뉴"
-                      color="warning"
-                      hide-details
-                    />
-                  </v-col>
-                </v-row>
+              
+              <v-col cols="12" sm="6">
+                <v-switch
+                  v-model="menuFormData.available"
+                  label="판매 가능"
+                  color="primary"
+                  density="compact"
+                />
+              </v-col>
+              
+              <v-col cols="12" sm="6">
+                <v-switch
+                  v-model="menuFormData.recommended"
+                  label="추천 메뉴"
+                  color="orange"
+                  density="compact"
+                />
               </v-col>
             </v-row>
           </v-form>
         </v-card-text>
         
-        <v-divider />
-        
         <v-card-actions class="pa-4">
           <v-spacer />
           <v-btn
-            color="grey"
-            variant="outlined"
+            variant="text"
             @click="cancelMenuForm"
-            :disabled="saving"
           >
             취소
           </v-btn>
           <v-btn
             color="primary"
-            @click="saveMenuWithImage"
+            @click="saveMenu"
             :loading="saving"
-            :disabled="!formValid"
+            :disabled="!menuFormValid"
           >
             {{ menuEditMode ? '수정' : '등록' }}
           </v-btn>
         </v-card-actions>
       </v-card>
     </v-dialog>
+    <!-- 메뉴 상세 다이얼로그 -->
+    <v-dialog v-model="showMenuDetailDialog" max-width="500">
+      <v-card v-if="selectedMenu">
+        <v-img
+          :src="getMenuImageUrl(selectedMenu)"
+          height="250"
+          cover
+          @error="handleImageError($event, selectedMenu)"
+        />
+        
+        <v-card-title class="pa-4 d-flex justify-space-between align-center">
+          <span>{{ selectedMenu.menuName || selectedMenu.name }}</span>
+          <v-chip
+            :color="selectedMenu.available ? 'green' : 'red'"
+            size="small"
+          >
+            {{ selectedMenu.available ? '판매중' : '품절' }}
+          </v-chip>
+        </v-card-title>
+        
+        <v-card-text class="pa-4">
+          <div class="mb-3">
+            <div class="text-caption text-grey">카테고리</div>
+            <div class="text-body-1">{{ selectedMenu.category }}</div>
+          </div>
+          
+          <div class="mb-3">
+            <div class="text-caption text-grey">가격</div>
+            <div class="text-h6 text-primary font-weight-bold">
+              {{ selectedMenu.price ? selectedMenu.price.toLocaleString() : '0' }}원
+            </div>
+          </div>
+          
+          <div class="mb-3">
+            <div class="text-caption text-grey">설명</div>
+            <div class="text-body-1">{{ selectedMenu.description || '설명이 없습니다' }}</div>
+          </div>
+          
+          <div v-if="selectedMenu.recommended" class="mb-3">
+            <v-chip color="orange" size="small">추천 메뉴</v-chip>
+          </div>
+        </v-card-text>
+        
+        <v-card-actions class="pa-4">
+          <v-spacer />
+          <v-btn
+            variant="text"
+            @click="closeMenuDetail"
+          >
+            닫기
+          </v-btn>
+          <v-btn
+            color="primary"
+            variant="text"
+            @click="editMenu(selectedMenu); closeMenuDetail()"
+          >
+            수정
+          </v-btn>
+        </v-card-actions>
+      </v-card>
+    </v-dialog>
 
     <!-- 스낵바 -->
     <v-snackbar
@@ -859,7 +778,7 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { useStoreStore } from '@/store/index'
 
 const storeStore = useStoreStore()
@@ -880,26 +799,28 @@ const menuCategories = ref(['커피', '음료', '디저트', '베이커리', '
 const showMenuDialog = ref(false)
 const menuEditMode = ref(false)
 const menuFormRef = ref(null)
+const menuFormValid = ref(false)
 
-// ✅ 이미지 업로드 기능이 포함된 메뉴 폼 데이터
+// 이미지 관련 상태
+const selectedImageFile = ref(null)
+const previewImageUrl = ref('')
+
+// 메뉴 폼 데이터
 const menuFormData = ref({
-  menuId: null,
-  id: null,
   menuName: '',
   category: '',
   price: 0,
   description: '',
   available: true,
   recommended: false,
-  imageUrl: '',
-  imageFile: null, // ✅ 새 이미지 파일
-  imagePreview: null // ✅ 이미지 미리보기 URL
+  imageUrl: ''
 })
 
 // 메뉴 상세 관련 상태
 const showMenuDetailDialog = ref(false)
 const selectedMenu = ref(null)
 
+// 스낵바 상태
 const snackbar = ref({
   show: false,
   message: '',
@@ -936,21 +857,6 @@ const weekDays = [
   { title: '일요일', value: 'sunday' }
 ]
 
-// ✅ 이미지 업로드 관련 검증 규칙
-const imageRules = ref([
-  value => {
-    if (!value || !value.length) return true // 이미지는 선택사항
-    const file = Array.isArray(value) ? value[0] : value
-    if (file.size > 10 * 1024 * 1024) {
-      return '이미지 크기는 10MB 이하여야 합니다'
-    }
-    if (!file.type.startsWith('image/')) {
-      return '이미지 파일만 업로드 가능합니다'
-    }
-    return true
-  }
-])
-
 // 컴퓨티드 속성
 const storeInfo = computed(() => storeStore.storeInfo || {})
 
@@ -962,8 +868,8 @@ const filteredMenus = computed(() => {
   if (menuSearch.value) {
     const search = menuSearch.value.toLowerCase()
     filtered = filtered.filter(menu => 
-      menu.menuName.toLowerCase().includes(search) ||
-      menu.description.toLowerCase().includes(search)
+      (menu.menuName || '').toLowerCase().includes(search) ||
+      (menu.description || '').toLowerCase().includes(search)
     )
   }
 
@@ -975,7 +881,99 @@ const filteredMenus = computed(() => {
   return filtered
 })
 
-// 유틸리티 함수들
+// 이미지 미리보기 표시 조건 (computed)
+const shouldShowImagePreview = computed(() => {
+  // 1순위: 새로 선택한 이미지 미리보기
+  if (previewImageUrl.value) {
+    return previewImageUrl.value
+  }
+  
+  // 2순위: 수정 모드일 때 기존 이미지
+  if (menuEditMode.value && menuFormData.value.imageUrl) {
+    return menuFormData.value.imageUrl
+  }
+  
+  return null
+})
+
+// ===== 유틸리티 함수들 =====
+
+/**
+ * 메뉴 이미지 URL 처리 함수
+ * Azure Blob Storage URL과 플레이스홀더 구분
+ */
+const getMenuImageUrl = (menu) => {
+  if (!menu) return '/images/menu-placeholder.png'
+  
+  console.log('=== 메뉴 이미지 URL 처리 ===')
+  console.log('메뉴 데이터:', menu)
+  console.log('이미지 필드들:', {
+    image: menu.image,
+    imageUrl: menu.imageUrl,
+    menuImageUrl: menu.menuImageUrl
+  })
+  
+  // 1순위: Azure Blob Storage URL (https로 시작하는 실제 URL)
+  const imageUrl = menu.image || menu.imageUrl || menu.menuImageUrl
+  
+  if (imageUrl && imageUrl.startsWith('https://')) {
+    console.log('✅ Azure Blob Storage URL 사용:', imageUrl)
+    return imageUrl
+  }
+  
+  // 2순위: 상대 경로 이미지가 있다면 절대 경로로 변환
+  if (imageUrl && imageUrl.startsWith('/images/')) {
+    console.log('⚠️ 상대 경로 이미지, 절대 경로로 변환:', imageUrl)
+    return imageUrl
+  }
+  
+  // 3순위: 기본 플레이스홀더
+  console.log('❌ 이미지 URL 없음, 플레이스홀더 사용')
+  return '/images/menu-placeholder.png'
+}
+
+/**
+ * 이미지 로딩 오류 처리
+ */
+const handleImageError = (event, menu) => {
+  console.log('이미지 로딩 실패:', menu?.menuName || 'Unknown', event)
+  // 이미지 로딩 실패 시 플레이스홀더로 변경
+  if (event.target) {
+    event.target.src = '/images/menu-placeholder.png'
+  }
+}
+
+/**
+ * 플레이스홀더 이미지 존재 여부 확인
+ */
+const checkPlaceholderImage = async () => {
+  try {
+    const response = await fetch('/images/menu-placeholder.png')
+    if (!response.ok) {
+      console.warn('⚠️ 플레이스홀더 이미지가 없습니다:', '/images/menu-placeholder.png')
+      showSnackbar('기본 이미지 파일이 없습니다. public/images 폴더를 확인해주세요', 'warning')
+    } else {
+      console.log('✅ 플레이스홀더 이미지 확인됨')
+    }
+  } catch (error) {
+    console.warn('플레이스홀더 이미지 확인 실패:', error)
+  }
+}
+
+/**
+ * 개발용 이미지 확인 함수
+ */
+const checkMenuImages = () => {
+  console.log('=== 현재 메뉴 이미지 상태 확인 ===')
+  menus.value.forEach((menu, index) => {
+    console.log(`메뉴 ${index + 1}: ${menu.menuName}`)
+    console.log('  - image:', menu.image)
+    console.log('  - imageUrl:', menu.imageUrl)
+    console.log('  - 최종 URL:', getMenuImageUrl(menu))
+    console.log('  - Azure URL 여부:', getMenuImageUrl(menu).startsWith('https://'))
+  })
+}
+
 const formatClosedDays = (closedDays) => {
   if (!closedDays) return '미설정'
   
@@ -1006,78 +1004,237 @@ const showSnackbar = (message, color = 'success') => {
   snackbar.value.show = true
 }
 
-const formatCurrency = (amount) => {
-  return new Intl.NumberFormat('ko-KR', {
-    style: 'currency',
-    currency: 'KRW'
-  }).format(amount)
-}
+// ===== 이미지 관련 함수들 =====
 
-const getCategoryColor = (category) => {
-  const colors = {
-    '커피': 'brown',
-    '음료': 'blue',
-    '디저트': 'pink',
-    '베이커리': 'orange',
-    '샐러드': 'green',
-    '샌드위치': 'purple'
-  }
-  return colors[category] || 'grey'
-}
-
-// ===== 이미지 관련 메서드들 =====
-
-// ✅ 이미지 파일 선택 시 처리
-const onImageSelected = (files) => {
-  console.log('이미지 파일 선택:', files)
+// watch 추가 - selectedImageFile 변경 감지
+watch(selectedImageFile, (newFile, oldFile) => {
+  console.log('selectedImageFile 변경 감지:', newFile)
   
-  if (!files || !files.length) {
-    menuFormData.value.imageFile = null
-    menuFormData.value.imagePreview = null
+  // 실제로 다른 파일로 변경되었을 때만 로그 출력
+  if (newFile && newFile !== oldFile) {
+    console.log('새 파일 설정됨:', newFile.name)
+  }
+}, { immediate: false })
+
+// v-file-input의 modelValue 변경 감지 함수
+const onFileInputChange = (file) => {
+  console.log('=== v-file-input v-model 변경 감지 ===')
+  console.log('전달받은 file:', file)
+  
+  if (file) {
+    // selectedImageFile에 할당
+    selectedImageFile.value = file
+    onImageFileSelected(file)
+  } else {
+    selectedImageFile.value = null
+    previewImageUrl.value = ''
+  }
+}
+
+// 이미지 파일 선택 처리 함수
+const onImageFileSelected = (file) => {
+  console.log('=== 이미지 파일 선택 처리 ===')
+  console.log('선택된 파일:', file)
+  
+  if (!file) {
+    console.log('파일이 선택되지 않음')
+    selectedImageFile.value = null
+    previewImageUrl.value = ''
     return
   }
   
-  const file = Array.isArray(files) ? files[0] : files
+  console.log('파일 크기:', file.size, '바이트')
+  console.log('파일 타입:', file.type)
   
-  // 파일 크기 및 타입 검증
-  if (file.size > 10 * 1024 * 1024) {
-    showSnackbar('이미지 크기는 10MB 이하여야 합니다', 'error')
+  // 파일 크기 체크 (10MB)
+  if (file.size > 10485760) {
+    showSnackbar('파일 크기는 10MB 이하여야 합니다', 'error')
+    selectedImageFile.value = null
+    previewImageUrl.value = ''
     return
   }
   
+  // 이미지 파일 형식 체크
   if (!file.type.startsWith('image/')) {
     showSnackbar('이미지 파일만 업로드 가능합니다', 'error')
+    selectedImageFile.value = null
+    previewImageUrl.value = ''
     return
   }
   
-  menuFormData.value.imageFile = file
-  
-  // 이미지 미리보기 생성
+  // 미리보기 URL 생성
   const reader = new FileReader()
   reader.onload = (e) => {
-    menuFormData.value.imagePreview = e.target.result
+    previewImageUrl.value = e.target.result
+    console.log('✅ 이미지 미리보기 생성 완료')
   }
   reader.readAsDataURL(file)
 }
 
-// ✅ 드래그앤드롭 처리
-const onDrop = (event) => {
-  event.preventDefault()
+// ✅ StoreManagementView.vue의 uploadMenuImage 함수 직접 수정
+
+// 이미지 업로드 함수 - 직접 axios 인스턴스 생성
+const uploadMenuImage = async (menuId) => {
+  if (!selectedImageFile.value) {
+    console.log('업로드할 이미지 파일이 없음')
+    return null
+  }
   
-  const files = event.dataTransfer.files
-  if (files.length > 0) {
-    onImageSelected([files[0]])
+  try {
+    console.log('=== 메뉴 이미지 업로드 시작 ===')
+    console.log('메뉴 ID:', menuId)
+    console.log('이미지 파일:', selectedImageFile.value)
+    
+    const formData = new FormData()
+    formData.append('file', selectedImageFile.value)
+    
+    // ✅ 직접 axios 인스턴스 생성 (import 문제 회피)
+    const axios = (await import('axios')).default
+    
+    // ✅ 이미지 전용 API 인스턴스 생성
+    const imageApiInstance = axios.create({
+      baseURL: 'http://localhost:8082', // 포트만 지정
+      timeout: 30000,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    })
+    
+    // JWT 토큰 추가
+    const token = localStorage.getItem('accessToken')
+    if (token) {
+      imageApiInstance.defaults.headers.Authorization = `Bearer ${token}`
+    }
+    
+    console.log('🎯 ImageController로 업로드: /api/images/menu/' + menuId)
+    
+    // ✅ 올바른 전체 경로 지정
+    const response = await imageApiInstance.post(`/api/images/menu/${menuId}`, formData)
+    
+    console.log('이미지 업로드 응답:', response.data)
+    
+    // ✅ 응답 데이터 구조 확인 및 URL 추출
+    let imageUrl = null
+    
+    if (response.data) {
+      // MenuResponse 구조에서 이미지 URL 추출
+      if (response.data.image) {
+        imageUrl = response.data.image
+      } else if (response.data.imageUrl) {
+        imageUrl = response.data.imageUrl  
+      } else if (response.data.data && response.data.data.image) {
+        imageUrl = response.data.data.image
+      }
+    }
+    
+    if (imageUrl && imageUrl.startsWith('https://')) {
+      console.log('✅ 이미지 업로드 성공!')
+      console.log('🔗 Azure Blob Storage URL:', imageUrl)
+      return imageUrl
+    } else {
+      console.warn('⚠️ 응답에서 유효한 이미지 URL을 찾을 수 없음:', response.data)
+      return null
+    }
+    
+  } catch (error) {
+    console.error('❌ 이미지 업로드 실패:', error)
+    console.error('에러 상세:', error.response?.data)
+    
+    // 구체적인 에러 메시지 제공
+    if (error.response?.status === 500) {
+      console.error('서버 내부 오류 - ImageController 처리 로직 확인 필요')
+      showSnackbar('서버에서 이미지 처리 중 오류가 발생했습니다', 'error')
+    } else if (error.response?.status === 404) {
+      console.error('ImageController API 경로를 찾을 수 없음')
+      showSnackbar('이미지 업로드 API를 찾을 수 없습니다', 'error')
+    } else if (error.response?.status === 413) {
+      console.error('파일 크기 초과')
+      showSnackbar('파일 크기가 너무 큽니다', 'error')
+    } else {
+      showSnackbar('이미지 업로드에 실패했습니다', 'error')
+    }
+    
+    return null
   }
 }
 
-// ✅ 이미지 제거
-const removeImage = () => {
-  menuFormData.value.imageFile = null
-  menuFormData.value.imagePreview = null
-  menuFormData.value.imageUrl = ''
+// 이미지 선택 초기화 함수
+const resetImageSelection = () => {
+  console.log('이미지 선택 초기화')
+  selectedImageFile.value = null
+  previewImageUrl.value = ''
+  
+  // v-file-input도 초기화하기 위해 DOM 조작 추가
+  const fileInput = document.querySelector('input[type="file"]')
+  if (fileInput) {
+    fileInput.value = ''
+  }
 }
 
-// ===== 매장 관련 메서드들 =====
+// 드래그앤드롭 처리
+const onDropImage = (event) => {
+  event.preventDefault()
+  console.log('이미지 드롭 이벤트')
+  
+  const files = event.dataTransfer.files
+  if (files.length > 0) {
+    const file = files[0]
+    selectedImageFile.value = file
+    onImageFileSelected(file)
+  }
+}
+
+// ===== 폼 관련 함수들 =====
+
+// 폼 리셋 함수
+const resetForm = () => {
+  formData.value = {
+    storeName: '',
+    businessType: '',
+    address: '',
+    phoneNumber: '',
+    seatCount: 0,
+    instagramUrl: '',
+    blogUrl: '',
+    openTime: '09:00',
+    closeTime: '21:00',
+    holidays: [],
+    description: ''
+  }
+  if (storeFormRef.value) {
+    storeFormRef.value.resetValidation()
+  }
+}
+
+// 메뉴 폼 리셋 함수
+const resetMenuForm = () => {
+  console.log('=== 메뉴 폼 리셋 ===')
+  
+  menuFormData.value = {
+    menuId: null,
+    id: null,
+    menuName: '',
+    category: '',
+    price: 0,
+    description: '',
+    available: true,
+    recommended: false,
+    imageUrl: ''
+  }
+  
+  // 이미지 관련 상태 초기화
+  selectedImageFile.value = null
+  previewImageUrl.value = ''
+  
+  if (menuFormRef.value) {
+    menuFormRef.value.resetValidation()
+  }
+  
+  console.log('✅ 메뉴 폼 리셋 완료')
+}
+
+// ===== 다이얼로그 관련 함수들 =====
+
 const openCreateDialog = () => {
   console.log('새 매장 등록 다이얼로그 열기')
   editMode.value = false
@@ -1108,48 +1265,122 @@ const editBasicInfo = () => {
   showCreateDialog.value = true
 }
 
-const cancelForm = () => {
-  console.log('폼 취소')
-  showCreateDialog.value = false
-  editMode.value = false
-  resetForm()
+// 메뉴 관련 메서드들
+const openCreateMenuDialog = () => {
+  console.log('메뉴 등록 다이얼로그 열기')
+  menuEditMode.value = false
+  resetMenuForm()
+  showMenuDialog.value = true
 }
 
-const resetForm = () => {
-  formData.value = {
-    storeName: '',
-    businessType: '',
-    address: '',
-    phoneNumber: '',
-    seatCount: 0,
-    instagramUrl: '',
-    blogUrl: '',
-    openTime: '09:00',
-    closeTime: '21:00',
-    holidays: [],
-    description: ''
+// 메뉴 수정 함수
+const editMenu = (menu) => {
+  console.log('=== 메뉴 수정 호출 ===')
+  console.log('전달받은 메뉴 객체:', menu)
+  
+  if (!menu || menu === null || menu === undefined) {
+    console.error('❌ 전달받은 메뉴 객체가 null 또는 undefined입니다')
+    showSnackbar('메뉴 정보를 찾을 수 없습니다', 'error')
+    return
   }
   
-  if (storeFormRef.value) {
-    storeFormRef.value.resetValidation()
+  const menuId = menu.menuId || menu.id
+  console.log('추출된 메뉴 ID:', menuId, '타입:', typeof menuId)
+  
+  if (!menuId || menuId === 'undefined' || menuId === null || menuId === '') {
+    console.error('❌ 메뉴 ID를 찾을 수 없음:', menu)
+    showSnackbar('메뉴 ID를 찾을 수 없습니다', 'error')
+    return
+  }
+  
+  console.log('✅ 사용할 메뉴 ID:', menuId)
+  menuEditMode.value = true
+  
+  // 메뉴 폼 데이터 설정
+  menuFormData.value = {
+    menuId: menuId,
+    id: menuId,
+    menuName: menu.menuName || menu.name || '',
+    category: menu.category || '',
+    price: menu.price || 0,
+    description: menu.description || '',
+    available: menu.available !== undefined ? menu.available : true,
+    recommended: menu.recommended !== undefined ? menu.recommended : false,
+    imageUrl: menu.image || menu.imageUrl || ''
+  }
+  
+  // 이미지 상태 초기화
+  selectedImageFile.value = null
+  previewImageUrl.value = ''
+  
+  console.log('✅ 메뉴 수정 폼 데이터 설정 완료:', menuFormData.value)
+  showMenuDialog.value = true
+}
+
+// 메뉴 상세 보기
+const viewMenuDetail = (menu) => {
+  console.log('=== 메뉴 상세 보기 호출 ===')
+  console.log('전달받은 메뉴 객체:', menu)
+  
+  const menuId = menu.menuId || menu.id
+  
+  if (!menuId) {
+    console.error('❌ 메뉴 ID를 찾을 수 없음:', menu)
+    showSnackbar('메뉴 정보가 올바르지 않습니다', 'error')
+    return
+  }
+  
+  console.log('✅ 사용할 메뉴 ID:', menuId)
+  
+  selectedMenu.value = {
+    ...menu,
+    id: menuId,
+    menuId: menuId,
+    name: menu.menuName || menu.name,
+    menuName: menu.menuName || menu.name,
+    imageUrl: menu.image || menu.imageUrl || '/images/menu-placeholder.png'
+  }
+  
+  console.log('✅ 메뉴 상세 정보 설정 완료:', selectedMenu.value)
+  showMenuDetailDialog.value = true
+}
+
+const closeMenuDetail = () => {
+  showMenuDetailDialog.value = false
+  selectedMenu.value = null
+}
+
+const confirmDeleteMenu = (menu) => {
+  console.log('메뉴 삭제 확인:', menu)
+  if (confirm(`'${menu.menuName}' 메뉴를 삭제하시겠습니까?`)) {
+    deleteMenu(menu.id || menu.menuId)
   }
 }
 
+const clearFilters = () => {
+  menuSearch.value = ''
+  menuCategoryFilter.value = '전체'
+}
+
+// 메뉴 폼 취소
+const cancelMenuForm = () => {
+  console.log('메뉴 폼 취소')
+  showMenuDialog.value = false
+  menuEditMode.value = false
+  resetMenuForm()
+}
+
+// ===== 저장 관련 함수들 =====
+
 // 매장 정보 저장 함수
-const saveStoreInfo = async () => {
-  console.log('=== 매장 정보 저장 시작 ===')
-  console.log('편집 모드:', editMode.value)
-  console.log('폼 데이터:', formData.value)
-  
+const saveStore = async () => {
   if (!storeFormRef.value) {
-    console.error('폼 참조를 찾을 수 없습니다')
     showSnackbar('폼 오류가 발생했습니다', 'error')
     return
   }
   
   const { valid } = await storeFormRef.value.validate()
   if (!valid) {
-    console.log('폼 유효성 검사 실패')
     showSnackbar('필수 정보를 모두 입력해주세요', 'error')
     return
   }
@@ -1157,13 +1388,18 @@ const saveStoreInfo = async () => {
   saving.value = true
   
   try {
+    console.log('매장 정보 저장 시작')
+    
+    // 백엔드 형식에 맞는 데이터 구조로 변환
     const storeData = {
       storeName: formData.value.storeName,
       businessType: formData.value.businessType,
       address: formData.value.address,
-      phoneNumber: formData.value.phoneNumber,
-      businessHours: `${formData.value.openTime}-${formData.value.closeTime}`,
-      closedDays: Array.isArray(formData.value.holidays) ? formData.value.holidays.join(',') : '',
+      phoneNumber: formData.value.phoneNumber || '',
+      openTime: formData.value.openTime || '09:00',
+      closeTime: formData.value.closeTime || '21:00',
+      holidays: Array.isArray(formData.value.holidays) ? 
+        formData.value.holidays.join(',') : '',
       seatCount: parseInt(formData.value.seatCount) || 0,
       instaAccounts: formData.value.instagramUrl || '',
       blogAccounts: formData.value.blogUrl || '',
@@ -1201,283 +1437,31 @@ const saveStoreInfo = async () => {
   }
 }
 
-// ===== 메뉴 관련 메서드들 =====
-
-const editMenu = (menu) => {
-  console.log('=== 메뉴 수정 호출 ===')
-  console.log('전달받은 메뉴 객체:', menu)
-  
-  if (!menu || menu === null || menu === undefined) {
-    console.error('❌ 전달받은 메뉴 객체가 null 또는 undefined입니다')
-    showSnackbar('메뉴 정보를 찾을 수 없습니다', 'error')
-    return
-  }
-  
-  const menuId = menu.menuId || menu.id
-  console.log('추출된 메뉴 ID:', menuId, '타입:', typeof menuId)
-  
-  if (!menuId || menuId === 'undefined' || menuId === null || menuId === '') {
-    console.error('❌ 메뉴 ID를 찾을 수 없음:', menu)
-    showSnackbar('메뉴 ID를 찾을 수 없습니다', 'error')
-    return
-  }
-  
-  console.log('✅ 사용할 메뉴 ID:', menuId)
-  menuEditMode.value = true
-  
-  menuFormData.value = {
-    menuId: menuId,
-    id: menuId,
-    menuName: menu.menuName || menu.name || '',
-    category: menu.category || '',
-    price: menu.price || 0,
-    description: menu.description || '',
-    available: menu.available !== undefined ? menu.available : true,
-    recommended: menu.recommended !== undefined ? menu.recommended : false,
-    imageUrl: menu.imageUrl || menu.image || '',
-    imageFile: null, // ✅ 수정 시에는 새 이미지 파일 없음
-    imagePreview: menu.imageUrl || menu.image || null // ✅ 기존 이미지 미리보기
-  }
-  
-  console.log('✅ 수정 폼 데이터 설정 완료:', menuFormData.value)
-  showMenuDialog.value = true
-}
-
-const viewMenuDetail = async (menu) => {
-  console.log('=== 메뉴 상세 보기 호출 ===')
-  console.log('전달받은 메뉴 객체:', menu)
-  
-  if (!menu || menu === null || menu === undefined) {
-    console.error('❌ 전달받은 메뉴 객체가 null 또는 undefined입니다')
-    showSnackbar('메뉴 정보를 찾을 수 없습니다', 'error')
-    return
-  }
-  
-  const menuId = menu.menuId || menu.id
-  
-  if (!menuId || menuId === 'undefined' || menuId === null) {
-    console.error('❌ 메뉴 ID를 찾을 수 없음:', menu)
-    showSnackbar('메뉴 ID를 찾을 수 없습니다', 'error')
-    return
-  }
-  
-  console.log('✅ 사용할 메뉴 ID:', menuId)
-  
-  try {
-    const { menuService } = await import('@/services/menu')
-    
-    console.log('메뉴 상세 API 호출 시작, ID:', menuId)
-    const result = await menuService.getMenuDetail(menuId)
-    
-    if (result.success && result.data) {
-      selectedMenu.value = {
-        ...result.data,
-        id: result.data.menuId || result.data.id,
-        menuId: result.data.menuId || result.data.id
-      }
-      showMenuDetailDialog.value = true
-      console.log('✅ 메뉴 상세 정보 로드 성공:', selectedMenu.value)
-    } else {
-      console.warn('⚠️ 상세 정보 로드 실패, 기본 정보 사용:', result.message)
-      selectedMenu.value = {
-        ...menu,
-        id: menuId,
-        menuId: menuId
-      }
-      showMenuDetailDialog.value = true
-      console.log('기본 메뉴 정보로 설정:', selectedMenu.value)
-    }
-  } catch (error) {
-    console.error('메뉴 상세 정보 로드 실패:', error)
-    selectedMenu.value = {
-      ...menu,
-      id: menuId,
-      menuId: menuId
-    }
-    showMenuDetailDialog.value = true
-    console.log('오류 발생으로 기본 메뉴 정보 사용:', selectedMenu.value)
-  }
-}
-
-const closeMenuDetail = () => {
-  console.log('=== 메뉴 상세 다이얼로그 닫기 ===')
-  showMenuDetailDialog.value = false
-  
-  setTimeout(() => {
-    selectedMenu.value = null
-    console.log('selectedMenu.value가 null로 설정됨')
-  }, 100)
-}
-
-const editMenuFromDetail = () => {
-  console.log('=== 메뉴 상세에서 수정 버튼 클릭 ===')
-  console.log('selectedMenu.value:', selectedMenu.value)
-  
-  if (!selectedMenu.value || selectedMenu.value === null || selectedMenu.value === undefined) {
-    console.error('❌ 선택된 메뉴가 null 또는 undefined입니다')
-    showSnackbar('선택된 메뉴 정보가 없습니다. 다시 시도해주세요.', 'error')
-    showMenuDetailDialog.value = false
-    return
-  }
-  
-  const menuId = selectedMenu.value.menuId || selectedMenu.value.id
-  if (!menuId) {
-    console.error('❌ 선택된 메뉴에 ID가 없습니다:', selectedMenu.value)
-    showSnackbar('메뉴 ID를 찾을 수 없습니다', 'error')
-    return
-  }
-  
-  console.log('✅ 수정할 메뉴 정보:', {
-    id: menuId,
-    name: selectedMenu.value.menuName || selectedMenu.value.name,
-    category: selectedMenu.value.category
-  })
-  
-  closeMenuDetail()
-  editMenu(selectedMenu.value)
-}
-
-const deleteMenuFromDetail = () => {
-  console.log('=== 메뉴 상세에서 삭제 버튼 클릭 ===')
-  console.log('selectedMenu.value:', selectedMenu.value)
-  
-  if (!selectedMenu.value || selectedMenu.value === null || selectedMenu.value === undefined) {
-    console.error('❌ 선택된 메뉴가 null 또는 undefined입니다')
-    showSnackbar('선택된 메뉴 정보가 없습니다. 다시 시도해주세요.', 'error')
-    showMenuDetailDialog.value = false
-    return
-  }
-  
-  const menuId = selectedMenu.value.menuId || selectedMenu.value.id
-  if (!menuId) {
-    console.error('❌ 선택된 메뉴에 ID가 없습니다:', selectedMenu.value)
-    showSnackbar('메뉴 ID를 찾을 수 없습니다', 'error')
-    return
-  }
-  
-  console.log('✅ 삭제할 메뉴 정보:', {
-    id: menuId,
-    name: selectedMenu.value.menuName || selectedMenu.value.name
-  })
-  
-  closeMenuDetail()
-  confirmDeleteMenu(selectedMenu.value)
-}
-
-const editMenuDirect = (menu, event) => {
-  console.log('=== 메뉴 카드에서 직접 수정 ===')
-  
-  if (event) {
-    event.preventDefault()
-    event.stopPropagation()
-  }
-  
-  console.log('직접 수정할 메뉴:', menu)
-  
-  if (!menu || menu === null || menu === undefined) {
-    console.error('❌ 메뉴 객체가 null 또는 undefined입니다')
-    showSnackbar('메뉴 정보를 찾을 수 없습니다', 'error')
-    return
-  }
-  
-  editMenu(menu)
-}
-
-const deleteMenuDirect = (menu, event) => {
-  console.log('=== 메뉴 카드에서 직접 삭제 ===')
-  
-  if (event) {
-    event.preventDefault()
-    event.stopPropagation()
-  }
-  
-  console.log('직접 삭제할 메뉴:', menu)
-  
-  if (!menu || menu === null || menu === undefined) {
-    console.error('❌ 메뉴 객체가 null 또는 undefined입니다')
-    showSnackbar('메뉴 정보를 찾을 수 없습니다', 'error')
-    return
-  }
-  
-  confirmDeleteMenu(menu)
-}
-
-const openCreateMenuDialog = () => {
-  console.log('메뉴 등록 다이얼로그 열기')
-  menuEditMode.value = false
-  resetMenuForm()
-  showMenuDialog.value = true
-}
-
-const confirmDeleteMenu = (menu) => {
-  console.log('=== 메뉴 삭제 확인 ===')
-  console.log('전달받은 메뉴 객체:', menu)
-  
-  const menuId = menu.menuId || menu.id
-  
-  if (!menuId || menuId === 'undefined' || menuId === null) {
-    console.error('❌ 메뉴 ID를 찾을 수 없음:', menu)
-    showSnackbar('메뉴 ID를 찾을 수 없습니다', 'error')
-    return
-  }
-  
-  console.log('✅ 삭제할 메뉴 ID:', menuId)
-  
-  if (confirm(`'${menu.menuName || menu.name}' 메뉴를 삭제하시겠습니까?`)) {
-    deleteMenu(menuId)
-  }
-}
-
-const clearFilters = () => {
-  menuSearch.value = ''
-  menuCategoryFilter.value = '전체'
-}
-
-const cancelMenuForm = () => {
-  console.log('메뉴 폼 취소')
-  showMenuDialog.value = false
-  menuEditMode.value = false
-  resetMenuForm()
-}
-
-// ✅ 메뉴 폼 초기화 (이미지 관련 필드 포함)
-const resetMenuForm = () => {
-  menuFormData.value = {
-    menuId: null,
-    id: null,
-    menuName: '',
-    category: '',
-    price: 0,
-    description: '',
-    available: true,
-    recommended: false,
-    imageUrl: '',
-    imageFile: null, // ✅ 이미지 파일 초기화
-    imagePreview: null // ✅ 미리보기 초기화
-  }
-  
-  if (menuFormRef.value) {
-    menuFormRef.value.resetValidation()
-  }
-}
-
-// ✅ 메뉴 저장 + 이미지 업로드 (2단계 처리)
-const saveMenuWithImage = async () => {
-  console.log('=== 메뉴 저장 + 이미지 업로드 시작 ===')
+// 메뉴 저장 함수
+const saveMenu = async () => {
+  console.log('=== 메뉴 저장 시작 ===')
+  console.log('메뉴 수정 모드:', menuEditMode.value)
+  console.log('폼 데이터:', menuFormData.value)
+  console.log('선택된 이미지 파일:', selectedImageFile.value)
+  console.log('이미지 미리보기:', previewImageUrl.value)
   
   if (!menuFormRef.value) {
-    console.error('❌ 폼 참조를 찾을 수 없음')
     showSnackbar('폼 오류가 발생했습니다', 'error')
     return
   }
   
   const { valid } = await menuFormRef.value.validate()
   if (!valid) {
-    console.log('❌ 폼 유효성 검사 실패')
     showSnackbar('필수 정보를 모두 입력해주세요', 'error')
     return
   }
   
+  // 신규 등록 시 이미지 필수 체크
+  if (!menuEditMode.value && !selectedImageFile.value) {
+    showSnackbar('메뉴 이미지는 필수입니다', 'error')
+    return
+  }
+  
   saving.value = true
   
   try {
@@ -1487,47 +1471,27 @@ const saveMenuWithImage = async () => {
     let savedMenuId
     
     if (menuEditMode.value) {
-  // 메뉴 수정 - PUT /api/menu/{menuId}
-  const menuId = menuFormData.value.id || menuFormData.value.menuId
-  if (!menuId) {
-    showSnackbar('메뉴 ID가 없습니다', 'error')
-    return
-  }
-  
-  console.log('=== 메뉴 수정 데이터 준비 ===')
-  console.log('폼 데이터:', menuFormData.value)
-  console.log('메뉴 ID:', menuId)
-  
-  // 메뉴 데이터 검증 및 준비
-  const menuName = menuFormData.value.menuName || menuFormData.value.name
-  const category = menuFormData.value.category
-  const price = menuFormData.value.price
-  const description = menuFormData.value.description
-  
-  // 프론트엔드에서 기본 검증
-  if (!menuName || !category || price === undefined || price === null) {
-    console.error('❌ 필수 필드 누락:', { menuName, category, price, description })
-    showSnackbar('메뉴명, 카테고리, 가격을 모두 입력해주세요', 'error')
-    return
-  }
-  
-  if (isNaN(parseInt(price)) || parseInt(price) < 0) {
-    showSnackbar('올바른 가격을 입력해주세요', 'error')
-    return
-  }
-  
-  const menuData = {
-    menuName: menuName,
-    category: category,
-    price: parseInt(price),
-    description: description || ''
-  }
-  
-  console.log('✅ 최종 메뉴 수정 데이터:', menuData)
-  
-  menuResult = await menuService.updateMenu(menuId, menuData)
-}else {
-      // ✅ 메뉴 등록
+      // 메뉴 수정
+      const menuId = menuFormData.value.id || menuFormData.value.menuId
+      
+      if (!menuId || menuId === 'undefined' || menuId === null) {
+        showSnackbar('메뉴 ID가 없습니다', 'error')
+        return
+      }
+      
+      const menuData = {
+        menuName: menuFormData.value.menuName,
+        category: menuFormData.value.category,
+        price: parseInt(menuFormData.value.price) || 0,
+        description: menuFormData.value.description || ''
+      }
+      
+      console.log('✅ 메뉴 수정 데이터:', menuData)
+      
+      menuResult = await menuService.updateMenu(menuId, menuData)
+      savedMenuId = menuId
+    } else {
+      // 메뉴 등록
       const storeId = storeInfo.value?.storeId
       
       if (!storeId) {
@@ -1543,7 +1507,9 @@ const saveMenuWithImage = async () => {
         description: menuFormData.value.description?.trim() || ''
       }
       
-      menuResult = await menuService.registerMenu(menuData)
+      console.log('✅ 메뉴 등록 데이터:', menuData)
+      
+      menuResult = await menuService.createMenu(menuData)
       savedMenuId = menuResult.data?.menuId
     }
     
@@ -1554,22 +1520,23 @@ const saveMenuWithImage = async () => {
       return
     }
     
-    // ✅ 2단계: 이미지 업로드 (이미지가 있는 경우만)
-    if (menuFormData.value.imageFile && savedMenuId) {
+    // 이미지 업로드 처리 (새 이미지가 선택된 경우만)
+    if (selectedImageFile.value && savedMenuId) {
       console.log('=== 이미지 업로드 시작 ===')
       console.log('메뉴 ID:', savedMenuId)
-      console.log('이미지 파일:', menuFormData.value.imageFile)
+      console.log('이미지 파일:', selectedImageFile.value)
       
-      const imageResult = await menuService.uploadMenuImage(savedMenuId, menuFormData.value.imageFile)
+      const imageUrl = await uploadMenuImage(savedMenuId)
       
-      if (imageResult.success) {
-        console.log('✅ 이미지 업로드 완료:', imageResult)
+      if (imageUrl) {
+        console.log('✅ 이미지 업로드 완료:', imageUrl)
         showSnackbar(`메뉴가 ${menuEditMode.value ? '수정' : '등록'}되었고 이미지도 업로드되었습니다`, 'success')
       } else {
-        console.warn('⚠️ 이미지 업로드 실패:', imageResult.message)
+        console.warn('⚠️ 이미지 업로드 실패')
         showSnackbar(`메뉴는 ${menuEditMode.value ? '수정' : '등록'}되었지만 이미지 업로드에 실패했습니다`, 'warning')
       }
     } else {
+      console.log('새 이미지가 선택되지 않아 이미지 업로드 건너뜀')
       showSnackbar(`메뉴가 ${menuEditMode.value ? '수정' : '등록'}되었습니다`, 'success')
     }
     
@@ -1587,6 +1554,7 @@ const saveMenuWithImage = async () => {
   }
 }
 
+// 메뉴 삭제 함수
 const deleteMenu = async (menuId) => {
   console.log('=== 메뉴 삭제 시작 ===')
   console.log('삭제할 메뉴 ID:', menuId, '타입:', typeof menuId)
@@ -1615,6 +1583,8 @@ const deleteMenu = async (menuId) => {
   }
 }
 
+// ===== 데이터 로드 함수들 =====
+
 // 메뉴 데이터 로드 함수 - 실제 API 연동
 const loadMenus = async () => {
   try {
@@ -1634,12 +1604,21 @@ const loadMenus = async () => {
   }
 }
 
+// 개발 환경에서 전역으로 노출
+if (process.env.NODE_ENV === 'development') {
+  window.checkMenuImages = checkMenuImages
+  window.getMenuImageUrl = getMenuImageUrl
+}
+
 /**
  * 컴포넌트 마운트 시 실행
  */
 onMounted(async () => {
   console.log('=== StoreManagementView 마운트됨 ===')
   
+  // 플레이스홀더 이미지 확인
+  await checkPlaceholderImage()
+  
   try {
     const result = await storeStore.fetchStoreInfo()
     
@@ -1648,6 +1627,11 @@ onMounted(async () => {
     if (result.success) {
       console.log('✅ 매장 정보 로드 완료:', result.data)
       await loadMenus()
+      
+      // 개발 환경에서 이미지 상태 확인
+      if (process.env.NODE_ENV === 'development') {
+        setTimeout(checkMenuImages, 2000)
+      }
     } else {
       if (result.message === '등록된 매장이 없습니다') {
         console.log('⚠️ 등록된 매장이 없음 - 등록 화면 표시')
@@ -1726,30 +1710,201 @@ onMounted(async () => {
   height: 100%;
 }
 
-/* ✅ 이미지 업로드 관련 스타일 */
-.image-upload-section {
-  border: 1px dashed #e0e0e0;
-  border-radius: 8px;
-  padding: 16px;
-  background-color: #fafafa;
-}
-
+/* 드래그앤드롭 영역 스타일 */
 .drop-zone {
-  border: 2px dashed #e0e0e0;
-  border-radius: 8px;
-  padding: 24px;
-  text-align: center;
-  margin-top: 12px;
-  transition: border-color 0.3s ease, background-color 0.3s ease;
-  cursor: pointer;
+  transition: all 0.3s ease;
 }
 
 .drop-zone:hover {
+  border-color: #1976d2 !important;
+  background: #f3f8ff !important;
+}
+
+/* 이미지 미리보기 스타일 */
+.image-preview {
+  border: 2px solid #e0e0e0;
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.image-preview:hover {
   border-color: #1976d2;
+}
+
+/* 카드 그림자 효과 */
+.v-card {
+  transition: box-shadow 0.3s ease;
+}
+
+.v-card:hover {
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
+}
+
+/* 버튼 호버 효과 */
+.v-btn {
+  transition: all 0.2s ease;
+}
+
+.v-btn:hover {
+  transform: translateY(-1px);
+}
+
+/* 탭 스타일 */
+.v-tabs {
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.v-tab {
+  font-weight: 500;
+  text-transform: none;
+}
+
+.v-tab--selected {
+  background-color: rgba(25, 118, 210, 0.08);
+}
+
+/* 폼 입력 필드 스타일 */
+.v-text-field, .v-select, .v-textarea {
+  margin-bottom: 4px;
+}
+
+.v-text-field .v-field, 
+.v-select .v-field, 
+.v-textarea .v-field {
+  border-radius: 8px;
+}
+
+/* 다이얼로그 스타일 */
+.v-dialog .v-card {
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.v-dialog .v-card-title {
+  background-color: rgba(25, 118, 210, 0.02);
+  border-bottom: 1px solid #e0e0e0;
+}
+
+/* 메뉴 카드 내 액션 버튼 */
+.menu-card .v-btn {
+  backdrop-filter: blur(4px);
+  background-color: rgba(255, 255, 255, 0.9);
+}
+
+.menu-card .v-btn:hover {
+  background-color: rgba(255, 255, 255, 1);
+  transform: scale(1.05);
+}
+
+/* 스낵바 스타일 */
+.v-snackbar {
+  border-radius: 12px;
+  margin: 16px;
+}
+
+/* 칩 스타일 */
+.v-chip {
+  font-weight: 500;
+  border-radius: 16px;
+}
+
+/* 아바타 스타일 */
+.v-avatar {
+  border: 3px solid #fff;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 프로그레스 원형 스타일 */
+.v-progress-circular {
+  margin: auto;
+}
+
+/* 메뉴 정보 레이아웃 */
+.info-section {
+  padding: 16px;
+  border-radius: 8px;
+  background-color: #fafafa;
+  margin-bottom: 16px;
+}
+
+/* 이미지 업로드 관련 스타일 */
+.rounded {
+  border-radius: 8px;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
+/* 파일 입력 스타일 */
+.v-file-input {
+  margin-bottom: 16px;
+}
+
+.v-file-input .v-field {
+  border-radius: 8px;
+}
+
+/* 로딩 상태 */
+.loading-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(255, 255, 255, 0.8);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10;
+}
+
+/* 이미지 로딩 실패 시 스타일 */
+.v-img--error {
   background-color: #f5f5f5;
 }
 
-@media (max-width: 600px) {
+.v-img--error .v-icon {
+  opacity: 0.3;
+}
+
+/* 이미지 로딩 중 스타일 */
+.v-img--loading {
+  background-color: #f5f5f5;
+}
+
+/* Azure Blob Storage 이미지 최적화 */
+.menu-image {
+  object-fit: cover;
+  width: 100%;
+  height: 200px;
+}
+
+/* 플레이스홀더 이미지 스타일 */
+.placeholder-image {
+  background-color: #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.placeholder-image .v-icon {
+  color: #bdbdbd;
+}
+
+/* 이미지 호버 효과 */
+.menu-card .v-img {
+  transition: transform 0.2s ease;
+}
+
+.menu-card:hover .v-img {
+  transform: scale(1.02);
+}
+
+/* 반응형 디자인 */
+@media (max-width: 960px) {
   .info-item {
     margin-bottom: 12px;
   }
@@ -1758,16 +1913,227 @@ onMounted(async () => {
     margin-bottom: 16px;
   }
   
+  .gap-3 {
+    gap: 8px;
+  }
+  
+  .v-dialog {
+    margin: 16px;
+  }
+  
+  .v-dialog .v-card {
+    max-width: calc(100vw - 32px) !important;
+  }
+}
+
+@media (max-width: 600px) {
+  .info-item {
+    flex-direction: column;
+    gap: 4px;
+  }
+  
+  .info-item .v-icon {
+    margin-top: 0;
+  }
+  
   .empty-state {
     padding: 2rem 1rem;
   }
   
-  .image-upload-section {
-    padding: 12px;
+  .v-container {
+    padding: 8px !important;
   }
   
-  .drop-zone {
-    padding: 16px;
+  .menu-card .position-absolute {
+    opacity: 0;
+    transition: opacity 0.2s ease;
+  }
+  
+  .menu-card:hover .position-absolute,
+  .menu-card:active .position-absolute {
+    opacity: 1;
+  }
+  
+  /* 모바일에서 버튼 크기 조정 */
+  .menu-card .v-btn {
+    min-width: 32px;
+    width: 32px;
+    height: 32px;
+  }
+  
+  /* 모바일에서 탭 크기 조정 */
+  .v-tab {
+    min-width: 120px;
+    font-size: 0.875rem;
   }
 }
+
+/* 스크롤바 스타일 (웹킷 브라우저) */
+::-webkit-scrollbar {
+  width: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
+
+/* 로딩 애니메이션 */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.fade-in {
+  animation: fadeIn 0.5s ease-out;
+}
+
+/* 메뉴 카드 진입 애니메이션 */
+.menu-card {
+  animation: fadeIn 0.3s ease-out;
+}
+
+.menu-card:nth-child(1) { animation-delay: 0s; }
+.menu-card:nth-child(2) { animation-delay: 0.05s; }
+.menu-card:nth-child(3) { animation-delay: 0.1s; }
+.menu-card:nth-child(4) { animation-delay: 0.15s; }
+.menu-card:nth-child(n+5) { animation-delay: 0.2s; }
+
+/* 이미지 로딩 플레이스홀더 */
+.v-img__img {
+  transition: opacity 0.3s ease;
+}
+
+.v-img--loading .v-img__img {
+  opacity: 0;
+}
+
+/* 포커스 스타일 개선 */
+.v-btn:focus-visible {
+  outline: 2px solid #1976d2;
+  outline-offset: 2px;
+}
+
+.v-text-field:focus-within .v-field,
+.v-select:focus-within .v-field,
+.v-textarea:focus-within .v-field {
+  border: 2px solid #1976d2;
+  box-shadow: 0 0 0 1px rgba(25, 118, 210, 0.2);
+}
+
+/* 드롭존 드래그 오버 효과 */
+.drop-zone.drag-over {
+  border-color: #1976d2 !important;
+  background: #e3f2fd !important;
+  transform: scale(1.02);
+}
+
+/* 상태별 스타일 */
+.error-state {
+  color: #d32f2f;
+}
+
+.error-state .v-icon {
+  color: #d32f2f;
+}
+
+.success-state {
+  color: #2e7d32;
+}
+
+.success-state .v-icon {
+  color: #2e7d32;
+}
+
+.warning-state {
+  color: #ed6c02;
+}
+
+.warning-state .v-icon {
+  color: #ed6c02;
+}
+
+/* ✅ 메뉴 다이얼로그 스타일 추가 - Style 부분에 추가 */
+
+/* 메뉴 다이얼로그 전용 스타일 */
+.menu-dialog .v-overlay__content {
+  max-height: 90vh !important;
+  margin: 24px;
+}
+
+.menu-dialog-card {
+  max-height: 90vh !important;
+  display: flex;
+  flex-direction: column;
+}
+
+.menu-dialog-card .dialog-content {
+  flex: 1;
+  overflow-y: auto;
+  max-height: calc(90vh - 120px); /* 헤더와 푸터 공간 제외 */
+}
+
+/* 드래그앤드롭 영역 크기 조정 */
+.menu-dialog .drop-zone {
+  min-height: 80px !important;
+  max-height: 80px !important;
+}
+
+/* 이미지 미리보기 크기 조정 */
+.menu-dialog .v-img {
+  max-height: 180px !important;
+  max-width: 280px !important;
+}
+
+/* 모바일에서 다이얼로그 최적화 */
+@media (max-width: 600px) {
+  .menu-dialog .v-overlay__content {
+    margin: 16px;
+    max-height: 95vh !important;
+  }
+  
+  .menu-dialog-card .dialog-content {
+    max-height: calc(95vh - 100px);
+    padding: 16px !important;
+  }
+  
+  .menu-dialog .v-img {
+    max-height: 150px !important;
+    max-width: 200px !important;
+  }
+}
+
+/* 스크롤바 스타일 개선 */
+.dialog-content::-webkit-scrollbar {
+  width: 6px;
+}
+
+.dialog-content::-webkit-scrollbar-track {
+  background: #f1f1f1;
+  border-radius: 3px;
+}
+
+.dialog-content::-webkit-scrollbar-thumb {
+  background: #c1c1c1;
+  border-radius: 3px;
+}
+
+.dialog-content::-webkit-scrollbar-thumb:hover {
+  background: #a8a8a8;
+}
 </style>
\ No newline at end of file