Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Develop - 리소스 로딩 최적화 #160

Merged
merged 8 commits into from
Jan 24, 2024
Merged

Develop - 리소스 로딩 최적화 #160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
964c50f
feat(feature/리소스최적화): 리스트 이미지 lazyload 적용
yusiny Jan 21, 2024
e3e475b
feat(feature/리소스최적화): 폰트 woff2 우선 사용으로 변경
yusiny Jan 21, 2024
1fec920
fix(feaeture/리소스최적화): 채팅 인풋 초기화 오류 수정
yusiny Jan 21, 2024
a1cadbb
Merge pull request #158 from Docent-Inc/feature/리소스최적화
yusiny Jan 21, 2024
e8c0960
feat(feature/리소스최적화): SkeletonImage 컴포넌트로 이미지 로드 전까지 스켈레톤 노출
yusiny Jan 24, 2024
bf7c846
feat(feature/리소스최적화): install 옵션 추가 (캐싱, 병렬 처리)
yusiny Jan 24, 2024
f65a587
Merge pull request #159 from Docent-Inc/feature/리소스최적화
yusiny Jan 24, 2024
aa8f158
fix(develop): 스플래시 삭제 및 로딩바 추가
taewan2002 Jan 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 21 additions & 18 deletions assets/scss/base/font.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -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;
}

Expand All @@ -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;
}

Expand Down
44 changes: 44 additions & 0 deletions components/common/SkeletonImage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
122 changes: 60 additions & 62 deletions components/diary/BoardDiary.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -58,10 +60,6 @@ export default {
height: 100%;
position: relative;

img {
width: 100%;
height: 100%;
}
.diary-date {
position: absolute;
bottom: 0;
Expand All @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion docker/Dockerfile
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docker/Dockerfile-dev
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions nuxt.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,5 +85,6 @@ export default defineNuxtConfig({
"~/plugins/axios",
"~/plugins/native", // Native App 함수 호출
"~/plugins/functions", // Receive From Native App (JavaScript Functions)
"~/plugins/directives",
],
});
44 changes: 22 additions & 22 deletions pages/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
Expand All @@ -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>

Expand All @@ -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 [김유신] 스플래시 영상 확인 용, 다음 배포 때 제거
Expand Down Expand Up @@ -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 {
Expand Down
Loading
Loading