게시판 목록 업데이트
This commit is contained in:
parent
df496519ff
commit
618814acfd
143
index.html
143
index.html
@ -1,83 +1,88 @@
|
||||
<!doctype html>
|
||||
<html 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">
|
||||
<html
|
||||
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>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<!-- favicon -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png" />
|
||||
<link rel="manifest" href="/img/favicon/site.webmanifest" />
|
||||
|
||||
<!-- favicon -->
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png" />
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png" />
|
||||
<link rel="manifest" href="/img/favicon/site.webmanifest" />
|
||||
<meta content="" name="description" />
|
||||
<meta content="" name="keywords" />
|
||||
<title>LOCALNET</title>
|
||||
|
||||
<meta content="" name="description" />
|
||||
<meta content="" name="keywords" />
|
||||
<title>LOCALNET</title>
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com/" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
|
||||
<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&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
|
||||
<!-- Fonts -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com/" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin />
|
||||
<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&display=swap"
|
||||
rel="stylesheet" />
|
||||
<link rel="stylesheet" href="/css/font.css" />
|
||||
<link rel="stylesheet" href="/css/custom.css" />
|
||||
|
||||
<link rel="stylesheet" href="/css/font.css" />
|
||||
<link rel="stylesheet" href="/css/custom.css" />
|
||||
<!-- Icons -->
|
||||
<link rel="stylesheet" href="/vendor/fonts/boxicons.css" />
|
||||
<link rel="stylesheet" href="/vendor/fonts/fontawesome.css" />
|
||||
<link rel="stylesheet" href="/vendor/fonts/flag-icons.css" />
|
||||
|
||||
<!-- Icons -->
|
||||
<link rel="stylesheet" href="/vendor/fonts/boxicons.css" />
|
||||
<link rel="stylesheet" href="/vendor/fonts/fontawesome.css" />
|
||||
<link rel="stylesheet" href="/vendor/fonts/flag-icons.css" />
|
||||
<!-- Core CSS -->
|
||||
<link rel="stylesheet" href="/vendor/css/rtl/core.css" class="template-customizer-core-css" />
|
||||
<link rel="stylesheet" href="/vendor/css/rtl/theme-default.css" class="template-customizer-theme-css" />
|
||||
<link rel="stylesheet" href="/css/demo.css" />
|
||||
|
||||
<!-- Core CSS -->
|
||||
<link rel="stylesheet" href="/vendor/css/rtl/core.css" class="template-customizer-core-css" />
|
||||
<link rel="stylesheet" href="/vendor/css/rtl/theme-default.css" class="template-customizer-theme-css" />
|
||||
<link rel="stylesheet" href="/css/demo.css" />
|
||||
<!-- Vendors CSS -->
|
||||
<link rel="stylesheet" href="/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
|
||||
<link rel="stylesheet" href="/vendor/libs/typeahead-js/typeahead.css" />
|
||||
<link rel="stylesheet" href="/vendor/libs/apex-charts/apex-charts.css" />
|
||||
|
||||
<!-- Vendors CSS -->
|
||||
<link rel="stylesheet" href="/vendor/libs/perfect-scrollbar/perfect-scrollbar.css" />
|
||||
<link rel="stylesheet" href="/vendor/libs/typeahead-js/typeahead.css" />
|
||||
<link rel="stylesheet" href="/vendor/libs/apex-charts/apex-charts.css" />
|
||||
<!-- Helpers -->
|
||||
<script src="/vendor/js/helpers.js"></script>
|
||||
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
|
||||
<!--? Template customizer: To hide customizer set displayCustomizer value false in config.js. -->
|
||||
<!-- <script src="/vendor/js/template-customizer.js"></script> -->
|
||||
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
|
||||
<script src="/js/config.js"></script>
|
||||
|
||||
<!-- Helpers -->
|
||||
<script src="/vendor/js/helpers.js"></script>
|
||||
<!--! Template customizer & Theme config files MUST be included after core stylesheets and helpers.js in the <head> section -->
|
||||
<!--? Template customizer: To hide customizer set displayCustomizer value false in config.js. -->
|
||||
<!-- <script src="/vendor/js/template-customizer.js"></script> -->
|
||||
<!--? Config: Mandatory theme config file contain global vars & default theme options, Set your preferred theme option in this file. -->
|
||||
<script src="/js/config.js"></script>
|
||||
<!-- Include the highlight.js library -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css" rel="stylesheet" />
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
||||
</head>
|
||||
|
||||
<!-- Include the highlight.js library -->
|
||||
<link href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/atom-one-dark.min.css"
|
||||
rel="stylesheet">
|
||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<!-- Core JS -->
|
||||
<!-- build:js assets/vendor/js/core.js -->
|
||||
<script src="/vendor/libs/jquery/jquery.js"></script>
|
||||
<script src="/vendor/libs/popper/popper.js"></script>
|
||||
<script src="/vendor/js/bootstrap.js"></script>
|
||||
<script src="/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
|
||||
<script src="/vendor/libs/hammer/hammer.js"></script>
|
||||
<script src="/vendor/libs/i18n/i18n.js"></script>
|
||||
<script src="/vendor/libs/typeahead-js/typeahead.js"></script>
|
||||
<!-- <script src="/vendor/js/menu.js"></script> -->
|
||||
<!-- endbuild -->
|
||||
|
||||
<!-- Core JS -->
|
||||
<!-- build:js assets/vendor/js/core.js -->
|
||||
<script src="/vendor/libs/jquery/jquery.js"></script>
|
||||
<script src="/vendor/libs/popper/popper.js"></script>
|
||||
<script src="/vendor/js/bootstrap.js"></script>
|
||||
<script src="/vendor/libs/perfect-scrollbar/perfect-scrollbar.js"></script>
|
||||
<script src="/vendor/libs/hammer/hammer.js"></script>
|
||||
<script src="/vendor/libs/i18n/i18n.js"></script>
|
||||
<script src="/vendor/libs/typeahead-js/typeahead.js"></script>
|
||||
<!-- <script src="/vendor/js/menu.js"></script> -->
|
||||
<!-- endbuild -->
|
||||
<!-- Vendors JS -->
|
||||
<script src="/vendor/libs/apex-charts/apexcharts.js"></script>
|
||||
<!-- Main JS -->
|
||||
<!-- <script src="/js/main.js"></script> -->
|
||||
<!-- Page JS -->
|
||||
<!-- <script src="/js/dashboards-analytics.js"></script> -->
|
||||
|
||||
<!-- Vendors JS -->
|
||||
<script src="/vendor/libs/apex-charts/apexcharts.js"></script>
|
||||
<!-- Main JS -->
|
||||
<!-- <script src="/js/main.js"></script> -->
|
||||
<!-- Page JS -->
|
||||
<!-- <script src="/js/dashboards-analytics.js"></script> -->
|
||||
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -2,17 +2,17 @@
|
||||
<div class="" role="button">
|
||||
<div class="card">
|
||||
<div class="d-flex">
|
||||
<div v-if="data.item.img" class="col-3">
|
||||
<img class="card-img card-img-left" :src="data.item.img" alt="" />
|
||||
<div v-if="img" class="col-3">
|
||||
<img class="card-img card-img-left" :src="img" alt="" />
|
||||
</div>
|
||||
<div lass="col-9">
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">{{ data.item.title }}</h5>
|
||||
<h5 class="card-title">{{ title }}</h5>
|
||||
<p class="card-text str_wrap">
|
||||
{{ data.item.content }}
|
||||
{{ content }}
|
||||
</p>
|
||||
<p class="card-text">
|
||||
<small class="text-muted">{{ data.item.date }}</small>
|
||||
<small class="text-muted">{{ date }}</small>
|
||||
<slot name="optInfo"></slot>
|
||||
</p>
|
||||
</div>
|
||||
@ -23,8 +23,30 @@
|
||||
</template>
|
||||
|
||||
<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>
|
||||
|
||||
<style>
|
||||
.str_wrap {
|
||||
overflow: hidden;
|
||||
|
||||
@ -1,12 +1,27 @@
|
||||
<template>
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-text">
|
||||
<!-- <input class="form-check-input mt-0" type="checkbox" value="" aria-label="Checkbox for following text input" /> -->
|
||||
<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 class="input-group mb-3 bg-white">
|
||||
<input type="text" class="form-control" placeholder="Search" @change="searchInput" />
|
||||
<button type="button" class="btn btn-primary"><i class="bx bx-search bx-md"></i></button>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
@ -1,15 +1,17 @@
|
||||
<template>
|
||||
<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="mt-8">
|
||||
<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>
|
||||
</div>
|
||||
<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>
|
||||
<span v-show="item.viewCount" style="padding-left: 10px" class="text-muted"
|
||||
><i class="fa-regular fa-eye"></i> {{ item.viewCount }}</span
|
||||
@ -36,6 +38,7 @@
|
||||
import dummy from '@a/boardDummy.json';
|
||||
|
||||
const list = ref(dummy);
|
||||
const searchText = ref('');
|
||||
|
||||
/** 상세로 이동 */
|
||||
const goDetail = idx => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user