<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>
