localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

아이콘 간격 수정

Browse Source
This commit is contained in:
nevermoregb 2025-03-06 12:15:37 +09:00
parent 6c4fc7ac8e
commit 6ac3d587f8
1 changed files with 92 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
src/components/board/BoardProfile.vue
View File

@ -10,12 +10,8 @@
<div class="profile-detail"> <div class="profile-detail">
<span>{{ date }}</span> <span>{{ date }}</span>
<template v-if="showDetail"> <template v-if="showDetail">
<span class="ms-2"> <span class="ms-2"> <i class="fa-regular fa-eye"></i> {{ views }} </span>
<i class="fa-regular fa-eye"></i> {{ views }} <span class="ms-1"> <i class="bx bx-comment"></i> {{ commentNum }} </span>
</span>
<span>
<i class="bx bx-comment"></i> {{ commentNum }}
</span>
</template> </template>
</div> </div>
</div> </div>
@ -29,112 +25,104 @@
</template> </template>
<!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) --> <!-- 좋아요, 싫어요 버튼 (댓글에서만 표시) -->
<BoardRecommendBtn <BoardRecommendBtn v-if="isLike" :boardId="boardId" :comment="comment" @updateReaction="handleUpdateReaction" />
v-if="isLike"
:boardId="boardId"
:comment="comment"
@updateReaction="handleUpdateReaction"
/>
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { computed, defineProps, defineEmits } from 'vue'; import { computed, defineProps, defineEmits } from 'vue';
import DeleteButton from '../button/DeleteBtn.vue'; import DeleteButton from '../button/DeleteBtn.vue';
import EditButton from '../button/EditBtn.vue'; import EditButton from '../button/EditBtn.vue';
import BoardRecommendBtn from '../button/BoardRecommendBtn.vue'; import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
// 기본 프로필 이미지 경로 // 기본 프로필 이미지 경로
const defaultProfile = "/img/icons/icon.png"; const defaultProfile = '/img/icons/icon.png';
// 서버의 이미지 경로 (Vue 환경 변수 사용 가능) // 서버의 이미지 경로 (Vue 환경 변수 사용 가능)
const baseUrl = "http://localhost:10325/"; // API 서버 URL const baseUrl = 'http://localhost:10325/'; // API 서버 URL
// Props 정의 // Props 정의
const props = defineProps({ const props = defineProps({
comment: { comment: {
type: Object, type: Object,
required: false, required: false,
}, },
boardId: { boardId: {
type: Number, type: Number,
required: false required: false,
}, },
commentId: { commentId: {
type: Number, type: Number,
required: false, required: false,
}, },
profileName: { profileName: {
type: String, type: String,
default: '', default: '',
}, },
profilePath: { profilePath: {
type: String, type: String,
default: '', default: '',
}, },
unknown: { unknown: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
showDetail: { showDetail: {
type: Boolean, type: Boolean,
default: true, default: true,
}, },
isAuthor: { isAuthor: {
type: Boolean, type: Boolean,
default: false, default: false,
}, },
isCommentAuthor: Boolean, isCommentAuthor: Boolean,
isCommentProfile: Boolean, isCommentProfile: Boolean,
date: { date: {
type: String, type: String,
required: '', required: '',
}, },
views: { views: {
type: Number, type: Number,
default: 0, default: 0,
}, },
commentNum: { commentNum: {
type: Number, type: Number,
default: 0, default: 0,
}, },
isLike: { isLike: {
type: Boolean, type: Boolean,
default: false, 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 emit = defineEmits(['updateReaction', 'editClick', 'deleteClick']);
const getProfileImage = (profilePath) => {
return profilePath && profilePath.trim() const isDeletedComment = computed(() => {
? `${baseUrl}upload/img/profile/${profilePath}` return props.comment?.content === '삭제된 댓글입니다' && props.comment?.updateAtRaw !== props.comment?.createdAtRaw;
: defaultProfile; });
};
// 수정
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> </script>