diff --git a/src/components/TuiPostDetail.vue b/src/components/TuiPostDetail.vue
new file mode 100644
index 0000000..b96dfb6
--- /dev/null
+++ b/src/components/TuiPostDetail.vue
@@ -0,0 +1,35 @@
+<script setup>
+defineProps({
+  post: {
+    type: Object,
+    required: true
+  }
+});
+
+defineEmits(['close']);
+</script>
+
+<template>
+  <div class="tui-post-detail">
+    <div class="post-detail-head">
+      <div>
+        <div class="post-detail-eyebrow">{{ post.sourceLabel }} · POST_DETAIL.DAT</div>
+        <h3 class="post-detail-title">{{ post.title }}</h3>
+      </div>
+      <button class="post-detail-close" @click="$emit('close')" aria-label="닫기">✕</button>
+    </div>
+
+    <div class="post-detail-meta">
+      <span v-if="post.author">{{ post.author }}</span>
+      <span v-if="post.createdAt">{{ post.createdAt }}</span>
+      <span v-if="post.views !== null">조회 {{ post.views }}</span>
+      <span v-if="post.likes !== null">추천 {{ post.likes }}</span>
+    </div>
+
+    <div v-if="post.content" class="post-detail-text" v-html="post.content"></div>
+
+    <div v-if="post.url" class="post-detail-foot">
+      <a :href="post.url" target="_blank" rel="noopener noreferrer">원문에서 보기 ↗</a>
+    </div>
+  </div>
+</template>