142 lines
3.8 KiB
Vue
142 lines
3.8 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="contentColClass">
|
|
<div class="card-body">
|
|
<!-- 태그 -->
|
|
<h6 class="badge rounded-pill bg-primary text-white mb-2">
|
|
{{ category }}
|
|
</h6>
|
|
<!-- 제목 -->
|
|
<h5 class="card-title">
|
|
{{ title }}
|
|
<span class="text-muted me-3" v-if="attachment">
|
|
<i class="fa-solid fa-paperclip"></i>
|
|
</span>
|
|
</h5>
|
|
<!-- 본문 -->
|
|
<p class="card-text str_wrap">{{ content }}</p>
|
|
<!-- 날짜 -->
|
|
<div class="d-flex justify-content-between">
|
|
<small class="text-muted">{{ formattedDate }}</small>
|
|
<!-- 조회수, 좋아요, 댓글 -->
|
|
<div>
|
|
<span class="text-muted me-3">
|
|
<i class="fa-regular fa-eye"></i> {{ views || 0 }}
|
|
</span>
|
|
<span class="text-muted me-3" v-if="likes != null">
|
|
<i class="bx bx-like"></i> {{ likes }}
|
|
</span>
|
|
<span class="text-muted" v-if="comments !== null">
|
|
<i class="bx bx-comment"></i> {{ comments }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { computed } from 'vue';
|
|
import { defineProps } from 'vue';
|
|
|
|
// Props 정의
|
|
const props = defineProps({
|
|
img: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
category: {
|
|
type: String,
|
|
required: false,
|
|
},
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
content: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
date: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
views: {
|
|
type: Number,
|
|
default: 0,
|
|
},
|
|
likes: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
comments: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
attachment: {
|
|
type: Boolean,
|
|
default: false,
|
|
}
|
|
});
|
|
|
|
// computed 속성
|
|
const contentColClass = computed(() => {
|
|
return props.img ? 'col-md-10 col-12' : 'col-md-12';
|
|
});
|
|
|
|
// formattedDate을 computed로 정의
|
|
const formattedDate = computed(() => {
|
|
const date = new Date(props.date);
|
|
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>
|