Merge pull request #160 from Docent-Inc/develop

Develop - 리소스 로딩 최적화
Docent-Inc · Jan 24, 2024 · af20dcc · af20dcc
2 parents 6df660d + aa8f158
commit af20dcc
Show file tree

Hide file tree

Showing 9 changed files with 196 additions and 108 deletions.
diff --git a/assets/scss/base/font.scss b/assets/scss/base/font.scss
@@ -6,16 +6,17 @@
     font-weight: 700;
     src:
         local("Spoqa Han Sans Bold"),
+        url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.woff2")
+            format("woff2"),
+        url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.woff")
+            format("woff"),
         url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.eot")
             format("eot"),
-        url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.otf")
-            format("otf"),
         url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.ttf")
             format("truetype"),
-        url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.woff")
-            format("woff"),
-        url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.woff2")
-            format("woff2");
+        url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Bold.otf")
+            format("otf");
+
     font-display: swap;
 }
 
@@ -24,16 +25,17 @@
     font-weight: 500;
     src:
         local("Spoqa Han Sans Medium"),
+        url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Medium.woff2")
+            format("woff2"),
+        url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Medium.woff")
+            format("woff"),
         url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Medium.eot")
             format("eot"),
-        url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Medium.otf")
-            format("otf"),
         url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Medium.ttf")
             format("truetype"),
-        url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Medium.woff")
-            format("woff"),
-        url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Medium.woff2")
-            format("woff2");
+        url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Medium.otf")
+            format("otf");
+
     font-display: swap;
 }
 
@@ -42,16 +44,17 @@
     font-weight: 400;
     src:
         local("Spoqa Han Sans Regular"),
+        url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.woff2")
+            format("woff2"),
+        url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.woff")
+            format("woff"),
         url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.eot")
             format("eot"),
-        url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.otf")
-            format("otf"),
         url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.ttf")
             format("truetype"),
-        url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.woff")
-            format("woff"),
-        url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.woff2")
-            format("woff2");
+        url("../../fonts/SpoqaHanSansNeo/SpoqaHanSansNeo-Regular.otf")
+            format("otf");
+
     font-display: swap;
 }
 

