From 35bbdd4595d029c92fb42e878d63134fd2c6133f Mon Sep 17 00:00:00 2001
From: bum12ark <bum12ark@gmail.com>
Date: Wed, 9 Mar 2022 14:09:20 +0900
Subject: [PATCH] =?UTF-8?q?feat(customer-vue):=20=EC=95=8C=EB=A6=BC=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 customer-vue/src/api/notification.js          |  9 +++
 customer-vue/src/components/AppNavigation.vue | 35 +++++++--
 customer-vue/src/router/router.js             |  5 ++
 customer-vue/src/views/NotificationView.vue   | 75 +++++++++++++++++++
 4 files changed, 119 insertions(+), 5 deletions(-)
 create mode 100644 customer-vue/src/api/notification.js
 create mode 100644 customer-vue/src/views/NotificationView.vue

diff --git a/customer-vue/src/api/notification.js b/customer-vue/src/api/notification.js
new file mode 100644
index 0000000..12440df
--- /dev/null
+++ b/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);
+  }
+}
\ No newline at end of file
diff --git a/customer-vue/src/components/AppNavigation.vue b/customer-vue/src/components/AppNavigation.vue
index 8650ed4..b75d874 100644
--- a/customer-vue/src/components/AppNavigation.vue
+++ b/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>
\ No newline at end of file
diff --git a/customer-vue/src/router/router.js b/customer-vue/src/router/router.js
index 2d7d474..382d246 100644
--- a/customer-vue/src/router/router.js
+++ b/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',
diff --git a/customer-vue/src/views/NotificationView.vue b/customer-vue/src/views/NotificationView.vue
new file mode 100644
index 0000000..712b2c1
--- /dev/null
+++ b/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>
\ No newline at end of file