From 81d68ea2f183d120a26b5230b4a45670cbc7dd9f Mon Sep 17 00:00:00 2001
From: yoon <nmjk0123@gmail.com>
Date: Thu, 6 Feb 2025 14:20:30 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=95=9C=20user?=
 =?UTF-8?q?=20=ED=94=84=EB=A1=9C=ED=95=84=20=EA=B0=80=EC=A0=B8=EC=98=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layouts/TheTop.vue | 137 +++++------------------------------------
 1 file changed, 16 insertions(+), 121 deletions(-)

diff --git a/src/layouts/TheTop.vue b/src/layouts/TheTop.vue
index 41fb494..1a664a7 100644
--- a/src/layouts/TheTop.vue
+++ b/src/layouts/TheTop.vue
@@ -12,10 +12,10 @@
                 <button class="btn p-1" @click="switchToLightMode"><i class='bx bxs-sun link-warning'></i></button>
                 <button class="btn p-1" @click="switchToDarkMode"><i class='bx bxs-moon' ></i></button>
 
-                <i class="bx bx-bell bx-md bx-log-out cursor-pointer" @click="handleLogout"></i>
+                <i class="bx bx-bell bx-md bx-log-out cursor-pointer p-1" @click="handleLogout"></i>
 
                 <!-- Notification -->
-                <li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2">
+                <li class="nav-item dropdown-notifications navbar-dropdown dropdown me-3 me-xl-2 p-1">
                     <a
                         class="nav-link dropdown-toggle hide-arrow"
                         href="javascript:void(0);"
@@ -137,120 +137,6 @@
                                         </div>
                                     </div>
                                 </li>
