프로필, 댓글 디자인 정리

src/components/board/BoardComment.vue

@@ -1,56 +1,74 @@
 <template>
-    <ul class="list-unstyled">
-        <li>
-            <BoardProfile profileName=곤데리 :showDetail="false" :author="true" />
-            <div class="mt-2">저도 궁금합니다.</div>
-            <PlusButton  @click="toggleComment"/>
-            <BoardComentArea v-if="comment" />
-            <ul class="list-unstyled twoDepth">
-                <li>
-                    <BoardProfile profileName=곤데리2 :showDetail="false" />
-                    <div class="mt-2">저도 궁금합니다.</div>
-                    <BoardComentArea v-if="comment" />
-                </li>
-            </ul>
-        </li>
-        <li>
-            <BoardProfile profileName=곤데리 :showDetail="false" />
-            <div class="mt-2">저도 궁금합니다.</div>
-            <PlusButton  @click="toggleComment"/>
-            <BoardComentArea v-if="comment" />
-        </li>
-        <li>
-            <BoardProfile profileName=곤데리 :showDetail="false" />
-            <div class="mt-2">저도 궁금합니다.</div>
-            <PlusButton  @click="toggleComment"/>
-            <BoardComentArea v-if="comment" />
-        </li>
-    </ul>
-    <Pagination/>
+    <div>
+        <BoardProfile :profileName="comment.author" :showDetail="false" :author="true" />
+        <div class="my-6">
+            <p>{{ comment.content }}</p>
+        </div>
+        <PlusButton v-if="isPlusButton" @click="toggleComment"/>
+        <BoardComentArea v-if="isComment" @submit="submitComment"/>
+        
+        <!-- 대댓글 -->
+        <ul v-if="comment.children && comment.children.length" class="list-unstyled">
+            <li
+                v-for="child in comment.children"
+                :key="child.id"
+                class="pt-6 ps-10 border-top"
+                style="border-color:blue !important;"
+            >
+                <BoardComment :comment="child" :isPlusButton="false" @submitComment="addChildComment" />
+            </li>
+        </ul>
+        <!-- <ul class="list-unstyled twoDepth">
+            <li>
+                <BoardProfile profileName=곤데리2 :showDetail="false" />
+                <div class="mt-2">저도 궁금합니다.</div>
+                <BoardComentArea v-if="comment" />
+            </li>
+        </ul> -->
+        <!-- <BoardProfile profileName=곤데리 :showDetail="false" />
+        <div class="mt-2">저도 궁금합니다.</div>
+        <PlusButton  @click="toggleComment"/>
+        <BoardComentArea v-if="comment" /> -->
+    </div>
 </template>
 
 <script setup>
-
 import BoardProfile from './BoardProfile.vue';
 import BoardComentArea from './BoardComentArea.vue';
-import { ref, computed } from 'vue';
-import Pagination from '../pagination/Pagination.vue';
 import PlusButton from '../button/PlusBtn.vue';
+import { ref } from 'vue';
 import { defineEmits } from 'vue';
 
-const comment = ref(false);
-
-const toggleComment = () => {
-    comment.value = !comment.value
-};
+const props = defineProps({
+  comment: {
+    type: Object,
+    required: true,
+  },
+  isPlusButton: {
+    type: Boolean,
+    default: true,
+  }
+});
 
 // emits 정의
 const emit = defineEmits(['submitComment']);
 
+// 댓글 입력 창 토글
+const isComment = ref(false);
+const toggleComment = () => {
+    isComment.value = !isComment.value;
+};
+
+// 부모 컴포넌트에 대댓글 추가 요청
+const addChildComment = (parentId, newComment) => {
+  emit('submitComment', parentId, newComment);
+};
+
+
 </script>
 
 <style scoped>
