<template>
    <div>
        <div v-if="posts.length === 0">게시물이 없습니다.</div>
        <div v-for="post in posts" :key="post.id" class="post">
            <h3>{{ post.title }}</h3>
            <p class="str_wrap">{{ post.content }}</p>
            <small>{{ formatDate(post.date) }}</small>
        </div>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            posts: [] // 게시물 리스트 초기화
        };
    },
    methods: {
        async fetchPosts() {
            try {
                const response = await axios.get('/api/board/general');
                console.log(response.data); // 서버에서 반환된 전체 응답 데이터 확인
                if (response.data && Array.isArray(response.data.data)) {
                    this.posts = response.data.data; // 서버에서 반환된 게시물 리스트 저장
                } else {
                    console.error('Unexpected response format:', response.data);
                }
            } catch (error) {
                console.error('Failed to fetch posts:', error);
            }
        },
        formatDate(dateString) {
            const date = new Date(dateString);
            return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
        }
    },
    mounted() {
        this.fetchPosts();
    }
};
</script>

<style>
/* 텍스트 줄임 표시 */
.str_wrap {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* 최대 3줄 표시 */
    -webkit-box-orient: vertical;
}

/* 게시물 스타일링 */
.post {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #ddd;
    padding-bottom: 1rem;
}
</style>
