From 4b19617435f9b0c0818d81156c4d0f72cf5b10fa Mon Sep 17 00:00:00 2001
From: hoon7566 <hoon7566@gmail.com>
Date: Mon, 7 Mar 2022 17:07:10 +0900
Subject: [PATCH] =?UTF-8?q?refactor(customer-vue):=20home=20view=20skeleto?=
 =?UTF-8?q?n=20component=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 즐겨찾기 데이터 로딩시 레이지로딩 엘리먼트 보여줌
---
 customer-vue/src/components/SlideStore.vue | 18 +++++++++++++++++-
 customer-vue/src/views/HomeView.vue        | 19 ++++++++-----------
 2 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/customer-vue/src/components/SlideStore.vue b/customer-vue/src/components/SlideStore.vue
index ea3fb68..e8cd091 100644
--- a/customer-vue/src/components/SlideStore.vue
+++ b/customer-vue/src/components/SlideStore.vue
@@ -4,7 +4,21 @@
       show-arrows="desktop"
     >
       <v-slide-item
-          v-for="item in storeList"
+          :class="storeList.isActive"
+          v-for="n in 3"
+          :key="n"
+      >
+        <v-skeleton-loader
+            class="my-3 mx-3"
+            elevation="7"
+            height="250"
+            width="165"
+            type="card"
+            :key="n"
+        ></v-skeleton-loader>
+        </v-slide-item>
+      <v-slide-item
+          v-for="item in storeList.data"
           :key="item.id"
       >
         <v-card
@@ -13,6 +27,7 @@
             height="250"
             width="165"
         >
+          <v-skeleton-loader>
           <v-img
               height="165"
               width="165"
@@ -22,6 +37,7 @@
           <v-card-text>
             거리 : {{item.distance}}
           </v-card-text>
+          </v-skeleton-loader>
         </v-card>
       </v-slide-item>
     </v-slide-group>
diff --git a/customer-vue/src/views/HomeView.vue b/customer-vue/src/views/HomeView.vue
index 45fb5b7..926b185 100644
--- a/customer-vue/src/views/HomeView.vue
+++ b/customer-vue/src/views/HomeView.vue
@@ -13,18 +13,12 @@
     </v-row>
     <v-row justify="center">
       <v-col>
-        <div class="text-overline" >즐겨찾는 매장입니다.</div>
+        <div class="text-h5" >즐겨찾는 매장입니다.</div>
         <slide-store
           :store-list="favoriteStoreList"
         ></slide-store>
       </v-col>
     </v-row>
-    <v-overlay :value="isLoading">
-      <v-progress-circular
-          indeterminate
-          size="64"
-      ></v-progress-circular>
-    </v-overlay>
   </v-container>
 </template>
 
@@ -39,10 +33,13 @@ export default {
   },
   data(){
     return{
-      isLoading: true,
       latitude:0,
       longitude:0,
-      favoriteStoreList:[],
+      favoriteStoreList:{
+        data:[],
+        isActive:'',
+
+      },
     }
   },
   async mounted() {
@@ -51,9 +48,9 @@ export default {
     this.longitude = location.longitude;
     storeApi.getFavoriteStore(this.latitude,this.longitude)
     .then(response =>{
-      this.favoriteStoreList = response.data.data;
+      this.favoriteStoreList.isActive = 'd-none'
+      this.favoriteStoreList.data = response.data.data;
     });
-    this.isLoading = false
   },
   methods:{
     getLocation: async function() {