From 27fb52208c32a4e58c7b9021b1f1c9ff51c6db1e Mon Sep 17 00:00:00 2001
From: kimdaae328 <kimdaae328@gmail.com>
Date: Tue, 17 Dec 2024 14:10:26 +0900
Subject: [PATCH] =?UTF-8?q?=20=EA=B2=8C=EC=8B=9C=ED=8C=90=20=EC=9D=B5?=
 =?UTF-8?q?=EB=AA=85=20=EC=B2=B4=ED=81=AC=20=EB=B9=84=EB=B0=80=EB=B2=88?=
 =?UTF-8?q?=ED=98=B8=20=EC=97=AC=EB=B6=80=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComentArea.vue | 60 ++++++++++++++----------
 src/components/board/BoardContent.vue    | 10 ++--
 2 files changed, 41 insertions(+), 29 deletions(-)

diff --git a/src/components/board/BoardComentArea.vue b/src/components/board/BoardComentArea.vue
index bfbd968..f2facdb 100644
--- a/src/components/board/BoardComentArea.vue
+++ b/src/components/board/BoardComentArea.vue
@@ -1,32 +1,49 @@
 <template>
     <div class="card shadow-none border mt-6">
         <div class="card-body">
+            <!-- 댓글 입력 섹션 -->
             <div class="d-flex justify-content-start align-items-top">
                 <div class="avatar-wrapper">
-                    <div class="avatar me-4"><img src="/img/avatars/11.png" alt="Avatar" class="rounded-circle"></div>
+                    <div class="avatar me-4">
+                        <img src="/img/avatars/11.png" alt="Avatar" class="rounded-circle">
+                    </div>
                 </div>
                 <div class="w-100">
-                    <textarea class="form-control" placeholder="주제에 대한 생각을 자유롭게 댓글로 표현해 주세요.&#13;&#10;여러분의 다양한 의견을 기다립니다."></textarea>
+                    <textarea 
+                        class="form-control" 
+                        placeholder="주제에 대한 생각을 자유롭게 댓글로 표현해 주세요. 여러분의 다양한 의견을 기다립니다." 
+                        rows="3"
+                    ></textarea>
                 </div>
             </div>
+
+            <!-- 옵션 및 버튼 섹션 -->
             <div class="d-flex justify-content-between flex-wrap mt-4">
-                <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 class="d-flex flex-wrap align-items-center">
+                    <!-- 익명 체크박스 -->
+                    <div class="form-check form-check-inline mb-0 me-3">
+                        <input 
+                            class="form-check-input" 
+                            type="checkbox" 
+                            id="inlineCheckbox1" 
+                            v-model="isCheck"
+                        />
+                        <label class="form-check-label" for="inlineCheckbox1">익명</label>
                     </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 v-if="isCheck" class="d-flex align-items-center flex-grow-1">
+                        <span class="fw-normal me-2">비밀번호</span>
+                        <input 
+                            type="password" 
+                            class="form-control flex-grow-1" 
+                            placeholder="비밀번호를 입력하세요" 
+                        />
                     </div>
                 </div>
-                <div class="d-flex text-end">
+                
+                <!-- 답변 쓰기 버튼 (화면이 좁아질 때만 mt-3 적용) -->
+                <div class="ms-auto mt-3 mt-md-0">
                     <button class="btn btn-primary">답변 쓰기</button>
                 </div>
             </div>       
@@ -34,12 +51,7 @@
     </div>                                           
 </template>
 
-<script>
-    export default {
-        
-    }
+<script setup>
+import { ref } from 'vue';
+const isCheck = ref(false);
 </script>
-
-<style lang="scss" scoped>
-
-</style>
\ No newline at end of file
diff --git a/src/components/board/BoardContent.vue b/src/components/board/BoardContent.vue
index e307e22..bf2a43f 100644
--- a/src/components/board/BoardContent.vue
+++ b/src/components/board/BoardContent.vue
@@ -3,18 +3,18 @@
         <div class="me-1">
             <h5 class="mb-0">{{ boardTitle }}</h5>
         </div>
-        <button type="button" class="btn btn-label-secondary">
+        <!-- <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">
+        </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>
-        </div> -->
+        </div>
     </div>
     <hr class="my-6">
     <div class="d-flex min-150">