관리자 기능과 태그 표시 설정 추가

pages/index.vue

@@ -1,20 +1,40 @@
 <script setup>
-const posts = [
-  {
-    title: 'sori.studio를 직접 만들기 시작하며',
-    excerpt: '블로그와 포털의 경계에 있는 개인 공간을 직접 구축하기 위한 첫 기록입니다.',
-    tag: 'NOTE',
-    publishedAt: '2026.04.29',
-    to: '/posts/hello-sori-studio'
-  },
-  {
-    title: '글쓰기 도구는 왜 직접 만들게 되는가',
-    excerpt: '네이버 블로그, 티스토리, 워드프레스, Ghost를 거쳐 남은 취향의 빈칸을 정리합니다.',
-    tag: 'DEV',
-    publishedAt: '2026.04.29',
-    to: '/posts/custom-writing-tool'
+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}`
+}
+
+/**
+ * 게시물 카드 데이터 변환
+ * @param {Object} post - API 게시물
+ * @returns {Object} 게시물 카드 데이터
+ */
+const mapPostCard = (post) => ({
+  title: post.title,
+  excerpt: post.excerpt,
+  tag: post.tags?.[0]?.toUpperCase() || 'POST',
+  publishedAt: formatPostDate(post.publishedAt),
+  to: `/posts/${post.slug}`
+})
+
+const postCards = computed(() => posts.value.map(mapPostCard))
 </script>
 
 <template>
@@ -76,6 +96,6 @@ const posts = [
       </div>
     </section>
 
-    <PostCard v-for="post in posts" :key="post.to" :post="post" />
+    <PostCard v-for="post in postCards" :key="post.to" :post="post" />
   </MainColumn>
 </template>