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

pages/posts/[slug].vue

@@ -2,43 +2,35 @@
 definePageMeta({
   layout: 'post'
 })
+
+const route = useRoute()
+const slug = computed(() => 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')
 </script>
 
 <template>
   <ContentRenderer>
     <ProseHeaderCard>
       <p class="post-detail__eyebrow text-sm uppercase text-white/70">
-        NOTE
+        {{ postTag }}
       </p>
       <h1 class="post-detail__title mt-3 text-4xl font-semibold leading-tight">
-        sori.studio를 직접 만들기 시작하며
+        {{ post.title }}
       </h1>
     </ProseHeaderCard>
 
-    <p>
-      이 페이지는 게시물 본문 스타일을 확인하기 위한 초기 샘플입니다.
-      실제 글 데이터와 마크다운 기반 위지윅 렌더링은 다음 단계에서 연결합니다.
+    <p class="post-detail__content whitespace-pre-line">
+      {{ post.content }}
     </p>
-
-    <ProseHeading :level="2">
-      본문 스타일 기준
-    </ProseHeading>
-    <p>
-      제목, 리스트, 인용구, 이미지, 버튼, 카드류 컴포넌트를 개별 컴포넌트로 분리해 이후 스타일 변경이 쉽도록 둡니다.
-    </p>
-
-    <ProseList>
-      <li>Regular image, Wide image, Full-width image 구분</li>
-      <li>Callout, Toggle, File, Product 카드 분리</li>
-      <li>YouTube, Twitter 임베드 영역 분리</li>
-    </ProseList>
-
-    <ProseBlockquote>
-      글쓰기 경험은 Ghost를 참고하되, 공개 화면은 sori.studio에 맞게 조정합니다.
-    </ProseBlockquote>
-
-    <ProseCallout>
-      <strong>초기 상태:</strong> 지금은 샘플 콘텐츠이며, DB와 관리자 글쓰기 연결 후 실제 데이터로 교체합니다.
-    </ProseCallout>
   </ContentRenderer>
 </template>