119 lines
3.1 KiB
Vue
119 lines
3.1 KiB
Vue
<template>
|
|
<div class="card mb-3 shadow-sm">
|
|
<div class="row g-0">
|
|
<!-- 이미지 섹션 -->
|
|
<div v-if="img" class="col-md-2">
|
|
<img
|
|
:src="img"
|
|
alt="이미지"
|
|
class="img-fluid rounded-start"
|
|
style="object-fit: cover; height: 100%; width: 100%;"
|
|
/>
|
|
</div>
|
|
<!-- 게시물 내용 섹션 -->
|
|
<div class="col-md-10">
|
|
<div class="card-body">
|
|
<!-- 태그 -->
|
|
<h6 class="badge rounded-pill bg-primary text-white mb-2">
|
|
{{ category }}
|
|
</h6>
|
|
<!-- 제목 -->
|
|
<h5 class="card-title">{{ title }}</h5>
|
|
<!-- 본문 -->
|
|
<p class="card-text str_wrap">{{ content }}</p>
|
|
<!-- 날짜 -->
|
|
<div class="d-flex justify-content-between">
|
|
<small class="text-muted">{{ formatDate(date) }}</small>
|
|
<!-- 좋아요와 댓글 -->
|
|
<div>
|
|
<span class="text-muted me-3">
|
|
<i class="bx bx-like"></i> {{ likes || 0 }}
|
|
</span>
|
|
<span class="text-muted">
|
|
<i class="bx bx-comment"></i> {{ comments || 0 }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
img: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
category: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
content: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
date: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
likes: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
comments: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
},
|
|
methods: {
|
|
formatDate(dateString) {
|
|
const date = new Date(dateString);
|
|
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(
|
|
date.getDate()
|
|
).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String(
|
|
date.getMinutes()
|
|
).padStart(2, "0")}`;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
/* 카드 스타일 */
|
|
.card {
|
|
border: 1px solid #e6e6e6;
|
|
border-radius: 8px;
|
|
transition: transform 0.2s ease-in-out;
|
|
}
|
|
|
|
.card:hover {
|
|
transform: scale(1.02);
|
|
}
|
|
|
|
/* 텍스트 줄임 표시 */
|
|
.str_wrap {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
/* 이미지 스타일 */
|
|
.img-fluid {
|
|
border-radius: 8px 0 0 8px;
|
|
}
|
|
|
|
/* 태그 배지 스타일 */
|
|
.badge {
|
|
font-size: 0.8rem;
|
|
padding: 5px 10px;
|
|
}
|
|
</style>
|