feat(customer-vue): 고객 매장 상품 페이지 개발

customer-vue/src/api/store.js

@@ -1,56 +1,39 @@
 import axios from "axios";
 
 export default {
-    requestNearbyStore(latitude, longitude, storeName, page, size) {
-      const options = {
-        params: {
-          latitude: latitude,
-          longitude: longitude,
-          storeName: storeName,
-          page: page,
-          size: size
-        }
+  requestNearbyStore(latitude, longitude, storeName, page, size) {
+    const options = {
+      params: {
+        latitude: latitude,
+        longitude: longitude,
+        storeName: storeName,
+        page: page,
+        size: size
       }
-      return axios.get(process.env.VUE_APP_STORE_API_URL + '/store/search', options);
-    },
-    getCategoryList(){
-        return axios.get(process.env.VUE_APP_CUSTOMER_SERVICE_BASEURL+'/store-service/category/');
-    },
-    putCategoryList(data){
-        return axios({
-            method:'put',
-            url:process.env.VUE_APP_CUSTOMER_SERVICE_BASEURL+'/store-service/category',
-            headers: {
-                'Accept': 'application/json',
-                'Content-Type': 'application/json;charset=UTF-8'
-            },
-            data: data,
-            responseType:'json'
-        })
-    },
-    getItemById(itemId){
-        return axios.get(process.env.VUE_APP_CUSTOMER_SERVICE_BASEURL+'/store-service/item/'+itemId)
-    },
-    saveItem(method, itemData){
-        return axios({
-            method:method,
-            url: process.env.VUE_APP_CUSTOMER_SERVICE_BASEURL+'/store-service/item',
-            headers: {
-                'Accept': 'application/json',
-                'Content-Type': 'application/json;charset=UTF-8'
-            },
-            data: itemData,
-            responseType:'json'
-        })
-    },
-    getFavoriteStore(latitude, longitude,){
-        const options = {
-            params: {
-                latitude: latitude,
-                longitude: longitude,
-            }
-        }
-        return axios.get(process.env.VUE_APP_CUSTOMER_SERVICE_BASEURL+'/store-service/api/customer/store/favorite',options)
-    },
-
+    }
+    return axios.get(process.env.VUE_APP_STORE_API_URL + '/store/search', options);
+  },
+  getItemById(itemId){
+      return axios.get(process.env.VUE_APP_CUSTOMER_SERVICE_BASEURL+'/store-service/item/'+itemId)
+  },
+  getFavoriteStore(latitude, longitude,){
+      const options = {
+          params: {
+              latitude: latitude,
+              longitude: longitude,
+          }
+      }
+      return axios.get(process.env.VUE_APP_CUSTOMER_SERVICE_BASEURL+'/store-service/api/customer/store/favorite',options)
+  },
+  requestCategoriesWithItem(storeId) {
+    const options = {
+      params: {
+        "storeId": storeId
+      }
+    }
+    return axios.get(process.env.VUE_APP_STORE_API_URL + "/categories", options);
+  },
+  requestStore(storeId) {
+    return axios.get(process.env.VUE_APP_CUSTOMER_SERVICE_BASEURL + "/store-service/store/" + storeId);
+  }
 }

customer-vue/src/components/StoreNavigation.vue

@@ -0,0 +1,32 @@
+<template>
+  <v-app-bar
+      app
+      dense
+      color="white"
+      elevation="1"
+      hide-on-scroll
+      absolute
+  >
+    <v-app-bar-nav-icon>
+      <v-icon>mdi-arrow-left</v-icon>
+    </v-app-bar-nav-icon>
+    <v-spacer></v-spacer>
+    <v-toolbar-title>
+      <b>{{store.name}}</b>
+    </v-toolbar-title>
+    <v-spacer></v-spacer>
+    <v-btn icon>
+      <v-icon>mdi-magnify</v-icon>
+    </v-btn>
+  </v-app-bar>
+</template>
+
+<script>
+export default {
+  name: "StoreNavigation",
+  props: ["store"],
+}
+</script>
+
+<style scoped>
+</style>

customer-vue/src/router/router.js

@@ -4,6 +4,7 @@ import jwt from "@/common/jwt";
 import auth from "@/api/auth";
 
 import HomeLayout from '../views/Layout/HomeLayout.vue';
+import StoreLayout from "@/views/Layout/StoreLayout";
 const ACCESS_TOKEN_NAME = "accessToken";
 const EXPIRED_TIME_NAME = "expiredTime";
 
@@ -61,7 +62,20 @@ const routes = [
       },
     ]
   },