-    .twoDepth {
+    /* .twoDepth {
         margin-top: 10px;
         padding-left: 40px;
     }
@@ -66,5 +84,5 @@ const emit = defineEmits(['submitComment']);
     .btn-text-primary:active,
     .btn-text-primary:focus {
         background-color: transparent
-    }
+    } */
 </style>

src/components/board/BoardCommentList.vue

@@ -0,0 +1,52 @@
+<template>
+    <ul class="list-unstyled mt-10">
+        <li
+            v-for="comment in comments"
+            :key="comment.id"
+            class="mt-6 border-bottom"
+            style="border-color:red !important;"
+        >
+            <BoardComment :comment="comment" @submitComment="addComment" />
+        </li>
+    </ul>
+
+    <Pagination/>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import Pagination from '../pagination/Pagination.vue';
+import BoardComment from './BoardComment.vue'
+
+const comments = ref([
+  {
+    id: 1,
+    author: '홍길동',
+    content: '저도 궁금합니다.',
+    children: [
+      {
+        id: 2,
+        author: '사용자1',
+        content: '저도요!',
+      },
+      {
+        id: 3,
+        author: '사용자2',
+        content: '저도..',
+      },
+    ],
+  },
+  {
+    id: 4,
+    author: '사용자4',
+    content: '흥미로운 주제네요.',
+    children: [],
+  },
+  {
+    id: 5,
+    author: '사용자5',
+    content: '우오아아아아아앙',
+    children: [],
+  },
+]);
+</script>

src/components/board/BoardProfile.vue

@@ -1,30 +1,45 @@
 <template>
-    <div class="d-flex flex-column flex-sm-row align-items-center">
+    <div class="d-flex align-items-center flex-wrap">
         <div class="d-flex align-items-center">
-            <!-- 프로필 이미지 부분 -->
             <div class="avatar me-2" v-if="unknown">
                 <img src="/img/avatars/2.png" alt="Avatar" class="rounded-circle" />
             </div>
             <div class="me-2">
                 <h6 class="mb-0">{{ profileName }}</h6>
-                <div>
-                    <span class="me-3">2024.12.10 10:46</span>
+                <div class="profile-detail">
+                    <span>2024.12.10 10:46</span>
                     <template v-if="showDetail">
-                        <span class="me-2">
-                            <i class="fa-regular fa-eye"></i> {{ views }}
+                        <span>
+                            <i class="fa-regular fa-eye"></i> 1
                         </span>
-                        <span class="me-2">
-                            <i class="bx bx-comment"></i> {{ comments }}
+                        <span>
+                            <i class="fa-regular fa-thumbs-up"></i> 1
+                        </span>
+                        <span>
+                            <i class="fa-regular fa-thumbs-down"></i> 1
                         </span>
                     </template>
                 </div>
             </div>
         </div>
-        <div class="ms-auto w-100 mt-2 mt-sm-0">
+        <div class="ms-auto btn-area">
             <template v-if="showDetail">
-                <EditButton @click="handleEdit" class="me-2" style="border:1px solid blue"/>
+                <EditButton @click="handleEdit" />
                 <DeleteButton @click="handleDelete" />
             </template>
+            <template v-else>
+                <template v-if="author">
+                    <EditButton />
+                    <DeleteButton />
+                    <!-- <button class="btn author btn-label-primary btn-icon" @click="handleEdit">
+                        <i class='bx bx-edit-alt'></i>
+                    </button>
+                    <button class="btn author btn-label-primary btn-icon" @click="handleDelete">
+                        <i class='bx bx-trash'></i>
+                    </button> -->
+                </template>
+                <BoardRecommendBtn :likeClicked="true" :dislikeClicked="false" :isRecommend="false" />
+            </template>
         </div>
     </div>
 </template>
@@ -41,7 +56,7 @@ import { onMounted } from 'vue';
 const router = useRouter();
 
 // Props 정의
-const props = defineProps({
+defineProps({
     profileName: {
         type: String,
         default: '익명',
@@ -54,17 +69,9 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
-    // author: {
-    //     type: Boolean,
-    //     default: true,
-    // },
-    views: {
-        type: Number,
-        default: 0,
-    },
-    comments: {
-        type: Number,
-        default: 0,
+    author: {
+        type: Boolean,
+        default: false,
     },
 });
 
@@ -91,10 +98,26 @@ const handleDelete = async () => {
 </script>
 
 <style scoped>
-/* @media screen and (max-width: 450px) {
+.profile-detail span ~ span {
+    margin-left: 5px;
+}
+
+.ms-auto button + button {
+    margin-left: 5px;
+}
+
+.btn.author {
+    height: 30px;
+}
+
+@media screen and (max-width: 450px) {
     .btn-area {
         margin-top: 10px;
         width: 100%;
     }
-} */
+
+    .btn.author {
+        height: 30px;
+    }
+}
 </style>

src/components/button/BoardRecommendBtn.vue

@@ -1,4 +1,4 @@
-<template>
+<template v-if="isRecommend">
     <button class="btn btn-label-primary btn-icon" :class="likeClicked ? 'clicked' : '', bigBtn ? 'big' : '' ">
         <i class="fa-regular fa-thumbs-up"></i> <span class="num">1</span>
     </button>
@@ -20,6 +20,10 @@ defineProps({
     bigBtn : {
         type :Boolean,
         default : false,
+    },
+    isRecommend: {
+        type:Boolean,
+        default:true,
     }
 });
 </script>

src/views/board/BoardView.vue

@@ -6,6 +6,7 @@
                     <!-- 프로필 헤더 -->
                     <div class="card-header">
                         <BoardProfile :boardId="currentBoardId" :profileName="profileName" />
+                        <hr/>
                     </div>
                     <!-- 게시글 내용 -->
                     <div class="card-body">
@@ -14,20 +15,29 @@
                         <div class="board-content text-body" style="line-height: 1.6;"  v-html="$common.contentToHtml(boardContent)">
 
                         </div>
+                        
+                        <!-- 좋아요 버튼 -->
+                        <div class="row justify-content-center my-10">
+                            <BoardRecommendBtn :bigBtn="true"/>
+                        </div>
+
                         <!-- 첨부파일 목록 -->
                         <ul v-if="attachments.length" class="attachments mt-4 list-unstyled">
                             <li v-for="(attachment, index) in attachments" :key="index" class="mb-2">
                                 <a :href="attachment.url" target="_blank" class="text-decoration-none">{{ attachment.name }}</a>
                             </li>
                         </ul>
+
                         <!-- 댓글 영역 -->
                         <BoardComentArea :comments="comments" />
-                    </div>
-                    <!-- 수정 버튼 -->
-                    <div class="card-footer d-flex justify-content-end">
-                        <button class="btn btn-primary" @click="goToEditPage">
+
+                        <!-- 수정 버튼 -->
+                        <!-- <button class="btn btn-primary" @click="goToEditPage">
                             글 수정
-                        </button>
+                        </button> -->
+                    </div>
+                    <div class="card-footer">
+                        <BoardCommentList/>
                     </div>
                 </div>
             </div>
@@ -37,7 +47,9 @@
 
 <script setup>
 import BoardComentArea from '@c/board/BoardComentArea.vue';
+import BoardCommentList from '@/components/board/BoardCommentList.vue';
 import BoardProfile from '@c/board/BoardProfile.vue';
+import BoardRecommendBtn from '@/components/button/BoardRecommendBtn.vue';
 import { ref, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import axios from '@api';