48 lines
1.3 KiB
Vue
48 lines
1.3 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="goDetail(post.id)">
|
|
<ProjectCard
|
|
:title="post.title"
|
|
:description="post.description"
|
|
:date="post.date"
|
|
:address="post.address"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, defineEmits } from 'vue';
|
|
import ProjectCard from './ProjectCard.vue';
|
|
|
|
// 테스트용 데이터
|
|
const posts = ref([
|
|
{
|
|
id: 1,
|
|
title: 'Vue 3 Composition API 소개',
|
|
description: 'Composition API를 사용하여 Vue 3에서 효율적으로 개발하는 방법을 알아봅니다.',
|
|
date: '2025-02-10',
|
|
address: '서울특별시 구로구'
|
|
},
|
|
{
|
|
id: 2,
|
|
title: 'Spring Boot로 REST API 만들기',
|
|
description: 'Spring Boot를 사용하여 간단한 RESTful API를 구현하는 방법을 다룹니다.',
|
|
date: '2025-02-09',
|
|
address: '서울특별시 강남구'
|
|
}
|
|
]);
|
|
|
|
const emit = defineEmits(['click']);
|
|
|
|
// 상세 페이지 이동
|
|
const goDetail = (id) => {
|
|
emit('click', id);
|
|
};
|
|
|
|
</script>
|