diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue index 6345383..f655bfc 100644 --- a/src/views/board/BoardView.vue +++ b/src/views/board/BoardView.vue @@ -5,17 +5,17 @@
- +
{{ boardTitle }}
-
+
-
@@ -42,11 +39,14 @@ import BoardProfile from '@c/board/BoardProfile.vue'; import { ref, onMounted } from 'vue'; import { useRoute, useRouter } from 'vue-router'; import axios from '@api'; +import Quill from 'quill'; +import DOMPurify from 'dompurify'; // 게시물 데이터 상태 const profileName = ref('익명 사용자'); const boardTitle = ref('제목 없음'); -const boardContent = ref('내용 없음'); +const boardContent = ref(''); +const convertedContent = ref('내용 없음'); const comments = ref([]); const attachments = ref([]); @@ -70,7 +70,22 @@ const fetchBoardDetails = async () => { const boardDetail = data.boardDetail || {}; profileName.value = boardDetail.author || '익명 사용자'; boardTitle.value = boardDetail.title || '제목 없음'; - boardContent.value = boardDetail.content || '내용 없음'; + boardContent.value = boardDetail.content || ''; + + // Quill을 사용하여 Delta 데이터를 HTML로 변환 + if (boardContent.value) { + try { + const quillContainer = document.createElement('div'); + const quillInstance = new Quill(quillContainer); + quillInstance.setContents(JSON.parse(boardContent.value)); + convertedContent.value = DOMPurify.sanitize(quillContainer.innerHTML); + } catch (parseError) { + console.error('Delta 데이터 변환 오류:', parseError); + convertedContent.value = '내용을 표시할 수 없습니다.'; + } + } else { + convertedContent.value = '내용 없음'; + } attachments.value = data.attachments || []; comments.value = data.comments || []; diff --git a/src/views/board/BoardWrite.vue b/src/views/board/BoardWrite.vue index 2ff95ec..a091174 100644 --- a/src/views/board/BoardWrite.vue +++ b/src/views/board/BoardWrite.vue @@ -9,36 +9,52 @@
- + - + - +
-
- +
@@ -49,114 +65,75 @@ -