Skip to content

Commit

Permalink
fix(lazy-load): directive only로 변경 (#47)
Browse files Browse the repository at this point in the history
Fix/header
  • Loading branch information
mcauto committed Nov 5, 2021
2 parents 477f082 + 6781a71 commit c3132b0
Show file tree
Hide file tree
Showing 8 changed files with 147 additions and 14 deletions.
2 changes: 1 addition & 1 deletion _content/project.json

Large diffs are not rendered by default.

3 changes: 2 additions & 1 deletion components/header.vue
Original file line number Diff line number Diff line change
Expand Up @@ -148,11 +148,12 @@ nav {
height: 100%;
width: 100%;
display: flex;
align-content: center;
.logo {
display: flex;
align-items: center;
height: 73px;
margin: auto auto auto 16px;
margin-left: 16px;
}
.menu {
width: 24px;
Expand Down
2 changes: 1 addition & 1 deletion components/project/project/card.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="project-card-component-container" @click="showDetail(project)">
<nuxt-link :to="`project#${project.idx}`">
<img class="thumbnail" :src="thumbnail" />
<img class="thumbnail" :data-src="thumbnail" v-lazy-load />
<p class="name">{{ project.app_name }}</p>
<p class="time">{{ project.th }}th | {{ project.year }}</p>
</nuxt-link>
Expand Down
2 changes: 1 addition & 1 deletion components/project/project/detail.vue
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@
TEAM {{ project.team_name }} | {{ members }}
</div>
</div>
<div class="thumbnail"><img :src="thumbnail" /></div>
<div class="thumbnail"><img :data-src="thumbnail" v-lazy-load /></div>
<div class="description">{{ project.description }}</div>
<div v-if="project.ppt" class="ppt">
<p>최종 발표 자료</p>
Expand Down
4 changes: 2 additions & 2 deletions content/projects/87.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"idx": 87,
"app_name": "안녕나야",
"app_name": "안녕, 나야",
"thumbnail": "https://drive.google.com/uc?export=view&id=1L4s2B7l_2zkbKkcXPbjnV4GUoshVaOqE",
"th": "19",
"year": "2021",
Expand All @@ -14,7 +14,7 @@
"나현정",
"방현진"
],
"description": "코로나 19로 인해 답답하고 지친 마음을 담아\n '나'에게 편지를 쓰면 선택한 발송기준에 따른 시점에 \n편지를 받아 볼 수 있는 모바일 웹 서비스 입니다.\n\n- 나에게 편지쓰기 : 현재의 내가 미래의 나에게 편지를 보내는 기능입니다.\n- 작성한 편지 목록 : 나에게 보낸 편지가 모여있는 공간입니다.\n- 부치지 못한 편지 : 발송 기준을 정하지 못한 편지가 모여있는 공간입니다.\n- 편지 수신 : 발송 기준이 되면 메일로 편지가 도착합니다. ",
"description": "코로나 19로 인해 답답하고 지친 마음을 담아 '나'에게 편지를 쓰면 선택한 발송기준에 따른 시점에 편지를 받아 볼 수 있는 모바일 웹 서비스입니다.\n\n- 홈 : 우리나라 코로나 19 감염 및 백신 접종 현황을 확인할 수 있습니다.\n- 나에게 편지쓰기 : 미래의 나에게 보내는 편지를 작성합니다. 다양한 발송기준을 선택하고 질문에 대한 답을 적거나 혹은 자유롭게 작성할 수도 있습니다. 미래의 나에게 전달하고 싶은 감정 스티커를 선택해 편지 봉투를 동봉하여 발송합니다.\n- 작성한 편지 목록 : 나에게 보낸 편지가 모여있는 공간입니다. 아직 수신하지 못한 편지는 미리 뜯어볼 수 없습니다.\n- 편지 수신 : 발송 기준이 되면 메일로 편지가 도착하고 링크를 통해 안녕, 나야 사이트로 이동하여 과거의 내가 보낸 편지를 읽을 수 있습니다 :)",
"ppt": "",
"link": {
"Go to Page": "https://halo-its.me/covid/about"
Expand Down
2 changes: 1 addition & 1 deletion layouts/default.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="background">
<Header :headers="headers" :is-white="false"></Header>
<main>
<main style="margin: auto">
<nuxt v-if="!isMenuOpen || $mq !== 'mobile'" />
</main>
<Footer :items="items" :copyrights="copyrights"></Footer>
Expand Down
132 changes: 132 additions & 0 deletions layouts/error.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
<template>
<div class="error-background">
<div class="error-area">
<div class="error-text">
<img class="ic-caution" src="~/assets/img/ic_caution.svg" />
<h2>Sorry</h2>
<h4 v-if="error.statusCode === 404">This page could not found</h4>
<h4 v-else>An error occurred</h4>
</div>
<div class="primary-button">
<nuxt-link to="/">Back to Home</nuxt-link>
</div>
</div>
</div>
</template>

<script>
export default {
props: ["error"],
};
</script>
<style lang="scss" scoped>
@import "~/assets/css/_device.scss";
@import "~/assets/css/setting.scss";
@import "~/assets/css/main-bg.scss";
.error-area {
display: flex;
flex-direction: column;
align-items: center;
}
.error-text {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.primary-button {
margin-top: 32px;
background-color: $background-primary;
> a {
text-decoration: none;
color: white;
}
}
.error-text {
> h2 {
margin-bottom: 8px;
font-weight: bold;
letter-spacing: -0.02em;
}
> h4 {
font-weight: normal;
letter-spacing: -0.02em;
}
}
@include desktop {
.ic-caution {
width: 66.67px;
height: 66.67px;
}
.error-area {
width: 1200px;
}
.error-text {
> h2 {
font-size: 48px;
line-height: 64px;
margin-top: 14.67px;
}
> h4 {
font-size: 24px;
line-height: 36px;
}
}
.primary-button {
padding: 24px 40px;
border-radius: 8px;
}
}
@include tablet {
.ic-caution {
width: 33.33px;
height: 33.33px;
}
.error-area {
width: 327px;
}
.error-text {
> h2 {
font-size: 32px;
line-height: 48px;
margin-top: 11.33px;
}
> h4 {
font-size: 16px;
line-height: 24px;
}
}
.primary-button {
padding: 16px 24px;
border-radius: 4px;
}
}
@include mobile {
.ic-caution {
width: 33.33px;
height: 33.33px;
}
.error-area {
width: 327px;
}
.error-text {
> h2 {
font-size: 32px;
line-height: 48px;
margin-top: 11.33px;
}
> h4 {
font-size: 16px;
line-height: 24px;
}
}
.primary-button {
padding: 16px 24px;
border-radius: 4px;
}
}
</style>
14 changes: 7 additions & 7 deletions nuxt.config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ const config: NuxtConfig = {
target: "static",
ssr: false,
head: {
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon_N20_03.png" }],
link: [{ rel: "icon", type: "image/x-icon", href: "/favicon_N20_02.png" }],
meta: [
{ charset: "utf-8" },
{ name: "viewport", content: "width=device-width, initial-scale=1" },
Expand Down Expand Up @@ -35,12 +35,12 @@ const config: NuxtConfig = {
"nuxt-lazy-load",
{
// These are the default values
images: true,
videos: true,
audios: true,
iframes: true,
native: false,
directiveOnly: false,
// images: true,
// videos: true,
// audios: true,
// iframes: true,
// native: false,
directiveOnly: true,

// Default image must be in the static folder
defaultImage: "/no-image.svg",
Expand Down

0 comments on commit c3132b0

Please sign in to comment.