129 lines
3.9 KiB
Vue
129 lines
3.9 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="getProfileImage(profilePath)" 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 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)">
|
|
<EditButton @click.stop="editClick" />
|
|
<DeleteButton @click.stop="deleteClick" />
|
|
</template>
|
|
|
|
<!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->
|
|
<BoardRecommendBtn v-if="isLike" :boardId="boardId" :comment="comment" @updateReaction="handleUpdateReaction" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed, defineProps, defineEmits } from 'vue';
|
|
import DeleteButton from '../button/DeleteBtn.vue';
|
|
import EditButton from '../button/EditBtn.vue';
|
|
import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
|
|
|
|
// 기본 프로필 이미지 경로
|
|
const defaultProfile = '/img/icons/icon.png';
|
|
|
|
// 서버의 이미지 경로 (Vue 환경 변수 사용 가능)
|
|
const baseUrl = 'http://localhost:10325/'; // API 서버 URL
|
|
|
|
// Props 정의
|
|
const props = defineProps({
|
|
comment: {
|
|
type: Object,
|
|
required: false,
|
|
},
|
|
boardId: {
|
|
type: Number,
|
|
required: false,
|
|
},
|
|
commentId: {
|
|
type: Number,
|
|
required: false,
|
|
},
|
|
profileName: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
profilePath: {
|
|
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,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
|
|
|
|
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 = profilePath => {
|
|
return profilePath && profilePath.trim() ? `${baseUrl}upload/img/profile/${profilePath}` : defaultProfile;
|
|
};
|
|
</script>
|