게시판 코멘트 익명, 비밀번호 추가

src/components/board/BoardComentArea.vue

@@ -9,8 +9,26 @@
                     <textarea class="form-control" placeholder="주제에 대한 생각을 자유롭게 댓글로 표현해 주세요.&#13;&#10;여러분의 다양한 의견을 기다립니다."></textarea>
                 </div>
             </div>
-            <div class="text-end">
+            <div class="d-flex justify-content-between flex-wrap mt-4">
-                <button class="btn btn-primary mt-4">답변 쓰기</button>
+                <div class="d-flex justify-content-between flex-wrap">
+                    <div class="d-flex align-items-center">
+                        <div class="form-check form-check-inline mb-0">
+                            <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="" />
+                            <label class="form-check-label" for="inlineCheckbox1">익명</label>
+                        </div>
+                    </div>
+                    <div class="d-flex align-items-center">
+                        <div class="col-auto me-2">
+                            <span class="fw-normal">비밀번호</span>
+                        </div>
+                        <div class="col-auto">
+                            <input type="text" class="form-control" placeholder="" />
+                        </div>
+                    </div>
+                </div>
+                <div class="d-flex text-end">
+                    <button class="btn btn-primary">답변 쓰기</button>
+                </div>
             </div>       
         </div>
     </div>                                           

src/components/board/BoardContent.vue

@@ -1,30 +1,77 @@
 <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">리액트 강의 추천좀</h5>
+            <h5 class="mb-0">{{ boardTitle }}</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>
+        <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 class="d-flex align-items-centermb-2">
+            <button v-if="attachmentCount > 0" type="button" class="btn btn-label-secondary">
+                <i class="fa-solid fa-download me-2"></i>
+                첨부파일
+                (<span class="attachment-num">{{ attachmentCount }}</span>)
+            </button>
+        </div> -->
     </div>
     <hr class="my-6">
     <div class="d-flex min-150">
-        <p class="mb-0">현재 뷰 사용중인데 리액트 공부가 해보고 싶습니다. 강의 추천해주십쇼! 리액트 1도 모릅니다.</p>
+        <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>
 </template>
 
 <script setup>
-    import BoardComentArea from './BoardComentArea.vue';
+defineProps({
-import BoardProfile from './BoardProfile.vue';
+    boardTitle : {
+        type: String,
+        required: true,
+    },
+    boardContent: {
+        type: String,
+        required: true,
+    },
+    attachmentCount: {
+        type: Number,
+        default: 0,
+    },
+    showDetail: {
+        type: Boolean,
+        default: false,
+    }
+});
 </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 />
+                        <BoardContent boardTitle="제목1" boardContent="내용1" />
                         <BoardComentArea />
                     </div>
                     <div class="card-footer">
@@ -20,7 +20,6 @@
 </template>
 
 <script setup>
-
 import BoardComentArea from '@/components/board/BoardComentArea.vue';
 import BoardComment from '@/components/board/BoardComment.vue';
 import BoardContent from '@/components/board/BoardContent.vue';