From 3e6c9f2c976146c70707bd0f1ca7b9048b386df6 Mon Sep 17 00:00:00 2001
From: kimdaae328 <kimdaae328@gmail.com>
Date: Tue, 21 Jan 2025 15:00:14 +0900
Subject: [PATCH 1/4] =?UTF-8?q?=EA=B3=B5=EC=A7=80=EC=82=AC=ED=95=AD=20?=
 =?UTF-8?q?=EC=BD=94=EB=A9=98=ED=8A=B8=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20?=
 =?UTF-8?q?=EC=85=80=EB=A0=89=ED=8A=B8=20=EB=B0=95=EC=8A=A4=20=EC=9C=84?=
 =?UTF-8?q?=EC=B9=98=20=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/list/BoardCard.vue     | 12 +++---
 src/components/list/BoardCardList.vue | 58 ++++++++++++++++-----------
 src/components/search/SearchBar.vue   |  2 +-
 src/views/board/BoardList.vue         | 48 +++++++++++-----------
 4 files changed, 66 insertions(+), 54 deletions(-)

diff --git a/src/components/list/BoardCard.vue b/src/components/list/BoardCard.vue
index 327e1e7..bbe6551 100644
--- a/src/components/list/BoardCard.vue
+++ b/src/components/list/BoardCard.vue
@@ -34,11 +34,11 @@
                             <span class="text-muted me-3">
                                 <i class="fa-regular fa-eye"></i> {{ views || 0 }}
                             </span>
-                            <span class="text-muted me-3">
-                                <i class="bx bx-like"></i> {{ likes || 0 }}
+                            <span class="text-muted me-3" v-if="likes != null">
+                                <i class="bx bx-like"></i> {{ likes }}
                             </span>
-                            <span class="text-muted">
-                                <i class="bx bx-comment"></i> {{ comments || 0 }}
+                            <span class="text-muted" v-if="comments !== null">
+                                <i class="bx bx-comment"></i> {{ comments }}
                             </span>
                         </div>
                     </div>