-                                <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
-                                    <div class="d-flex">
-                                        <div class="flex-shrink-0 me-3">
-                                            <div class="avatar">
-                                                <img src="/img/avatars/9.png" class="rounded-circle" />
-                                            </div>
-                                        </div>
-                                        <div class="flex-grow-1">
-                                            <h6 class="small mb-0">Application has been approved 🚀</h6>
-                                            <small class="mb-1 d-block text-body">Your ABC project application has been approved.</small>
-                                            <small class="text-muted">2 days ago</small>
-                                        </div>
-                                        <div class="flex-shrink-0 dropdown-notifications-actions">
-                                            <a href="javascript:void(0)" class="dropdown-notifications-read"
-                                                ><span class="badge badge-dot"></span
-                                            ></a>
-                                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                                                ><span class="bx bx-x"></span
-                                            ></a>
-                                        </div>
-                                    </div>
-                                </li>
-                                <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
-                                    <div class="d-flex">
-                                        <div class="flex-shrink-0 me-3">
-                                            <div class="avatar">
-                                                <span class="avatar-initial rounded-circle bg-label-success"
-                                                    ><i class="bx bx-pie-chart-alt"></i
-                                                ></span>
-                                            </div>
-                                        </div>
-                                        <div class="flex-grow-1">
-                                            <h6 class="small mb-0">Monthly report is generated</h6>
-                                            <small class="mb-1 d-block text-body">July monthly financial report is generated </small>
-                                            <small class="text-muted">3 days ago</small>
-                                        </div>
-                                        <div class="flex-shrink-0 dropdown-notifications-actions">
-                                            <a href="javascript:void(0)" class="dropdown-notifications-read"
-                                                ><span class="badge badge-dot"></span
-                                            ></a>
-                                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                                                ><span class="bx bx-x"></span
-                                            ></a>
-                                        </div>
-                                    </div>
-                                </li>
-                                <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
-                                    <div class="d-flex">
-                                        <div class="flex-shrink-0 me-3">
-                                            <div class="avatar">
-                                                <img src="/img/avatars/5.png" class="rounded-circle" />
-                                            </div>
-                                        </div>
-                                        <div class="flex-grow-1">
-                                            <h6 class="small mb-0">Send connection request</h6>
-                                            <small class="mb-1 d-block text-body">Peter sent you connection request</small>
-                                            <small class="text-muted">4 days ago</small>
-                                        </div>
-                                        <div class="flex-shrink-0 dropdown-notifications-actions">
-                                            <a href="javascript:void(0)" class="dropdown-notifications-read"
-                                                ><span class="badge badge-dot"></span
-                                            ></a>
-                                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                                                ><span class="bx bx-x"></span
-                                            ></a>
-                                        </div>
-                                    </div>
-                                </li>
-                                <li class="list-group-item list-group-item-action dropdown-notifications-item">
-                                    <div class="d-flex">
-                                        <div class="flex-shrink-0 me-3">
-                                            <div class="avatar">
-                                                <img src="/img/avatars/6.png" class="rounded-circle" />
-                                            </div>
-                                        </div>
-                                        <div class="flex-grow-1">
-                                            <h6 class="small mb-0">New message from Jane</h6>
-                                            <small class="mb-1 d-block text-body">Your have new message from Jane</small>
-                                            <small class="text-muted">5 days ago</small>
-                                        </div>
-                                        <div class="flex-shrink-0 dropdown-notifications-actions">
-                                            <a href="javascript:void(0)" class="dropdown-notifications-read"
-                                                ><span class="badge badge-dot"></span
-                                            ></a>
-                                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                                                ><span class="bx bx-x"></span
-                                            ></a>
-                                        </div>
-                                    </div>
-                                </li>
-                                <li class="list-group-item list-group-item-action dropdown-notifications-item marked-as-read">
-                                    <div class="d-flex">
-                                        <div class="flex-shrink-0 me-3">
-                                            <div class="avatar">
-                                                <span class="avatar-initial rounded-circle bg-label-warning"
-                                                    ><i class="bx bx-error"></i
-                                                ></span>
-                                            </div>
-                                        </div>
-                                        <div class="flex-grow-1">
-                                            <h6 class="small mb-0">CPU is running high</h6>
-                                            <small class="mb-1 d-block text-body">CPU Utilization Percent is currently at 88.63%,</small>
-                                            <small class="text-muted">5 days ago</small>
-                                        </div>
-                                        <div class="flex-shrink-0 dropdown-notifications-actions">
-                                            <a href="javascript:void(0)" class="dropdown-notifications-read"
-                                                ><span class="badge badge-dot"></span
-                                            ></a>
-                                            <a href="javascript:void(0)" class="dropdown-notifications-archive"
-                                                ><span class="bx bx-x"></span
-                                            ></a>
-                                        </div>
-                                    </div>
-                                </li>
                             </ul>
                         </li>
                         <li class="border-top">
@@ -266,9 +152,7 @@
                 <!-- User -->
                 <li class="nav-item navbar-dropdown dropdown-user dropdown">
                     <a class="nav-link dropdown-toggle hide-arrow p-0" href="javascript:void(0);" data-bs-toggle="dropdown">
-                        <div class="avatar avatar-online">
-                            <img src="/img/avatars/1.png" class="w-px-40 h-auto rounded-circle" />
-                        </div>
+                        <img v-if="user" :src="`http://localhost:10325/upload/img/profile/${user.profile}`" alt="Profile Image" class="w-px-40 h-auto rounded-circle"/>
                     </a>
                     <ul class="dropdown-menu dropdown-menu-end">
                         <li>
@@ -344,26 +228,37 @@
 </template>
 <script setup>
 import { useAuthStore } from '@s/useAuthStore';
+import { useUserStore } from '@s/useUserStore';
 import { useRouter } from 'vue-router';
 import { useThemeStore } from '@s/darkmode';
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
+
+const user = ref(null);
 
 const authStore = useAuthStore();
+const userStore = useUserStore();
 const router = useRouter();
 
 const { isDarkMode, switchToDarkMode, switchToLightMode } = useThemeStore();
 
-onMounted(() => {
+onMounted(async () => {
     if (isDarkMode) {
         switchToDarkMode();
     } else {
         switchToLightMode();
     }
+
+    await userStore.userInfo();
+    user.value = userStore.user;
 });
 
+
+
 const handleLogout = async () => {
     await authStore.logout();
     router.push('/login');
 };
+
+
 </script>
 <style></style>