아버지 피드백 반영

leesum-in · Nov 8, 2019 · 23fd263 · 23fd263
1 parent cdeac6f
commit 23fd263
Show file tree

Hide file tree

Showing 10 changed files with 2,469 additions and 2,440 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -19,5 +19,6 @@ module.exports = {
   ],
   // add your custom rules here
   rules: {
+    'vue/no-v-html': 'off'
   }
 }
diff --git a/components/Gallery.vue b/components/Gallery.vue
@@ -2,15 +2,6 @@
   <div id="section3" class="section">
     <div id="slide3-0" class="slide">
       <div class="fp-bg" :style="getSlideStyle(0)"></div>
-
-      <div class="content-container">
-        <h5 class="text-box">
-          사진첩
-        </h5>
-        <div class="arrow-container" @click="$emit('move', 3, 1)">
-          <arrow-right />
-        </div>
-      </div>
     </div>
     <div
       v-for="index in 10"
@@ -19,22 +10,14 @@
       class="slide slide-poem"
     >
       <div class="fp-bg" :style="getSlideStyle(index)"></div>
-      <div class="content-container">
-        <h5 v-if="getPoem(index)" class="text-box" v-html="getPoem(index)"></h5>
-        <div
-          v-if="index < 10"
-          class="arrow-container"
-          @click="$emit('move', 3, index + 1)"
-        >
-          <arrow-right />
-        </div>
-      </div>
+      <h5 v-if="getPoem(index)" class="text-box" v-html="getPoem(index)"></h5>
     </div>
   </div>
 </template>
 
 <script>
