리스트 페이지 정렬기준셀렉박스 추가

src/components/list/BoardCard.vue

@@ -11,7 +11,7 @@
                 />
             </div>
             <!-- 게시물 내용 섹션 -->
-            <div class="col-md-10">
+            <div :class="contentColClass">
                 <div class="card-body">
                     <!-- 태그 -->
                     <h6 class="badge rounded-pill bg-primary text-white mb-2">
@@ -23,7 +23,7 @@
                     <p class="card-text str_wrap">{{ content }}</p>
                     <!-- 날짜 -->
                     <div class="d-flex justify-content-between">
-                        <small class="text-muted">{{ formatDate(date) }}</small>
+                        <small class="text-muted">{{ formattedDate }}</small>
                         <!-- 좋아요와 댓글 -->
                         <div>
                             <span class="text-muted me-3">
@@ -40,49 +40,56 @@
     </div>
 </template>
 
-<script>
-export default {
-    props: {
-        img: {
-            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,
-        },
+<script setup>
+import { computed } from 'vue';
+import { defineProps } from 'vue';
+
+// Props 정의
+const props = defineProps({
+    img: {
+        type: String,
+        default: null,
     },
-    methods: {
-        formatDate(dateString) {
-            const date = new Date(dateString);
-            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")}`;
-        },
+    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,
+    },
+});
+
+// computed 속성
+const contentColClass = computed(() => {
+    return props.img ? 'col-md-10 col-12' : 'col-md-12';
+});
+
+// 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>

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>

src/views/board/BoardList.vue

@@ -1,24 +1,45 @@
+boardlist
 <template>
     <div class="container-xxl flex-grow-1 container-p-y">
-        <!-- 검색 -->
-        <search-bar @update:data="search" />
+        <!-- 상단 바: 검색창, 정렬 셀렉트 박스, 새 글쓰기 버튼 -->
+        <div class="row mb-4">
+            <!-- 검색창 -->
+            <div class="col">
+                <search-bar @update:data="search" />
+            </div>
+        </div>
 
-        <!-- 리스트 -->
-        <div class="row g-3">
-            <div class="mt-8">
+        <div class="row">
+            <!-- 정렬 셀렉트 박스 -->
+            <div class="col-md-3 mb-4">
+                <select class="form-select">
+                    <option selected>정렬 기준 선택</option>
+                    <option value="1">조회수</option>
+                    <option value="2">날짜</option>
+                </select>
+            </div>
+            
+            <!-- 새 글쓰기 버튼 -->
+            <div class="col-auto ms-auto mb-4">
                 <router-link to="/board/write">
                     <WriteButton />
                 </router-link>
             </div>
+        </div>
 
+        <!-- 게시물 리스트 -->
+        <div class="row g-3">
             <board-card :posts="paginatedList" @click="goDetail" />
+        </div>
+
+        <!-- 페이지네이션 -->
+        <div class="row g-3">
 
-            <!-- 페이지네이션 -->
             <div class="mt-8">
-                <pagination
-                    :current-page="currentPage"
-                    :total-pages="totalPages"
-                    @update:page="changePage"
+                <pagination 
+                    :current-page="currentPage" 
+                    :total-pages="totalPages" 
+                    @update:page="changePage" 
                 />
             </div>
         </div>
@@ -40,7 +61,6 @@ const searchText = ref('');
 
 // 상세 페이지 이동
 const goDetail = (id) => {
-    console.log('Navigating to ID:', id)
     router.push({ name: 'BoardDetail', params: { id } });
 };
 
@@ -82,7 +102,6 @@ const changePage = (page) => {
 // 게시물 데이터 로드
 const fetchPosts = async () => {
     const response = await axios.get("board/general");
-    console.log(response.data.data.list)
 
     if (response.data && response.data.data && Array.isArray(response.data.data.list)) {
         list.value = response.data.data.list.map((post, index) => ({
@@ -93,7 +112,7 @@ const fetchPosts = async () => {
             comments: post.comments || 0,
         }));
     } else {
-        console.error("Unexpected API response structure:", response.data);
+        console.error("데이터 오류:", response.data);
     }
 };