From 2c1566f49e42f8ad03d7485458e89ed591a45e3b Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Thu, 13 Mar 2025 10:59:35 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B2=8C=EC=8B=9C=ED=8C=90=20=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20css=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 | 79 ++++++++++++++++-------------------
 1 file changed, 37 insertions(+), 42 deletions(-)

diff --git a/src/views/board/BoardList.vue b/src/views/board/BoardList.vue
index 0a33b11..77f486a 100644
--- a/src/views/board/BoardList.vue
+++ b/src/views/board/BoardList.vue
@@ -1,43 +1,39 @@
 <template>
     <div class="container flex-grow-1 container-p-y">
         <div class="card">
-            <div class="card-header">
+            <div class="card-header d-flex flex-column">
                 <!-- 검색창 -->
-                <div class="container col-6 mt-12 mb-8">
-                    <search-bar @update:data="search" @keyup.enter="searchOnEnter"/>
+                <div class="input-group mb-3 w-100">
+                    <search-bar @update:data="search" @keyup.enter="searchOnEnter" class="flex-grow-1" />
+                </div>
+                <div class="d-flex align-items-center" style="gap: 15px;">
+                    <!-- 리스트 갯수 선택 -->
+                    <select class="form-select w-auto" v-model="selectedSize" @change="handleSizeChange" style="margin-left: 0;">
+                        <option value="10">10개씩</option>
+                        <option value="20">20개씩</option>
+                        <option value="30">30개씩</option>
+                        <option value="50">50개씩</option>
+                    </select>
+
+                    <!-- 셀렉트 박스 -->
+                    <select class="form-select w-auto" v-model="selectedOrder" @change="handleSortChange">
+                        <option value="date">최신날짜</option>
+                        <option value="views">조회수</option>
+                    </select>
+
+                    <!-- 공지 접기 기능 -->
+                    <div class="form-check mb-0">
+                        <input class="form-check-input" type="checkbox" v-model="showNotices" id="hideNotices" />
+                        <label class="form-check-label" for="hideNotices">공지 숨기기</label>
+                    </div>
+
+                    <!-- 새 글쓰기 버튼 -->
+                    <router-link to="/board/write" class="ms-auto">
+                        <WriteButton />
+                    </router-link>
                 </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>
-
-                        <!-- 셀렉트 박스 -->
-                        <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="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="card-datatable m">
                 <div class="table-responsive">
                     <table class="datatables-users table border-top dataTable dtr-column">
                         <thead>
@@ -289,12 +285,11 @@ onMounted(() => {
             width: 100% !important;
         }
     }
-    /* 댓글 개수 스타일 */
-.comment-count {
-  font-size: 0.9rem; /* 글씨 크기 증가 */
-  font-weight: bold;
-  color: #ff5733; /* 강조 색상 (붉은 계열) */
-  border-radius: 4px; /* 둥근 모서리 */
-  padding: 2px 6px; /* 내부 패딩 */
-}
+    .comment-count {
+        font-size: 0.9rem;
+        font-weight: bold;
+        color: #ff5733;
+        border-radius: 4px;
+        padding: 2px 6px;
+    }
 </style>