Merge remote-tracking branch 'origin/main' into board-view-profile

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">
+                            <span class="text-muted me-3" v-if="likes != null">
-                                <i class="bx bx-like"></i> {{ likes || 0 }}
+                                <i class="bx bx-like"></i> {{ likes }}
                             </span>
-                            <span class="text-muted">
+                            <span class="text-muted" v-if="comments !== null">
-                                <i class="bx bx-comment"></i> {{ comments || 0 }}
+                                <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,

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"
+                :img="post.img || null" 
-                :category="post.category"
+                :category="post.category || ''" 
                 :title="post.title"
                 :content="post.content"
                 :date="post.date"
-                :views="post.views"
+                :views="post.views || 0" 
-                :likes="post.likes"
+                v-bind="getBoardCardProps(post)"
-                :comments="post.comments"
+                :attachment="post.attachment || false" 
-                :attachment="post.attachment"
+                @click="() => goDetail(post.id)" 
                 />
         </div>
     </div>
 </template>
 
-<script>
+<script setup>
+import { defineProps, defineEmits } from 'vue';
 import BoardCard from './BoardCard.vue';
 
-export default {
+const props = defineProps({
-    components: {
+    posts: {
-        BoardCard,
+        type: Array,
-    },
+        required: true,
-    props: {
+        default: () => [],
-        posts: {
+    }
-            type: Array,
+});
-            required: true,
+
-        },
+const emit = defineEmits(['click']);
-    },
+
-    emits: ['click'],
+// 상세 페이지 이동
-    methods: {
+const goDetail = (id) => {
-        handleClick(id) {
+    emit('click', id);
-            this.$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>
 

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>