localhost-front/src/views/board/BoardList.vue
2024-12-17 15:49:47 +09:00

47 lines
1.6 KiB
Vue

<template>
<div class="container-xxl flex-grow-1 container-p-y">
<search-bar />
<div class="row g-3">
<div class="mt-8">
<router-link to="/board/write">
<button type="button" class="btn btn-primary float-end">글쓰기</button>
</router-link>
</div>
<template v-for="(item, index) in list" :key="item.id">
<board-card :item="item" @click="goDetail(item.id)">
<template #optInfo>
<span v-show="item.viewCount" style="padding-left: 10px" class="text-muted"
><i class="fa-regular fa-eye"></i> {{ item.viewCount }}</span
>
<span v-show="item.cmtCount" style="padding-left: 10px" class="text-muted"
><i class="fa-regular fa-comment-dots"></i> {{ item.cmtCount }}
</span>
</template>
</board-card>
</template>
<div class="mt-8">
<pagination />
</div>
</div>
</div>
</template>
<script setup>
import { ref } from 'vue';
import BoardCard from '@/components/list/BoardCard.vue';
import Pagination from '@/components/pagination/Pagination.vue';
import SearchBar from '@/components/search/SearchBar.vue';
import router from '@/router';
import dummy from '@a/boardDummy.json';
const list = ref(dummy);
/** 상세로 이동 */
const goDetail = idx => {
router.push(`/board/get/${idx}`);
};
</script>
<style></style>