게시판 테스트트

src/components/list/BoardCard.vue

@@ -1,65 +1,62 @@
 <template>
-    <div class="" role="button">
+    <div>
-        <div class="card">
+        <div v-if="posts.length === 0">게시물이 없습니다.</div>
-            <div class="d-sm-flex">
+        <div v-for="post in posts" :key="post.id" class="post">
-                <div v-if="img">
+            <h3>{{ post.title }}</h3>
-                    <img class="card-img card-img-left" :src="img" alt="" style="width: 200px; height: 200px; object-fit: cover" />
+            <p class="str_wrap">{{ post.content }}</p>
-                </div>
+            <small>{{ formatDate(post.date) }}</small>
-                <div class="col">
-                    <div class="card-body">
-                        <h5 class="card-title align-items-center">
-                            <slot name="badgeType"></slot>
-                            {{ title }}
-                        </h5>
-                        <p class="card-text str_wrap pt-5">
-                            {{ content }}
-                        </p>
-                        <p class="card-text">
-                            <small class="text-muted">{{ date }}</small>
-                            <slot name="optInfo"></slot>
-                        </p>
-                    </div>
-                </div>
-            </div>
         </div>
     </div>
 </template>
 
-<script setup>
+<script>
-    // const data = defineProps(['item']);
+import axios from 'axios';
-    const prop = defineProps({
-        title: {
-            type: String,
-            default: '제목',
-            required: true,
-        },
-        content: {
-            type: String,
-            default: '내용',
-            required: true,
-        },
-        date: {
-            type: String,
-            default: 'date',
-            required: true,
-        },
-        img: {
-            type: String,
-            required: false,
-        },
-    });
 
-    const colSetting = () => {
+export default {
-        img ? 'col-9' : '';
+    data() {
-    };
+        return {
+            posts: [] // 게시물 리스트 초기화
+        };
+    },
+    methods: {
+        async fetchPosts() {
+            try {
+                const response = await axios.get('/api/board/general');
+                console.log(response.data); // 서버에서 반환된 전체 응답 데이터 확인
+                if (response.data && Array.isArray(response.data.data)) {
+                    this.posts = response.data.data; // 서버에서 반환된 게시물 리스트 저장
+                } else {
+                    console.error('Unexpected response format:', response.data);
+                }
+            } 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(date.getDate()).padStart(2, '0')}`;
+        }
+    },
+    mounted() {
+        this.fetchPosts();
+    }
+};
 </script>
 
 <style>
-    .str_wrap {
+/* 텍스트 줄임 표시 */
-        overflow: hidden;
+.str_wrap {
-        text-overflow: ellipsis;
+    overflow: hidden;
-        display: -webkit-box;
+    text-overflow: ellipsis;
-        -webkit-line-clamp: 3;
+    display: -webkit-box;
-        -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3; /* 최대 3줄 표시 */
-    }
+    -webkit-box-orient: vertical;
+}
+
+/* 게시물 스타일링 */
+.post {
+    margin-bottom: 1.5rem;
+    border-bottom: 1px solid #ddd;
+    padding-bottom: 1rem;
+}
 </style>

src/views/board/BoardList.vue

@@ -8,19 +8,23 @@
                     <WriteButton />
                 </router-link>
             </div>
-            <template v-for="(item, index) in list" :key="item.id">
+            <template v-for="item in list" :key="item.id">
-                <board-card :title="item.title" :content="item.content" :img="item.img" :date="item.date" @click="goDetail(item.id)">
+                <board-card
+                    :title="item.title"
+                    :content="item.content"
+                    @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>
                     <template #optInfo>
-                        <small v-show="item.viewCount" style="padding-left: 10px" class="text-muted"
+                        <small v-show="item.viewCount" style="padding-left: 10px" class="text-muted">
-                            ><i class="fa-regular fa-eye"></i> {{ item.viewCount }}
+                            <i class="fa-regular fa-eye"></i> {{ item.viewCount }}
                         </small>
-                        <small v-show="item.cmtCount" style="padding-left: 10px" class="text-muted"
+                        <small v-show="item.cmtCount" style="padding-left: 10px" class="text-muted">
-                            ><i class="fa-regular fa-comment-dots"></i> {{ item.cmtCount }}
+                            <i class="fa-regular fa-comment-dots"></i> {{ item.cmtCount }}
                         </small>
                     </template>
                 </board-card>
@@ -32,26 +36,40 @@
     </div>
 </template>
 
-<script setup>
+<script>
-    import { ref } from 'vue';
+import { ref } from 'vue';
-    import BoardCard from '@c/list/BoardCard.vue';
+import BoardCard from '@c/list/BoardCard.vue';
-    import Pagination from '@c/pagination/Pagination.vue';
+import Pagination from '@c/pagination/Pagination.vue';
-    import SearchBar from '@c/search/SearchBar.vue';
+import SearchBar from '@c/search/SearchBar.vue';
-    import router from '@/router';
+import router from '@/router';
-    import dummy from '@a/boardDummy.json';
+import dummy from '@a/boardDummy.json';
-    import WriteButton from '@c/button/WriteBtn.vue';
+import WriteButton from '@c/button/WriteBtn.vue';
 
-    const list = ref(dummy);
+export default {
-    const searchText = ref('');
+    components: {
+        BoardCard,
+        Pagination,
+        SearchBar,
+        WriteButton,
+    },
+    setup() {
+        const list = ref(dummy); // 데이터 정의
+        const searchText = ref(''); // 검색 텍스트 정의
 
-    /** 상세로 이동 */
+        const goDetail = idx => {
-    const goDetail = idx => {
+            router.push(`/board/get/${idx}`);
-        router.push(`/board/get/${idx}`);
+        };
-    };
 
-    const search = e => {
+        const search = e => {
-        console.log('검색:', e);
+            console.log('검색:', e);
-    };
+        };
+
+        // 반환
+        return { list, searchText, goDetail, search };
+    },
+};
 </script>
 
-<style></style>
+<style>
+/* 필요한 스타일 추가 */
+</style>

vite.config.js

@@ -5,6 +5,14 @@ import vueDevTools from 'vite-plugin-vue-devtools'
 
 // https://vite.dev/config/
 export default defineConfig({
+    server: {
+        proxy: {
+            '/api': {
+                target: 'http://localhost:10325', // Spring Boot 서버 주소
+                changeOrigin: true,
+            },
+        },
+    },
     plugins: [
         vue(),
         vueDevTools(),