feat: PostHeader의 카테고리 표시 방식 개선 및 스타일 수정

Author: toothlessdev

src/components/PostHeader/PostHeader.css

@@ -8,43 +8,55 @@
     display: flex;
     align-items: center;
     justify-content: space-between;
+    flex-wrap: wrap;
     gap: 0.75rem;
+
     margin-bottom: 1rem;
-    flex-wrap: wrap;
 }
 
-.category-tag {
+.post-category {
+    display: flex;
+    align-items: center;
+    gap: 0.125rem;
+}
+
+.post-category * {
+    display: block;
+}
+
+.post-category .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;
+    font-size: 0.875rem;
     letter-spacing: 0.05em;
+
+    color: var(--vp-c-text-2);
+    background-color: var(--vp-c-brand);
+}
+
+.post-category .category-indicator {
+    display: inline-block;
+
+    width: 12px;
+    height: 12px;
+
+    margin-right: 0.5rem;
+    border-radius: 50%;
 }
 
 .created-date {
     color: var(--vp-c-text-2);
     font-size: 0.875rem;
-    font-weight: 500;
 }
 
 .post-title {
+    margin: 0 0 1.5rem 0;
+
     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;
+    color: var(--vp-c-text-1);
 }
 
 /* 다크 테마 대응 */

src/components/PostHeader/PostHeader.vue

@@ -2,21 +2,27 @@
 import { useData } from "vitepress";
 import { computed } from "vue";
 import { formatDate } from "@/utils/date";
+import { getCategoryColor } from "@/constants/colors";
 
 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>
+            <div class="post-category" v-if="category">
+                <span
+                    class="category-indicator"
+                    :style="{ backgroundColor: getCategoryColor(category) }"
+                />
+                <span class="category-tag">{{ category }}</span>
+            </div>
             <time v-if="createdAt" class="created-date">{{ formatDate(createdAt) }}</time>
         </div>
     </header>