feat(customer-vue): 알림 체크박스 및 개수 화면 구현

- 알림 페이지 체크박스 클릭 시 읽음 처리 및 읽음 해제 처리
- App bar 읽지 않은 알림 개수 표시
- 알림 읽었을 시에
앱바 알림 개수 연동

customer-vue/src/api/notification.js

@@ -1,9 +1,19 @@
 import axios from "axios";
 
-const url = process.env.VUE_APP_CUSTOMER_SERVICE_BASEURL + "/notification-service/notification";
+const url = process.env.VUE_APP_CUSTOMER_SERVICE_BASEURL + "/notification-service";
 
 export default {
   requestNotification() {
-    return axios.get(url);
+    return axios.get(url + "/notifications");
+  },
+  patchNotification(id, isRead) {
+    const body = {
+      read: isRead
+    }
+
+    return axios.patch(url + "/notification/" + id, body)
+  },
+  countsNotification() {
+    return axios.get(url + "/api/notification/counts");
   }
 }

customer-vue/src/components/AppNavigation.vue

@@ -20,8 +20,8 @@
           @click="goNotification"
       >
         <v-badge
-          :content="notificationCount"
+          :content="notificationCounts"
-          :value="notificationCount"
+          :value="notificationCounts"
           color="orange"
           overlap
         >
@@ -34,17 +34,9 @@
 <script>
 export default {
   name: "AppNavigation",
-  mounted() {
+  props: ["notificationCounts"],
-    console.log("[AppNavigation] mounted!");
-  },
-  data: function() {
-    return {
-      notificationCount: 0
-    }
-  },
   methods: {
     goNotification: function() {
-      console.log("여기!");
       this.$router.push('/notification');
     }
   }

customer-vue/src/views/Layout/HomeLayout.vue

@@ -1,9 +1,12 @@
 <template>
   <v-app>
-    <app-navigation></app-navigation>
+    <app-navigation
+      v-bind:notificationCounts="notificationCounts"></app-navigation>
     <v-main>
       <v-container class="px-8 py-8">
-        <router-view></router-view>
+        <router-view
+          v-on:plusCount="notificationCounts++"
+          v-on:minusCount="notificationCounts--"></router-view>
       </v-container>
     </v-main>
     <bottom-navigation></bottom-navigation>
@@ -13,12 +16,27 @@
 <script>
 import AppNavigation from "../../components/AppNavigation.vue";
 import BottomNavigation from "../../components/BottomNavigation.vue";
+import notificationApi from "../../api/notification";
 
 export default {
   name: "HomeLayout",
   components: {
     'app-navigation': AppNavigation,
     "bottom-navigation": BottomNavigation
+  },
+  mounted() {
+    this.searchNotificationCounts();
+  },
+  data: function() {
+    return {
+      notificationCounts: 0
+    }
+  },
+  methods: {
+    searchNotificationCounts: async function() {
+      const response = await notificationApi.countsNotification();
+      this.notificationCounts = response.data.data;
+    }
   }
 }
 </script>

customer-vue/src/views/NotificationView.vue

@@ -16,13 +16,13 @@
         <v-list-item-action>
           <v-checkbox
               disabled
-              v-if="item.read"
+              v-if="item.prevRead"
               v-model="item.read"
               hide-details></v-checkbox>
           <v-checkbox
               v-else
               v-model="item.read"
-              @click="clickRead(item.id)"
+              @click="clickRead(item.id, item.read)"
               hide-details></v-checkbox>
         </v-list-item-action>
       </v-list-item>
@@ -35,7 +35,7 @@
 </template>
 
 <script>
-import notificationApi from "../api/notification";
+import notificationApi from "@/api/notification";
 
 export default {
   name: "NotificationView",
@@ -59,12 +59,21 @@ export default {
           id: notification.id,
           message: notification.message,
           title: notification.title,
+          prevRead: notification.read,
           read: notification.read
         });
       });
     },
-    clickRead: function(id) {
+    clickRead: async function(id, isRead) {
-      console.log("clickRead", id);
+      await notificationApi.patchNotification(id, isRead);
+
+      if (isRead) {
+        alert("해당 알림은 읽음 처리되었습니다.");
+        this.$emit("minusCount");
+      } else {
+        alert("해당 알림은 읽음 해제 처리되었습니다.");
+        this.$emit("plusCount");
+      }
     }
   }
 }