feat: PostHeader 추가 및 레이아웃 적용

Author: toothlessdev

src/components/PostHeader/PostHeader.css

@@ -0,0 +1,68 @@
+.post-header {
+    margin-bottom: 2rem;
+    padding-bottom: 1.5rem;
+    border-bottom: 1px solid var(--vp-c-divider);
+}
+
+.post-meta {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 0.75rem;
+    margin-bottom: 1rem;
+    flex-wrap: wrap;
+}
+
+.category-tag {
+    display: inline-block;
+    background-color: var(--vp-c-brand);
+    color: var(--vp-c-white);
+    font-size: 0.75rem;
+    font-weight: 600;
+
+    border-radius: 1rem;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+}
+
+.created-date {
+    color: var(--vp-c-text-2);
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.post-title {
+    font-size: 2.25rem;
+    font-weight: 700;
+    line-height: 1.2;
+    margin: 0 0 1rem 0;
+    color: var(--vp-c-text-1);
+}
+
+.post-description {
+    font-size: 1.125rem;
+    line-height: 1.6;
+    color: var(--vp-c-text-2);
+    margin: 0;
+    font-weight: 400;
+}
+
+/* 다크 테마 대응 */
+.dark .category-tag {
+    background-color: var(--vp-c-brand-dark);
+}
+
+/* 모바일 반응형 */
+@media (max-width: 768px) {
+    .post-title {
+        font-size: 1.875rem;
+    }
+
+    .post-description {
+        font-size: 1rem;
+    }
+
+    .post-meta {
+        gap: 0.5rem;
+    }
+}

src/components/PostHeader/PostHeader.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { useData } from "vitepress";
+import { computed } from "vue";
+import { formatDate } from "@/utils/date";
+
+const { frontmatter } = useData();
+
+const title = computed(() => frontmatter.value.title || "");
+const createdAt = computed(() => frontmatter.value.createdAt || "");
+const category = computed(() => frontmatter.value.category || "");
+const description = computed(() => frontmatter.value.description || "");
+</script>
+
+<template>
+    <header class="post-header">
+        <h1 class="post-title">{{ title }}</h1>
+
+        <div class="post-meta">
+            <span v-if="category" class="category-tag">{{ category }}</span>
+            <time v-if="createdAt" class="created-date">{{ formatDate(createdAt) }}</time>
+        </div>
+    </header>
+</template>
+
+<style>
+@import "./PostHeader.css";
+</style>

src/components/PostLayout/PostLayout.vue

@@ -2,15 +2,21 @@
 import { useData } from "vitepress";
 import DefaultTheme from "vitepress/theme";
 import PostComment from "@/components/PostComment/PostComment.vue";
+import PostHeader from "@/components/PostHeader/PostHeader.vue";
 const { Layout } = DefaultTheme;
 
 const { frontmatter } = useData();
 
+const showHeader = Boolean(frontmatter.value.title);
 const showComments = frontmatter.value.comment === true;
 </script>
 
 <template>
     <Layout>
+        <template #doc-before>
+            <PostHeader v-if="showHeader" />
+        </template>
+
         <template #doc-after>
             <PostComment v-if="showComments" />
         </template>