Vue.js 영화 App) 영화 포스터 이미지 추가하기

1. public 폴더 내에 assets 폴더 만들기

• assets 폴더 내에 이미지 추가하기

• 객체에 추가하기

<template>
  <h1>영화 정보</h1>
  <div v-for="(movie, i) in movies" :key="i">
    <figure>
      <img :src="movie.imgUrl" :alt="movie.title">
    </figure>
    <div>
      <h3 class="bg-yellow" :style="{ color: movie.titleColor }">{{ movie.title }}</h3>
      <p>개봉: {{ movie.year }}</p>
      <p>장르: {{ movie.category }}</p>
      <button v-on:click="incrementLike(i)">좋아요</button> 
      &nbsp; <!--공백 추가-->
      <span>{{ movie.like }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      movies: [
        {
          title: "에이리언: 로물루스",
          year: "2024년 8월 16일",
          category: "SF, 호러, 액션, 스릴러, 크리처",
          time: "119분 (1시간 58분 51초)",
          rating: "15세 이상 관람가",
          imgUrl: "./assets/1.webp",
          like: 0
        },
        {
          title: "트위스터스",
          year: "2024년 8월 14일",
          category: "재난, 액션, 모험, 드라마",
          time: "122분 (2시간 2분 13초)",
          rating: "12세 이상 관람가",
          imgUrl: "./assets/2.jpg",
          like: 0
        },
        {
          title: "스픽 노 이블",
          year: "2024년 9월 11일",
          category: "공포/드라마",
          time: "98분(1시간 38분 26초)",
          rating: "15세 이상 관람가",
          imgUrl: "./assets/3.jpg",
          like: 0 
        },
        {
          title: "안녕, 할부지",
          year: "2024년 9월 4일",
          category: "다큐멘터리, 애니메이션",
          time: "94분 (1시간 34분 32초)",
          rating: "전체 관람가",
          imgUrl: "./assets/4.jpg",
          like: 0 
        },
      ]
    }
  },
  methods: {
    incrementLike(i) {
      this.movies[i].like++;
    }
  }
}
</script>

<style>
* {
  box-sizing: border-box;
  margin: 0;
}

body {
  max-width: 768px;
  margin: 0 auto;
  padding: 20px;
}

h1, h2, h3 {
  margin-bottom: 1rem;
}

p {
  margin-bottom: 0.5rem;
}

button {
  margin-right: 10px;
  margin-top: 10px;
}

.item {
  width: 100%;
  border: 1px solid #ccc;
  display: flex;
  margin-bottom: 20px;
  padding: 1rem;
}

.item figure {
  width: 30%;
  margin-right: 1rem;
}

.item img {
  width: 100%;
  height: 250px; /* 고정된 높이 */
  object-fit: cover; /* 이미지가 박스에 맞게 조정됨 */
}

.item .info {
  width: 70%;
}

.bg-yellow {
  padding: 10px 0;
  font-size: 1.5rem; /* 글자 크기를 키움 */
}
</style>

2. 정보 추가하고 CSS 적용시키기

<template>
  <h1>영화 정보</h1>
  <div v-for="(movie, i) in movies" :key="i" class="item">
    <figure>
      <img :src="movie.imgUrl" :alt="movie.title">
    </figure>
    <div class="info">
      <h3 class="bg-yellow">{{ movie.title }}</h3>
      <p>개봉: {{ movie.year }}</p>
      <p>장르: {{ movie.category }}</p>
      <p>상영시간: {{ movie.time }}</p>
      <p>등급: {{ movie.rating }}</p>
      <button v-on:click="incrementLike(i)">좋아요</button> 
      <span>{{ movie.like }}</span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      movies: [
        {
          title: "에이리언: 로물루스",
          year: "2024년 8월 16일",
          category: "SF, 호러, 액션, 스릴러, 크리처",
          time: "119분 (1시간 58분 51초)",
          rating: "15세 이상 관람가",
          imgUrl: "./assets/1.webp",
          like: 0
        },
        {
          title: "트위스터스",
          year: "2024년 8월 14일",
          category: "재난, 액션, 모험, 드라마",
          time: "122분 (2시간 2분 13초)",
          rating: "12세 이상 관람가",
          imgUrl: "./assets/2.jpg",
          like: 0
        },
        {
          title: "스픽 노 이블",
          year: "2024년 9월 11일",
          category: "공포/드라마",
          time: "98분(1시간 38분 26초)",
          rating: "15세 이상 관람가",
          imgUrl: "./assets/3.jpg",
          like: 0 
        },
        {
          title: "안녕, 할부지",
          year: "2024년 9월 4일",
          category: "다큐멘터리, 애니메이션",
          time: "94분 (1시간 34분 32초)",
          rating: "전체 관람가",
          imgUrl: "./assets/4.jpg",
          like: 0 
        },
      ]
    }
  },
  methods: {
    incrementLike(i) {
      this.movies[i].like++;
    }
  }
}
</script>

<style>
* {
  box-sizing: border-box;
  margin: 0;
}

body {
  max-width: 768px;
  margin: 0 auto;
  padding: 20px;
}

h1, h2, h3 {
  margin-bottom: 1rem;
}

p {
  margin-bottom: 0.5rem;
}

button {
  margin-right: 10px;
  margin-top: 10px;
}

.item {
  width: 100%;
  border: 1px solid #ccc;
  display: flex;
  margin-bottom: 20px;
  padding: 1rem;
}

.item figure {
  width: 30%;
  margin-right: 1rem;
}

.item img {
  width: 100%;
  height: 250px; /* 고정된 높이 */
  object-fit: cover; /* 이미지가 박스에 맞게 조정됨 */
}

.item .info {
  width: 70%;
}

.bg-yellow {
  padding: 10px 0;
  font-size: 1.5rem; /* 글자 크기를 키움 */
}
</style>