From aab5b5ab5821d7f20fc1238d30a58007b1e50522 Mon Sep 17 00:00:00 2001
From: kimdaae328 <kimdaae328@gmail.com>
Date: Thu, 20 Feb 2025 23:58:00 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=EB=94=94?=
 =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=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 | 195 ++++++++++++++++++----------------
 1 file changed, 101 insertions(+), 94 deletions(-)

diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index 34740d2..523356f 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -1,102 +1,104 @@
 <template>
     <div class="container flex-grow-1 container-p-y">
-        <div class="row mb-4">
-            <!-- 검색창 -->
-            <div class="container col-8 px-3">
-                <search-bar @update:data="search" />
-            </div>
-            <!-- 새 글쓰기 -->
-            <div class="container col-2 px-12 py-2">
-                <router-link to="/board/write">
-                    <WriteButton />
-                </router-link>
+        <div class="card">
+            <div class="card-header">
+                <!-- 검색창 -->
+                <div class="container col-6 mt-12 mb-8">
+                    <search-bar @update:data="search" />
+                </div>
             </div>
+            <div class="card-datatable">
+                <div class="row mx-6 my-6 justify-content-between g-3 align-items-center">
+                    <div class="col-md-6 d-flex flex-column flex-md-row align-items-md-center gap-2 mt-0">
+                        <!-- 리스트 갯수 선택 -->
+                        <select class="form-select w-25 w-md-100" v-model="selectedSize" @change="handleSizeChange">
+                            <option value="10">10개씩</option>
+                            <option value="20">20개씩</option>
+                            <option value="30">30개씩</option>
+                            <option value="50">50개씩</option>
+                        </select>
 
-        <div class="row g-3">
-            <!-- 셀렉트 박스 -->
-            <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 class="container col-1 px-0 py-2">
-                <label>
-                    <input type="checkbox" v-model="showNotices" /> 공지 숨기기
-                </label>
-            </div>
-            <!-- 리스트 갯수 선택 -->
-            <div class="container col-1 px-0 py-2">
-                <select class="form-select" v-model="selectedSize" @change="handleSizeChange">
-                    <option value="10">10개씩</option>
-                    <option value="20">20개씩</option>
-                    <option value="30">30개씩</option>
-                    <option value="50">50개씩</option>
-                </select>
-            </div>
-        </div>
-        </div>
-        <br>
-        <!-- 게시판 -->
-        <div class="table-responsive">
-            <table class="table table-bordered">
-                <thead class="table-light">
-                    <tr>
-                        <th style="width: 8%;">번호</th>
-                        <th style="width: 50%;">제목</th>
-                        <th style="width: 15%;">작성자</th>
-                        <th style="width: 12%;">작성일</th>
-                        <th style="width: 10%;">조회수</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <!-- 공지사항 -->
-                    <template v-if="pagination.currentPage === 1 && !showNotices">
-                        <tr v-for="(notice, index) in noticeList"
-                            :key="'notice-' + index"
-                            class="bg-label-gray"
-                            @click="goDetail(notice.id)">
-                            <td>공지</td>
-                            <td>
-                                📌 {{ notice.title }}
-                                <i v-if="notice.img" class="bi bi-image me-1"></i>
-                                <i v-if="notice.hasAttachment" class="bi bi-paperclip"></i>
-                                <span v-if="isNewPost(notice.date)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
-                            </td>
-                            <td>{{ notice.author }}</td>
-                            <td>{{ notice.date }}</td>
-                            <td>{{ notice.views }}</td>
-                        </tr>
-                    </template>
-                    <!-- 일반 게시물 -->
-                    <tr v-for="(post, index) in generalList"
-                        :key="'post-' + index"
-                        class="invert-bg-white"
-                        @click="goDetail(post.realId)">
-                        <td>{{ post.id }}</td>
-                        <td>
-                            {{ post.title }}
-                            <i v-if="post.img" class="bi bi-image me-1"></i>
-                            <i v-if="post.hasAttachment" class="bi bi-paperclip"></i>
-                            <span v-if="isNewPost(post.date)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
-                        </td>
-                        <td>{{ post.author }}</td>
-                        <td>{{ post.date }}</td>
-                        <td>{{ post.views }}</td>
-                    </tr>
-                </tbody>
-            </table>
-        </div>
+                         <!-- 셀렉트 박스 -->
+                         <select class="form-select w-25 w-md-100" v-model="selectedOrder" @change="handleSortChange">
+                            <option value="date">최신날짜</option>
+                            <option value="views">조회수</option>
+                        </select>
 
