feat(customer-vue): 알림 페이지 구현

customer-vue/src/api/notification.js

@@ -0,0 +1,9 @@
+import axios from "axios";
+
+const url = process.env.VUE_APP_CUSTOMER_SERVICE_BASEURL + "/notification-service/notification";
+
+export default {
+  requestNotification() {
+    return axios.get(url);
+  }
+}

customer-vue/src/components/AppNavigation.vue

@@ -13,18 +13,43 @@
       <v-img :src="require('@/assets/just-logo.png')"></v-img>
     </v-toolbar-title>
     <v-spacer></v-spacer>
-    <v-btn icon>
-      <v-icon>mdi-magnify</v-icon>
-    </v-btn>
+
+      <v-btn
+          color="white"
+          elevation="0"
+          @click="goNotification"
+      >
+        <v-badge
+          :content="notificationCount"
+          :value="notificationCount"
+          color="orange"
+          overlap
+        >
+            <v-icon>mdi-bell-outline</v-icon>
+        </v-badge>
+      </v-btn>
   </v-app-bar>
 </template>
 
 <script>
 export default {
-  name: "AppNavigation"
+  name: "AppNavigation",
+  mounted() {
+    console.log("[AppNavigation] mounted!");
+  },
+  data: function() {
+    return {
+      notificationCount: 0
+    }
+  },
+  methods: {
+    goNotification: function() {
+      console.log("여기!");
+      this.$router.push('/notification');
+    }
+  }
 }
 </script>
 
 <style scoped>
-
 </style>

customer-vue/src/router/router.js

@@ -55,6 +55,11 @@ const routes = [
         name: 'favorite-store',
         component: () => import('../views/FavoriteStore')
       },
+      {
+        path: "/notification",
+        name: 'notification',
+        component: () => import('../views/NotificationView')
+      },
       {
         path: '/login',
         name: 'login',

customer-vue/src/views/NotificationView.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <template
+        v-for="(item, index) in notifications">
+      <v-list-item three-line :key="item.id">
+        <v-list-item-content>
+          <v-list-item-title>{{item.title}}</v-list-item-title>
+          <v-list-item-subtitle>
+            {{item.message}}
+          </v-list-item-subtitle>
+          <v-list-item-subtitle>
+            2022-03-09 14:00
+          </v-list-item-subtitle>
+        </v-list-item-content>
+
+        <v-list-item-action>
+          <v-checkbox
+              disabled
+              v-if="item.read"
+              v-model="item.read"
+              hide-details></v-checkbox>
+          <v-checkbox
+              v-else
+              v-model="item.read"
+              @click="clickRead(item.id)"
+              hide-details></v-checkbox>
+        </v-list-item-action>
+      </v-list-item>
+      <v-divider
+          v-if="index < notifications.length - 1"
+          :key="index"
+      ></v-divider>
+    </template>
+  </div>
+</template>
+
+<script>
+import notificationApi from "../api/notification";
+
+export default {
+  name: "NotificationView",
+  mounted() {
+    this.search();
+  },
+  data: function () {
+    return {
+      notifications: []
+    }
+  },
+  methods: {
+    search: async function() {
+      const response = await notificationApi.requestNotification();
+      this.render(response.data);
+    },
+    render: function(json) {
+      const notifications = json.data.notifications;
+      notifications.forEach(notification => {
+        this.notifications.push({
+          id: notification.id,
+          message: notification.message,
+          title: notification.title,
+          read: notification.read
+        });
+      });
+    },
+    clickRead: function(id) {
+      console.log("clickRead", id);
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>