From f853c4e25d21466ea925da309e30403be9f44e3b Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Mon, 3 Feb 2025 14:31:48 +0900
Subject: [PATCH] =?UTF-8?q?board-view-profile1=20=EB=A8=B8=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/board/BoardProfile.vue |  28 +++-
 src/components/list/BoardCard.vue     | 202 ++++++++++++--------------
 src/components/list/BoardCardList.vue |  18 ++-
 src/views/board/BoardList.vue         |  34 ++---
 src/views/board/BoardView.vue         |  88 +++++++++--
 5 files changed, 210 insertions(+), 160 deletions(-)

diff --git a/src/components/board/BoardProfile.vue b/src/components/board/BoardProfile.vue
index 9640046..c15a60b 100644
--- a/src/components/board/BoardProfile.vue
+++ b/src/components/board/BoardProfile.vue
@@ -10,13 +10,13 @@
                     <span>2024.12.10 10:46</span>
                     <template v-if="showDetail">
                         <span>
-                            <i class="fa-regular fa-eye"></i> 1
+                            <i class="fa-regular fa-eye"></i> {{ views }}
                         </span>
                         <span>
-                            <i class="fa-regular fa-thumbs-up"></i> 1
+                            <i class="fa-regular fa-thumbs-up"></i> {{ likes }}
                         </span>
                         <span>
-                            <i class="fa-regular fa-thumbs-down"></i> 1
+                            <i class="fa-regular fa-thumbs-down"></i> {{ dislikes }}
                         </span>
                     </template>
                 </div>
@@ -38,7 +38,7 @@
                         <i class='bx bx-trash'></i>
                     </button> -->
                 </template>
-                <BoardRecommendBtn :likeClicked="true" :dislikeClicked="false" :isRecommend="false" />
+                <BoardRecommendBtn v-if="!isChild" :isRecommend="false" />
             </template>
         </div>
     </div>
@@ -50,13 +50,12 @@ import axios from '@api';
 import DeleteButton from '../button/DeleteBtn.vue';
 import EditButton from '../button/EditBtn.vue';
 import BoardRecommendBtn from '../button/BoardRecommendBtn.vue';
-import { onMounted } from 'vue';
 
 // Vue Router 인스턴스
 const router = useRouter();
 
 // Props 정의