@@ -80,11 +80,11 @@ const props = defineProps({
     },
     likes: {
         type: Number,
-        default: 0,
+        default: null,
     },
     comments: {
         type: Number,
-        default: 0,
+        default: null,
     },
     attachment: {
         type: Boolean,
diff --git a/src/components/list/BoardCardList.vue b/src/components/list/BoardCardList.vue
index 23f55ca..f727c6e 100644
--- a/src/components/list/BoardCardList.vue
+++ b/src/components/list/BoardCardList.vue
@@ -1,43 +1,53 @@
 <template>
     <div class="mt-4">
         <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)">
             <BoardCard
-                :img="post.img"
-                :category="post.category"
+                :img="post.img || null" 
+                :category="post.category || ''" 
                 :title="post.title"
                 :content="post.content"
                 :date="post.date"
-                :views="post.views"
-                :likes="post.likes"
-                :comments="post.comments"
-                :attachment="post.attachment"
+                :views="post.views || 0" 
+                v-bind="getBoardCardProps(post)"
+                :attachment="post.attachment || false" 
+                @click="() => goDetail(post.id)" 
                 />
         </div>
     </div>
 </template>
 
-<script>
+<script setup>
+import { defineProps, defineEmits } from 'vue';
 import BoardCard from './BoardCard.vue';
 
-export default {
-    components: {
-        BoardCard,
-    },
-    props: {
-        posts: {
-            type: Array,
-            required: true,
-        },
-    },
-    emits: ['click'],
-    methods: {
-        handleClick(id) {
-            this.$emit('click', id);
-        },
-    },
+const props = defineProps({
+    posts: {
+        type: Array,
+        required: true,
+        default: () => [],
+    }
+});
+
+const emit = defineEmits(['click']);
+
+// 상세 페이지 이동
+const goDetail = (id) => {
+    emit('click', id);
+};
+
+// 없는 데이터는 상위 페이지에서 삭제해도 되게끔 설정
+const getBoardCardProps = (post) => {
+    const boardCardProps = {};
+    if ('likes' in post) {
+        boardCardProps.likes = post.likes;
+    }
+    if ('comments' in post) {
+        boardCardProps.comments = post.comments;
+    }
+    return boardCardProps;
 };
 </script>
 
diff --git a/src/components/search/SearchBar.vue b/src/components/search/SearchBar.vue
index 56a918b..a9c1052 100644
--- a/src/components/search/SearchBar.vue
+++ b/src/components/search/SearchBar.vue
@@ -1,6 +1,6 @@
 <template>
     <div class="input-group mb-3 d-flex">
-        <input type="text" class="form-control bg-white" placeholder="Search" @change="search" />
+        <input type="text" class="form-control" placeholder="Search" @change="search" />
         <button type="button" class="btn btn-primary"><i class="bx bx-search bx-md"></i></button>
     </div>
 </template>
diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index 2f5d056..d5e0a45 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -1,6 +1,5 @@
 <template>
     <div class="container-xxl flex-grow-1 container-p-y">
-        <!-- 상단 바: 검색창, 정렬 셀렉트 박스, 새 글쓰기 버튼 -->
         <div class="row mb-4">
             <!-- 검색창 -->
             <div class="col">
@@ -9,31 +8,36 @@
         </div>
 
         <div class="row">
-            <!-- 정렬 셀렉트 박스 -->
-            <div class="col-md-3 mb-4">
-                <select class="form-select" v-model="selectedOrder" @change="handleSortChange">
-                    <option value="date">최신날짜</option>
-                    <option value="views">조회수</option>
-                </select>
-            </div>
-
-            <!-- 새 글쓰기 버튼 -->
-            <div class="col-auto ms-auto mb-4">
+            <!-- 새 글쓰기 -->
+            <div class="mb-4">
                 <router-link to="/board/write">
                     <WriteButton />
                 </router-link>
             </div>
         </div>
 
-        <!-- 공지사항 게시물 리스트 -->
-        <div class="row g-3 mt-2 mt-md-8">
+        <!-- 공지사항 리스트 -->
+        <div class="row g-3">
             <h3>공지사항</h3>
-            <board-card :posts="noticeList" @click="goDetail" />
         </div>
-        <!-- 일반 게시물 리스트 -->
+        <div class="row">
+            <BoardCardList :posts="noticeList" @click="goDetail" />
+        </div>
+
+        <!-- 일반 리스트 -->
         <div class="row g-3 mt-8">
-            <h3>일반게시판</h3>
-            <board-card :posts="generalList" @click="goDetail" />
+            <h3 class="col">일반게시판</h3>
+
+            <!-- 셀렉트 박스 -->
+            <div class="col-12 col-md-auto">
+                <select class="form-select" v-model="selectedOrder" @change="handleSortChange">
+                    <option value="date">최신날짜</option>
+                    <option value="views">조회수</option>
+                </select>
+            </div>
+        </div>
+        <div class="row">
+            <BoardCardList :posts="generalList" @click="goDetail" />
         </div>
 
         <!-- 페이지네이션 -->
@@ -61,7 +65,7 @@
 
 <script setup>
 import { ref, computed, onMounted } from 'vue';
-import BoardCard from '@/components/list/BoardCardList.vue';
+import BoardCardList from '@/components/list/BoardCardList.vue';
 import Pagination from '@c/pagination/Pagination.vue';
 import SearchBar from '@c/search/SearchBar.vue';
 import router from '@/router';
@@ -102,7 +106,7 @@ const search = (e) => {
 };
 
 // 정렬 변경 핸들러
-const handleSortChange = (event) => {
+const handleSortChange = () => {
     fetchGeneralPosts(1);
 };
 
@@ -125,8 +129,8 @@ const fetchGeneralPosts = async (page = 1) => {
             id: post.id || index,
             img: post.img || null,
             views: post.cnt || 0,
-            likes: post.likeCount || 0,
-            comments: post.commentCount || 0,
+            likes: post.likeCount != null ? post.likeCount : null,
+            comments: post.commentCount != null ? post.commentCount : null,
             attachment: post.hasAttachment || false,
         }));
 
@@ -164,8 +168,6 @@ const fetchNoticePosts = async () => {
             id: post.id || index,
             img: post.img || null,
             views: post.cnt || 0,
-            likes: post.likeCount || 0,
-            comments: post.commentCount || 0,
             attachment: post.hasAttachment || false,
         }));
     } else {

From 27e474a83772d5a5e02c6c48aee146aaff53b4f3 Mon Sep 17 00:00:00 2001
From: kimdaae328 <kimdaae328@gmail.com>
Date: Tue, 21 Jan 2025 15:27:11 +0900
Subject: [PATCH 2/4] =?UTF-8?q?=EA=B3=B5=EC=A7=80=EC=82=AC=ED=95=AD=20?=
 =?UTF-8?q?=EC=B2=AB=EB=B2=88=EC=A7=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=EC=97=90=EC=84=9C=EB=A7=8C=20=EB=82=98=EC=98=A4=EA=B2=8C=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/board/BoardList.vue | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index d5e0a45..a4ee082 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -17,11 +17,13 @@
         </div>
 
         <!-- 공지사항 리스트 -->
-        <div class="row g-3">
-            <h3>공지사항</h3>
-        </div>
-        <div class="row">
-            <BoardCardList :posts="noticeList" @click="goDetail" />
+        <div v-if="pagination.currentPage === 1">
+            <div class="row g-3">
+                <h3>공지사항</h3>
+            </div>
+            <div class="row">
+                <BoardCardList :posts="noticeList" @click="goDetail" />
+            </div>
         </div>
 
         <!-- 일반 리스트 -->

From 84364e9fda4c8034a6f4a900fed229579477e869 Mon Sep 17 00:00:00 2001
From: kimdaae328 <kimdaae328@gmail.com>
Date: Tue, 21 Jan 2025 15:31:53 +0900
Subject: [PATCH 3/4] =?UTF-8?q?=EA=B0=84=EA=B2=A9=EC=A1=B0=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/board/BoardList.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index a4ee082..1f08359 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -17,7 +17,7 @@
         </div>
 
         <!-- 공지사항 리스트 -->
-        <div v-if="pagination.currentPage === 1">
+        <div v-if="pagination.currentPage === 1" class="mb-8">
             <div class="row g-3">
                 <h3>공지사항</h3>
             </div>
@@ -27,7 +27,7 @@
         </div>
 
         <!-- 일반 리스트 -->
-        <div class="row g-3 mt-8">
+        <div class="row g-3">
             <h3 class="col">일반게시판</h3>
 
             <!-- 셀렉트 박스 -->

From e4700b0ff80157f15361164bcb059281c390febf Mon Sep 17 00:00:00 2001
From: kimdaae328 <kimdaae328@gmail.com>
Date: Tue, 21 Jan 2025 15:33:39 +0900
Subject: [PATCH 4/4] =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/board/BoardList.vue | 24 +++++++++++++-----------
 1 file changed, 13 insertions(+), 11 deletions(-)

diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index 1f08359..87c4d0a 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -27,19 +27,21 @@
         </div>
 
         <!-- 일반 리스트 -->
-        <div class="row g-3">
-            <h3 class="col">일반게시판</h3>
+        <div>
+            <div class="row g-3">
+                <h3 class="col">일반게시판</h3>
 
-            <!-- 셀렉트 박스 -->
-            <div class="col-12 col-md-auto">
-                <select class="form-select" v-model="selectedOrder" @change="handleSortChange">
-                    <option value="date">최신날짜</option>
-                    <option value="views">조회수</option>
-                </select>
+                <!-- 셀렉트 박스 -->
+                <div class="col-12 col-md-auto">
+                    <select class="form-select" v-model="selectedOrder" @change="handleSortChange">
+                        <option value="date">최신날짜</option>
+                        <option value="views">조회수</option>
+                    </select>
+                </div>
+            </div>
+            <div class="row">
+                <BoardCardList :posts="generalList" @click="goDetail" />
             </div>
-        </div>
-        <div class="row">
-            <BoardCardList :posts="generalList" @click="goDetail" />
         </div>
 
         <!-- 페이지네이션 -->