From 2e596009ad2a0224625d1d04dd5a8bf24296349e Mon Sep 17 00:00:00 2001
From: dyhj625 <dyhj625@local-host.co.kr>
Date: Mon, 31 Mar 2025 16:01:05 +0900
Subject: [PATCH] =?UTF-8?q?=EA=B2=8C=EC=8B=9C=ED=8C=90=20=EB=A9=94?=
 =?UTF-8?q?=EC=9D=B8=EC=9D=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/main/BoardMain.vue | 559 ++++++++++++++++++++++++++++--
 src/views/MainView.vue            |   2 +-
 2 files changed, 525 insertions(+), 36 deletions(-)

diff --git a/src/components/main/BoardMain.vue b/src/components/main/BoardMain.vue
index 576c14a..e8e4644 100644
--- a/src/components/main/BoardMain.vue
+++ b/src/components/main/BoardMain.vue
@@ -1,6 +1,6 @@
 <template>
-<div class="col-md-6 col-lg-4 order-1 mb-6">
-    <div class="card h-100">
+<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">
@@ -9,49 +9,538 @@
                         class="nav-link active"
                         role="tab"
                         data-bs-toggle="tab"
-                        data-bs-target="#navs-tabs-line-card-income"
-                        aria-controls="navs-tabs-line-card-income"
+                        data-bs-target="#navs-pills-browser"
+                        aria-controls="navs-pills-browser"
                         aria-selected="true"
                     >
-                        Income
+                        Browser
                     </button>
                 </li>
                 <li class="nav-item">
-                    <button type="button" class="nav-link" role="tab">Expenses</button>
+                    <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">Profit</button>
+                    <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>
-        <div class="card-body">
-            <div class="tab-content p-0">
-                <div class="tab-pane fade show active" id="navs-tabs-line-card-income" role="tabpanel">
-                    <div class="d-flex mb-6">
-                        <div class="avatar flex-shrink-0 me-3">
-                            <img src="/img/icons/unicons/wallet-primary.png" alt="User" />
-                        </div>
-                        <div>
-                            <p class="mb-0">Total Balance</p>
-                            <div class="d-flex align-items-center">
-                                <h6 class="mb-0 me-1">$459.10</h6>
-                                <small class="text-success fw-medium">
-                                    <i class="bx bx-chevron-up bx-lg"></i>
-                                    42.9%
-                                </small>
-                            </div>
-                        </div>
-                    </div>
-                    <div id="incomeChart"></div>
-                    <div class="d-flex align-items-center justify-content-center mt-6 gap-3">
-                        <div class="flex-shrink-0">
-                            <div id="expensesOfWeek"></div>
-                        </div>
-                        <div>
-                            <h6 class="mb-0">Income this week</h6>
-                            <small>$39k less than last week</small>
-                        </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>
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index d93d71b..2778194 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -2,7 +2,7 @@
     <div class="container-xxl flex-grow-1 container-p-y pb-0">
         <MainEventCalendar />
         <MemberManagement v-if="isAdmin" />
-        <div class="">
+        <div class="container-p-y">
             <BoardMain />
         </div>
     </div>