수정정

src/components/editor/QEditor.vue

@@ -125,7 +125,6 @@
 
         // 에디터의 텍스트가 변경될 때마다 이미지 처리
         quillInstance.on('text-change', (delta, oldDelta, source) => {
-            emit('update:data', quillInstance.getContents());
             delta.ops.forEach(op => {
                 if (op.insert && typeof op.insert === 'object' && op.insert.image) {
                     const imageUrl = op.insert.image; // 이미지 URL 추출
@@ -134,7 +133,9 @@
                     checkForDeletedImages(); // 삭제된 이미지 확인
                 }
             });
+            emit('update:data', quillInstance.getContents());
         });
+
         // 로컬 이미지 파일 선택
         async function selectLocalImage() {
             const input = document.createElement('input');
@@ -164,17 +165,43 @@
                 }
             };
         }
+
         // 이미지 서버 업로드
         async function uploadImageToServer(formData) {
-            try {
+    try {
-                const response = await $api.post('quilleditor/upload', formData, { isFormData: true });
+        // Make the POST request to upload the image
-                const imageUrl = response.data.data;
+        const response = await $api.post('quilleditor/upload', formData, { isFormData: true });
-                return imageUrl; // 서버에서 받은 이미지 URL 반환
+
-            } catch (error) {
+        // Check if the response contains the expected data
-                toastStore.onToast('잠시후 다시 시도해주세요.', 'e');
+        if (response.data && response.data.data) {
-                throw error;
+            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;
+    }
+}
 
         // 삭제된 이미지 확인
         function checkForDeletedImages() {
@@ -189,6 +216,7 @@
         }
     });
 </script>
+
 <style>
     @import 'quill/dist/quill.snow.css';
     .ql-editor {

src/components/wordDict/DictWrite.vue

@@ -42,10 +42,11 @@
             :modelValue="titleValue"
             @update:modelValue="wordTitle = $event"
             :disabled="isDisabled"
+            @keyup="ValidHandler('title')"
         />
     </div>
     <div>
-        <QEditor @update:data="content = $event" @update:imageUrls="imageUrls = $event"  :is-alert="wordContentAlert" :initialData="contentValue"/>
+        <QEditor  @keyup="ValidHandler('content')"  @update:data="handleContentUpdate" @update:imageUrls="imageUrls = $event"  :is-alert="wordContentAlert" :initialData="contentValue"/>
         <div class="text-end mt-5">
             <button class="btn btn-primary" @click="saveWord">
                 <i class="bx bx-check"></i>
@@ -126,8 +127,23 @@ const onChange = (newValue) => {
     selectCategory.value = newValue.target.value;
 };
 
+const ValidHandler = (field) => {
+    if(field == 'title'){
+        wordTitleAlert.value = false;
+    }
+    if(field == 'content'){
+        wordContentAlert.value = false;
+    }
+
+}
+const handleContentUpdate = (newContent) => {
+    content.value = newContent;
+    ValidHandler("content"); // 유효성 검사 실행
+};
+
 //용어 등록
 const saveWord = () => {
+    let valid = true;
     //validation
     let computedTitleTrim;
 
@@ -138,7 +154,7 @@ const saveWord = () => {
     // 용어 체크
     if(computedTitleTrim == undefined || computedTitleTrim == ''){
         wordTitleAlert.value = true;
-        return;
+        valid = false;
     } else {
         wordTitleAlert.value = false;
     }
@@ -153,7 +169,9 @@ const saveWord = () => {
     // 내용 체크
     if(content.value == '' || inserts.join('') === ''){
         wordContentAlert.value = true;
-        return;
+        valid = false;
+    }else{
+        wordContentAlert.value = false;
     }
     const wordData = {
         id: props.NumValue || null,
@@ -161,9 +179,11 @@ const saveWord = () => {
         category: selectedCategory.value,
         content: content.value,
     };
-    emit('addWord', wordData,  addCategory.value === ''
+    if(valid){
-    ? (isNaN(selectedCategory.value) ? selectedCategory.value : Number(selectedCategory.value))
+        emit('addWord', wordData,  addCategory.value === ''
-    : addCategory.value);
+        ? (isNaN(selectedCategory.value) ? selectedCategory.value : Number(selectedCategory.value))
+        : addCategory.value);
+    }
 }
 
 

src/views/wordDict/wordDict.vue

@@ -9,7 +9,7 @@
                     <SearchBar @update:data="search"/>
             </div>
             <!-- 단어 갯수, 작성하기 -->
-                <WriteButton ref="writeButton" @click="writeStore.toggleItem(999999)" :isToggleEnabled="true"/>
+            <WriteButton ref="writeButton" @click="writeStore.toggleItem(999999)" :isToggleEnabled="true"/>
             <!-- ㄱ ㄴ ㄷ ㄹ -->
             <DictAlphabetFilter @update:data="handleSelectedAlphabetChange" :indexCategory="indexCategory" :selectedAl="selectedAlphabet" />
             <!-- 카테고리 -->
@@ -25,7 +25,7 @@
         <!-- 용어 리스트 -->
         <div >
             <!-- 로딩 중일 때 -->
-            <div v-if="loading">로딩 중...</div>
+            <LoadingSpinner v-if="loading"/>
             <!-- 에러 메시지 -->
             <div v-if="error" class="error">{{ error }}</div>
             <!-- 단어 목록 -->
@@ -63,6 +63,7 @@
     import commonApi from '@/common/commonApi';
     import { useToastStore } from '@s/toastStore';
     import { useWriteVisibleStore } from '@s/writeVisible';
+    import LoadingSpinner from "@v/LoadingPage.vue";
 
     // 작성창 구분
     const writeStore = useWriteVisibleStore();
@@ -109,6 +110,7 @@
     onMounted(() => {
         //getwordList();
         getIndex();
+        writeStore.closeAll();
     });
 
     //용어 목록