50 lines
1.3 KiB
Vue
50 lines
1.3 KiB
Vue
<script setup>
|
|
const { data: posts } = await useFetch('/api/posts', {
|
|
default: () => []
|
|
})
|
|
|
|
/**
|
|
* 날짜 표시 형식 변환
|
|
* @param {string | null} value - ISO 날짜 문자열
|
|
* @returns {string} 화면 표시 날짜
|
|
*/
|
|
const formatPostDate = (value) => {
|
|
if (!value) {
|
|
return ''
|
|
}
|
|
|
|
const date = new Date(value)
|
|
const year = date.getFullYear()
|
|
const month = String(date.getMonth() + 1).padStart(2, '0')
|
|
const day = String(date.getDate()).padStart(2, '0')
|
|
|
|
return `${year}.${month}.${day}`
|
|
}
|
|
|
|
const postCards = computed(() => posts.value.map((post) => ({
|
|
title: post.title,
|
|
excerpt: post.excerpt,
|
|
featuredImage: post.featuredImage,
|
|
tag: post.tags?.[0]?.toUpperCase() || 'POST',
|
|
publishedAt: formatPostDate(post.publishedAt),
|
|
to: `/post/${post.slug}`
|
|
})))
|
|
</script>
|
|
|
|
<template>
|
|
<MainColumn>
|
|
<section class="posts-index site-section">
|
|
<div class="posts-index__header site-section-header">
|
|
<p class="posts-index__eyebrow text-xs font-semibold uppercase text-muted">
|
|
Posts
|
|
</p>
|
|
<h1 class="posts-index__title mt-3 text-4xl font-semibold leading-tight">
|
|
게시물
|
|
</h1>
|
|
</div>
|
|
</section>
|
|
|
|
<PostCard v-for="post in postCards" :key="post.to" :post="post" />
|
|
</MainColumn>
|
|
</template>
|