localnet/localhost-front
10
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

리스트 디자인 수정

Browse Source
This commit is contained in:
kimdaae328 2025-02-20 23:58:00 +09:00
parent 52809ba743
commit aab5b5ab58
1 changed files with 101 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
src/views/board/BoardList.vue
View File

@ -1,53 +1,52 @@
<template> <template>
<div class="container flex-grow-1 container-p-y"> <div class="container flex-grow-1 container-p-y">
<div class="row mb-4"> <div class="card">
<div class="card-header">
<!-- 검색창 --> <!-- 검색창 -->
<div class="container col-8 px-3"> <div class="container col-6 mt-12 mb-8">
<search-bar @update:data="search" /> <search-bar @update:data="search" />
</div> </div>
<!-- 새 글쓰기 -->
<div class="container col-2 px-12 py-2">
<router-link to="/board/write">
<WriteButton />
</router-link>
</div>
<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>
<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">
<!-- 리스트 갯수 선택 --> <!-- 리스트 갯수 선택 -->
<div class="container col-1 px-0 py-2"> <select class="form-select w-25 w-md-100" v-model="selectedSize" @change="handleSizeChange">
<select class="form-select" v-model="selectedSize" @change="handleSizeChange">
<option value="10">10개씩</option> <option value="10">10개씩</option>
<option value="20">20개씩</option> <option value="20">20개씩</option>
<option value="30">30개씩</option> <option value="30">30개씩</option>
<option value="50">50개씩</option> <option value="50">50개씩</option>
</select> </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> </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>
<br>
<!-- 게시판 --> <!-- 게시판 -->
<div class="table-responsive"> <div class="table-responsive">
<table class="table table-bordered"> <table class="datatables-users table border-top dataTable dtr-column">
<thead class="table-light"> <thead>
<tr> <tr>
<th style="width: 8%;">번호</th> <th style="width: 11%;" class="text-center">번호</th>
<th style="width: 50%;">제목</th> <th style="width: 45%;" class="text-center">제목</th>
<th style="width: 15%;">작성자</th> <th style="width: 10%;" class="text-center">작성자</th>
<th style="width: 12%;">작성일</th> <th style="width: 15%;" class="text-center">작성일</th>
<th style="width: 10%;">조회수</th> <th style="width: 9%;" class="text-center">조회수</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -57,16 +56,16 @@
:key="'notice-' + index" :key="'notice-' + index"
class="bg-label-gray" class="bg-label-gray"
@click="goDetail(notice.id)"> @click="goDetail(notice.id)">
<td>공지</td> <td class="text-center">공지</td>
<td> <td>
📌 {{ notice.title }} 📌 {{ notice.title }}
<i v-if="notice.img" class="bi bi-image me-1"></i> <i v-if="notice.img" class="bi bi-image me-1"></i>
<i v-if="notice.hasAttachment" class="bi bi-paperclip"></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> <span v-if="isNewPost(notice.date)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
</td> </td>
<td>{{ notice.author }}</td> <td class="text-center">{{ notice.author }}</td>
<td>{{ notice.date }}</td> <td class="text-center">{{ notice.date }}</td>
<td>{{ notice.views }}</td> <td class="text-center">{{ notice.views }}</td>
</tr> </tr>
</template> </template>
<!-- 일반 게시물 --> <!-- 일반 게시물 -->
@ -74,21 +73,22 @@
:key="'post-' + index" :key="'post-' + index"
class="invert-bg-white" class="invert-bg-white"
@click="goDetail(post.realId)"> @click="goDetail(post.realId)">
<td>{{ post.id }}</td> <td class="text-center">{{ post.id }}</td>
<td> <td>
{{ post.title }} {{ post.title }}
<i v-if="post.img" class="bi bi-image me-1"></i> <i v-if="post.img" class="bi bi-image me-1"></i>
<i v-if="post.hasAttachment" class="bi bi-paperclip"></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> <span v-if="isNewPost(post.date)" class="badge bg-danger text-white ms-2 fs-tiny">N</span>
</td> </td>
<td>{{ post.author }}</td> <td class="text-center">{{ post.author }}</td>
<td>{{ post.date }}</td> <td class="text-center">{{ post.date }}</td>
<td>{{ post.views }}</td> <td class="text-center">{{ post.views }}</td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</div>
<div class="card-footer">
<!-- 페이지네이션 --> <!-- 페이지네이션 -->
<div class="row g-3"> <div class="row g-3">
<div class="mt-8"> <div class="mt-8">
@ -100,6 +100,8 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</template> </template>
<script setup> <script setup>
@ -262,4 +264,9 @@ onMounted(() => {
</script> </script>
<style scoped> <style scoped>
@media (max-width: 768px) {
.w-md-100 {
width: 100% !important;
}
}
</style> </style>