[Vue.js][Ch4][영화검색 사이트] 영화 아이템 - 기본 출력

영화 리스트 기본 출력

MovieList.vue

<template>
  <div class="container">
    <div class="inner">
      <div class="message">
        {{ message }}
      </div>
      <div class="movies">
        <!-- props 활용 : movies 배열에 있는 movie 객체를 movie라는 이름으로 MovieItem이라는 컴포넌트에 전달 -->
        <MovieItem 
          v-for="movie in movies"
          :key="movie.imdbID" 
          :movie="movie" />
      </div>
    </div>
  </div>
</template>

<script>
import MovieItem from '~/components/MovieItem'

export default {
  components: {
    MovieItem
  },
  computed: {
    movies() {
      // store의 state중 movie 모듈의 movies 데이터를 계산된 데이터로 반환하겠다.
      return this.$store.state.movie.movies;
    },
    message() {
      return this.$store.state.movie.message;
    }
  }
}
</script>

<style lang="scss" scoped> 
  .container {
    .movies {
      display: flex;      // 수평 정렬
      flex-wrap: wrap;    // 줄바꿈이 가능하도록 감싸도록 변경
      justify-content: center;    // 가운데 정렬
    }
  }
</style>

• MovieItem 컴포넌트를 클래스가 movies인 div 태그로 감싸고 스타일 추가
  • 중바꿈이 가능하게 수평 정렬 + 가운데 정렬

MovieItem.vue

<template>
  <!-- 배경으로 영화 포스터를 출력, 내부에 영화 정보 출력 -->
  <div
    :style="{ backgroundImage: `url(${movie.Poster})` }"
    class="movie">
    <div class="info">
      <div class="year">
        {{ movie.Year }}
      </div>
      <div class="title">
        {{ movie.Title }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    movie: {
      type: Object,
      // 객체 or 배열 데이터를 직접 사용하지 않고 함수로 반환
      // default: function() { return {} }
      default: () => ({})
    }
  }
}
</script>

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

  .movie {
    $width: 200px;      // width 변수 선언
    width: $width;
    height: $width * 3 / 2;
    margin: 10px;
    border-radius: 4px;
    background-color: $gray-400;
    background-size: cover;     // 배경 이미지를 더 넓게 출력
    overflow: hidden;           // 이미지가 넘치면 숨김
    position: relative;
    .info {
      background-color: rgba($black, .3);     // 부트스트랩에서 제공하는 black을 30퍼센트의 투명도로 출력
      width: 100%;
      padding: 14px;
      font-size: 14px;
      text-align: center;
      position: absolute;       // 부모 요소 기준으로 배치
      left: 0;
      bottom: 0;
    }
  }
</style>

• 영화 포스터를 div 태그의 배경으로 출력

출력