Merge branch 'boardmodify3'

src/common/common.js

@@ -81,6 +81,34 @@ const common = {
 
         return true;
     },
+
+    /**
+     * 에디터에 내용이 있는지 확인
+     *
+     * @param { Quill } content
+     * @returns true: 값 없음, false: 값 있음
+     */
+    isNotValidContent(content) {
+        if (!content.value?.ops?.length) return true;
+
+        // 이미지 포함 여부 확인
+        const hasImage = content.value.ops.some(op => op.insert && typeof op.insert === 'object' && op.insert.image);
+        // 텍스트 포함 여부 확인
+        const hasText = content.value.ops.some(op => typeof op.insert === 'string' && op.insert.trim().length > 0);
+
+        // 텍스트 또는 이미지가 하나라도 있으면 유효한 내용
+        return !(hasText || hasImage);
+    },
+
+    /**
+     * 빈 값 확인
+     *
+     * @param {ref} text ex) inNotValidInput(data.value);
+     * @returns
+     */
+    isNotValidInput(text) {
+        return text.trim().length === 0;
+    },
 };
 
 export default {

src/views/board/BoardEdit.vue

@@ -10,7 +10,15 @@
             <div class="col-xl-12">
                 <div class="card-body">
                     <!-- 제목 입력 -->
-                    <FormInput title="제목" name="title" :is-essential="true" :is-alert="titleAlert" v-model="title" />
+                    <FormInput
+                        title="제목"
+                        name="title"
+                        :is-essential="true"
+                        :is-alert="titleAlert"
+                        v-model="title"
+                        @update:alert="titleAlert = $event"
+                        @input.once="validateTitle"
+                    />
 
                     <!-- 첨부파일 업로드 -->
                     <FormFile
@@ -43,7 +51,6 @@
                         <label for="html5-tel-input" class="col-md-2 col-form-label">
                             내용
                             <span class="text-red">*</span>
-                            <div class="invalid-feedback" :class="contentAlert ? 'display-block' : ''">내용을 확인해주세요.</div>
                         </label>
                         <div class="col-md-12">
                             <QEditor
@@ -53,6 +60,7 @@
                                 :initialData="content"
                             />
                         </div>
+                        <div v-if="contentAlert" class="invalid-feedback d-block">내용을 확인해주세요.</div>
                     </div>
 
                     <!-- 버튼 -->
@@ -74,10 +82,15 @@
     import QEditor from '@c/editor/QEditor.vue';
     import FormInput from '@c/input/FormInput.vue';
     import FormFile from '@c/input/FormFile.vue';
-    import { ref, onMounted, computed, watch } from 'vue';
+    import { ref, onMounted, computed, watch, inject } from 'vue';
     import { useRoute, useRouter } from 'vue-router';
+    import { useToastStore } from '@s/toastStore';
     import axios from '@api';
 
+    // 공통
+    const $common = inject('common');
+    const toastStore = useToastStore();
+
     // 상태 변수
     const title = ref('');
     const content = ref('');
@@ -134,51 +147,18 @@
         router.push('/board');
     };
 
-    // 게시물 수정
-    const updateBoard = async () => {
-        // 유효성 검사
-        if (!title.value) {
-            titleAlert.value = true;
-            return;
-        }
-        titleAlert.value = false;
+    // 유효성 확인
+    const checkValidation = () => {
+        contentAlert.value = $common.isNotValidContent(content);
+        titleAlert.value = $common.isNotValidInput(title.value);
 
-        if (!content.value) {
-            contentAlert.value = true;
-            return;
-        }
-        contentAlert.value = false;
-
-        try {
-            // 수정 데이터 전송
-            const boardData = {
-                LOCBRDTTL: title.value,
-                LOCBRDCON: JSON.stringify(content.value),
-                LOCBRDSEQ: currentBoardId.value,
-            };
-
-            if (delFileIdx.value && delFileIdx.value.length > 0) {
-                boardData.delFileIdx = [...delFileIdx.value];
+        if (titleAlert.value || contentAlert.value || !isFileValid.value) {
+            if (titleAlert.value) {
+                title.value = '';
             }
-
-            const fileArray = newFileFilter(attachFiles);
-            const formData = new FormData();
-
-            Object.entries(boardData).forEach(([key, value]) => {
-                formData.append(key, value);
-            });
-
-            fileArray.forEach((file, idx) => {
-                formData.append('files', file);
-            });
-
-            await axios.put(`board/${currentBoardId.value}`, formData, { isFormData: true });
-
-            alert('게시물이 수정되었습니다.');
-            goList();
-        } catch (error) {
-            console.error('게시물 수정 중 오류 발생:', error);
-            alert('게시물 수정에 실패했습니다.');
+            return true;
+        } else {
+            return false;
         }
     };
 
@@ -219,6 +199,60 @@
     };
     ////////////////// fileSection[E] ////////////////////
 
+    /** `content` 변경 감지하여 자동 유효성 검사 실행 */
+    watch(content, () => {
+        contentAlert.value = $common.isNotValidContent(content);
+    });
+
+    // 글 제목 유효성
+    const validateTitle = () => {
+        titleAlert.value = title.value.trim().length === 0;
+    };
+
+    /** `content` 변경 감지하여 자동 유효성 검사 실행 */
+    // watch(content, () => {
+    //     contentAlert.value = $common.isNotValidContent(content);
+    // });
+
+    // 게시물 수정
+    const updateBoard = async () => {
+        if (checkValidation()) return;
+
+        try {
+            // 수정 데이터 전송
+            const boardData = {
+                LOCBRDTTL: title.value.trim(),
+                LOCBRDCON: JSON.stringify(content.value),
+                LOCBRDSEQ: currentBoardId.value,
+            };
+
+            // 업로드 된 첨부파일의 삭제목록
+            if (delFileIdx.value && delFileIdx.value.length > 0) {
+                boardData.delFileIdx = [...delFileIdx.value];
+            }
+
+            const fileArray = newFileFilter(attachFiles);
+            const formData = new FormData();
+
+            // formData에 boardData 추가
+            Object.entries(boardData).forEach(([key, value]) => {
+                formData.append(key, value);
+            });
+
+            // formData에 새로 추가한 파일 추가
+            fileArray.forEach((file, idx) => {
+                formData.append('files', file);
+            });
+
+            await axios.put(`board/${currentBoardId.value}`, formData, { isFormData: true });
+            toastStore.onToast('게시물이 수정되었습니다.', 's');
+            goList();
+        } catch (error) {
+            console.error('게시물 수정 중 오류 발생:', error);
+            toastStore.onToast('게시물 수정에 실패했습니다.');
+        }
+    };
+
     // 컴포넌트 마운트 시 데이터 로드
     onMounted(() => {
         if (currentBoardId.value) {