.
This commit is contained in:
parent
2e596009ad
commit
3e3849d0d1
@ -1,549 +1,267 @@
|
||||
<template>
|
||||
<div class="col-md-6 order-3 order-lg-4 mb-6 mb-lg-0">
|
||||
<div class="row" style="gap: 20px;">
|
||||
<!-- 공지사항 카드 -->
|
||||
<div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-6">
|
||||
<div class="card text-center h-100">
|
||||
<div class="card-header nav-align-top">
|
||||
<ul class="nav nav-pills" role="tablist">
|
||||
<li class="nav-item">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link active"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#navs-pills-browser"
|
||||
aria-controls="navs-pills-browser"
|
||||
aria-selected="true"
|
||||
>
|
||||
Browser
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#navs-pills-os"
|
||||
aria-controls="navs-pills-os"
|
||||
aria-selected="false"
|
||||
>
|
||||
Operating System
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<button
|
||||
type="button"
|
||||
class="nav-link"
|
||||
role="tab"
|
||||
data-bs-toggle="tab"
|
||||
data-bs-target="#navs-pills-country"
|
||||
aria-controls="navs-pills-country"
|
||||
aria-selected="false"
|
||||
>
|
||||
Country
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h3 class="mb-0">공지사항</h3>
|
||||
<router-link :to="{ name: 'BoardList', query: { type: 'notices' } }" class="btn btn-sm btn-primary">
|
||||
더보기
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="tab-content pt-0 pb-4">
|
||||
<div class="tab-pane fade show active" id="navs-pills-browser" role="tabpanel">
|
||||
<div class="table-responsive text-start text-nowrap">
|
||||
<table class="table table-borderless">
|
||||
<div class="card-body p-0">
|
||||
<table class="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>Browser</th>
|
||||
<th>Visits</th>
|
||||
<th class="w-50">Data In Percentage</th>
|
||||
<th class="text-center" style="width: 15%;">번호</th>
|
||||
<th class="text-center" style="width: 55%;">제목</th>
|
||||
<th class="text-center" style="width: 15%;">작성일</th>
|
||||
<th class="text-center" style="width: 15%;">조회수</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<tr
|
||||
v-for="(post, index) in noticeList"
|
||||
:key="post.id"
|
||||
@click="goDetail(post.id, 'notices')"
|
||||
style="cursor: pointer;"
|
||||
>
|
||||
<td class="text-center">{{ index + 1 }}</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/img/icons/brands/chrome.png" alt="Chrome" height="24" class="me-3" />
|
||||
<span class="text-heading">Chrome</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-heading">8.92k</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-4">
|
||||
<div class="progress w-100" style="height: 10px">
|
||||
<div
|
||||
class="progress-bar bg-success"
|
||||
role="progressbar"
|
||||
style="width: 64.75%"
|
||||
aria-valuenow="64.75"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
<small class="fw-medium">64.75%</small>
|
||||
</div>
|
||||
{{ post.title }}
|
||||
<span v-if="post.commentCount" class="text-danger ml-1">[{{ post.commentCount }}]</span>
|
||||
<span v-if="isNewPost(post.rawDate)" class="badge bg-warning text-dark ml-1">N</span>
|
||||
</td>
|
||||
<td class="text-center">{{ post.date }}</td>
|
||||
<td class="text-center">{{ post.views }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/img/icons/brands/safari.png" alt="Safari" height="24" class="me-3" />
|
||||
<span class="text-heading">Safari</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-heading">1.29k</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-4">
|
||||
<div class="progress w-100" style="height: 10px">
|
||||
<div
|
||||
class="progress-bar bg-primary"
|
||||
role="progressbar"
|
||||
style="width: 18.43%"
|
||||
aria-valuenow="18.43"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
<small class="fw-medium">18.43%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/img/icons/brands/firefox.png" alt="Firefox" height="24" class="me-3" />
|
||||
<span class="text-heading">Firefox</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-heading">328</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-4">
|
||||
<div class="progress w-100" style="height: 10px">
|
||||
<div
|
||||
class="progress-bar bg-info"
|
||||
role="progressbar"
|
||||
style="width: 8.37%"
|
||||
aria-valuenow="8.37"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
<small class="fw-medium">8.37%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/img/icons/brands/edge.png" alt="Edge" height="24" class="me-3" />
|
||||
<span class="text-heading">Edge</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-heading">142</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-4">
|
||||
<div class="progress w-100" style="height: 10px">
|
||||
<div
|
||||
class="progress-bar bg-warning"
|
||||
role="progressbar"
|
||||
style="width: 6.12%"
|
||||
aria-valuenow="6.12"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
<small class="fw-medium">6.12%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/img/icons/brands/opera.png" alt="Opera" height="24" class="me-3" />
|
||||
<span class="text-heading">Opera</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-heading">82</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-4">
|
||||
<div class="progress w-100" style="height: 10px">
|
||||
<div
|
||||
class="progress-bar bg-danger"
|
||||
role="progressbar"
|
||||
style="width: 2.12%"
|
||||
aria-valuenow="1.94"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
<small class="fw-medium">2.12%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/img/icons/brands/uc.png" alt="uc" height="24" class="me-3" />
|
||||
<span class="text-heading">UC Browser</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-heading">328</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-4">
|
||||
<div class="progress w-100" style="height: 10px">
|
||||
<div
|
||||
class="progress-bar bg-danger"
|
||||
role="progressbar"
|
||||
style="width: 20.14%"
|
||||
aria-valuenow="1.94"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
<small class="fw-medium">20.14%</small>
|
||||
</div>
|
||||
</td>
|
||||
<tr v-if="noticeList.length === 0">
|
||||
<td colspan="4" class="text-center text-muted">게시물이 없습니다.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-footer d-flex justify-content-end">
|
||||
<router-link :to="{ name: 'BoardList', query: { type: 'notices' } }" class="btn btn-sm btn-primary">
|
||||
더보기
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="navs-pills-os" role="tabpanel">
|
||||
<div class="table-responsive text-start text-nowrap">
|
||||
<table class="table table-borderless">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 자유게시판 카드 -->
|
||||
<div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-6">
|
||||
<div class="card text-center h-100">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h3 class="mb-0">자유게시판</h3>
|
||||
<router-link :to="{ name: 'BoardList', query: { type: 'general' } }" class="btn btn-sm btn-primary">
|
||||
더보기
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<table class="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>System</th>
|
||||
<th>Visits</th>
|
||||
<th class="w-50">Data In Percentage</th>
|
||||
<th class="text-center" style="width: 15%;">번호</th>
|
||||
<th class="text-center" style="width: 55%;">제목</th>
|
||||
<th class="text-center" style="width: 15%;">작성일</th>
|
||||
<th class="text-center" style="width: 15%;">조회수</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<tr
|
||||
v-for="(post, index) in freeList"
|
||||
:key="post.id"
|
||||
@click="goDetail(post.id, 'general')"
|
||||
style="cursor: pointer;"
|
||||
>
|
||||
<td class="text-center">{{ index + 1 }}</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/img/icons/brands/windows.png" alt="Windows" height="24" class="me-3" />
|
||||
<span class="text-heading">Windows</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-heading">875.24k</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-4">
|
||||
<div class="progress w-100" style="height: 10px">
|
||||
<div
|
||||
class="progress-bar bg-success"
|
||||
role="progressbar"
|
||||
style="width: 61.5%"
|
||||
aria-valuenow="61.50"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
<small class="fw-medium">61.50%</small>
|
||||
</div>
|
||||
{{ post.title }}
|
||||
<span v-if="post.commentCount" class="text-danger ml-1">[{{ post.commentCount }}]</span>
|
||||
<span v-if="isNewPost(post.rawDate)" class="badge bg-warning text-dark ml-1">N</span>
|
||||
</td>
|
||||
<td class="text-center">{{ post.date }}</td>
|
||||
<td class="text-center">{{ post.views }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/img/icons/brands/mac.png" alt="Mac" height="24" class="me-3" />
|
||||
<span class="text-heading">Mac</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-heading">89.68k</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-4">
|
||||
<div class="progress w-100" style="height: 10px">
|
||||
<div
|
||||
class="progress-bar bg-primary"
|
||||
role="progressbar"
|
||||
style="width: 16.67%"
|
||||
aria-valuenow="16.67"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
<small class="fw-medium">16.67%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/img/icons/brands/ubuntu.png" alt="Ubuntu" height="24" class="me-3" />
|
||||
<span class="text-heading">Ubuntu</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-heading">37.68k</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-4">
|
||||
<div class="progress w-100" style="height: 10px">
|
||||
<div
|
||||
class="progress-bar bg-info"
|
||||
role="progressbar"
|
||||
style="width: 12.82%"
|
||||
aria-valuenow="12.82"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
<small class="fw-medium">12.82%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/img/icons/brands/chrome.png" alt="Chrome" height="24" class="me-3" />
|
||||
<span class="text-heading">Chrome</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-heading">8.34k</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-4">
|
||||
<div class="progress w-100" style="height: 10px">
|
||||
<div
|
||||
class="progress-bar bg-warning"
|
||||
role="progressbar"
|
||||
style="width: 6.25%"
|
||||
aria-valuenow="6.25"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
<small class="fw-medium">6.25%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/img/icons/brands/cent.png" alt="Cent" height="24" class="me-3" />
|
||||
<span class="text-heading">Cent</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-heading">2.25k</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-4">
|
||||
<div class="progress w-100" style="height: 10px">
|
||||
<div
|
||||
class="progress-bar bg-danger"
|
||||
role="progressbar"
|
||||
style="width: 2.76%"
|
||||
aria-valuenow="2.76"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
<small class="fw-medium">2.76%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<img src="/img/icons/brands/linux.png" alt="linux" height="24" class="me-3" />
|
||||
<span class="text-heading">Linux</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-heading">328k</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-4">
|
||||
<div class="progress w-100" style="height: 10px">
|
||||
<div
|
||||
class="progress-bar bg-danger"
|
||||
role="progressbar"
|
||||
style="width: 20.14%"
|
||||
aria-valuenow="2.76"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
<small class="fw-medium">20.14%</small>
|
||||
</div>
|
||||
</td>
|
||||
<tr v-if="freeList.length === 0">
|
||||
<td colspan="4" class="text-center text-muted">게시물이 없습니다.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-footer d-flex justify-content-end">
|
||||
<router-link :to="{ name: 'BoardList', query: { type: 'general' } }" class="btn btn-sm btn-primary">
|
||||
더보기
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="navs-pills-country" role="tabpanel">
|
||||
<div class="table-responsive text-start text-nowrap">
|
||||
<table class="table table-borderless">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 익명게시판 카드 -->
|
||||
<div class="col-md-6 col-lg-4 col-xl-4 order-0 mb-6">
|
||||
<div class="card text-center h-100">
|
||||
<div class="card-header d-flex justify-content-between align-items-center">
|
||||
<h3 class="mb-0">익명게시판</h3>
|
||||
<router-link :to="{ name: 'BoardList', query: { type: 'anonymous' } }" class="btn btn-sm btn-primary">
|
||||
더보기
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="card-body p-0">
|
||||
<table class="table mb-0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>No</th>
|
||||
<th>Country</th>
|
||||
<th>Visits</th>
|
||||
<th class="w-50">Data In Percentage</th>
|
||||
<th class="text-center" style="width: 15%;">번호</th>
|
||||
<th class="text-center" style="width: 55%;">제목</th>
|
||||
<th class="text-center" style="width: 15%;">작성일</th>
|
||||
<th class="text-center" style="width: 15%;">조회수</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<tr
|
||||
v-for="(post, index) in anonymousList"
|
||||
:key="post.id"
|
||||
@click="goDetail(post.id, 'anonymous')"
|
||||
style="cursor: pointer;"
|
||||
>
|
||||
<td class="text-center">{{ index + 1 }}</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fis fi fi-us rounded-circle fs-4 me-3"></i>
|
||||
<span class="text-heading">USA</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-heading">87.24k</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-4">
|
||||
<div class="progress w-100" style="height: 10px">
|
||||
<div
|
||||
class="progress-bar bg-success"
|
||||
role="progressbar"
|
||||
style="width: 38.12%"
|
||||
aria-valuenow="38.12"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
<small class="fw-medium">38.12%</small>
|
||||
</div>
|
||||
{{ post.title }}
|
||||
<span v-if="post.commentCount" class="text-danger ml-1">[{{ post.commentCount }}]</span>
|
||||
<span v-if="isNewPost(post.rawDate)" class="badge bg-warning text-dark ml-1">N</span>
|
||||
</td>
|
||||
<td class="text-center">{{ post.date }}</td>
|
||||
<td class="text-center">{{ post.views }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fis fi fi-br rounded-circle fs-4 me-3"></i>
|
||||
<span class="text-heading">Brazil</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-heading">42.68k</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-4">
|
||||
<div class="progress w-100" style="height: 10px">
|
||||
<div
|
||||
class="progress-bar bg-primary"
|
||||
role="progressbar"
|
||||
style="width: 28.23%"
|
||||
aria-valuenow="28.23"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
<small class="fw-medium">28.23%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fis fi fi-in rounded-circle fs-4 me-3"></i>
|
||||
<span class="text-heading">India</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-heading">12.58k</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-4">
|
||||
<div class="progress w-100" style="height: 10px">
|
||||
<div
|
||||
class="progress-bar bg-info"
|
||||
role="progressbar"
|
||||
style="width: 14.82%"
|
||||
aria-valuenow="14.82"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
<small class="fw-medium">14.82%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>4</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fis fi fi-au rounded-circle fs-4 me-3"></i>
|
||||
<span class="text-heading">Australia</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-heading">4.13k</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-4">
|
||||
<div class="progress w-100" style="height: 10px">
|
||||
<div
|
||||
class="progress-bar bg-warning"
|
||||
role="progressbar"
|
||||
style="width: 12.72%"
|
||||
aria-valuenow="12.72"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
<small class="fw-medium">12.72%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>5</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fis fi fi-fr rounded-circle fs-4 me-3"></i>
|
||||
<span class="text-heading">France</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-heading">2.21k</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-4">
|
||||
<div class="progress w-100" style="height: 10px">
|
||||
<div
|
||||
class="progress-bar bg-danger"
|
||||
role="progressbar"
|
||||
style="width: 7.11%"
|
||||
aria-valuenow="7.11"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
<small class="fw-medium">7.11%</small>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>6</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center">
|
||||
<i class="fis fi fi-ca rounded-circle fs-4 me-3"></i>
|
||||
<span class="text-heading">Canada</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-heading">22.35k</td>
|
||||
<td>
|
||||
<div class="d-flex justify-content-between align-items-center gap-4">
|
||||
<div class="progress w-100" style="height: 10px">
|
||||
<div
|
||||
class="progress-bar bg-danger"
|
||||
role="progressbar"
|
||||
style="width: 15.13%"
|
||||
aria-valuenow="7.11"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100"
|
||||
></div>
|
||||
</div>
|
||||
<small class="fw-medium">15.13%</small>
|
||||
</div>
|
||||
</td>
|
||||
<tr v-if="anonymousList.length === 0">
|
||||
<td colspan="4" class="text-center text-muted">게시물이 없습니다.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="card-footer d-flex justify-content-end">
|
||||
<router-link :to="{ name: 'BoardList', query: { type: 'anonymous' } }" class="btn btn-sm btn-primary">
|
||||
더보기
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
import { useRouter } from 'vue-router';
|
||||
import axios from '@api';
|
||||
import dayjs from 'dayjs';
|
||||
import isToday from 'dayjs/plugin/isToday';
|
||||
import isYesterday from 'dayjs/plugin/isYesterday';
|
||||
|
||||
dayjs.extend(isToday);
|
||||
dayjs.extend(isYesterday);
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
// 미리보기 데이터 저장
|
||||
const noticeList = ref([]);
|
||||
const freeList = ref([]);
|
||||
const anonymousList = ref([]);
|
||||
|
||||
// 날짜 포맷: 오늘이면 HH:mm, 아니면 YYYY-MM-DD
|
||||
const formatDate = dateString => {
|
||||
const date = dayjs(dateString);
|
||||
return date.isToday() ? date.format('HH:mm') : date.format('YYYY-MM-DD');
|
||||
};
|
||||
|
||||
// 새 게시물 여부: 오늘 또는 어제 작성
|
||||
const isNewPost = dateString => {
|
||||
const date = dayjs(dateString);
|
||||
return date.isToday() || date.isYesterday();
|
||||
};
|
||||
|
||||
// 공지사항 데이터 로드 (최대 5개)
|
||||
const fetchNoticePosts = async () => {
|
||||
try {
|
||||
const { data } = await axios.get('board/notices', { params: { size: 5 } });
|
||||
if (data?.data) {
|
||||
noticeList.value = data.data.map(post => ({
|
||||
id: post.id,
|
||||
title: post.title,
|
||||
date: formatDate(post.date),
|
||||
rawDate: post.date,
|
||||
views: post.cnt || 0,
|
||||
commentCount: post.commentCount,
|
||||
hasAttachment: post.hasAttachment,
|
||||
img: post.firstImageUrl || null,
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
// board/general 게시물 로드 후 자유게시판과 익명게시판으로 분리 (최대 10개 조회 후 각각 최대 5개씩)
|
||||
const fetchGeneralPosts = async () => {
|
||||
try {
|
||||
const { data } = await axios.get('board/general', { params: { size: 10 } });
|
||||
if (data?.data && data.data.list) {
|
||||
const freePosts = [];
|
||||
const anonymousPosts = [];
|
||||
data.data.list.forEach(post => {
|
||||
// 닉네임이 존재하면 익명게시판, 없으면 자유게시판
|
||||
if (post.nickname) {
|
||||
anonymousPosts.push({
|
||||
id: post.id,
|
||||
title: post.title,
|
||||
date: formatDate(post.date),
|
||||
rawDate: post.date,
|
||||
views: post.cnt || 0,
|
||||
commentCount: post.commentCount,
|
||||
hasAttachment: post.hasAttachment,
|
||||
img: post.firstImageUrl || null,
|
||||
});
|
||||
} else {
|
||||
freePosts.push({
|
||||
id: post.id,
|
||||
title: post.title,
|
||||
date: formatDate(post.date),
|
||||
rawDate: post.date,
|
||||
views: post.cnt || 0,
|
||||
commentCount: post.commentCount,
|
||||
hasAttachment: post.hasAttachment,
|
||||
img: post.firstImageUrl || null,
|
||||
author: post.author || '익명',
|
||||
});
|
||||
}
|
||||
});
|
||||
freeList.value = freePosts.slice(0, 5);
|
||||
anonymousList.value = anonymousPosts.slice(0, 5);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
};
|
||||
|
||||
// 상세 페이지 이동 (게시판 타입 전달)
|
||||
const goDetail = (id, boardType) => {
|
||||
router.push({ name: 'BoardDetail', params: { id, type: boardType } });
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchNoticePosts();
|
||||
fetchGeneralPosts();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.badge {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25em 0.5em;
|
||||
}
|
||||
.ml-1 {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user