와이파이 연결 안되어있을 때 화면 예외처리

화면 중앙에 와이파이 연결 확인 멘트 표시
MaxKim-J · Jun 3, 2020 · 847e8e4 · 847e8e4
1 parent 63bf07e
commit 847e8e4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 12 deletions.
diff --git a/src/services/firebaseDbAccess.js b/src/services/firebaseDbAccess.js
@@ -27,6 +27,6 @@ export const getSemesterInfoFromDB = async () => {
     const semesterInfo = await dataBase.ref("/semester").once("value");
     return semesterInfo.val();
   } catch {
-    console.error("학기 날짜 정보를 가져올 수 없습니다");
+    console.error("학기 정보 데이터를 가져올 수 없습니다");
   }
 };
diff --git a/src/tab/App.vue b/src/tab/App.vue
@@ -1,15 +1,16 @@
 <template>
-  <transition name="fadeMain" v-if="mainIsShowing">
+  <transition name="fadeMain" v-if="backgroundImgLoading">
     <div class="tab" :style="{ 'background-image': 'url(' + backgroundImg + ')' }">
       <div class="tab-background"></div>
       <tab-header class="tab-header tab-antialiasing"></tab-header>
-      <div class="tab-main-wrap tab-antialiasing">
+      <div class="tab-main-wrap tab-antialiasing" v-if="semesterInfoLoading">
         <div class="tab-main">
           <tab-clock></tab-clock>
           <tab-middle></tab-middle>
           <tab-hotlinks></tab-hotlinks>
         </div>
       </div>
+      <div v-if="loadingFailed" class="tab-warning">😅 wifi 연결을 확인하고 새로고침을 눌러주세요!</div>
       <tab-footer class="tab-footer tab-antialiasing"></tab-footer>
     </div>
   </transition>
@@ -24,7 +25,6 @@ import TabHeader from "../components/TabHeader.vue";
 import { localStorageRemove } from "../services/localStorageAccess";
 import "../style/initialize.scss";
 import "../style/defaultTransition.scss";
-import "../style/defaultTransition.scss";
 
 export default {
   name: "App",
@@ -37,7 +37,9 @@ export default {
   },
   data() {
     return {
-      mainIsShowing: false
+      backgroundImgLoading: false,
+      semesterInfoLoading: false,
+      loadingFailed: false
     };
   },
   computed: {
@@ -51,20 +53,28 @@ export default {
     },
     async getSemesterInfos() {
       await this.$store.dispatch("getSemesterInfos");
+      this.semesterInfoLoading = true;
     },
     async getUserInfo() {
       await this.$store.dispatch("getUserInfo");
     }
   },
   created() {
     localStorageRemove(["notificationInfo", "weatherInfo"]);
-    Promise.all([
-      this.getBackgroundImg(),
-      this.getSemesterInfos(),
-      this.getUserInfo()
-    ]).then(data => {
-      this.mainIsShowing = true;
-    });
+    if (navigator.onLine === false) {
+      this.getBackgroundImg().then(() => {
+        this.backgroundImgLoading = true;
+      });
+      this.loadingFailed = true;
+    } else {
+      Promise.all([
+        this.getBackgroundImg(),
+        this.getSemesterInfos(),
+        this.getUserInfo()
+      ]).then(() => {
+        this.backgroundImgLoading = true;
+      });
+    }
   }
 };
 </script>
@@ -97,6 +107,10 @@ export default {
       font-size: 20px;
     }
   }
+  .tab-warning {
+    z-index: 1;
+    font-size: 20px;
+  }
   .tab-footer {
     z-index: 2;
   }