리스트 디자인 수정
This commit is contained in:
parent
52809ba743
commit
aab5b5ab58
@ -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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user