From aba42d7518da348c9e7f197b8867540af6d7331d Mon Sep 17 00:00:00 2001
From: Dang <looks32@gmail.com>
Date: Tue, 17 Dec 2024 12:35:30 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B2=8C=EC=8B=9C=ED=8C=90=20=EB=8C=93?=
 =?UTF-8?q?=EA=B8=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComment.vue | 41 +++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 6 deletions(-)

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