BoardCard 수정 - 컴포넌트 분리

src/components/list/BoardCard.vue

@@ -1,42 +1,37 @@
 <template>
-    <div class="container mt-4">
+    <div class="card mb-3 shadow-sm">
-        <div v-if="posts.length === 0" class="text-center">
+        <div class="row g-0">
-            게시물이 없습니다.
+            <!-- 이미지 섹션 -->
-        </div>
+            <div v-if="img" class="col-md-2">
-        <div v-for="post in posts" :key="post.id" class="card mb-3 shadow-sm">
+                <img
-            <div class="row g-0">
+                    :src="img"
-                <!-- 이미지 섹션 -->
+                    alt="이미지"
-                <div v-if="post.img" class="col-md-2">
+                    class="img-fluid rounded-start"
-                    <img
+                    style="object-fit: cover; height: 100%; width: 100%;"
-                        :src="post.img"
+                />
-                        alt="이미지"
+            </div>
-                        class="img-fluid rounded-start"
+            <!-- 게시물 내용 섹션 -->
-                        style="object-fit: cover; height: 100%; width: 100%;"
+            <div class="col-md-10">
-                    />
+                <div class="card-body">
-                </div>
+                    <!-- 태그 -->
-                <!-- 게시물 내용 섹션 -->
+                    <h6 class="badge rounded-pill bg-primary text-white mb-2">
-                <div class="col-md-10">
+                        {{ category }}
-                    <div class="card-body">
+                    </h6>
-                        <!-- 태그 -->
+                    <!-- 제목 -->
-                        <h6 class="badge rounded-pill bg-primary text-white mb-2">
+                    <h5 class="card-title">{{ title }}</h5>
-                            {{ post.category }}
+                    <!-- 본문 -->
-                        </h6>
+                    <p class="card-text str_wrap">{{ content }}</p>
-                        <!-- 제목 -->
+                    <!-- 날짜 -->
-                        <h5 class="card-title">{{ post.title }}</h5>
+                    <div class="d-flex justify-content-between">
-                        <!-- 본문 -->
+                        <small class="text-muted">{{ formatDate(date) }}</small>
-                        <p class="card-text str_wrap">{{ post.content }}</p>
+                        <!-- 좋아요와 댓글 -->
-                        <!-- 날짜 -->
+                        <div>
-                        <div class="d-flex justify-content-between">
+                            <span class="text-muted me-3">
-                            <small class="text-muted">{{ formatDate(post.date) }}</small>
+                                <i class="bx bx-like"></i> {{ likes || 0 }}
-                            <!-- 좋아요와 댓글 -->
+                            </span>
-                            <div>
+                            <span class="text-muted">
-                                <span class="text-muted me-3">
+                                <i class="bx bx-comment"></i> {{ comments || 0 }}
-                                    <i class="bx bx-like"></i> {{ post.likes || 0 }}
+                            </span>
-                                </span>
-                                <span class="text-muted">
-                                    <i class="bx bx-comment"></i> {{ post.comments || 0 }}
-                                </span>
-                            </div>
                         </div>
                     </div>
                 </div>
@@ -46,31 +41,38 @@
 </template>
 
 <script>
-import axios from "@api";
-
 export default {
-    data() {
+    props: {
-        return {
+        img: {
-            posts: [], // 게시물 데이터 초기화
+            type: String,
-        };
+            default: null,
+        },
+        category: {
+            type: String,
+            required: true,
+        },
+        title: {
+            type: String,
+            required: true,
+        },
+        content: {
+            type: String,
+            required: true,
+        },
+        date: {
+            type: String,
+            required: true,
+        },
+        likes: {
+            type: Number,
+            default: 0,
+        },
+        comments: {
+            type: Number,
+            default: 0,
+        },
     },
     methods: {
-        async fetchPosts() {
-            try {
-                const response = await axios.get("board/general");
-                if (response.data && Array.isArray(response.data.data)) {
-                    console.log("API Response:",response.data);
-                    this.posts = response.data.data.map((post) => ({
-                        ...post,
-                        img: post.img || null, // 이미지 경로 처리
-                        likes: post.likes || 0, // 좋아요 수
-                        comments: post.comments || 0, // 댓글 수
-                    }));
-                }
-            } catch (error) {
-                console.error("Failed to fetch posts:", error);
-            }
-        },
         formatDate(dateString) {
             const date = new Date(dateString);
             return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(
@@ -80,9 +82,6 @@ export default {
             ).padStart(2, "0")}`;
         },
     },
-    mounted() {
-        this.fetchPosts();
-    },
 };
 </script>
 

src/components/list/BoardCardList.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="container mt-4">
+        <div v-if="posts.length === 0" class="text-center">
+            게시물이 없습니다.
+        </div>
+        <div v-for="post in posts" :key="post.id">
+            <BoardCard
+                :img="post.img"
+                :category="post.category"
+                :title="post.title"
+                :content="post.content"
+                :date="post.date"
+                :likes="post.likes"
+                :comments="post.comments"
+                />
+        </div>
+    </div>
+</template>
+
+<script>
+import BoardCard from './BoardCard.vue';
+
+export default {
+    components: {
+        BoardCard,
+    },
+    props: {
+        posts: {
+            type: Array,
+            required: true,
+        },
+    },
+};
+</script>
+
+<style>
+</style>

src/views/board/BoardList.vue

@@ -8,22 +8,7 @@
                 </router-link>
             </div>
 
-            <!-- 게시판 리스트 -->
+            <board-card :posts="filteredList" @click="goDetail" />
-            <template v-for="(item, index) in filteredList" :key="item.id">
-                <board-card
-                    :title="item.title"
-                    :content="item.content"
-                    :img="item.img"
-                    :date="item.date"
-                    @click="goDetail(item.id)"
-                >
-                    <template #badgeType>
-                        <span v-if="item.type === 1" class="badge rounded-pill bg-label-danger">공지</span>
-                        <span v-else-if="item.type === 2" class="badge rounded-pill bg-label-primary">자유</span>
-                        <span v-else-if="item.type === 3" class="badge rounded-pill bg-label-success">익명</span>
-                    </template>
-                </board-card>
-            </template>
 
             <div class="mt-8">
                 <pagination />
@@ -33,16 +18,16 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, onMounted } from 'vue';
-import BoardCard from '@c/list/BoardCard.vue';
+import BoardCard from '@/components/list/BoardCardList.vue';
 import Pagination from '@c/pagination/Pagination.vue';
 import SearchBar from '@c/search/SearchBar.vue';
 import router from '@/router';
-import dummy from '@a/boardDummy.json';
 import WriteButton from '@c/button/WriteBtn.vue';
+import axios from '@api';
 
 // 데이터 초기화
-const list = ref(dummy);
+const list = ref([]);
 const searchText = ref('');
 
 // 상세 페이지 이동
@@ -61,6 +46,29 @@ const filteredList = computed(() =>
         item.title.toLowerCase().includes(searchText.value.toLowerCase())
     )
 );
+
+// 게시물 데이터 로드
+const fetchPosts = async () => {
+    try {
+        const response = await axios.get("board/general");
+        if (response.data && Array.isArray(response.data.data)) {
+            list.value = response.data.data.map((post) => ({
+                ...post,
+                img: post.img || null,
+                likes: post.likes || 0,
+                comments: post.comments || 0,
+            }));
+        }
+    } catch (error) {
+        console.error("Failed to fetch posts:", error);
+    }
+};
+
+// 데이터 로드
+onMounted(() => {
+    fetchPosts();
+});
+
 </script>
 
 <style>