feat(customer-vue): 즐겨찾기 페이지 추가

- 즐겨찾기 페이지 추가

customer-vue/src/components/BottomNavigation.vue

@@ -22,7 +22,7 @@ export default {
       links: [
         {name: "홈", url: "/", icon: "mdi-home-outline"},
         {name: "검색", url: "/search", icon: "mdi-magnify"},
-        {name: "즐겨찾기", url: "/", icon: "mdi-cards-heart-outline"},
+        {name: "즐겨찾기", url: "/favorite", icon: "mdi-cards-heart-outline"},
         {name: "주문내역", url: "/history", icon: "mdi-clipboard-check-outline"},
         {name: "마이페이지", url: "/", icon: "mdi-account-outline"}
       ]

customer-vue/src/components/SlideStore.vue

@@ -16,7 +16,7 @@
             type="card"
             :key="id + n"
         ></v-skeleton-loader>
-        </v-slide-item>
+      </v-slide-item>
       <v-slide-item
           v-for="item in storeList.data"
           :key="item.id"

customer-vue/src/router/router.js

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

customer-vue/src/views/FavoriteStore.vue

@@ -0,0 +1,120 @@
+<template>
+  <div>
+    <v-row>
+      <v-alert
+          border="left"
+          colored-border
+          color="deep-purple accent-4"
+          elevation="2"
+          dense
+      >
+        즐겨찾기를 누른 매장이에요 😳
+      </v-alert>
+    </v-row>
+    <v-row>
+      <v-col
+          :class="isLoading"
+          sm="6"
+      >
+        <v-skeleton-loader
+            sm="12"
+            elevation="1"
+            type="card"
+        />
+      </v-col>
+      <v-col v-for="card in cards" v-bind:key="card.storeId" sm="6">
+        <v-card v-bind:data-id="card.storeId">
+          <v-img
+              height="180"
+              :src="require('@/assets/store.jpeg')"
+          ></v-img>
+          <v-card-title>{{ card.name }}</v-card-title>
+          <v-card-text>
+            <v-row>
+              <div class="orange--text ms-4">
+                <v-icon color="orange" dense>mdi-heart</v-icon>
+                {{ card.favoriteCounts }}
+              </div>
+              <div class="grey--text ms-4">
+                <v-icon dense>mdi-map-marker</v-icon>
+                {{ card.distance }}
+              </div>
+            </v-row>
+          </v-card-text>
+        </v-card>
+      </v-col>
+
+    </v-row>
+
+    <br><br>
+  </div>
+</template>
+
+<script>
+import storeApi from "@/api/store";
+
+export default {
+  name: "FavoriteStore",
+  async mounted() {
+    const location = await this.getLocation();
+
+    this.latitude = location.latitude;
+    this.longitude = location.longitude;
+
+    await this.search();
+  },
+  data: function() {
+    return {
+      isLoading: '',
+      latitude: null,
+      longitude: null,
+      cards: [],
+    }
+  },
+  methods: {
+    getLocation: async function() {
+      return new Promise(function (resolve, reject) {
+        if ('geolocation' in navigator) {
+          navigator.geolocation.getCurrentPosition((position) => {
+            const coords = position.coords;
+
+            resolve({
+              latitude: coords.latitude,
+              longitude: coords.longitude
+            })
+          })
+        } else {
+          reject();
+        }
+      });
+    },
+    search: async function() {
+      try {
+        const response = await storeApi.getFavoriteStore(this.latitude, this.longitude,);
+        this.cards = [];
+        this.isLoading='d-none'
+        this.renderCard(response.data);
+
+      } catch (error) {
+        console.log(error);
+      }
+    },
+    renderCard: function(json) {
+      const stores = json.data;
+
+      stores.forEach( (store) => {
+        this.cards.push({
+          storeId: store.id,
+          name: store.name,
+          distance: store.distance,
+          favoriteCounts: store.favoriteCounts
+        })
+      });
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

store-service/src/main/java/com/justpickup/storeservice/domain/store/service/StoreServiceImpl.java

@@ -10,6 +10,7 @@ import org.springframework.data.domain.SliceImpl;
 import org.springframework.stereotype.Service;
 
 import java.util.List;
+import java.util.stream.Collectors;
 
 @Service
 @RequiredArgsConstructor
@@ -33,6 +34,11 @@ public class StoreServiceImpl implements StoreService {
 
     @Override
     public List<SearchStoreResult> findFavoriteStore(SearchStoreCondition condition, Long userId) {
-        return storeRepositoryCustom.findFavoriteStore(condition,userId);
+        List<SearchStoreResult> favoriteStores = storeRepositoryCustom.findFavoriteStore(condition, userId);
+        favoriteStores.forEach(result -> {
+            Long favoriteCounts = favoriteStoreCustom.countFavoriteStoreByStoreId(result.getStoreId());
+            result.setFavoriteCounts(favoriteCounts);
+        });
+        return favoriteStores;
     }
 }

store-service/src/main/java/com/justpickup/storeservice/domain/store/web/StoreCustomerApiController.java

@@ -48,11 +48,13 @@ public class StoreCustomerApiController {
         private Long id;
         private String name;
         private String distance;
+        private Long favoriteCounts;
 
         public FavoriteStoreResponse(SearchStoreResult storeResult) {
             this.id = storeResult.getStoreId();
             this.name = storeResult.getStoreName();
             this.distance = storeResult.convertDistanceToString();
+            this.favoriteCounts = storeResult.getFavoriteCounts();
         }
     }