공개 상세 경로와 새 글 에디터 보정

pages/posts/[slug].vue

@@ -1,34 +1,12 @@
 <script setup>
-definePageMeta({
-  layout: 'post'
-})
-
 const route = useRoute()
-const slug = computed(() => String(route.params.slug || ''))
+const slug = String(route.params.slug || '')
 
-const { data: post } = await useFetch(() => `/api/posts/${slug.value}`)
-
-if (!post.value) {
-  throw createError({
-    statusCode: 404,
-    statusMessage: '게시물을 찾을 수 없습니다.'
-  })
-}
-
-const postTag = computed(() => post.value.tags?.[0]?.toUpperCase() || 'POST')
+await navigateTo(`/post/${slug}`, {
+  redirectCode: 301
+})
 </script>
 
 <template>
-  <ContentRenderer>
-    <ProseHeaderCard>
-      <p class="post-detail__eyebrow text-sm uppercase text-white/70">
-        {{ postTag }}
-      </p>
-      <h1 class="post-detail__title mt-3 text-4xl font-semibold leading-tight">
-        {{ post.title }}
-      </h1>
-    </ProseHeaderCard>
-
-    <ContentMarkdownRenderer class="post-detail__content" :content="post.content" />
-  </ContentRenderer>
+  <div />
 </template>

pages/posts/index.vue

@@ -0,0 +1,48 @@
+<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,
+  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>