120 lines
3.3 KiB
Vue
120 lines
3.3 KiB
Vue
<template>
|
|
<div class="d-flex align-items-center flex-wrap">
|
|
<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 class="profile-detail">
|
|
<span>2024.12.10 10:46</span>
|
|
<template v-if="showDetail">
|
|
<span>
|
|
<i class="fa-regular fa-eye"></i> 1
|
|
</span>
|
|
<span>
|
|
<i class="fa-regular fa-thumbs-up"></i> 1
|
|
</span>
|
|
<span>
|
|
<i class="fa-regular fa-thumbs-down"></i> 1
|
|
</span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ms-auto btn-area">
|
|
<template v-if="showDetail">
|
|
<EditButton @click="handleEdit" />
|
|
<DeleteButton @click="handleDelete" />
|
|
</template>
|
|
<template v-else>
|
|
<template v-if="author">
|
|
<button class="btn author btn-label-primary btn-icon" @click="handleEdit">
|
|
<i class='bx bx-edit-alt'></i>
|
|
</button>
|
|
<button class="btn author btn-label-primary btn-icon" @click="handleDelete">
|
|
<i class='bx bx-trash'></i>
|
|
</button>
|
|
</template>
|
|
<BoardRecommendBtn :likeClicked="true" :dislikeClicked="false" />
|
|
</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';
|
|
|
|
// Vue Router 인스턴스
|
|
const router = useRouter();
|
|
|
|
// Props 정의
|
|
defineProps({
|
|
profileName: {
|
|
type: String,
|
|
default: '익명',
|
|
},
|
|
unknown: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
showDetail: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
author: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
const boardId = 80; //test용
|
|
|
|
// 수정 버튼 핸들러
|
|
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>
|
|
.profile-detail span ~ span {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.ms-auto button + button {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.btn.author {
|
|
height: 30px;
|
|
}
|
|
|
|
@media screen and (max-width: 450px) {
|
|
.btn-area {
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
.btn.author {
|
|
height: 30px;
|
|
}
|
|
}
|
|
</style>
|