101 lines
2.8 KiB
Vue
101 lines
2.8 KiB
Vue
<template>
|
|
<div class="d-flex flex-column flex-sm-row align-items-center">
|
|
<div class="d-flex align-items-center">
|
|
<!-- 프로필 이미지 부분 -->
|
|
<div class="avatar me-2" v-if="unknown">
|
|
<img src="/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
|
|
</div>
|
|
<div class="me-2">
|
|
<h6 class="mb-0">{{ profileName }}</h6>
|
|
<div>
|
|
<span class="me-3">2024.12.10 10:46</span>
|
|
<template v-if="showDetail">
|
|
<span class="me-2">
|
|
<i class="fa-regular fa-eye"></i> {{ views }}
|
|
</span>
|
|
<span class="me-2">
|
|
<i class="bx bx-comment"></i> {{ comments }}
|
|
</span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ms-auto w-100 mt-2 mt-sm-0">
|
|
<template v-if="showDetail">
|
|
<EditButton @click="handleEdit" class="me-2" style="border:1px solid blue"/>
|
|
<DeleteButton @click="handleDelete" />
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useRouter } from 'vue-router';
|
|
import axios from '@api';
|
|
import DeleteButton from '../button/DeleteBtn.vue';
|
|
import EditButton from '../button/EditBtn.vue';
|
|
import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
|
|
import { onMounted } from 'vue';
|
|
|
|
// Vue Router 인스턴스
|
|
const router = useRouter();
|
|
|
|
// Props 정의
|
|
const props = defineProps({
|
|
profileName: {
|
|
type: String,
|
|
default: '익명',
|
|
},
|
|
unknown: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
showDetail: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
// author: {
|
|
// type: Boolean,
|
|
// default: true,
|
|
// },
|
|
views: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
comments: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
});
|
|
|
|
const boardId = 100; //수정필요!!
|
|
// 수정 버튼 핸들러
|
|
const handleEdit = () => {
|
|
router.push({ name: 'BoardEdit', params: { id: boardId } });
|
|
};
|
|
|
|
// 삭제 버튼 핸들러
|
|
const handleDelete = async () => {
|
|
if (confirm('정말 이 게시물을 삭제하시겠습니까?')) {
|
|
try {
|
|
await axios.delete(`board/${boardId}`);
|
|
alert('게시물이 성공적으로 삭제되었습니다.');
|
|
router.push({ name: 'BoardList' });
|
|
} catch (error) {
|
|
console.error('게시물 삭제 중 오류 발생:', error);
|
|
alert('게시물 삭제에 실패했습니다.');
|
|
}
|
|
}
|
|
};
|
|
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* @media screen and (max-width: 450px) {
|
|
.btn-area {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
}
|
|
} */
|
|
</style>
|