알림 없을때 탑바 빨간동그라미 안보이게

src/layouts/TheTop.vue

@@ -46,16 +46,27 @@
                     >
                     <span class="position-relative">
                         <i class="bx bx-bell bx-md"></i>
-                            <span class="badge rounded-pill bg-danger badge-dot badge-notifications border"></span>
+                        <!-- 알림이 있을 경우에만 뱃지를 표시 -->
+                        <span
+                        v-if="notificationCount > 0"
+                        class="badge rounded-pill bg-danger badge-dot badge-notifications border"
+                        ></span>
                     </span>
                     </a>
                     <ul class="dropdown-menu dropdown-menu-end p-0">
                     <li class="dropdown-notifications-list scrollable-container p-3">
+                        <!-- 알림이 없으면 "알림이 없습니다." 메시지 표시 -->
+                        <div v-if="notificationCount === 0">
                         알림이 없습니다.
-                            <!-- <ul class="list-group list-group-flush">
-                                <li class="list-group-item list-group-item-action dropdown-notifications-item">
+                        </div>
+                        <!-- 알림이 있을 때 목록 렌더링-->
+                        <div v-else>
+                        <ul>
+                            <li v-for="notification in notifications" :key="notification.id">
+                            {{ notification.text }}
                             </li>
-                            </ul> -->
+                        </ul>
+                        </div>
                     </li>
                     </ul>
                 </li>
@@ -120,6 +131,8 @@
     const selectedProject = ref(null);
     const weather = ref({});
     const dailyWeatherList = ref([]);
+    const notifications = ref([]);
+    const notificationCount = ref(0);
 
     const weatherReady = computed(() => {
         return (