게시판 첨부파일 드롭다운으로 수정

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>

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">
+        <!-- 첨부파일 섹션 -->
+        <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">1</span>)
+                (<span class="attachment-num">{{ dropdownItems.length }}</span>)
-        </button> -->
-        <div v-if="attachmentCount > 0" class="d-flex align-items-centermb-2">
-            <button type="button" class="btn btn-label-secondary">
-                <i class="fa-solid fa-download me-2"></i>
-                첨부파일
-                (<span class="attachment-num">{{ attachmentCount }}</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">
+    <div class="text-center">
-        <template v-if="showDetail">
+        <BoardRecommendBtn />
-            <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>
 </template>
 
 <script setup>
+import BoardRecommendBtn from './BoardRecommendBtn.vue';
+
 defineProps({
     boardTitle : {
         type: String,
@@ -55,23 +47,20 @@ defineProps({
         type: Number,
         default: 0,
     },
-    showDetail: {
+    dropdownItems: {
-        type: Boolean,
+        type: Array,
-        default: false,
+        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>

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>