아이콘 간격 수정
This commit is contained in:
parent
6c4fc7ac8e
commit
6ac3d587f8
@ -10,12 +10,8 @@
|
||||
<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>
|
||||
<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>
|
||||
@ -29,112 +25,104 @@
|
||||
</template>
|
||||
|
||||
<!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->
|
||||
<BoardRecommendBtn
|
||||
v-if="isLike"
|
||||
:boardId="boardId"
|
||||
:comment="comment"
|
||||
@updateReaction="handleUpdateReaction"
|
||||
/>
|
||||
<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';
|
||||
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";
|
||||
// 기본 프로필 이미지 경로
|
||||
const defaultProfile = '/img/icons/icon.png';
|
||||
|
||||
// 서버의 이미지 경로 (Vue 환경 변수 사용 가능)
|
||||
const baseUrl = "http://localhost:10325/"; // API 서버 URL
|
||||
// 서버의 이미지 경로 (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,
|
||||
// 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 getProfileImage = (profilePath) => {
|
||||
return profilePath && profilePath.trim()
|
||||
? `${baseUrl}upload/img/profile/${profilePath}`
|
||||
: defaultProfile;
|
||||
};
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user