From 3e3849d0d1dc5e80707fc955b1e62dcc22e25113 Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Tue, 1 Apr 2025 09:44:17 +0900
Subject: [PATCH] .

---
 src/components/main/BoardMain.vue | 808 ++++++++++--------------------
 1 file changed, 263 insertions(+), 545 deletions(-)

diff --git a/src/components/main/BoardMain.vue b/src/components/main/BoardMain.vue
index e8e4644..e5b772b 100644
--- a/src/components/main/BoardMain.vue
+++ b/src/components/main/BoardMain.vue
@@ -1,549 +1,267 @@
 <template>
-<div class="col-md-6 order-3 order-lg-4 mb-6 mb-lg-0">
-    <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="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 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="card-body p-0">
+            <table class="table mb-0">
+              <thead>
+                <tr>
+                  <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
+                  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>
+                    {{ 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 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>
-        <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">
-                        <thead>
-                            <tr>
-                                <th>No</th>
-                                <th>Browser</th>
-                                <th>Visits</th>
-                                <th class="w-50">Data In Percentage</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>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>
-                                </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>
-                        </tbody>
-                    </table>
-                </div>
-            </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">
-                        <thead>
-                            <tr>
-                                <th>No</th>
-                                <th>System</th>
-                                <th>Visits</th>
-                                <th class="w-50">Data In Percentage</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>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>
-                                </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>
-                        </tbody>
-                    </table>
-                </div>
-            </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">
-                        <thead>
-                            <tr>
-                                <th>No</th>
-                                <th>Country</th>
-                                <th>Visits</th>
-                                <th class="w-50">Data In Percentage</th>
-                            </tr>
-                        </thead>
-                        <tbody>
-                            <tr>
-                                <td>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>
-                                </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>
-                        </tbody>
-                    </table>
-                </div>
-            </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 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
+                  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>
+                    {{ 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 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>
+      </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 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
+                  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>
+                    {{ 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 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>
-</div>
-</template>
+  </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>