diff --git a/src/common/common.js b/src/common/common.js
index 9acd369..a93e8a8 100644
--- a/src/common/common.js
+++ b/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 {
diff --git a/src/views/board/BoardEdit.vue b/src/views/board/BoardEdit.vue
index 14514f1..4b19c15 100644
--- a/src/views/board/BoardEdit.vue
+++ b/src/views/board/BoardEdit.vue
@@ -10,7 +10,15 @@
-
+
내용
*
- 내용을 확인해주세요.
+ 내용을 확인해주세요.
@@ -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) {