144 lines
4.2 KiB
Vue
144 lines
4.2 KiB
Vue
<template>
|
|
<div class="d-flex align-items-center flex-wrap">
|
|
<div class="d-flex align-items-center">
|
|
<div class="avatar me-2">
|
|
<img
|
|
:src="getProfileImage(profileImg)"
|
|
alt="user"
|
|
class="rounded-circle"
|
|
@error="setDefaultImage($event)"
|
|
@load="showImage($event)"
|
|
/>
|
|
</div>
|
|
|
|
<div class="me-2">
|
|
<h6 class="mb-0">{{ profileName ? profileName : nickname }}</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 class="ms-1"> <i class="bx bx-comment"></i> {{ commentNum }} </span>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 버튼 영역 -->
|
|
<div class="ms-auto text-end">
|
|
<!-- 수정, 삭제 버튼 -->
|
|
<template v-if="!isDeletedComment && (unknown || isCommentAuthor || isAuthor)">
|
|
<div class="float-end ms-1">
|
|
<EditButton @click.stop="editClick" />
|
|
<DeleteButton :class="'ms-1'" @click.stop="deleteClick" />
|
|
</div>
|
|
</template>
|
|
|
|
<!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->
|
|
<BoardRecommendBtn v-if="isLike" :boardId="boardId" :comment="comment" @updateReaction="handleUpdateReaction" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, defineProps, defineEmits, inject } 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: '',
|
|
},
|
|
nickname: {
|
|
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: '',
|
|
},
|
|
views: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
commentNum: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
isLike: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
profileImg: {
|
|
type: String,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
|
|
const $common = inject('common');
|
|
|
|
const isDeletedComment = computed(() => {
|
|
return props.comment?.content === '삭제된 댓글입니다' && props.comment?.updateAtRaw !== props.comment?.createdAtRaw;
|
|
});
|
|
|
|
// 수정
|
|
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,
|
|
});
|
|
};
|
|
|
|
// 프로필 이미지 경로 설정
|
|
const getProfileImage = profileImg => {
|
|
return $common.getProfileImage(profileImg, props.unknown);
|
|
};
|
|
|
|
const setDefaultImage = e => {
|
|
return $common.setDefaultImage(e);
|
|
};
|
|
|
|
const showImage = e => {
|
|
return $common.showImage(e);
|
|
};
|
|
</script>
|