-
+  {
+    path: '/store',
+    redirect: 'store',
+    beforeEnter: authCheck,
+    component: StoreLayout,
+    children: [
+      {
+        path: "/store/:storeId",
+        name: "store",
+        component: () => import('../views/StoreView'),
+        props: true
+      },
+    ]
+  },
   {
     path: '/auth',
     name: 'auth',

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

@@ -0,0 +1,62 @@
+<template>
+  <v-app>
+    <store-navigation
+        v-bind:store="store">
+    </store-navigation>
+    <v-main>
+      <v-container class="px-8">
+        <router-view
+            v-on:getStoreId="renderNavigation">
+        </router-view>
+      </v-container>
+    </v-main>
+    <bottom-navigation></bottom-navigation>
+  </v-app>
+</template>
+
+<script>
+import StoreNavigation from "../../components/StoreNavigation.vue";
+import BottomNavigation from "../../components/BottomNavigation.vue";
+
+import storeApi from "../../api/store";
+
+export default {
+  name: "StoreLayout",
+  components: {
+    'store-navigation': StoreNavigation,
+    "bottom-navigation": BottomNavigation
+  },
+  data: () => ({
+    store: {
+      id: '',
+      name: ''
+    }
+  }),
+  methods: {
+    renderNavigation: function(storeId) {
+      this.store.id = storeId;
+      this.getStore();
+    },
+    getStore: async function() {
+      if (!this.store.id) {
+        alert("매장 고유번호가 없습니다. 잠시후에 시도해주세요.");
+        return;
+      }
+
+      const response = await storeApi.requestStore(this.store.id);
+      this.store = response.data.data;
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .container {
+    max-width: 768px;
+    background-color: white;
+    height: 100%;
+  }
+  main {
+    background-color: #f2f2f2!important;
+  }
+</style>

customer-vue/src/views/SearchStore.vue

@@ -26,7 +26,10 @@
 
     <v-row>
       <v-col v-for="card in cards" v-bind:key="card.storeId" sm="6">
-        <v-card v-bind:data-id="card.storeId">
+        <v-card
+            v-bind:data-id="card.storeId"
+            v-on:click="clickCard(card.storeId)"
+        >
           <v-img
               height="180"
               :src="require('@/assets/store.jpeg')"
@@ -147,6 +150,12 @@ export default {
           favoriteCounts: store.favoriteCounts
         })
       });
+    },
+    clickCard(storeId) {
+      this.$router.push({
+        name: "store",
+        params: {storeId: storeId}
+      })
     }
   }
 }

customer-vue/src/views/StoreView.vue

@@ -0,0 +1,111 @@
+<template>
+  <div>
+    <div id="nav">
+      <v-chip-group
+          mandatory
+          center-active
+          show-arrows
+          active-class="primary--text"
+          v-model="tagIndex"
+      >
+        <v-chip
+            v-for="tag in tags"
+            :key="tag"
+        >
+          {{ tag }}
+        </v-chip>
+      </v-chip-group>
+    </div>
+
+    <br>
+    <div id="content">
+      <div v-for="category in categories" :key="category.id">
+        <h3 ref="focusTag">
+          {{ category.name }}
+        </h3>
+        <br>
+        <v-card
+            class="mx-auto mb-5"
+            outlined
+            v-for="item in category.items"
+            :key="item.id"
+        >
+          <v-list-item three-line>
+            <v-list-item-content>
+              <v-list-item-title class="text-h5 mb-3">
+                {{ item.name }}
+              </v-list-item-title>
+              <div class="text--primary mb-5">
+                {{ item.price }}원
+              </div>
+              <v-list-item-subtitle>
+              </v-list-item-subtitle>
+            </v-list-item-content>
+
+            <v-list-item-avatar
+                tile
+                size="100"
+            >
+              <v-img :src="require('@/assets/store.jpeg')"></v-img>
+            </v-list-item-avatar>
+          </v-list-item>
+        </v-card>
+        <br>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import storeApi from "../api/store";
+
+export default {
+  name: "StoreView",
+  props: ["storeId"],
+  mounted() {
+    if (!this.storeId) {
+      alert("잘못된 요청입니다.");
+      return;
+    }
+    this.$emit('getStoreId', this.storeId)
+    this.search(this.storeId);
+  },
+  data: () => ({
+    tags: [],
+    categories: [],
+    tagIndex: 0
+  }),
+  watch: {
+    tagIndex: function(newValue) {
+      this.$refs.focusTag[newValue].scrollIntoView({behavior: 'smooth', block: 'center'});
+    }
+  },
+  methods: {
+    search: async function(storeId) {
+      const response = await storeApi.requestCategoriesWithItem(storeId);
+      this.render(response.data);
+    },
+    render: function(json) {
+      this.categories = json.data.categories;
+      this.categories.forEach(category => {
+        this.tags.push(category.name);
+      })
+    },
+  }
+}
+</script>
+
+<style scoped>
+#nav {
+  color: white;
+  background-color: white;
+  position: sticky;
+  top: 0;
+  z-index: 999;
+}
+
+#content {
+  display: block !important;
+  z-index: -1;
+}
+</style>