diff --git a/components/common/SkeletonImage.vue b/components/common/SkeletonImage.vue
@@ -0,0 +1,44 @@
+<template>
+    <div class="skeleton-image">
+        <img v-lazyload="url" ref="imgRef" @load="isLoading = false" v-once />
+        <div class="skeleton" v-if="isLoading"></div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "SkeletonImage",
+    props: {
+        url: {
+            type: String,
+            default: "",
+        },
+    },
+    data() {
+        return {
+            isLoading: true,
+        };
+    },
+};
+</script>
+<style lang="scss" scoped>
+@import "@/assets/scss/mixins.scss";
+.skeleton-image {
+    width: 100%;
+    height: 100%;
+    position: relative;
+
+    img {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
+
+    .skeleton {
+        position: absolute;
+        @include skeleton;
+        width: 100%;
+        height: 100%;
+    }
+}
+</style>
diff --git a/components/diary/BoardDiary.vue b/components/diary/BoardDiary.vue
@@ -1,29 +1,31 @@
 <template>
     <div class="item-board-diary" @click="showDetail">
-        <img v-if="diary.image_url !== ''" :src="diary.image_url" />
+        <SkeletonImage v-if="diary.image_url !== ''" :url="diary.image_url" />
         <div v-else class="diary-contents">
-          <div v-if="diary.diary_name === ''">
-            <div class="diary-text-only">
-              {{ diary.content }}
+            <div v-if="diary.diary_name === ''">
+                <div class="diary-text-only">
+                    {{ diary.content }}
+                </div>
             </div>
-          </div>
-          <div v-else>
-            <div class="diary-title">
-              {{ diary.diary_name }}
+            <div v-else>
+                <div class="diary-title">
+                    {{ diary.diary_name }}
+                </div>
+                <div class="diary-text">
+                    {{ diary.content === "" ? "" : diary.content }}
+                </div>
             </div>
-            <div class="diary-text">
-              {{ diary.content === "" ? "" : diary.content }}
-            </div>
-          </div>
         </div>
         <div class="diary-date">
             {{ this.$dayjs(this.diary.create_date).format("YYYY.MM.DD") }}
         </div>
     </div>
 </template>
 <script>
+import SkeletonImage from "~/components/common/SkeletonImage.vue";
 export default {
     name: "BoardDiary",
+    components: { SkeletonImage },
     props: {
         diary: {
             type: Object,
@@ -58,10 +60,6 @@ export default {
     height: 100%;
     position: relative;
 
-    img {
-        width: 100%;
-        height: 100%;
-    }
     .diary-date {
         position: absolute;
         bottom: 0;
@@ -81,54 +79,54 @@ export default {
         font-size: 12px;
         line-height: 160%;
     }
-  .diary-contents {
-    height: 100%;
-    width: 100%;
-    padding-top: 100%;
-    position: relative;
-    background: var(--white, #FFF);
-    overflow: hidden;
+    .diary-contents {
+        height: 100%;
+        width: 100%;
+        padding-top: 100%;
+        position: relative;
+        background: var(--white, #fff);
+        overflow: hidden;
 
-    .diary-title {
-      position: absolute;
-      top: 12px;
-      left: 20px;
-      right: 20px;
-      color: var(--gray-700, #374151);
-      font-family: "Pretendard Bold";
-      font-size: 20px;
-      white-space: nowrap;
-      overflow: hidden;
-      max-height: 30px;
-      text-overflow: ellipsis;
-    }
-    .diary-text {
-      position: absolute;
-      max-height: 76px;
-      top: 54px;
-      left: 20px;
-      right: 20px;
-      color: var(--gray-400, #9CA3AF);
-      font-family: "Pretendard";
-      font-size: 12px;
-      overflow: hidden;
-      line-height: 160%;
-      text-overflow: ellipsis;
-    }
-    .diary-text-only {
-      position: absolute;
-      max-height: 110px;
-      top: 12px;
-      left: 20px;
-      right: 20px;
-      color: var(--gray-400, #9CA3AF);
-      font-family: "Pretendard";
-      line-height: 160%;
-      font-size: 12px;
-      overflow: hidden;
-      text-overflow: ellipsis;
+        .diary-title {
+            position: absolute;
+            top: 12px;
+            left: 20px;
+            right: 20px;
+            color: var(--gray-700, #374151);
+            font-family: "Pretendard Bold";
+            font-size: 20px;
+            white-space: nowrap;
+            overflow: hidden;
+            max-height: 30px;
+            text-overflow: ellipsis;
+        }
+        .diary-text {
+            position: absolute;
+            max-height: 76px;
+            top: 54px;
+            left: 20px;
+            right: 20px;
+            color: var(--gray-400, #9ca3af);
+            font-family: "Pretendard";
+            font-size: 12px;
+            overflow: hidden;
+            line-height: 160%;
+            text-overflow: ellipsis;
+        }
+        .diary-text-only {
+            position: absolute;
+            max-height: 110px;
+            top: 12px;
+            left: 20px;
+            right: 20px;
+            color: var(--gray-400, #9ca3af);
+            font-family: "Pretendard";
+            line-height: 160%;
+            font-size: 12px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
     }
-  }
     .diary_icon {
         position: absolute;
         right: 0;

diff --git a/docker/Dockerfile b/docker/Dockerfile
@@ -6,7 +6,7 @@ WORKDIR /app
 
 COPY package.json .
 COPY yarn.lock .
-RUN yarn install 
+RUN yarn install --check-cache --parallel
 
 COPY . .
 RUN yarn build

diff --git a/docker/Dockerfile-dev b/docker/Dockerfile-dev
@@ -6,7 +6,7 @@ WORKDIR /app
 
 COPY package.json .
 COPY yarn.lock .
-RUN yarn install
+RUN yarn install --check-cache --parallel
 
 COPY . .
 RUN yarn build:dev

diff --git a/nuxt.config.ts b/nuxt.config.ts
@@ -85,5 +85,6 @@ export default defineNuxtConfig({
         "~/plugins/axios",
         "~/plugins/native", // Native App 함수 호출
         "~/plugins/functions", // Receive From Native App (JavaScript Functions)
+        "~/plugins/directives",
     ],
 });
diff --git a/pages/index.vue b/pages/index.vue
@@ -1,6 +1,10 @@
 <template>
     <div class="viewport">
-        <div class="video-container">
+      <v-progress-circular
+          indeterminate
+          color="#9398FF"
+      ></v-progress-circular>
+<!--        <div class="video-container">-->
             <!-- <client-only>
                 <video
                     class="video"
@@ -15,13 +19,13 @@
             </client-only> -->
 
             <!-- <div id="logo_box"> -->
-            <img
-                src="@/assets/images/commons/logos/logo_v2_white.svg"
-                id="logo"
-                class="small"
-            />
+<!--            <img-->
+<!--                src="@/assets/images/commons/logos/logo_v2_white.svg"-->
+<!--                id="logo"-->
+<!--                class="small"-->
+<!--            />-->
             <!-- </div> -->
-        </div>
+<!--        </div>-->
     </div>
 </template>
 
@@ -37,17 +41,14 @@ const router = useRouter();
 // console.log("check", isChecked.value); // TODO [김유신] 스플래시 영상 확인 용, 다음 배포 때 제거
 
 onMounted(() => {
-    setTimeout(() => {
-        // isOnboarding = true, 온보딩 화면으로 이동
-        const isOnboarding = window.localStorage.getItem("isOnboarding");
-        if (!isOnboarding) {
-            router.replace(`/onboarding`);
-            return;
-        }
-
-        // isOnboarding = false, 자동 로그인 체크
-        checkAutoLogin();
-    }, 1000); // 1초
+  const isOnboarding = window.localStorage.getItem("isOnboarding");
+  if (!isOnboarding) {
+    router.replace(`/onboarding`);
+    return;
+  }
+
+  // isOnboarding = false, 자동 로그인 체크
+  checkAutoLogin();
 });
 
 // console.log("Called!"); // TODO [김유신] 스플래시 영상 확인 용, 다음 배포 때 제거
@@ -106,10 +107,9 @@ async function checkAutoLogin() {
 
 <style lang="scss" scoped>
 .viewport {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    background: var(--CTA_accent, #9398ff); // 9398FF a1a1ff
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 .video-container {