56 lines
1.4 KiB
Vue
56 lines
1.4 KiB
Vue
<template>
|
|
<div class="mt-4">
|
|
<div v-if="posts.length === 0" class="text-center">
|
|
<p class="text-muted mt-4">게시물이 없습니다.</p>
|
|
</div>
|
|
<div v-for="post in posts" :key="post.id" @click="handleClick(post.id)">
|
|
<BoardCard
|
|
:img="post.img || null"
|
|
:category="post.category || ''"
|
|
:title="post.title"
|
|
:content="post.content"
|
|
:date="post.date"
|
|
:views="post.views || 0"
|
|
v-bind="getBoardCardProps(post)"
|
|
:attachment="post.attachment || false"
|
|
@click="() => goDetail(post.id)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, defineEmits } from 'vue';
|
|
import BoardCard from './BoardCard.vue';
|
|
|
|
const props = defineProps({
|
|
posts: {
|
|
type: Array,
|
|
required: true,
|
|
default: () => [],
|
|
}
|
|
});
|
|
|
|
const emit = defineEmits(['click']);
|
|
|
|
// 상세 페이지 이동
|
|
const goDetail = (id) => {
|
|
emit('click', id);
|
|
};
|
|
|
|
// 없는 데이터는 상위 페이지에서 삭제해도 되게끔 설정
|
|
const getBoardCardProps = (post) => {
|
|
const boardCardProps = {};
|
|
if ('likes' in post) {
|
|
boardCardProps.likes = post.likes;
|
|
}
|
|
if ('comments' in post) {
|
|
boardCardProps.comments = post.comments;
|
|
}
|
|
return boardCardProps;
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|