From 64241132ab90c2baf77da41be212b0080b24f5a1 Mon Sep 17 00:00:00 2001
From: kimdaae328 <kimdaae328@gmail.com>
Date: Tue, 17 Dec 2024 14:59:54 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B2=8C=EC=8B=9C=ED=8C=90=20=EC=B2=A8?=
 =?UTF-8?q?=EB=B6=80=ED=8C=8C=EC=9D=BC=20=EB=93=9C=EB=A1=AD=EB=8B=A4?=
 =?UTF-8?q?=EC=9A=B4=EC=9C=BC=EB=A1=9C=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComentArea.vue |  2 +-
 src/components/board/BoardContent.vue    | 65 ++++++++++--------------
 src/views/board/BoardView.vue            |  9 +++-
 3 files changed, 36 insertions(+), 40 deletions(-)

diff --git a/src/components/board/BoardComentArea.vue b/src/components/board/BoardComentArea.vue
index f2facdb..3d0c2fe 100644
--- a/src/components/board/BoardComentArea.vue
+++ b/src/components/board/BoardComentArea.vue
@@ -11,7 +11,7 @@
                 <div class="w-100">
                     <textarea 
                         class="form-control" 
-                        placeholder="주제에 대한 생각을 자유롭게 댓글로 표현해 주세요. 여러분의 다양한 의견을 기다립니다." 
+                        placeholder="주제에 대한 생각을 자유롭게 댓글로 표현해 주세요. &#13;&#10;여러분의 다양한 의견을 기다립니다." 
                         rows="3"
                     ></textarea>
                 </div>
diff --git a/src/components/board/BoardContent.vue b/src/components/board/BoardContent.vue
index bf2a43f..dfdf730 100644
--- a/src/components/board/BoardContent.vue
+++ b/src/components/board/BoardContent.vue
@@ -1,47 +1,39 @@
 <template>
     <div class="d-flex justify-content-between align-items-center flex-wrap mb-6 gap-2">
+        <!-- 제목 섹션 -->
         <div class="me-1">
             <h5 class="mb-0">{{ boardTitle }}</h5>
         </div>
-        <!-- <button type="button" class="btn btn-label-secondary">
-            <i class="fa-solid fa-download me-2"></i>
-            첨부파일
-            (<span class="attachment-num">1</span>)
-        </button> -->
-        <div v-if="attachmentCount > 0" class="d-flex align-items-centermb-2">
-            <button type="button" class="btn btn-label-secondary">
+        <!-- 첨부파일 섹션 -->
+        <div v-if="dropdownItems.length > 0" class="btn-group">
+            <button type="button" class="btn btn-label-secondary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                 <i class="fa-solid fa-download me-2"></i>
                 첨부파일
-                (<span class="attachment-num">{{ attachmentCount }}</span>)
+                (<span class="attachment-num">{{ dropdownItems.length }}</span>)
             </button>
+            <ul class="dropdown-menu">
+                <li v-for="(item, index) in dropdownItems" :key="index">
+                    <a class="dropdown-item" href="javascript:void(0);" @click="dropClick(item.action)">
+                        {{ item.label }}
+                    </a>
+                </li>
+            </ul>
         </div>
     </div>
     <hr class="my-6">
+    <!-- 컨텐트 섹션 -->
     <div class="d-flex min-150">
         <p class="mb-0">{{ boardContent }}</p>
     </div>
-
-    <div class="ms-auto text-end">
-        <template v-if="showDetail">
-            <button class="btn btn-label-primary btn-icon">
-                <i class='bx bx-edit-alt'></i>
-            </button>
-            <button class="btn btn-label-primary btn-icon ms-1">
-                <i class='bx bx-trash' ></i>
-            </button>
-        </template>
-        <template v-else>
-            <button class="btn btn-label-primary btn-icon">
-                <i class="fa-regular fa-thumbs-up"></i> <span class="num">1</span>
-            </button>
-            <button class="btn btn-label-danger btn-icon">
-                <i class="fa-regular fa-thumbs-down"></i> <span class="num">1</span>
-            </button>
-        </template>
+    <!-- 좋아요 섹션 -->
+    <div class="text-center">
+        <BoardRecommendBtn />
     </div>
 </template>
 
 <script setup>
+import BoardRecommendBtn from './BoardRecommendBtn.vue';
+
 defineProps({
     boardTitle : {
         type: String,
@@ -55,23 +47,20 @@ defineProps({
         type: Number,
         default: 0,
     },
-    showDetail: {
-        type: Boolean,
-        default: false,
-    }
+    dropdownItems: {
+        type: Array,
+        default: () => [],
+    },
 });
+
+const emit = defineEmits(['dropdown-click']);
+const dropClick = (action) => {
+    emit('dropdown-click', action);
+};
 </script>
 
 <style scoped>
     .min-150 {
         min-height: 150px !important;
     }
-
-    .ms-auto button + button {
-        margin-left: 5px;
-    } 
-
-    .num {
-        margin-left: 5px;
-    }
 </style>
\ No newline at end of file
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index da834a8..057c0cf 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -7,7 +7,7 @@
                         <BoardProfile profileName="만드레야2"/>
                     </div>
                     <div class="card-body">
-                        <BoardContent boardTitle="제목1" boardContent="내용1" :attachmentCount="1" />
+                        <BoardContent boardTitle="제목1" boardContent="내용1" :dropdownItems="dropdownItems" />
                         <BoardComentArea />
                     </div>
                     <div class="card-footer">
@@ -24,6 +24,13 @@ import BoardComentArea from '@/components/board/BoardComentArea.vue';
 import BoardComment from '@/components/board/BoardComment.vue';
 import BoardContent from '@/components/board/BoardContent.vue';
 import BoardProfile from '@/components/board/BoardProfile.vue';
+import { ref } from 'vue';
+
+const dropdownItems = ref([
+    { label: '내용1'},
+    { label: '내용2'},
+    { label: '내용3'},
+]);
 
 </script>