[Vue.js][Ch4][영화검색 사이트] 스켈레톤 UI

Movie.vue

<template>
  <div class="container">
    <div class="skeletons">
      <div class="skeleton poster"></div>
        <div class="specs">
          <div class="skeleton title"></div>
          <div class="skeleton spec"></div>
          <div class="skeleton plot"></div>
          <div class="skeleton etc"></div>
          <div class="skeleton etc"></div>
          <div class="skeleton etc"></div>
        </div>
    </div>
  </div>
</template>

<script>
export default {
  created() {      // Movie 컴포넌트가 실행되면
    console.log(this.$route);     // 현재 페이지 주소 정보를 가져옴
    this.$store.dispatch('movie/searchMovieWithId', {
      // ex) movie/tt1234545
      id: this.$route.params.id   // 주소 부분의 파라미터에서 omdbID를 가져옴
    });
  }
}
</script>

<style lang="scss" scoped>
@import "~/scss/main";    /* 부트스트랩을 사용할 수 있게 import */

.container {
  padding-top: 40px;
}
.skeletons {
  display: flex;
  .poster {
    flex-shrink: 0;     // 감소 너비를 사용하지 않겠다.
    width: 500px;
    height: 500px * 3 / 2;
    margin-right: 70px;
  }
  .specs {
    flex-grow: 1;       // 증가 너비를 최대한 많이 사용하겠다.
  }
  .skeleton {
    border-radius: 10px;
    background-color: $gray-200;
    &.title {
      width: 80%;
      height: 70px;
    }
    &.spec {
      width: 60%;
      height: 30px;
      margin-top: 20px;
    }
    &.plot {
      width: 100%;
      height: 250px;
      margin-top: 20px;
    }
    &.etc {
      width: 50%;
      height: 50px;
      margin-top: 20px;
    }
  }
}
</style>

출력