diff --git a/src/components/editor/QEditor.vue b/src/components/editor/QEditor.vue index 4f4132e..86deeba 100644 --- a/src/components/editor/QEditor.vue +++ b/src/components/editor/QEditor.vue @@ -71,7 +71,8 @@ const editor = ref(null); // 에디터 DOM 참조 const font = ref('nanum-gothic'); // 기본 폰트 const fontSize = ref('16px'); // 기본 폰트 크기 - const emit = defineEmits(['update:data']); + const emit = defineEmits(['update:data', 'update:uploadedImgList']); + const uploadedImgList = ref([]); // 에디터에 이미지 첨부시 업데이트 된 파일 인덱스 번호 리스트 onMounted(() => { // 툴바에서 선택할 수 있는 폰트 목록 설정 @@ -112,6 +113,13 @@ quillInstance.format('size', fontSize.value); }); + // 이미지 첨부 리스트가 변경 되었을때 + watch(uploadedImgList, () => { + console.log(!23); + emit('update:uploadedImgList', uploadedImgList.value); + console.log('uploadedImgList.value: ', uploadedImgList.value); + }); + // 초기 데이터가 있을 경우, HTML 형식으로 삽입 if (props.initialData) { quillInstance.setContents(JSON.parse(props.initialData)); @@ -150,7 +158,15 @@ // 이미지 서버에 업로드 후 URL 받기 uploadImageToServer(formData) - .then(serverImageUrl => { + .then(data => { + const uploadImgIdx = data?.fileIndex; // 업로드 된 파일 DB 인덱스 + const serverImageUrl = data?.fileUrl; // 업로드 된 파일 url + + // 업로드 된 파일 인덱스 (게시글 저장 시 해당 인덱스 번호에 게시글 인덱스를 업데이트) + if (uploadImgIdx) { + uploadedImgList.value = [...uploadedImgList.value, uploadImgIdx]; + } + const baseUrl = $api.defaults.baseURL.replace(/api\/$/, ''); const fullImageUrl = `${baseUrl}${serverImageUrl.replace(/\\/g, '/')}`; @@ -168,40 +184,40 @@ // 이미지 서버 업로드 async function uploadImageToServer(formData) { - try { - // Make the POST request to upload the image - const response = await $api.post('quilleditor/upload', formData, { isFormData: true }); + try { + // Make the POST request to upload the image + const response = await $api.post('quilleditor/upload', formData, { isFormData: true }); - // Check if the response contains the expected data - if (response.data && response.data.data) { - const imageUrl = response.data.data; - return imageUrl; // Return the image URL received from the server - } else { - throw new Error('Image URL not returned from server'); + // Check if the response contains the expected data + if (response.data && response.data.data) { + const imageUrl = response.data.data; + return imageUrl; // Return the image URL received from the server + } else { + throw new Error('Image URL not returned from server'); + } + } catch (error) { + // Log detailed error information for debugging purposes + console.error('Image upload failed:', error); + + // Handle specific error cases (e.g., network issues, authorization issues) + if (error.response) { + // If the error is from the server (e.g., 4xx or 5xx error) + console.error('Error response:', error.response.data); + toastStore.onToast('서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.', 'e'); + } else if (error.request) { + // If no response is received from the server + console.error('No response received:', error.request); + toastStore.onToast('네트워크 오류가 발생했습니다. 잠시 후 다시 시도해주세요.', 'e'); + } else { + // If the error is due to something else (e.g., invalid request setup) + console.error('Error message:', error.message); + toastStore.onToast('파일 업로드 중 문제가 발생했습니다. 다시 시도해주세요.', 'e'); + } + + // Throw the error so the caller knows something went wrong + throw error; + } } - } catch (error) { - // Log detailed error information for debugging purposes - console.error('Image upload failed:', error); - - // Handle specific error cases (e.g., network issues, authorization issues) - if (error.response) { - // If the error is from the server (e.g., 4xx or 5xx error) - console.error('Error response:', error.response.data); - toastStore.onToast('서버 오류가 발생했습니다. 잠시 후 다시 시도해주세요.', 'e'); - } else if (error.request) { - // If no response is received from the server - console.error('No response received:', error.request); - toastStore.onToast('네트워크 오류가 발생했습니다. 잠시 후 다시 시도해주세요.', 'e'); - } else { - // If the error is due to something else (e.g., invalid request setup) - console.error('Error message:', error.message); - toastStore.onToast('파일 업로드 중 문제가 발생했습니다. 다시 시도해주세요.', 'e'); - } - - // Throw the error so the caller knows something went wrong - throw error; - } -} // 삭제된 이미지 확인 function checkForDeletedImages() { @@ -216,4 +232,3 @@ } }); - diff --git a/src/components/input/UserFormInput.vue b/src/components/input/UserFormInput.vue index 612ef40..37e076f 100644 --- a/src/components/input/UserFormInput.vue +++ b/src/components/input/UserFormInput.vue @@ -14,7 +14,6 @@ :value="computedValue" :disabled="disabled" :maxLength="maxlength" - :minLength="minlength" :placeholder="title" @blur="$emit('blur')" /> @@ -30,7 +29,6 @@ :value="computedValue" :disabled="disabled" :maxLength="maxlength" - :minLength="minlength" :placeholder="title" @blur="$emit('blur')" /> diff --git a/src/views/board/BoardEdit.vue b/src/views/board/BoardEdit.vue index c2d0d09..0c51296 100644 --- a/src/views/board/BoardEdit.vue +++ b/src/views/board/BoardEdit.vue @@ -57,6 +57,7 @@ v-if="contentLoaded" @update:data="content = $event" @update:imageUrls="imageUrls = $event" + @update:uploadedImgList="handleUpdateEditorImg" :initialData="content" /> @@ -115,7 +116,7 @@ const attachFilesAlert = ref(false); const isFileValid = ref(true); const delFileIdx = ref([]); // 제외할 기존 첨부파일 ID - const additionalFiles = ref([]); // 새로 추가할 첨부파일 + const editorUploadedImgList = ref([]); // 게시물 데이터 로드 const fetchBoardDetails = async () => { @@ -145,6 +146,10 @@ contentLoaded.value = true; }; + const handleUpdateEditorImg = item => { + editorUploadedImgList.value = item; + }; + // 기존 첨부파일명을 노출 const addDisplayFileName = fileInfos => fileInfos.map(file => ({ @@ -247,6 +252,11 @@ boardData.delFileIdx = [...delFileIdx.value]; } + // 에디터에 업로드 된 이미지 인덱스 목록 + if (editorUploadedImgList.value && editorUploadedImgList.value.length > 0) { + boardData.editorUploadedImgList = [...editorUploadedImgList.value]; + } + const fileArray = newFileFilter(attachFiles); const formData = new FormData(); diff --git a/src/views/board/BoardWrite.vue b/src/views/board/BoardWrite.vue index 2e59634..a6710b0 100644 --- a/src/views/board/BoardWrite.vue +++ b/src/views/board/BoardWrite.vue @@ -92,7 +92,7 @@
- +
내용을 입력해주세요.
@@ -138,6 +138,7 @@ const maxFiles = 5; const maxSize = 10 * 1024 * 1024; const fileError = ref(''); + const editorUploadedImgList = ref([]); const fetchCategories = async () => { const response = await axios.get('board/categories'); @@ -154,6 +155,10 @@ const fileCount = computed(() => attachFiles.value.length); + const handleUpdateEditorImg = item => { + editorUploadedImgList.value = item; + }; + const handleFileUpload = files => { const validFiles = files.filter(file => file.size <= maxSize); if (files.some(file => file.size > maxSize)) { @@ -236,6 +241,11 @@ LOCBRDTYP: categoryValue.value, }; + // 에디터에 업로드 된 이미지 인덱스 목록 + if (editorUploadedImgList.value && editorUploadedImgList.value.length > 0) { + boardData.editorUploadedImgList = [...editorUploadedImgList.value]; + } + const { data: boardResponse } = await axios.post('board', boardData); const boardId = boardResponse.data; // 첨부파일 업로드 (비동기 병렬 처리)