-        <!-- 페이지네이션 -->
-        <div class="row g-3">
-            <div class="mt-8">
-                <Pagination
-                    v-if="pagination.pages"
-                    v-bind="pagination"
-                    @update:currentPage="handlePageChange"
-                />
+                        <!-- 공지 접기 기능 -->
+                        <div class="form-check mb-0 ms-2">
+                            <input class="form-check-input" type="checkbox" v-model="showNotices" id="hideNotices" />
+                            <label class="form-check-label" for="hideNotices">공지 숨기기</label>
+                        </div>
+                    </div>
+                    <div class="col-md-6 d-flex flex-column flex-md-row align-items-md-center justify-content-md-end gap-2">
+                        <!-- 새 글쓰기 -->
+                        <router-link to="/board/write" class="ms-2">
+                            <WriteButton class="btn add-new btn-primary"/>
+                        </router-link>
+                    </div>
+                </div>
+                <!-- 게시판 -->
+                <div class="table-responsive">
+                    <table class="datatables-users table border-top dataTable dtr-column">
+                        <thead>
+                            <tr>
+                                <th style="width: 11%;" class="text-center">번호</th>
+                                <th style="width: 45%;" class="text-center">제목</th>
+                                <th style="width: 10%;" class="text-center">작성자</th>
+                                <th style="width: 15%;" class="text-center">작성일</th>
+                                <th style="width: 9%;" class="text-center">조회수</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <!-- 공지사항 -->
+                            <template v-if="pagination.currentPage === 1 && !showNotices">
+                                <tr v-for="(notice, index) in noticeList"
+                                    :key="'notice-' + index"
+                                    class="bg-label-gray"
+                                    @click="goDetail(notice.id)">
+                                    <td class="text-center">공지</td>
+                                    <td>
+                                        📌 {{ notice.title }}
+                                        <i v-if="notice.img" class="bi bi-image me-1"></i>
+                                        <i v-if="notice.hasAttachment" class="bi bi-paperclip"></i>
+                                        <span v-if="isNewPost(notice.date)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
+                                    </td>
+                                    <td class="text-center">{{ notice.author }}</td>
+                                    <td class="text-center">{{ notice.date }}</td>
+                                    <td class="text-center">{{ notice.views }}</td>
+                                </tr>
+                            </template>
+                            <!-- 일반 게시물 -->
+                            <tr v-for="(post, index) in generalList"
+                                :key="'post-' + index"
+                                class="invert-bg-white"
+                                @click="goDetail(post.realId)">
+                                <td class="text-center">{{ post.id }}</td>
+                                <td>
+                                    {{ post.title }}
+                                    <i v-if="post.img" class="bi bi-image me-1"></i>
+                                    <i v-if="post.hasAttachment" class="bi bi-paperclip"></i>
+                                    <span v-if="isNewPost(post.date)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
+                                </td>
+                                <td class="text-center">{{ post.author }}</td>
+                                <td class="text-center">{{ post.date }}</td>
+                                <td class="text-center">{{ post.views }}</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+            <div class="card-footer">
+                <!-- 페이지네이션 -->
+                <div class="row g-3">
+                    <div class="mt-8">
+                        <Pagination
+                            v-if="pagination.pages"
+                            v-bind="pagination"
+                            @update:currentPage="handlePageChange"
+                        />
+                    </div>
+                </div>
             </div>
         </div>
     </div>
@@ -262,4 +264,9 @@ onMounted(() => {
 </script>
 
 <style scoped>
+    @media (max-width: 768px) {
+        .w-md-100 {
+            width: 100% !important;
+        }
+    }
 </style>