102 lines
3.8 KiB
Vue
102 lines
3.8 KiB
Vue
<template>
|
|
<div class="container-xxl flex-grow-1 container-p-y">
|
|
<div class="row">
|
|
<div class="col">
|
|
<div class="card">
|
|
<!-- 프로필 헤더 -->
|
|
<div class="card-header">
|
|
<BoardProfile :boardId="currentBoardId" :profileName="profileName" />
|
|
<hr/>
|
|
</div>
|
|
<!-- 게시글 내용 -->
|
|
<div class="card-body">
|
|
<h5 class="mb-4">{{ boardTitle }}</h5>
|
|
<!-- HTML 콘텐츠 렌더링 -->
|
|
<div class="board-content text-body" style="line-height: 1.6;" v-html="$common.contentToHtml(boardContent)">
|
|
|
|
</div>
|
|
|
|
<!-- 좋아요 버튼 -->
|
|
<div class="row justify-content-center my-10">
|
|
<BoardRecommendBtn :bigBtn="true"/>
|
|
</div>
|
|
|
|
<!-- 첨부파일 목록 -->
|
|
<ul v-if="attachments.length" class="attachments mt-4 list-unstyled">
|
|
<li v-for="(attachment, index) in attachments" :key="index" class="mb-2">
|
|
<a :href="attachment.url" target="_blank" class="text-decoration-none">{{ attachment.name }}</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!-- 댓글 영역 -->
|
|
<BoardComentArea :comments="comments" />
|
|
|
|
<!-- 수정 버튼 -->
|
|
<!-- <button class="btn btn-primary" @click="goToEditPage">
|
|
글 수정
|
|
</button> -->
|
|
</div>
|
|
<div class="card-footer">
|
|
<BoardCommentList/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import BoardComentArea from '@c/board/BoardComentArea.vue';
|
|
import BoardCommentList from '@/components/board/BoardCommentList.vue';
|
|
import BoardProfile from '@c/board/BoardProfile.vue';
|
|
import BoardRecommendBtn from '@/components/button/BoardRecommendBtn.vue';
|
|
import { ref, onMounted } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import axios from '@api';
|
|
import Quill from 'quill';
|
|
|
|
// 게시물 데이터 상태
|
|
const profileName = ref('익명 사용자');
|
|
const boardTitle = ref('제목 없음');
|
|
const boardContent = ref('');
|
|
const convertedContent = ref('내용 없음');
|
|
const comments = ref([]);
|
|
const attachments = ref([]);
|
|
|
|
// 라우트에서 ID 가져오기
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
const currentBoardId = ref(Number(route.params.id));
|
|
|
|
// 글 수정 페이지로 이동
|
|
const goToEditPage = () => {
|
|
router.push({ name: 'BoardEdit', params: { id: currentBoardId.value } });
|
|
};
|
|
|
|
// 게시물 상세 데이터 불러오기
|
|
const fetchBoardDetails = async () => {
|
|
try {
|
|
const response = await axios.get(`board/${currentBoardId.value}`);
|
|
const data = response.data.data;
|
|
|
|
// API 응답 데이터 반영
|
|
const boardDetail = data.boardDetail || {};
|
|
profileName.value = boardDetail.author || '익명 사용자';
|
|
boardTitle.value = boardDetail.title || '제목 없음';
|
|
boardContent.value = boardDetail.content || '';
|
|
|
|
|
|
attachments.value = data.attachments || [];
|
|
comments.value = data.comments || [];
|
|
} catch (error) {
|
|
console.error('게시물 가져오기 오류:', error);
|
|
alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
|
|
}
|
|
};
|
|
|
|
// 컴포넌트 마운트 시 데이터 로드
|
|
onMounted(() => {
|
|
fetchBoardDetails();
|
|
});
|
|
</script>
|