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

게시판 동영상 수정

Browse Source
This commit is contained in:
dyhj625 2025-04-10 13:28:50 +09:00
parent 5c7f7c6346
commit ba9a752250
2 changed files with 76 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -99,7 +99,7 @@
// 상태 변수
const title = ref('');
const content = ref('');
const content = ref({ ops: [] });
const autoIncrement = ref(0);
// 경고 상태
@ -130,10 +130,9 @@
// 최초 업데이트 감지 여부
const isFirstContentUpdate = ref(true);
// 에디터에서 데이터 업데이트 시
// 에디터 데이터 업데이트 시 처리 (최초 데이터 저장)
const handleEditorDataUpdate = data => {
content.value = data;
if (isFirstContentUpdate.value) {
originalContent.value = structuredClone(data);
isFirstContentUpdate.value = false;
@ -141,23 +140,28 @@
}
};
// isDeltaChanged 함수 수정 (내장 diff 대신 텍스트, 이미지, 비디오 각각을 직접 비교)
function isDeltaChanged(current, original) {
const Delta = Quill.import('delta');
const currentDelta = new Delta(current || []);
const originalDelta = new Delta(original || []);
const diff = originalDelta.diff(currentDelta);
if (!diff || diff.ops.length === 0) return false;
// 텍스트만 비교해서 완전 동일한지 확인
// 텍스트 추출
const getPlainText = delta =>
(delta.ops || [])
.filter(op => typeof op.insert === 'string')
.map(op => op.insert)
.join('');
// 이미지 URL 추출
const getImages = delta =>
(delta.ops || []).filter(op => typeof op.insert === 'object' && op.insert.image).map(op => op.insert.image);
(delta.ops || [])
.filter(op => typeof op.insert === 'object' && op.insert.image)
.map(op => op.insert.image);
// 비디오 URL 추출
const getVideos = delta =>
(delta.ops || [])
.filter(op => typeof op.insert === 'object' && op.insert.video)
.map(op => op.insert.video);
const textCurrent = getPlainText(currentDelta);
const textOriginal = getPlainText(originalDelta);
@ -165,22 +169,27 @@
const imgsCurrent = getImages(currentDelta);
const imgsOriginal = getImages(originalDelta);
const textEqual = textCurrent === textOriginal;
const imageEqual = JSON.stringify(imgsCurrent) === JSON.stringify(imgsOriginal);
const vidsCurrent = getVideos(currentDelta);
const vidsOriginal = getVideos(originalDelta);
return !(textEqual && imageEqual); // 둘 다 같아야 false
const textEqual = textCurrent === textOriginal;
const imageEqual = imgsCurrent.length === imgsOriginal.length && imgsCurrent.every((val, idx) => val === imgsOriginal[idx]);
const videoEqual = vidsCurrent.length === vidsOriginal.length && vidsCurrent.every((val, idx) => val === vidsOriginal[idx]);
return !(textEqual && imageEqual && videoEqual);
}
// 게시물 변경 여부 계산
const isChanged = computed(() => {
if (!contentInitialized.value) return false;
const isTitleChanged = title.value !== originalTitle.value;
const isContentChanged = isDeltaChanged(content.value, originalContent.value);
const isFilesChanged =
attachFiles.value.some(f => !f.id) || // id 없는 새 파일이 있는 경우
attachFiles.value.some(f => !f.id) || // 신규 파일 존재
delFileIdx.value.length > 0 || // 삭제된 파일이 있는 경우
!isSameFiles(
attachFiles.value.filter(f => f.id), // 기존 파일(id 있는 것만)
originalFiles.value,
attachFiles.value.filter(f => f.id), // 기존 파일만 비교
originalFiles.value
);
return isTitleChanged || isContentChanged || isFilesChanged;
});
@ -188,10 +197,8 @@
// 파일 비교 함수
function isSameFiles(current, original) {
if (current.length !== original.length) return false;
const sortedCurrent = [...current].sort((a, b) => a.id - b.id);
const sortedOriginal = [...original].sort((a, b) => a.id - b.id);
return sortedCurrent.every((file, idx) => {
return file.id === sortedOriginal[idx].id && file.name === sortedOriginal[idx].name;
});
@ -199,31 +206,24 @@
// 게시물 데이터 로드
const fetchBoardDetails = async () => {
// 수정 데이터 전송
let password = accessStore.password;
const params = {
password: `${password}` || '',
};
//const response = await axios.get(`board/${currentBoardId.value}`);
const { data } = await axios.post(`board/${currentBoardId.value}`, params);
if (data.code !== 200) {
//toastStore.onToast(data.message, 'e');
alert(data.message, 'e');
router.back();
return;
}
const boardData = data.data;
// 기존 첨부파일 추가
if (boardData.hasAttachment && boardData.attachments.length > 0) {
const formatted = addDisplayFileName([...boardData.attachments]);
attachFiles.value = formatted;
originalFiles.value = formatted;
}
// 데이터 설정
title.value = boardData.title || '제목 없음';
content.value = boardData.content || '내용 없음';
content.value = boardData.content || { ops: [] };
originalTitle.value = title.value;
originalContent.value = structuredClone(boardData.content);
contentInitialized.value = true;
@ -242,38 +242,34 @@
const addDisplayFileName = fileInfos =>
fileInfos.map(file => ({
...file,
name: `${file.originalName}.${file.extension}`,
name: `${file.originalName}.${file.extension}`
}));
// 상세 페이지로 이동
// 상세 페이지 이동
const goList = () => {
accessStore.$reset();
// 목록으로 바로 이동시 필터 유지
// const getFilter = localStorage.getItem(`boardList_${currentBoardId.value}`);
// if (getFilter) {
// router.push({
// path: '/board',
// query: JSON.parse(getFilter),
// });
// } else {
// router.push('/board');
// }
router.back();
};
// 전 페이지로 이동
// 전 페이지 이동
const goBack = () => {
accessStore.$reset();
router.back();
};
// 유효성 확인
const checkValidation = () => {
contentAlert.value = $common.isNotValidContent(content);
titleAlert.value = $common.isNotValidInput(title.value);
// 로컬 유효성 검사 함수 (에디터 내용: 텍스트, 이미지, 비디오 중 하나라도 있으면 유효)
const isNotValidContent = delta => {
if (!delta?.ops?.length) return true;
const hasText = delta.ops.some(op => typeof op.insert === 'string' && op.insert.trim().length > 0);
const hasImage = delta.ops.some(op => op.insert && typeof op.insert === 'object' && op.insert.image);
const hasVideo = delta.ops.some(op => op.insert && typeof op.insert === 'object' && op.insert.video);
return !(hasText || hasImage || hasVideo);
};
// 유효성 확인 함수
const checkValidation = () => {
contentAlert.value = isNotValidContent(content.value);
titleAlert.value = $common.isNotValidInput(title.value);
if (titleAlert.value || contentAlert.value || !isFileValid.value) {
if (titleAlert.value) {
title.value = '';
@ -289,7 +285,6 @@
const handleFileUpload = files => {
const validFiles = files.filter(file => file.size <= maxSize);
if (files.some(file => file.size > maxSize)) {
fileError.value = '파일 크기가 10MB를 초과할 수 없습니다.';
return;
@ -300,13 +295,11 @@
}
fileError.value = '';
attachFiles.value = [...attachFiles.value, ...validFiles].slice(0, maxFiles);
autoIncrement.value++;
};
const removeFile = (index, file) => {
if (file.id) delFileIdx.value.push(file.id);
attachFiles.value.splice(index, 1);
if (attachFiles.value.length <= maxFiles) {
fileError.value = '';
@ -324,55 +317,41 @@
};
////////////////// fileSection[E] ////////////////////
/** `content` 변경 감지하여 자동 유효성 검사 실행 */
/** content 변경 감지 (deep 옵션 추가) */
watch(content, () => {
contentAlert.value = $common.isNotValidContent(content);
});
contentAlert.value = isNotValidContent(content.value);
}, { deep: true });
// 글 제목 유효성
// 글 제목 유효성 검사
const validateTitle = () => {
titleAlert.value = title.value.trim().length === 0;
};
// 게시물 수정
// 게시물 수정 함수
const updateBoard = async () => {
if (checkValidation()) return;
// 수정 데이터 전송
const boardData = {
LOCBRDTTL: title.value.trim(),
LOCBRDCON: JSON.stringify(content.value),
LOCBRDSEQ: currentBoardId.value,
LOCBRDSEQ: currentBoardId.value
};
// 업로드 된 첨부파일의 삭제목록
if (delFileIdx.value && delFileIdx.value.length > 0) {
boardData.delFileIdx = [...delFileIdx.value];
}
// 에디터에 업로드 된 이미지 인덱스 목록
if (editorUploadedImgList.value && editorUploadedImgList.value.length > 0) {
boardData.editorUploadedImgList = [...editorUploadedImgList.value];
}
// 삭제할 에디터 이미지 인덱스
if (editorDeleteImgList.value && editorDeleteImgList.value.length > 0) {
boardData.editorDeleteImgList = [...editorDeleteImgList.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);
});
const { data } = await axios.put(`board/${currentBoardId.value}`, formData, { isFormData: true });
if (data.code === 200) {
toastStore.onToast('게시물이 수정되었습니다.', 's');

46
src/views/board/BoardWrite.vue
View File

@ -37,7 +37,9 @@
</label>
</div>
</div>
<div class="invalid-feedback" :class="categoryAlert ? 'd-block' : 'd-none'">카테고리를 선택해주세요.</div>
<div class="invalid-feedback" :class="categoryAlert ? 'd-block' : 'd-none'">
카테고리를 선택해주세요.
</div>
</div>
<!-- 비밀번호 필드 (익명게시판 선택 시 활성화) -->
@ -101,11 +103,14 @@
@update:deleteImgIndexList="handleDeleteEditorImg"
/>
</div>
<div class="invalid-feedback mt-1" :class="contentAlert ? 'd-block' : 'd-none'">내용을 입력해주세요.</div>
<div class="invalid-feedback mt-1" :class="contentAlert ? 'd-block' : 'd-none'">
내용을 입력해주세요.
</div>
</div>
<div class="mb-4 d-flex justify-content-end">
<BackButton @click="goList" />
<!-- 저장 버튼은 항상 활성화 -->
<SaveButton @click="write" :isEnabled="isFileValid" />
</div>
</div>
@ -115,7 +120,7 @@
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, watch, computed } from 'vue';
import { ref, onMounted, watch, computed } from 'vue';
import QEditor from '@c/editor/QEditor.vue';
import FormInput from '@c/input/FormInput.vue';
import FormFile from '@c/input/FormFile.vue';
@ -169,10 +174,12 @@
const fileCount = computed(() => attachFiles.value.length);
// 업데이트된 에디터 이미지 목록 업데이트
const handleUpdateEditorImg = item => {
editorUploadedImgList.value = item;
};
// 삭제된 에디터 이미지 목록 업데이트
const handleDeleteEditorImg = item => {
editorDeleteImgList.value = item;
};
@ -187,10 +194,8 @@
fileError.value = `최대 ${maxFiles}개의 파일만 업로드할 수 있습니다.`;
return;
}
fileError.value = '';
attachFiles.value = [...attachFiles.value, ...validFiles].slice(0, maxFiles);
autoIncrement.value++;
};
@ -213,7 +218,7 @@
const validateNickname = () => {
if (categoryValue.value === 300102) {
nickname.value = nickname.value.replace(/\s/g, ''); // 공백 제거
nicknameAlert.value = nickname.value.length === 0 ;
nicknameAlert.value = nickname.value.length === 0;
} else {
nicknameAlert.value = false;
}
@ -228,19 +233,28 @@
}
};
/**
* validateContent:
* - 내용이 없으면 contentAlert를 true로 설정
* - 텍스트, 이미지, 비디오 중 하나라도 존재하면 유효한 콘텐츠로 판단
*/
const validateContent = () => {
if (!content.value?.ops?.length) {
contentAlert.value = true;
return;
}
// 이미지 포함 여부 확인
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);
const hasText = content.value.ops.some(
op => typeof op.insert === 'string' && op.insert.trim().length > 0
);
const hasImage = content.value.ops.some(
op => op.insert && typeof op.insert === 'object' && op.insert.image
);
const hasVideo = content.value.ops.some(
op => op.insert && typeof op.insert === 'object' && op.insert.video
);
// 텍스트 또는 이미지가 하나라도 있으면 유효한 내용
contentAlert.value = !(hasText || hasImage);
contentAlert.value = !(hasText || hasImage || hasVideo);
};
/** 글쓰기 */
@ -294,10 +308,10 @@
formData.append('CMNFLEORG', fileNameWithoutExt);
formData.append('CMNFLEEXT', file.name.split('.').pop());
formData.append('CMNFLESIZ', file.size);
formData.append('file', file); // 📌 실제 파일 추가
formData.append('file', file);
await axios.post(`board/${boardId}/attachments`, formData, { isFormData: true });
}),
})
);
}
@ -313,8 +327,8 @@
router.push('/board');
};
/** `content` 변경 감지하여 자동 유효성 검사 실행 */
/** content 변경 감지 (deep 옵션 추가) */
watch(content, () => {
validateContent();
});
}, { deep: true });
</script>