From 6d0b078bc609004d9a6f78df39030726f374ed56 Mon Sep 17 00:00:00 2001
From: kimdaae328 <kimdaae328@gmail.com>
Date: Tue, 17 Dec 2024 10:32:18 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B2=8C=EC=8B=9C=ED=8C=90=20view=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardComentArea.vue | 16 +++++++--
 src/components/board/BoardContent.vue    | 42 +++++++++---------------
 src/views/board/BoardView.vue            | 18 ++++++++--
 3 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/src/components/board/BoardComentArea.vue b/src/components/board/BoardComentArea.vue
index d7714ba..3dd6f32 100644
--- a/src/components/board/BoardComentArea.vue
+++ b/src/components/board/BoardComentArea.vue
@@ -1,7 +1,19 @@
 <template>
-    <div>
-
+    <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>
+                <div class="w-100">
+                    <textarea class="form-control" placeholder="주제에 대한 생각을 자유롭게 댓글로 표현해 주세요.&#13;&#10;여러분의 다양한 의견을 기다립니다."></textarea>
+                </div>
+            </div>
+        </div>
     </div>
+    <div class="mb-4 text-end">
+        <button class="btn btn-primary my-4">답변 쓰기</button>
+    </div>                                                  
 </template>
 
 <script>
diff --git a/src/components/board/BoardContent.vue b/src/components/board/BoardContent.vue
index 2cdf1d2..225a527 100644
--- a/src/components/board/BoardContent.vue
+++ b/src/components/board/BoardContent.vue
@@ -1,38 +1,26 @@
 <template>
-    <div class="col">
-        <div class="card">
-            <div class="card-header">
-                <BoardProfile profileName="만드레야2" />
-            </div>
-            <div class="card-body">
-                <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>
-                    </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>
-                </div>
-                <hr class="my-6">
-                <div class="d-flex min-150">
-                    <p class="mb-0">현재 뷰 사용중인데 리액트 공부가 해보고 싶습니다. 강의 추천해주십쇼! 리액트 1도 모릅니다.</p>
-                </div>
-                
-                <div class="mb-4 text-end">
-                    <button class="btn btn-primary my-4">답변 쓰기</button>
+    <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>
+        </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>
     </div>
+    <hr class="my-6">
+    <div class="d-flex min-150">
+        <p class="mb-0">현재 뷰 사용중인데 리액트 공부가 해보고 싶습니다. 강의 추천해주십쇼! 리액트 1도 모릅니다.</p>
+    </div>
 </template>
 
 <script setup>
-    import BoardProfile from './BoardProfile.vue';
+    import BoardComentArea from './BoardComentArea.vue';
+import BoardProfile from './BoardProfile.vue';
 </script>
 
 <style scoped>
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index 6f5fac8..23600d5 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -1,16 +1,30 @@
 <template>
     <div class="container-xxl flex-grow-1 container-p-y">
         <div class="row">
-            <BoardContent />
-            <BoardComment />
+            <div class="col">
+                <div class="card">
+                    <div class="card-header">
+                        <BoardProfile profileName="만드레야2"/>
+                    </div>
+                    <div class="card-body">
+                        <BoardContent />
+                        <BoardComentArea />
+                    </div>
+                    <div class="card-footer">
+                        <BoardComment />
+                    </div>
+                </div>
+            </div>
         </div>
     </div>
 </template>
 
 <script setup>
 
+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';
 
 </script>