feat(customer-vue): Just Pick-up 홈 - 가까이 있는 매장 추가

- 가까이 있는 매장 추가
- 스토어 기본 이미지 변경

customer-vue/src/api/store.js

@@ -1,13 +1,14 @@
 import axios from "axios";
 
 export default {
-    requestSearchStore(latitude, longitude, storeName, page) {
+    requestNearbyStore(latitude, longitude, storeName, page, size) {
       const options = {
         params: {
           latitude: latitude,
           longitude: longitude,
           storeName: storeName,
-          page: page
+          page: page,
+          size: size
         }
       }
       return axios.get(process.env.VUE_APP_STORE_API_URL + '/store/search', options);

customer-vue/src/components/OrderHistoryCard.vue

@@ -27,7 +27,7 @@
           tile
           size="100"
       >
-        <v-img src="https://cdn.vuetifyjs.com/images/cards/halcyon.png"></v-img>
+        <v-img :src="require('@/assets/store.jpeg')"></v-img>
       </v-list-item-avatar>
 
     </v-list-item>

customer-vue/src/components/SlideStore.vue

@@ -31,11 +31,22 @@
           <v-img
               height="165"
               width="165"
-              src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
+              :src="require('@/assets/store.jpeg')"
           ></v-img>
-          <v-card-subtitle style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{item.name}}</v-card-subtitle>
+          <v-card-subtitle style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">
+            <b>{{item.name}}</b>
+          </v-card-subtitle>
           <v-card-text>
-            거리 : {{item.distance}}
+            <v-row>
+              <div class="orange--text ms-4">
+                <v-icon color="orange" small>mdi-heart</v-icon>
+                {{ item.favoriteCounts }}
+              </div>
+              <div class="grey--text ms-4">
+                <v-icon small>mdi-map-marker</v-icon>
+                {{item.distance}}
+              </div>
+            </v-row>
           </v-card-text>
           </v-skeleton-loader>
         </v-card>
@@ -47,9 +58,7 @@
 <script>
 export default {
   name: "SlideStore",
-  props:{
-    storeList:Array,
-  },
+  props:["storeList"],
 
 }
 </script>

customer-vue/src/views/HomeView.vue

@@ -1,19 +1,27 @@
 <template>
-  <v-container
-      fill-height
-  >
-    <v-row>
-      <v-col>
-        <v-card>
-
-          <v-card-title>Hello</v-card-title>
-          <v-card-text>Nice to meet you</v-card-text>
-        </v-card>
-      </v-col>
-    </v-row>
+  <v-container>
     <v-row justify="center">
       <v-col>
-        <div class="text-h5" >즐겨찾는 매장입니다.</div>
+        <div class="text-h5">
+          회원님과<br>
+          <b><span class="deep-orange--text lighten-3">가까이 있는 매장</span></b>이에요!
+        </div>
+        <slide-store
+            :store-list="nearbyStores"
+        ></slide-store>
+      </v-col>
+    </v-row>
+
+    <v-divider
+        class="my-5"
+    ></v-divider>
+
+    <v-row justify="center">
+      <v-col>
+        <div class="text-h5" >
+          회원님이<br>
+          <b><span class="deep-orange--text lighten-3">즐겨찾는 매장</span></b>이에요!
+        </div>
         <slide-store
           :store-list="favoriteStoreList"
         ></slide-store>
@@ -38,23 +46,25 @@ export default {
       favoriteStoreList:{
         data:[],
         isActive:'',
-
       },
+      nearbyStores: {
+        data: [],
+        isActive: ''
+      }
     }
   },
   async mounted() {
     const location = await this.getLocation();
     this.latitude = location.latitude;
     this.longitude = location.longitude;
-    storeApi.getFavoriteStore(this.latitude,this.longitude)
-    .then(response =>{
-      this.favoriteStoreList.isActive = 'd-none'
-      this.favoriteStoreList.data = response.data.data;
-    });
+
+    await this.requestFavoriteStore()
+
+    await this.requestNearbyStore();
+
   },
   methods:{
     getLocation: async function() {
-      console.log("initGeoLocation");
       return new Promise(function (resolve, reject) {
         if ('geolocation' in navigator) {
           navigator.geolocation.getCurrentPosition((position) => {
@@ -70,6 +80,32 @@ export default {
         }
       });
     },
+    requestFavoriteStore: async function() {
+      try {
+        const response = await storeApi.getFavoriteStore(this.latitude,this.longitude)
+        this.favoriteStoreList.isActive = 'd-none'
+        this.favoriteStoreList.data = response.data.data;
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    requestNearbyStore: async function() {
+      try {
+        const response = await storeApi.requestNearbyStore(this.latitude, this.longitude, "", 0, 10);
+        const stores = response.data.data.stores;
+        stores.forEach(store => {
+          this.nearbyStores.data.push({
+            id: store.id,
+            name: store.name,
+            distance: store.distance,
+            favoriteCounts: store.favoriteCounts
+          });
+          this.nearbyStores.isActive = 'd-none';
+        })
+      } catch (error) {
+        console.log(error);
+      }
+    },
   }
 }
 </script>

customer-vue/src/views/SearchStore.vue

@@ -29,7 +29,7 @@
         <v-card v-bind:data-id="card.storeId">
           <v-img
               height="180"
-              src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
+              :src="require('@/assets/store.jpeg')"
           ></v-img>
           <v-card-title>{{ card.name }}</v-card-title>
           <v-card-text>
@@ -116,7 +116,7 @@ export default {
       this.isLoading = true;
       try {
         this.page = 0;
-        const response = await storeApi.requestSearchStore(this.latitude, this.longitude, this.storeName, this.page);
+        const response = await storeApi.requestNearbyStore(this.latitude, this.longitude, this.storeName, this.page);
         this.cards = [];
         this.renderCard(response.data);
       } catch (error) {
@@ -128,7 +128,7 @@ export default {
       this.isLoading = true;
       try {
         this.page += 1;
-        const response = await storeApi.requestSearchStore(this.latitude, this.longitude, this.storeName, this.page);
+        const response = await storeApi.requestNearbyStore(this.latitude, this.longitude, this.storeName, this.page);
         this.renderCard(response.data);
       } catch (error) {
         console.log(error);