50 lines
1.8 KiB
Vue
50 lines
1.8 KiB
Vue
<template>
|
|
<li class="mt-5">
|
|
<div class="d-flex align-items-center">
|
|
<div class="w-100 d-flex align-items-center">
|
|
<span class="btn btn-primary">{{ item.category }}</span>
|
|
<strong class="mx-2 w-75">{{ item.WRDDICTTL }}</strong>
|
|
</div>
|
|
<EditBtn />
|
|
</div>
|
|
<p class="mt-5">{{ item.WRDDICCON }}</p>
|
|
<div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
|
|
<div class="d-flex flex-wrap align-items-center mb-50">
|
|
<div class="avatar avatar-sm me-2">
|
|
<img :src="getProfileImage(item.author.profileImage)" alt="최초 작성자" class="rounded-circle">
|
|
</div>
|
|
<div>
|
|
<p class="mb-0 small fw-medium">{{ formatDate(item.author.createdAt) }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="d-flex justify-content-between flex-wrap gap-2 mb-2">
|
|
<div class="d-flex flex-wrap align-items-center mb-50">
|
|
<div class="avatar avatar-sm me-2">
|
|
<img :src="getProfileImage(item.lastEditor.profileImage)" alt="최근 작성자" class="rounded-circle">
|
|
</div>
|
|
<div>
|
|
<p class="mb-0 small fw-medium">{{ formatDate(item.lastEditor.updatedAt) }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
|
|
<script setup>
|
|
import EditBtn from '@/components/button/EditBtn.vue';
|
|
|
|
// Props
|
|
defineProps({
|
|
item: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
// 날짜
|
|
const formatDate = (dateString) => new Date(dateString).toLocaleString();
|
|
// 이미지
|
|
const getProfileImage = (imagePath) =>
|
|
imagePath ? `/img/avatars/${imagePath}` : '/img/avatars/default-Profile.jpg';
|
|
</script> |