diff --git a/src/components/BoardDetail.vue b/src/components/BoardDetail.vue
new file mode 100644
index 0000000..c3576ea
--- /dev/null
+++ b/src/components/BoardDetail.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="col">
+        <div class="card">
+            <div class="card-body">
+                <div class="d-flex justify-content-between align-items-center flex-wrap mb-6 gap-2">
+                    <div class="me-1">
+                        <h5 class="mb-0">리액트 강의 추천좀</h5>
+                    </div>
+                    <div class="d-flex align-items-center">
+                        <div class="d-flex align-items-center mb-2">
+                            <div class="badge bg-lighter rounded d-flex align-items-center">
+                            <img src="/img/icons/misc/pdf.png" alt="img" width="15" class="me-2">
+                            <span class="h6 mb-0 text-body">invoices.pdf</span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <hr class="my-6">
+                <div class="d-flex min-150">
+                    <p class="mb-0">현재 뷰 사용중인데 리액트 공부가 해보고 싶습니다. 강의 추천해주십쇼! 리액트 1도 모릅니다.</p>
+                </div>
+                <div class="card shadow-none border mt-6">
+                    <div class="card-body">
+                        <div class="d-flex justify-content-start align-items-top">
+                            <div class="avatar-wrapper">
+                                <div class="avatar me-4"><img src="/img/avatars/11.png" alt="Avatar" class="rounded-circle"></div>
+                            </div>
+                            <div class="w-100">
+                                <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="mb-4 text-end">
+                    <button class="btn btn-primary my-4">답변 쓰기</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped>
+    .min-150 {
+        min-height: 150px !important;
+    }
+</style>
\ No newline at end of file