147 lines
3.6 KiB
Vue
147 lines
3.6 KiB
Vue
<template>
|
|
<div class="d-flex align-items-center flex-wrap">
|
|
<div class="d-flex align-items-center">
|
|
<div v-if="!unknown" class="avatar me-2">
|
|
<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>{{ date }}</span>
|
|
<template v-if="showDetail">
|
|
<span class="ms-2">
|
|
<i class="fa-regular fa-eye"></i> {{ views }}
|
|
</span>
|
|
<span>
|
|
<i class="bx bx-comment"></i> {{ commentNum }}
|
|
</span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 버튼 영역 -->
|
|
<div class="ms-auto text-end">
|
|
<!-- 수정, 삭제 버튼 -->
|
|
<!-- <template v-if="isAuthor || showDetail"> -->
|
|
<template v-if="unknown || isCommentAuthor || isAuthor">
|
|
<EditButton @click.stop="editClick" />
|
|
<DeleteButton @click.stop="deleteClick" />
|
|
</template>
|
|
|
|
<!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->
|
|
<BoardRecommendBtn
|
|
v-if="isLike"
|
|
:boardId="boardId"
|
|
:comment="comment"
|
|
@updateReaction="handleUpdateReaction"
|
|
>
|
|
</BoardRecommendBtn>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, defineProps, defineEmits } from 'vue';
|
|
import DeleteButton from '../button/DeleteBtn.vue';
|
|
import EditButton from '../button/EditBtn.vue';
|
|
import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
|
|
|
|
// Props 정의
|
|
const props = defineProps({
|
|
comment: {
|
|
type: Object,
|
|
required: false,
|
|
},
|
|
boardId: {
|
|
type: Number,
|
|
required: false
|
|
},
|
|
commentId: {
|
|
type: Number,
|
|
required: false,
|
|
},
|
|
profileName: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
unknown: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
showDetail: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
// 게시글의 작성자 여부를 확인 : 현재 로그인한 사용자가 이 게시글의 작성자인지 여부
|
|
isAuthor: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
isCommentAuthor: Boolean, // 댓글 작성자인지 여부
|
|
isCommentProfile: Boolean, // 현재 컴포넌트가 댓글용인지 여부
|
|
date: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
views: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
commentNum: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
isLike: {
|
|
type: Boolean,
|
|
default: false,
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
|
|
|
|
// 수정
|
|
const editClick = () => {
|
|
emit('editClick', { ...props.comment, unknown: props.unknown });
|
|
};
|
|
|
|
// 삭제
|
|
const deleteClick = () => {
|
|
emit('deleteClick', { ...props.comment, unknown: props.unknown });
|
|
};
|
|
|
|
const handleUpdateReaction = (reactionData) => {
|
|
emit("updateReaction", {
|
|
boardId: props.boardId,
|
|
commentId: props.comment?.commentId,
|
|
...reactionData,
|
|
});
|
|
};
|
|
|
|
|
|
</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>
|