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:
nevermoregb 2024-12-19 11:17:23 +09:00
parent df496519ff
commit 618814acfd
4 changed files with 131 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
index.html
View File

@ -1,7 +1,13 @@
<!doctype html> <!doctype html>
<html lang="" class="light-style layout-navbar-fixed layout-menu-fixed layout-compact" dir="ltr" <html
data-theme="theme-default" data-assets-path="/" data-template="vertical-menu-template" data-style="light"> lang=""
class="light-style layout-navbar-fixed layout-menu-fixed layout-compact"
dir="ltr"
data-theme="theme-default"
data-assets-path="/"
data-template="vertical-menu-template"
data-style="light"
>
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@ -21,7 +27,8 @@
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
<link <link
href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&amp;display=swap" href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&amp;display=swap"
rel="stylesheet" /> rel="stylesheet"
/>
<link rel="stylesheet" href="/css/font.css" /> <link rel="stylesheet" href="/css/font.css" />
<link rel="stylesheet" href="/css/custom.css" /> <link rel="stylesheet" href="/css/custom.css" />
@ -50,8 +57,7 @@
<script src="/js/config.js"></script> <script src="/js/config.js"></script>
<!-- Include the highlight.js library --> <!-- Include the highlight.js library -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css" <link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css" rel="stylesheet" />
rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
</head> </head>
@ -79,5 +85,4 @@
<script type="module" src="/src/main.js"></script> <script type="module" src="/src/main.js"></script>
</body> </body>
</html> </html>

34
src/components/list/BoardCard.vue
View File

@ -2,17 +2,17 @@
<div class="" role="button"> <div class="" role="button">
<div class="card"> <div class="card">
<div class="d-flex"> <div class="d-flex">
<div v-if="data.item.img" class="col-3"> <div v-if="img" class="col-3">
<img class="card-img card-img-left" :src="data.item.img" alt="" /> <img class="card-img card-img-left" :src="img" alt="" />
</div> </div>
<div lass="col-9"> <div lass="col-9">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">{{ data.item.title }}</h5> <h5 class="card-title">{{ title }}</h5>
<p class="card-text str_wrap"> <p class="card-text str_wrap">
{{ data.item.content }} {{ content }}
</p> </p>
<p class="card-text"> <p class="card-text">
<small class="text-muted">{{ data.item.date }}</small> <small class="text-muted">{{ date }}</small>
<slot name="optInfo"></slot> <slot name="optInfo"></slot>
</p> </p>
</div> </div>
@ -23,8 +23,30 @@
</template> </template>
<script setup> <script setup>
const data = defineProps(['item']); // const data = defineProps(['item']);
const prop = defineProps({
title: {
type: String,
default: '제목',
required: true,
},
content: {
type: String,
default: '내용',
required: true,
},
date: {
type: String,
default: 'date',
required: true,
},
img: {
type: String,
required: false,
},
});
</script> </script>
<style> <style>
.str_wrap { .str_wrap {
overflow: hidden; overflow: hidden;

31
src/components/search/SearchBar.vue
View File

@ -1,12 +1,27 @@
<template> <template>
<div class="input-group mb-3"> <div class="input-group mb-3 bg-white">
<div class="input-group-text"> <input type="text" class="form-control" placeholder="Search" @change="searchInput" />
<!-- <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input" /> --> <button type="button" class="btn btn-primary"><i class="bx bx-search bx-md"></i></button>
<i class="bx bx-search bx-md"></i>
</div>
<input type="text" class="form-control" placeholder="Search" />
<button type="button" class="btn btn-primary">검색</button>
</div> </div>
</template> </template>
<script setup></script> <script setup>
import { defineEmits, ref } from 'vue';
const props = defineProps({
maxlength: {
type: Number,
default: 30,
required: false,
},
});
const emits = defineEmits(['update:data']);
const searchInput = function (event) {
//Type Number 일때 maxlength 적용 안됨 방지
if (event.target.value.length > props.maxlength) {
event.target.value = event.target.value.slice(0, props.maxlength);
}
emits('update:data', event.target.value);
};
</script>

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

@ -1,15 +1,17 @@
<template> <template>
<div class="container-xxl flex-grow-1 container-p-y"> <div class="container-xxl flex-grow-1 container-p-y">
<search-bar /> <search-bar @update:data="searchText = $event" />
<div class="row g-3"> <div class="row g-3">
<div class="mt-8"> <div class="mt-8">
<router-link to="/board/write"> <router-link to="/board/write">
<button type="button" class="btn btn-primary float-end">글쓰기</button> <button class="btn btn-label-primary btn-icon float-end">
<i class="bx bx-edit-alt"></i>
</button>
</router-link> </router-link>
</div> </div>
<template v-for="(item, index) in list" :key="item.id"> <template v-for="(item, index) in list" :key="item.id">
<board-card :item="item" @click="goDetail(item.id)"> <board-card :title="item.title" :content="item.content" :img="item.img" :date="item.date" @click="goDetail(item.id)">
<template #optInfo> <template #optInfo>
<span v-show="item.viewCount" style="padding-left: 10px" class="text-muted" <span v-show="item.viewCount" style="padding-left: 10px" class="text-muted"
><i class="fa-regular fa-eye"></i> {{ item.viewCount }}</span ><i class="fa-regular fa-eye"></i> {{ item.viewCount }}</span
@ -36,6 +38,7 @@
import dummy from '@a/boardDummy.json'; import dummy from '@a/boardDummy.json';
const list = ref(dummy); const list = ref(dummy);
const searchText = ref('');
/** 상세로 이동 */ /** 상세로 이동 */
const goDetail = idx => { const goDetail = idx => {