diff --git a/src/components/board/BoardComment.vue b/src/components/board/BoardComment.vue
index 2787748..00b94ba 100644
--- a/src/components/board/BoardComment.vue
+++ b/src/components/board/BoardComment.vue
@@ -2,21 +2,29 @@
     <ul class="list-unstyled">
         <li>
             <BoardProfile profileName=곤데리 :showDetail="false" />
-            <div>저도 궁금합니다.</div>
+            <div class="mt-2">저도 궁금합니다.</div>
+            <button type="button" class="btn btn-text-primary" @click="toggleComment">답변달기</button>
+            <BoardComentArea v-if="comment" />
             <ul class="list-unstyled twoDepth">
                 <li>
                     <BoardProfile profileName=곤데리2 :showDetail="false" />
-                    <div>저도 궁금합니다.</div>
+                    <div class="mt-2">저도 궁금합니다.</div>
+                    <button type="button" class="btn btn-text-primary" @click="toggleComment">답변달기</button>
+                    <BoardComentArea v-if="comment" />
                 </li>
             </ul>
         </li>
         <li>
             <BoardProfile profileName=곤데리 :showDetail="false" />
-            <div>저도 궁금합니다.</div>
+            <div class="mt-2">저도 궁금합니다.</div>
+            <button type="button" class="btn btn-text-primary" @click="toggleComment">답변달기</button>
+            <BoardComentArea v-if="comment" />
         </li>
         <li>
             <BoardProfile profileName=곤데리 :showDetail="false" :unknown="false"/>
-            <div>저도 궁금합니다.</div>
+            <div class="mt-2">저도 궁금합니다.</div>
+            <button type="button" class="btn btn-text-primary" @click="toggleComment">답변달기</button>
+            <BoardComentArea v-if="comment" />
         </li>
     </ul>
     <div>페이지네이션2</div>
@@ -25,12 +33,33 @@
 <script setup>
 
 import BoardProfile from './BoardProfile.vue';
+import BoardComentArea from './BoardComentArea.vue';
+import { ref, computed } from 'vue';
+
+const comment = ref(false);
+
+const toggleComment = () => {
+    comment.value = !comment.value
+};
 
 </script>
 
 <style scoped>
     .twoDepth {
-        margin-top: 20px;
-        padding-left: 20px;
+        margin-top: 10px;
+        padding-left: 40px;
+    }
+
+    .list-unstyled > li ~ li {
+        margin-top: 10px;
+    }
+
+    .btn-text-primary {
+        padding-left: 0;
+    }
+    .btn-text-primary:hover,
+    .btn-text-primary:active,
+    .btn-text-primary:focus {
+        background-color: transparent
     }
 </style>
\ No newline at end of file