공지사항 코멘트 수정 및 셀렉트 박스 위치 조정
This commit is contained in:
parent
05c26f7b7b
commit
3e6c9f2c97
@ -34,11 +34,11 @@
|
||||
<span class="text-muted me-3">
|
||||
<i class="fa-regular fa-eye"></i> {{ views || 0 }}
|
||||
</span>
|
||||
<span class="text-muted me-3">
|
||||
<i class="bx bx-like"></i> {{ likes || 0 }}
|
||||
<span class="text-muted me-3" v-if="likes != null">
|
||||
<i class="bx bx-like"></i> {{ likes }}
|
||||
</span>
|
||||
<span class="text-muted">
|
||||
<i class="bx bx-comment"></i> {{ comments || 0 }}
|
||||
<span class="text-muted" v-if="comments !== null">
|
||||
<i class="bx bx-comment"></i> {{ comments }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@ -80,11 +80,11 @@ const props = defineProps({
|
||||
},
|
||||
likes: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
default: null,
|
||||
},
|
||||
comments: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
default: null,
|
||||
},
|
||||
attachment: {
|
||||
type: Boolean,
|
||||
|
||||
@ -1,43 +1,53 @@
|
||||
<template>
|
||||
<div class="mt-4">
|
||||
<div v-if="posts.length === 0" class="text-center">
|
||||
게시물이 없습니다.
|
||||
<p class="text-muted mt-4">게시물이 없습니다.</p>
|
||||
</div>
|
||||
<div v-for="post in posts" :key="post.id" @click="handleClick(post.id)">
|
||||
<BoardCard
|
||||
:img="post.img"
|
||||
:category="post.category"
|
||||
:img="post.img || null"
|
||||
:category="post.category || ''"
|
||||
:title="post.title"
|
||||
:content="post.content"
|
||||
:date="post.date"
|
||||
:views="post.views"
|
||||
:likes="post.likes"
|
||||
:comments="post.comments"
|
||||
:attachment="post.attachment"
|
||||
:views="post.views || 0"
|
||||
v-bind="getBoardCardProps(post)"
|
||||
:attachment="post.attachment || false"
|
||||
@click="() => goDetail(post.id)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import { defineProps, defineEmits } from 'vue';
|
||||
import BoardCard from './BoardCard.vue';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
BoardCard,
|
||||
},
|
||||
props: {
|
||||
posts: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
emits: ['click'],
|
||||
methods: {
|
||||
handleClick(id) {
|
||||
this.$emit('click', id);
|
||||
},
|
||||
},
|
||||
const props = defineProps({
|
||||
posts: {
|
||||
type: Array,
|
||||
required: true,
|
||||
default: () => [],
|
||||
}
|
||||
});
|
||||
|
||||
const emit = defineEmits(['click']);
|
||||
|
||||
// 상세 페이지 이동
|
||||
const goDetail = (id) => {
|
||||
emit('click', id);
|
||||
};
|
||||
|
||||
// 없는 데이터는 상위 페이지에서 삭제해도 되게끔 설정
|
||||
const getBoardCardProps = (post) => {
|
||||
const boardCardProps = {};
|
||||
if ('likes' in post) {
|
||||
boardCardProps.likes = post.likes;
|
||||
}
|
||||
if ('comments' in post) {
|
||||
boardCardProps.comments = post.comments;
|
||||
}
|
||||
return boardCardProps;
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
<!-- 상단 바: 검색창, 정렬 셀렉트 박스, 새 글쓰기 버튼 -->
|
||||
<div class="row mb-4">
|
||||
<!-- 검색창 -->
|
||||
<div class="col">
|
||||
@ -9,31 +8,36 @@
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<!-- 정렬 셀렉트 박스 -->
|
||||
<div class="col-md-3 mb-4">
|
||||
<select class="form-select" v-model="selectedOrder" @change="handleSortChange">
|
||||
<option value="date">최신날짜</option>
|
||||
<option value="views">조회수</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<!-- 새 글쓰기 버튼 -->
|
||||
<div class="col-auto ms-auto mb-4">
|
||||
<!-- 새 글쓰기 -->
|
||||
<div class="mb-4">
|
||||
<router-link to="/board/write">
|
||||
<WriteButton />
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 공지사항 게시물 리스트 -->
|
||||
<div class="row g-3 mt-2 mt-md-8">
|
||||
<!-- 공지사항 리스트 -->
|
||||
<div class="row g-3">
|
||||
<h3>공지사항</h3>
|
||||
<board-card :posts="noticeList" @click="goDetail" />
|
||||
</div>
|
||||
<!-- 일반 게시물 리스트 -->
|
||||
<div class="row">
|
||||
<BoardCardList :posts="noticeList" @click="goDetail" />
|
||||
</div>
|
||||
|
||||
<!-- 일반 리스트 -->
|
||||
<div class="row g-3 mt-8">
|
||||
<h3>일반게시판</h3>
|
||||
<board-card :posts="generalList" @click="goDetail" />
|
||||
<h3 class="col">일반게시판</h3>
|
||||
|
||||
<!-- 셀렉트 박스 -->
|
||||
<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>
|
||||
<div class="row">
|
||||
<BoardCardList :posts="generalList" @click="goDetail" />
|
||||
</div>
|
||||
|
||||
<!-- 페이지네이션 -->
|
||||
@ -61,7 +65,7 @@
|
||||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import BoardCard from '@/components/list/BoardCardList.vue';
|
||||
import BoardCardList from '@/components/list/BoardCardList.vue';
|
||||
import Pagination from '@c/pagination/Pagination.vue';
|
||||
import SearchBar from '@c/search/SearchBar.vue';
|
||||
import router from '@/router';
|
||||
@ -102,7 +106,7 @@ const search = (e) => {
|
||||
};
|
||||
|
||||
// 정렬 변경 핸들러
|
||||
const handleSortChange = (event) => {
|
||||
const handleSortChange = () => {
|
||||
fetchGeneralPosts(1);
|
||||
};
|
||||
|
||||
@ -125,8 +129,8 @@ const fetchGeneralPosts = async (page = 1) => {
|
||||
id: post.id || index,
|
||||
img: post.img || null,
|
||||
views: post.cnt || 0,
|
||||
likes: post.likeCount || 0,
|
||||
comments: post.commentCount || 0,
|
||||
likes: post.likeCount != null ? post.likeCount : null,
|
||||
comments: post.commentCount != null ? post.commentCount : null,
|
||||
attachment: post.hasAttachment || false,
|
||||
}));
|
||||
|
||||
@ -164,8 +168,6 @@ const fetchNoticePosts = async () => {
|
||||
id: post.id || index,
|
||||
img: post.img || null,
|
||||
views: post.cnt || 0,
|
||||
likes: post.likeCount || 0,
|
||||
comments: post.commentCount || 0,
|
||||
attachment: post.hasAttachment || false,
|
||||
}));
|
||||
} else {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user