2020-07-02 Vue.js D-day Counter 공통 컴포넌트

// AnimateCountDown.vue

<template>
  <div>
    <slot :days=" days" :hours="hours" :minutes="minutes" :seconds="seconds"></slot>
  </div>
</template>

<script>
// usage example
//  <AnimateCountdown v-slot="countdown" >
//    <div>
//      {{ countdown.days }}
//      {{ countdown.hours }}
//      {{ countdown.minutes }}
//      {{ countdown.seconds }}
//    </div>
//  </AnimateCountdown>
import { dayCounter, hourCounter, minuteCounter, secondCounter } from './util';
export default {
  data: () => ({
    remainingDate: new Date().getTime(),
    timer: '',
  }),
  props: {
    timestampEnd: {
      type: Number,
      default: new Date().getTime(),
    },
  },
  computed: {
    days() {
      return dayCounter(this.remainingDate);
    },
    hours() {
      return hourCounter(this.remainingDate);
    },
    minutes() {
      return minuteCounter(this.remainingDate);
    },
    seconds() {
      return secondCounter(this.remainingDate);
    },
  },
  methods: {
    updateTime() {
      this.remainingDate = this.timestampEnd - new Date().getTime();
    },
  },
  created() {
    this.updateTime();
    this.timer = setInterval(this.updateTime, 1000);
  },
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>

<style>
</style>

 

 

// 함수 분리 

export function dayCounter(timeStamp) {
  const days = Math.floor(timeStamp / (1000 * 60 * 60 * 24));
  if (days < 0) return '00';
  if (days < 10) return `0${days}`;
  return days;
}

export function hourCounter(timeStamp) {
  const hours = Math.floor((timeStamp % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  if (hours < 0) return '00';
  if (hours < 10) return `0${hours}`;
  return hours;
}

export function minuteCounter(timeStamp) {
  const minutes = Math.floor((timeStamp % (1000 * 60 * 60)) / (1000 * 60));
  if (minutes < 0) return '00';
  if (minutes < 10) return `0${minutes}`;
  return minutes;
}

export function secondCounter(timeStamp) {
  const seconds = Math.floor((timeStamp % (1000 * 60)) / 1000);
  if (seconds < 0) return '00';
  if (seconds < 10) return `0${seconds}`;
  return seconds;
}

 

 

D-day Counter를 구현할 일이 생겼는데, D-day 카운터는 오픈 소스에도 굉장히 많기 때문에 

굳이 머리를 쓸 필요가 없었다. 다만, 구현해야 하는 카운터 스타일이 

 

day, hour, minute, second가 서로 margin이 있었고, 읻반 함수처럼 return YY-DD-HH-MM-SS 식으로 구현하는 경우 

디자이너가 원하는 스타일링을 구현할 수가 없었다. 

 

이렇게 된 김에, 다른 곳에서도 재사용 할 수 있고, 일, 시, 분, 초 하나 하나 스타일링 할 수 있도록 

vue slot을 이용한 공통 컴포넌트를 제작했다. 

 

해당 컴포넌트는 D-day Counter 이기 때문에 D-day의 TimeStamp를 Prop으로 전달 받는다. 

D-day에서 현재 시간을 빼서 Data에 저장해주는 함수를 구현하고, 해당 함수를 1초에 한번씩 setInterval 해주게 했다.