localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'main' of http://192.168.0.251:3000/localnet/localhost-front

Browse Source
This commit is contained in:
khj0414 2025-03-11 10:21:43 +09:00
commit 0aad1516b7
2 changed files with 108 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
src/common/common.js
View File

@ -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 {

126
src/views/board/BoardEdit.vue
View File

@ -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) {