-defineProps({
+const props = defineProps({
     profileName: {
         type: String,
         default: '익명',
@@ -73,6 +72,22 @@ defineProps({
         type: Boolean,
         default: false,
     },
+    views: {
+        type: Number,
+        default: 0,
+    },
+    likes: {
+        type: Number,
+        default: null,
+    },
+    dislikes: {
+        type: Number,
+        default: null,
+    },
+    isChild: {
+        type: Boolean,
+        default: false,
+    }
 });
 
 const boardId = 100; //수정필요!!
@@ -89,7 +104,6 @@ const handleDelete = async () => {
             alert('게시물이 성공적으로 삭제되었습니다.');
             router.push({ name: 'BoardList' });
         } catch (error) {
-            console.error('게시물 삭제 중 오류 발생:', error);
             alert('게시물 삭제에 실패했습니다.');
         }
     }
diff --git a/src/components/list/BoardCard.vue b/src/components/list/BoardCard.vue
index 1ddac0f..3f22a7d 100644
--- a/src/components/list/BoardCard.vue
+++ b/src/components/list/BoardCard.vue
@@ -1,142 +1,124 @@
 <template>
-    <div class="card mb-3 shadow-sm">
-        <div class="row g-0">
-            <!-- 이미지 섹션 -->
-            <div v-if="img" class="col-sm-2">
-                <img
-                    :src="img"
-                    alt="이미지"
-                    class="img-fluid rounded-start"
-                    style="object-fit: cover; height: 100%; width: 100%;"
-                />
-            </div>
-            <!-- 게시물 내용 섹션 -->
-            <div :class="contentColClass">
-                <div class="card-body">
-                    <!-- 태그 -->
-                    <h6 class="badge rounded-pill bg-primary text-white mb-2">
-                        {{ category }}
-                    </h6>
-                    <!-- 제목 -->
-                    <h5 class="card-title">
-                        {{ title }}
-                        <span class="text-muted me-3" v-if="attachment">
-                            <i class="fa-solid fa-paperclip"></i>
-                        </span>
-                    </h5>
-                    <!-- 본문 -->
-                    <div class="card-text str_wrap my-5">{{ content }}</div>
-                    <!-- 날짜 -->
-                    <div class="d-flex flex-column flex-sm-row justify-content-between align-items-start">
-                        <small class="text-muted">{{ formattedDate }}</small>
-                        <!-- 조회수, 좋아요, 댓글 -->
-                        <div class="d-flex mt-2 mt-sm-0">
-                            <span class="text-muted me-3">
-                                <i class="fa-regular fa-eye"></i> {{ views || 0 }}
-                            </span>
-                            <span class="text-muted me-3" v-if="likes != null">
-                                <i class="bx bx-like"></i> {{ likes }}
-                            </span>
-                            <span class="text-muted" v-if="comments !== null">
-                                <i class="bx bx-comment"></i> {{ comments }}
-                            </span>
-                        </div>
-                    </div>
-                </div>
-            </div>
-        </div>
+    <div class="card mb-3 shadow-sm fixed-card" style="width: 18rem;">
+      <!-- 이미지가 있을 경우 card-img-top으로 표시 -->
+      <img
+        v-if="img"
+        :src="img"
+        class="card-img-top"
+        alt="이미지"
+        style="object-fit: cover; height: 100px;"
+      />
+      <div class="card-body">
+        <!-- 카테고리 태그 (존재할 경우) -->
+        <h6 v-if="category" class="badge rounded-pill bg-primary text-white mb-2">
+          {{ category }}
+        </h6>
+        <!-- 제목과 첨부파일 아이콘 -->
+        <h5 class="card-title">
+          {{ title }}
+          <span class="text-muted" v-if="attachment">
+            <i class="fa-solid fa-paperclip"></i>
+          </span>
+        </h5>
+        <!-- 본문 -->
+        <p class="card-text limit-two-lines">{{ content }}</p>
+        <!-- 날짜 및 조회수, 좋아요, 댓글 -->
+        <p class="card-text">
+          <small class="text-muted">{{ formattedDate }}</small>
+          <div class="d-flex mt-2 mt-sm-0">
+            <span class="text-muted me-3">
+              <i class="fa-regular fa-eye"></i> {{ views || 0 }}
+            </span>
+            <span class="text-muted me-3" v-if="comments !== null">
+              <i class="bx bx-comment"></i> {{ comments }}
+            </span>
+            <span class="text-muted me-3" v-if="likes != null">
+              <i class="bx bx-like"></i> {{ likes }}
+            </span>
+            <span class="text-muted me-3" v-if="dislikes != null">
+              <i class="bx bx-dislike"></i> {{ dislikes }}
+            </span>
+          </div>
+        </p>
+      </div>
     </div>
-</template>
+  </template>
 
-<script setup>
-import { computed } from 'vue';
-import { defineProps } from 'vue';
+  <script setup>
+  import { computed } from 'vue';
+  import { defineProps } from 'vue';
 
-// Props 정의
-const props = defineProps({
+  const props = defineProps({
     img: {
-        type: String,
-        default: null,
+      type: String,
+      default: null,
     },
     category: {
-        type: String,
-        required: false,
+      type: String,
+      required: false,
     },
     title: {
-        type: String,
-        required: true,
+      type: String,
+      required: true,
     },
     content: {
-        type: String,
-        required: true,
+      type: String,
+      required: true,
     },
     date: {
-        type: String,
-        required: true,
+      type: String,
+      required: true,
     },
     views: {
-        type: Number,
-        default: 0,
+      type: Number,
+      default: 0,
     },
     likes: {
-        type: Number,
-        default: null,
+      type: Number,
+      default: null,
+    },
+    dislikes: {
+      type: Number,
+      default: null,
     },
     comments: {
-        type: Number,
-        default: null,
+      type: Number,
+      default: null,
     },
     attachment: {
-        type: Boolean,
-        default: false,
+      type: Boolean,
+      default: false,
     }
-});
+  });
 
-// computed 속성
-const contentColClass = computed(() => {
-    return props.img ? 'col-sm-10 col-12' : 'col-sm-12';
-});
+  const formattedDate = computed(() => {
+    const dateObj = new Date(props.date);
+    return `${dateObj.getFullYear()}-${String(dateObj.getMonth() + 1).padStart(2, '0')}-${String(dateObj.getDate()).padStart(2, '0')} ${String(dateObj.getHours()).padStart(2, '0')}:${String(dateObj.getMinutes()).padStart(2, '0')}`;
+  });
+  </script>
 
-// formattedDate을 computed로 정의
-const formattedDate = computed(() => {
-    const date = new Date(props.date);
-    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(
-        date.getDate()
-    ).padStart(2, "0")} ${String(date.getHours()).padStart(2, "0")}:${String(
-        date.getMinutes()
-    ).padStart(2, "0")}`;
-});
-</script>
-
-<style>
-/* 카드 스타일 */
-.card {
+  <style scoped>
+  .card {
     border: 1px solid #e6e6e6;
     border-radius: 8px;
     transition: transform 0.2s ease-in-out;
-}
+  }
 
-.card:hover {
+  .card:hover {
     transform: scale(1.02);
-}
+  }
 
-/* 텍스트 줄임 표시 */
-.str_wrap {
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-}
+  /* card-img-top의 모서리 둥글게 처리 */
+  .card-img-top {
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+  }
 
-/* 이미지 스타일 */
-.img-fluid {
-    border-radius: 8px 0 0 8px;
+  /* 내용 텍스트를 두 줄로 제한 */
+.limit-two-lines {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
-
-/* 태그 배지 스타일 */
-.badge {
-    font-size: 0.8rem;
-    padding: 5px 10px;
-}
-</style>
+  </style>
diff --git a/src/components/list/BoardCardList.vue b/src/components/list/BoardCardList.vue
index f727c6e..430a73d 100644
--- a/src/components/list/BoardCardList.vue
+++ b/src/components/list/BoardCardList.vue
@@ -1,21 +1,25 @@
 <template>
-    <div class="mt-4">
+     <div class="container my-4">
+        <div class="row">
         <div v-if="posts.length === 0" class="text-center">
             <p class="text-muted mt-4">게시물이 없습니다.</p>
         </div>
-        <div v-for="post in posts" :key="post.id" @click="handleClick(post.id)">
+        <div class="col-md-3 mb-4 d-flex justify-content-center" v-for="post in posts" :key="post.id" @click="handleClick(post.id)">
             <BoardCard
-                :img="post.img || null" 
-                :category="post.category || ''" 
+                :img="post.img || null"
+                :category="post.category || ''"
                 :title="post.title"
                 :content="post.content"
                 :date="post.date"
-                :views="post.views || 0" 
+                :views="post.views || 0"
+                :likes="post.likes"
+                :dislikes="post.dislikes"
                 v-bind="getBoardCardProps(post)"
-                :attachment="post.attachment || false" 
-                @click="() => goDetail(post.id)" 
+                :attachment="post.attachment || false"
+                @click="() => goDetail(post.id)"
                 />
         </div>
+        </div>
     </div>
 </template>
 
diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index 1c1c2c3..89eb2e8 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -2,7 +2,7 @@
     <div class="container flex-grow-1 container-p-y">
         <div class="row mb-4">
             <!-- 검색창 -->
-            <div class="container col-9 px-10 ">
+            <div class="container col-11 px-10 ">
                 <search-bar @update:data="search" />
             </div>
             <!-- 새 글쓰기 -->
@@ -13,23 +13,7 @@
             </div>
         </div>
 
-        <div class="container flex-grow-1 container-p-y col-11">
-
-        <!-- 공지사항 리스트 -->
-        <div v-if="pagination.currentPage === 1" class="mb-8">
-            <div class="row g-3">
-                <h3>공지사항</h3>
-            </div>
-            <div class="row">
-                <BoardCardList :posts="noticeList" @click="goDetail" />
-            </div>
-        </div>
-
-        <!-- 일반 리스트 -->
-        <div>
-            <div class="row g-3">
-                <h3 class="col">일반게시판</h3>
-
+        <div class="row g-3">
                 <!-- 셀렉트 박스 -->
                 <div class="col-12 col-md-auto">
                     <select class="form-select" v-model="selectedOrder" @change="handleSortChange">
@@ -38,6 +22,16 @@
                     </select>
                 </div>
             </div>
+
+        <!-- 공지사항 리스트 -->
+        <div v-if="pagination.currentPage === 1" class="mb-8">
+            <div class="row">
+                <BoardCardList :posts="noticeList" @click="goDetail" />
+            </div>
+        </div>
+
+        <!-- 일반 리스트 -->
+        <div>
             <div class="row">
                 <BoardCardList :posts="generalList" @click="goDetail" />
             </div>
@@ -64,7 +58,6 @@
             </div>
         </div>
     </div>
-    </div>
 </template>
 
 <script setup>
@@ -133,7 +126,8 @@ const fetchGeneralPosts = async (page = 1) => {
             id: post.id || index,
             img: post.firstImageUrl || null,
             views: post.cnt || 0,
-            likes: post.likeCount != null ? post.likeCount : null,
+            likes: post.likeCount != null ? post.dislikeCount : null,
+            dislikes: post.dislikeCount != null ? post.likeCount : null,
             comments: post.commentCount != null ? post.commentCount : null,
             attachment: post.hasAttachment || false,
             content: post.plainContent || '',
diff --git a/src/views/board/BoardView.vue b/src/views/board/BoardView.vue
index a33324a..2f0ff56 100644
--- a/src/views/board/BoardView.vue
+++ b/src/views/board/BoardView.vue
@@ -5,28 +5,62 @@
                 <div class="card">
                     <!-- 프로필 헤더 -->
                     <div class="card-header">
-                        <BoardProfile :boardId="currentBoardId" :profileName="profileName" />
-                        <hr/>
+                        <BoardProfile
+                            :boardId="currentBoardId"
+                            :profileName="profileName"
+                            :views="views"
+                            :likes="likes"
+                            :dislikes="dislikes"
+                            class="pb-6 border-bottom"
+                        />
                     </div>
                     <!-- 게시글 내용 -->
                     <div class="card-body">
-                        <h5 class="mb-4">{{ boardTitle }}</h5>
-                        <!-- HTML 콘텐츠 렌더링 -->
-                        <div class="board-content text-body" style="line-height: 1.6;"  v-html="$common.contentToHtml(boardContent)">
 
+                        <div class="d-flex justify-content-between align-items-center flex-wrap mb-6 gap-2">
+                            <!-- 제목 섹션 -->
+                            <div class="me-1">
+                                <h5 class="mb-4">{{ boardTitle }}</h5>
+                            </div>
+
+                            <!-- 첨부파일 섹션 -->
+                            <div v-if="attachments" 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">{{ dropdownItems.length }}</span>) -->
+                                </button>
+                                <!-- <ul class="dropdown-menu">
+                                    <li v-for="(item, index) in dropdownItems" :key="index">
+                                        <a class="dropdown-item" href="javascript:void(0);">
+                                            {{ item.label }}
+                                        </a>
+                                    </li>
+                                </ul> -->
+                            </div>
                         </div>
-                        
+
+                        <!-- HTML 콘텐츠 렌더링 -->
+                        <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"/>
+                            <BoardRecommendBtn
+                                :bigBtn="true"
+                                :boardId="currentBoardId"
+                                :commentId="null"
+                                :likeCount="currentLikeCount"
+                                :dislikeCount="currentDislikeCount"
+                                @updateReaction="handleUpdateReaction"
+                            />
                         </div>
 
                         <!-- 첨부파일 목록 -->
-                        <ul v-if="attachments.length" class="attachments mt-4 list-unstyled">
+                        <!-- <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>
+                        </ul> -->
 
                         <!-- 댓글 영역 -->
                         <BoardComentArea :comments="comments" />
@@ -38,6 +72,8 @@
                     </div>
                     <div class="card-footer">
                         <BoardCommentList/>
+
+                        <Pagination/>
                     </div>
                 </div>
             </div>
@@ -47,21 +83,24 @@
 
 <script setup>
 import BoardComentArea from '@c/board/BoardComentArea.vue';
-import BoardCommentList from '@/components/board/BoardCommentList.vue';
 import BoardProfile from '@c/board/BoardProfile.vue';
+import BoardCommentList from '@/components/board/BoardCommentList.vue';
 import BoardRecommendBtn from '@/components/button/BoardRecommendBtn.vue';
+import Pagination from '@/components/pagination/Pagination.vue';
 import { ref, onMounted } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
 import axios from '@api';
-import Quill from 'quill';
 
 // 게시물 데이터 상태
 const profileName = ref('익명 사용자');
 const boardTitle = ref('제목 없음');
 const boardContent = ref('');
-const convertedContent = ref('내용 없음');
 const comments = ref([]);
 const attachments = ref([]);
+const views = ref(0);
+const likes = ref(0);
+const dislikes = ref(0);
+const attachment = ref(false);
 
 // 라우트에서 ID 가져오기
 const route = useRoute();
@@ -81,19 +120,36 @@ const fetchBoardDetails = async () => {
 
         // API 응답 데이터 반영
         const boardDetail = data.boardDetail || {};
-        profileName.value = boardDetail.author || '익명 사용자';
-        boardTitle.value = boardDetail.title || '제목 없음';
-        boardContent.value = boardDetail.content || '';
 
+        profileName.value = data.author || '익명 사용자';
+        boardTitle.value = data.title || '제목 없음';
+        boardContent.value = data.content || '';
+        views.value = data.cnt || 0;
+        likes.value = data.likeCount || 0;
+        dislikes.value = data.dislikeCount || 0;
+        attachment.value = data.hasAttachment || null;
 
         attachments.value = data.attachments || [];
         comments.value = data.comments || [];
     } catch (error) {
-        console.error('게시물 가져오기 오류:', error);
         alert('게시물 데이터를 불러오는 중 오류가 발생했습니다.');
     }
 };
 
+const currentLikeCount = ref(10);
+const currentDislikeCount = ref(2);
+
+// 좋아요, 싫어요
+const handleUpdateReaction = async ({ type, boardId, commentId }) => {
+    try {
+        const cmtId = commentId !== null ? commentId : 0;
+
+        const response = await axios.post(`/board/${boardId}/${cmtId}/reaction`, { type });
+    } catch (error) {
+        alert('반응을 업데이트하는 중 오류 발생');
+    }
+};
+
 // 컴포넌트 마운트 시 데이터 로드
 onMounted(() => {
     fetchBoardDetails();