-import ArrowRight from '@/components/ArrowRight'
+/* eslint-disable spaced-comment */
+
 const slidesPoem = [
   '사람이 온다는 것은',
   '실은 어마어마한 일이다.',
@@ -44,8 +27,7 @@ const slidesPoem = [
   '그의 미래와 함께 오기 때문이다.',
   '한 사람의 일생이 오기 때문이다.',
   '부서지기 쉬운 그래서 부서지기도 했을',
-  '마음이 오는 것이다',
-  '< 정현종 "방문객" 중 >'
+  '마음이 오는 것이다'
 ]
 
 const positions = [
@@ -64,7 +46,6 @@ const positions = [
 
 export default {
   name: 'Gallery',
-  components: { ArrowRight },
   props: {
     loadGallery: {
       type: Boolean,
@@ -101,15 +82,6 @@ export default {
 
 <style scoped>
 .text-box {
-  margin-top: 100px;
-}
-.content-container {
-  position: relative;
-  margin-top: 100px;
-}
-.arrow-container {
-  position: absolute;
-  right: 0;
-  top: -6px;
+  margin: 40vh auto 0;
 }
 </style>
diff --git a/components/GuestBook.vue b/components/GuestBook.vue
@@ -28,7 +28,7 @@
         </div>
         <div class="message-nav">
           <arrow-left @click="prev" />
-          <button class="submit action-button" @click="$emit('move', 4, 1)">
+          <button class="submit action-button" @click="$emit('move', 5, 1)">
             작성하기
           </button>
           <arrow-right @click="next" />
@@ -100,14 +100,19 @@ export default {
     },
     async prev() {
       const result = await messageApi
-        .orderBy('date', 'desc')
-        .endBefore(this.start)
+        .orderBy('date', 'asc')
+        .startAfter(this.start)
         .limit(5)
         .get()
       if (result.docs.length) {
-        this.start = result.docs[0]
-        this.end = result.docs[result.docs.length - 1]
-        this.currentMessages = result.docs.map(this.docToData)
+        this.end = result.docs[0]
+        this.start = result.docs[result.docs.length - 1]
+
+        const currentMessages = result.docs.map(this.docToData)
+        currentMessages.sort((a, b) => {
+          return b.timestamp - a.timestamp
+        })
+        this.currentMessages = currentMessages
       }
     },
     async next() {
@@ -129,11 +134,12 @@ export default {
         id: doc.id,
         name,
         content,
-        date: this.formatDate(date)
+        date: this.formatDate(date),
+        timestamp: date.seconds
       }
     },
     formatDate(date) {
-      return dayjs.unix(date.seconds).format('YYYY/MM/DD HH:mm')
+      return dayjs.unix(date.seconds).format('YY/MM/DD HH:mm')
     },
     async submit() {
       if (!this.form.name || !this.form.content) {
@@ -149,7 +155,7 @@ export default {
       this.form.content = ''
 
       await this.initial()
-      this.$emit('move', 4, 0)
+      this.$emit('move', 5, 0)
     },
     hasNext(result) {
       if (this.currentMessages.length < 5) {
@@ -192,17 +198,20 @@ export default {
 
 .message-meta {
   padding: 0 10px;
-  height: 15px;
+  min-height: 15px;
 }
 
 .message-author {
+  display: inline-block;
   float: left;
   font-weight: bold;
 }
 
 .message-date {
+  display: inline-block;
   float: right;
   font-size: 12px;
+  text-overflow: ellipsis;
 }
 
 .message-content {

diff --git a/components/Index.vue b/components/Index.vue
@@ -1,20 +1,20 @@
 <template>
-  <div class="container">
+  <div class="container" :class="{ 'hide-arrow': hideArrow }">
     <full-page
       id="fullpage"
       ref="fullpage"
       :options="options"
       class="fp-auto-height-responsive"
     >
-      <introduction :name="name" />
+      <introduction :name="name" @move="moveTo" />
       <invitation />
       <gallery
         :fullpage="$refs.fullpage"
-        @move="moveTo"
         :load-gallery="loadGallery"
+        @move="moveTo"
       />
-      <guest-book :name="name" @move="moveTo" />
       <location />
+      <guest-book :name="name" @move="moveTo" />
     </full-page>
   </div>
 </template>
@@ -37,9 +37,8 @@ export default {
   data() {
     return {
       options: {
-        navigation: false,
+        controlArrows: true,
         licenseKey: '6FA7605F-5A804CBF-B02D5636-DC599F82',
-        controlArrows: false,
         parallax: true,
         parallaxKey: 'd2VtYXJyeS5pbl9LTThjR0Z5WVd4c1lYZz05MUk=',
         parallaxOptions: {
@@ -48,9 +47,12 @@ export default {
         loopTop: true,
         loopBottom: true,
         normalScrollElements: '.normal-scroll',
-        afterLoad: this.afterLoad
+        touchSensitivity: 7,
+        afterLoad: this.afterLoad,
+        recodeHistory: false
       },
-      loadGallery: false
+      loadGallery: false,
+      hideArrow: true
     }
   },
   methods: {
@@ -60,9 +62,12 @@ export default {
       } catch (e) {}
     },
     afterLoad(origin, dest, dir) {
-      if (dest.index === 2) {
+      const galleryIndex = 2
+      if (dest.index === galleryIndex) {
         this.loadGallery = true
       }
+
+      this.hideArrow = dest.index !== galleryIndex
     }
   }
 }
@@ -103,4 +108,13 @@ li,
 dl {
   list-style: none;
 }
+
+.hide-arrow .fp-controlArrow {
+  opacity: 0;
+}
+
+.fp-controlArrow {
+  opacity: 0.5;
+  transition: all 0.5s ease-in;
+}
 </style>
diff --git a/components/Introduction.vue b/components/Introduction.vue
@@ -1,6 +1,8 @@
 <template>
   <div id="section1" class="section">
     <div class="fp-bg"></div>
+    <div class="section1-border"></div>
+    <div class="section1-border-inner"></div>
     <h2 v-if="name">{{ name }}님</h2>
     <h2>저희 결혼식에 초대합니다</h2>
     <br />
@@ -10,11 +12,11 @@
       이보희
     </h3>
     <h3 class="save-the-date">
-      2019.12.14 (토) 오후 1시<br />
-      고려대학교 교우회관
+      <p>
+        2019.12.14 (토) 오후 1시<br />
+        고려대학교 교우회관
+      </p>
     </h3>
-    <div class="section1-border"></div>
-    <div class="section1-border-inner"></div>
   </div>
 </template>
 
@@ -63,6 +65,11 @@ export default {
   bottom: 20px;
   padding: 10px 0;
   color: #1d2c46;
-  //background: rgba(0, 0, 0, 0.1);
+}
+
+.save-the-date a {
+  text-decoration: none;
+  color: #2f5a85;
+  font-weight: bold;
 }
 </style>
diff --git a/components/Location.vue b/components/Location.vue
@@ -5,6 +5,7 @@
     <div class="location-name">
       <a href="https://place.map.kakao.com/17565864" target="_blank">
         고려대학교 교우회관 1층
+        <img src="/img/link-icon.png" />
       </a>
       <small>서울특별시 성북구 종암로 13</small>
     </div>
@@ -20,14 +21,18 @@
         @load="onLoad"
       />
     </div>
-
+    <h4 class="subway-info text-box">
+      <span class="subway-6">고려대역</span> 2번 출구에서 도보로 5분
+    </h4>
     <div class="bus-info">
       <div class="bus-info-head">
         부산에서 오시는 분들
       </div>
       <div class="bus-info-content">
-        <p>오전 6시 40분 | 광안동 비치그린아파트 정문 앞</p>
-        <p>오전 7시 | 한양 프라자 앞(1호선 "교대역" 8번 출구)</p>
+        <p>오전 6시 40분 | <strong>광안동 비치그린아파트 정문 앞</strong></p>
+        <p>
+          오전 7시 | <strong>한양 프라자 앞(1호선 "교대역" 8번 출구)</strong>
+        </p>
       </div>
     </div>
   </div>
@@ -70,13 +75,13 @@ export default {
 #section5 .fp-bg {
   background-image: url(/img/location.jpg);
   background-size: cover;
-  background-position: 65% 10%;
+  background-position: 63% 10%;
 }
 .map-container {
   margin: 0 auto;
   width: 90%;
   max-width: 600px;
-  height: 300px;
+  height: 200px;
   opacity: 0.8;
   border: 1px solid #1d2c46;
 }
@@ -99,6 +104,17 @@ export default {
   display: block;
 }
 
+.subway-info {
+  margin-top: 10px;
+  background-color: rgba(255, 255, 255, 0.9);
+}
+.subway-6 {
+  padding: 2px;
+  border-radius: 1px;
+  background-color: #a86123;
+  color: #fff;
+}
+
 .bus-info {
   margin: 15px auto 0;
   background-color: rgba(255, 255, 255, 0.9);

diff --git a/layouts/default.vue b/layouts/default.vue
@@ -12,6 +12,7 @@
   font-weight: normal;
   font-style: normal;
 }
+
 html {
   font-family: 'RIDIBatang', 'Source Sans Pro', 'Segoe UI', serif;
   color: #333;

diff --git a/nuxt.config.js b/nuxt.config.js
@@ -17,11 +17,6 @@ export default {
     meta: [
       { charset: 'utf-8' },
       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
-      {
-        hid: 'description',
-        name: 'description',
-        content: '19/12/14 토요일 오후 1시 고려대 교우회관'
-      },
       {
         hid: 'og:url',
         name: 'og:url',
@@ -36,11 +31,6 @@ export default {
         hid: 'og:image',
         name: 'og:image',
         content: 'https://sumin-bohee.wemarry.in/img/introduction.jpg'
-      },
-      {
-        hid: 'og:description',
-        name: 'og:description',
-        content: '19/12/14 토요일 오후 1시 고려대 교우회관'
       }
     ],
     link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.png' }],