refactor: remove apiWithImage import

This commit is contained in:
OhSeongRak 2025-06-17 18:21:01 +09:00
parent f31cc76fbe
commit b2906adcdc

View File

@ -1,5 +1,5 @@
//* src/services/menu.js - 백엔드 수정 없이 프론트엔드만 수정 //* src/services/menu.js - apiWithImage 제거하고 menuApi로 통일
import { menuApi, apiWithImage, handleApiError, formatSuccessResponse } from './api.js' import { menuApi, handleApiError, formatSuccessResponse } from './api.js'
/** /**
* 메뉴 관련 API 서비스 * 메뉴 관련 API 서비스
@ -48,7 +48,7 @@ class MenuService {
} }
/** /**
* 메뉴 등록 (createMenu) * 메뉴 등록
* @param {Object} menuData - 메뉴 정보 * @param {Object} menuData - 메뉴 정보
* @returns {Promise<Object>} 등록 결과 * @returns {Promise<Object>} 등록 결과
*/ */
@ -79,17 +79,31 @@ class MenuService {
} }
} catch (error) { } catch (error) {
console.error('메뉴 등록 실패:', error) console.error('메뉴 등록 실패:', error)
return handleApiError(error)
if (error.response?.status === 400) {
const errorMessage = error.response.data?.message || 'validation 에러가 발생했습니다.'
console.error('백엔드 validation 에러:', errorMessage)
return {
success: false,
message: errorMessage,
error: error.response.data
} }
} }
/** if (error.response?.status === 500) {
* 메뉴 등록 (registerMenu 별칭) const errorMessage = error.response.data?.message || '서버 내부 오류가 발생했습니다.'
* @param {Object} menuData - 메뉴 정보 console.error('백엔드 에러 메시지:', errorMessage)
* @returns {Promise<Object>} 등록 결과
*/ return {
async registerMenu(menuData) { success: false,
return await this.createMenu(menuData) message: errorMessage,
error: error.response.data
}
}
return handleApiError(error)
}
} }
/** /**
@ -101,8 +115,7 @@ class MenuService {
async updateMenu(menuId, menuData) { async updateMenu(menuId, menuData) {
try { try {
console.log('=== 메뉴 수정 API 호출 ===') console.log('=== 메뉴 수정 API 호출 ===')
console.log('메뉴 ID:', menuId, '타입:', typeof menuId) console.log('메뉴 ID:', menuId, '수정 데이터:', menuData)
console.log('원본 수정 데이터:', menuData)
if (!menuId || menuId === 'undefined') { if (!menuId || menuId === 'undefined') {
throw new Error('올바른 메뉴 ID가 필요합니다') throw new Error('올바른 메뉴 ID가 필요합니다')
@ -113,34 +126,14 @@ async updateMenu(menuId, menuData) {
throw new Error('메뉴 ID는 숫자여야 합니다') throw new Error('메뉴 ID는 숫자여야 합니다')
} }
// 데이터 검증 및 정리
const menuName = menuData.menuName || menuData.name
const category = menuData.category
const price = menuData.price
const description = menuData.description || ''
// 필수 필드 검증
if (!menuName || !category || price === undefined || price === null) {
console.error('필수 필드 누락:', { menuName, category, price, description })
throw new Error('메뉴명, 카테고리, 가격은 필수 입력 사항입니다')
}
// 가격 검증 (숫자이고 0 이상)
const numericPrice = parseInt(price)
if (isNaN(numericPrice) || numericPrice < 0) {
throw new Error('올바른 가격을 입력해주세요')
}
// 백엔드 MenuUpdateRequest DTO에 맞는 데이터 구조
const requestData = { const requestData = {
menuName: menuName.trim(), menuName: menuData.menuName || menuData.name,
category: category.trim(), category: menuData.category,
price: numericPrice, price: parseInt(menuData.price) || 0,
description: description.trim() description: menuData.description || ''
} }
console.log('검증된 백엔드 전송 데이터:', requestData) console.log('백엔드 전송 데이터:', requestData)
console.log('✅ 검증된 메뉴 ID:', numericMenuId)
// PUT /api/menu/{menuId} // PUT /api/menu/{menuId}
const response = await menuApi.put(`/${numericMenuId}`, requestData) const response = await menuApi.put(`/${numericMenuId}`, requestData)
@ -154,49 +147,12 @@ async updateMenu(menuId, menuData) {
} }
} catch (error) { } catch (error) {
console.error('메뉴 수정 실패:', error) console.error('메뉴 수정 실패:', error)
// HTTP 응답 에러 상세 디버깅
if (error.response) {
console.error('=== HTTP 응답 에러 상세 ===')
console.error('상태 코드:', error.response.status)
console.error('상태 텍스트:', error.response.statusText)
console.error('응답 데이터:', error.response.data)
console.error('요청 URL:', error.config?.url)
console.error('요청 메서드:', error.config?.method)
console.error('요청 데이터:', error.config?.data)
// 400 에러 (잘못된 요청) 처리
if (error.response.status === 400) {
const errorMessage = error.response.data?.message || '입력 데이터가 올바르지 않습니다.'
console.error('백엔드 validation 에러:', errorMessage)
return {
success: false,
message: errorMessage,
error: error.response.data
}
}
// 500 오류 처리
if (error.response.status === 500) {
const errorMessage = error.response.data?.message || '서버 내부 오류가 발생했습니다.'
console.error('백엔드 에러 메시지:', errorMessage)
return {
success: false,
message: errorMessage,
error: error.response.data
}
}
}
return handleApiError(error) return handleApiError(error)
} }
} }
/** /**
* 메뉴 이미지 업로드 * 메뉴 이미지 업로드 (menuApi 사용)
* @param {number} menuId - 메뉴 ID * @param {number} menuId - 메뉴 ID
* @param {File} file - 이미지 파일 * @param {File} file - 이미지 파일
* @returns {Promise<Object>} 업로드 결과 * @returns {Promise<Object>} 업로드 결과
@ -225,8 +181,8 @@ async updateMenu(menuId, menuData) {
console.log('이미지 업로드 요청 - 메뉴 ID:', numericMenuId) console.log('이미지 업로드 요청 - 메뉴 ID:', numericMenuId)
// POST /api/images/menu/{menuId} // POST /api/menu/images/{menuId} (menuApi 사용)
const response = await apiWithImage.post(`/images/menu/${numericMenuId}`, formData, { const response = await menuApi.post(`/images/${numericMenuId}`, formData, {
headers: { headers: {
'Content-Type': 'multipart/form-data' 'Content-Type': 'multipart/form-data'
} }
@ -289,221 +245,3 @@ export default menuService
if (process.env.NODE_ENV === 'development') { if (process.env.NODE_ENV === 'development') {
window.menuService = menuService window.menuService = menuService
} }
//* src/views/StoreManagementView.vue의 수정된 스크립트 부분
// <script setup> 내부의 메뉴 관련 함수들만 수정
// 메뉴 상세 보기 함수 - 메뉴 목록 데이터 활용
const viewMenuDetail = (menu) => {
console.log('=== 메뉴 상세 보기 호출 ===')
console.log('전달받은 메뉴 객체:', menu)
// 메뉴 ID 추출 (여러 형태 지원)
const menuId = menu.menuId || menu.id
if (!menuId) {
console.error('❌ 메뉴 ID를 찾을 수 없음:', menu)
showSnackbar('메뉴 정보가 올바르지 않습니다', 'error')
return
}
console.log('✅ 사용할 메뉴 ID:', menuId)
// API 호출 없이 바로 메뉴 목록의 데이터 사용
selectedMenu.value = {
...menu,
// 호환성을 위해 여러 형태 지원
id: menuId,
menuId: menuId,
name: menu.menuName || menu.name,
menuName: menu.menuName || menu.name
}
console.log('✅ 메뉴 상세 정보 설정 완료:', selectedMenu.value)
showMenuDetailDialog.value = true
}
// 메뉴 수정 함수
const editMenu = (menu) => {
console.log('=== 메뉴 수정 호출 ===')
console.log('전달받은 메뉴 객체:', menu)
// 메뉴 ID 추출 및 검증
const menuId = menu.menuId || menu.id
console.log('추출된 메뉴 ID:', menuId, '타입:', typeof menuId)
if (!menuId) {
console.error('❌ 메뉴 ID를 찾을 수 없음')
showSnackbar('메뉴 정보가 올바르지 않습니다', 'error')
return
}
console.log('✅ 사용할 메뉴 ID:', menuId)
// 수정 모드로 설정
menuEditMode.value = true
// 폼 데이터 설정 (여러 필드명 지원)
menuFormData.value = {
menuId: menuId,
id: menuId, // 호환성
menuName: menu.menuName || menu.name,
name: menu.menuName || menu.name, // 호환성
category: menu.category,
price: menu.price,
description: menu.description || '',
imageUrl: menu.imageUrl
}
console.log('✅ 수정 폼 데이터 설정 완료:', menuFormData.value)
// 다이얼로그 표시
showMenuDialog.value = true
}
// 메뉴 상세에서 수정 버튼 클릭
const editFromDetail = () => {
console.log('=== 메뉴 상세에서 수정 버튼 클릭 ===')
console.log('selectedMenu.value:', selectedMenu.value)
if (!selectedMenu.value) {
showSnackbar('선택된 메뉴가 없습니다', 'error')
return
}
// 메뉴 ID 검증
const menuId = selectedMenu.value.menuId || selectedMenu.value.id
if (!menuId) {
showSnackbar('메뉴 ID를 찾을 수 없습니다', 'error')
return
}
console.log('✅ 수정할 메뉴 정보:', {
id: menuId,
name: selectedMenu.value.menuName || selectedMenu.value.name,
category: selectedMenu.value.category
})
// 상세 다이얼로그 닫기
closeMenuDetail()
// 수정 모드로 전환
editMenu(selectedMenu.value)
}
// 상세 다이얼로그 닫기
const closeMenuDetail = () => {
console.log('=== 메뉴 상세 다이얼로그 닫기 ===')
showMenuDetailDialog.value = false
selectedMenu.value = null
}
// 메뉴 저장 함수 - 이미지 업로드 분리
const saveMenuWithImage = async () => {
if (saving.value) return
console.log('=== 메뉴 저장 + 이미지 업로드 시작 ===')
saving.value = true
try {
// 메뉴 서비스 임포트
const { menuService } = await import('@/services/menu')
let menuResult
if (menuEditMode.value) {
// 메뉴 수정 - PUT /api/menu/{menuId}
const menuId = menuFormData.value.id || menuFormData.value.menuId
if (!menuId) {
showSnackbar('메뉴 ID가 없습니다', 'error')
return
}
console.log('메뉴 수정 API 호출, 메뉴 ID:', menuId)
// 메뉴 데이터 준비
const menuData = {
menuName: menuFormData.value.menuName || menuFormData.value.name,
category: menuFormData.value.category,
price: menuFormData.value.price,
description: menuFormData.value.description || ''
}
menuResult = await menuService.updateMenu(menuId, menuData)
} else {
// 새 메뉴 등록 - POST /api/menu/register
const storeId = storeInfo.value?.storeId
if (!storeId) {
showSnackbar('매장 정보를 찾을 수 없습니다', 'error')
return
}
// 메뉴 데이터 준비 (매장 ID 포함)
const menuData = {
storeId: storeId,
menuName: menuFormData.value.menuName || menuFormData.value.name,
category: menuFormData.value.category,
price: menuFormData.value.price,
description: menuFormData.value.description || ''
}
console.log('메뉴 등록 API 호출, 매장 ID:', storeId)
menuResult = await menuService.createMenu(menuData)
}
console.log('✅ 메뉴 저장 완료:', menuResult)
if (!menuResult.success) {
showSnackbar(menuResult.message || '메뉴 저장에 실패했습니다', 'error')
return
}
// 메뉴 저장 성공 후 이미지 업로드
let imageResult = { success: true }
if (selectedImageFile.value) {
console.log('=== 이미지 업로드 시작 ===')
// 등록된 메뉴의 ID 가져오기
const menuId = menuEditMode.value
? (menuFormData.value.id || menuFormData.value.menuId)
: menuResult.data?.menuId
if (menuId) {
console.log('이미지 업로드 - 메뉴 ID:', menuId)
imageResult = await menuService.uploadMenuImage(menuId, selectedImageFile.value)
console.log('이미지 업로드 결과:', imageResult)
if (!imageResult.success) {
console.warn('이미지 업로드는 실패했지만 메뉴는 저장됨')
showSnackbar('메뉴는 저장되었지만 이미지 업로드에 실패했습니다', 'warning')
}
} else {
console.warn('메뉴 ID를 찾을 수 없어 이미지 업로드 생략')
}
}
// 성공 메시지
if (menuResult.success && imageResult.success) {
showSnackbar(
menuEditMode.value ? '메뉴가 수정되었습니다' : '메뉴가 등록되었습니다',
'success'
)
}
// 다이얼로그 닫기 및 초기화
showMenuDialog.value = false
menuEditMode.value = false
resetMenuForm()
// 메뉴 목록 새로고침
await loadMenus()
} catch (error) {
console.error('메뉴 저장 중 오류:', error)
showSnackbar('저장 중 오류가 발생했습니다', 'error')
} finally {
saving.value = false
}
}