Container 사용자 지정, 에러 메시지 출력, 로딩 애니메이션, Footer

Container 너비 사용자 지정, MovieItem영역 회색 배경

$container-max-widths: (
  sm: 540px,
  md: 704px,
  lg: 924px,
  xl: 1140px,
  xxl: 1364px
);

src폴더의 scss폴더 안에 main.scss에서 container너비를 위와같이 수정합니다.

MovieList.vue의 style부분에서 inner를 꾸며서 movie를 출력하는 곳에 회색 배경을 보여줍니다.

 

에러 메시지 출력

왼쪽은 MovieList.vue의 state부분 message입니다. 오른쪽은 movie.js의 actions의 searchMovies중 try앞에 추가합니다.

웹페이지 열어줄 때는 먼저 검색하라고 나올 것이고, 검색버튼 클릭 시, message가 오른쪽처럼 비어 있어야 됩니다.

MovieList.vue의 template과 style부분 추가내용입니다.

message를 꾸미는 용도입니다.

 

로딩 애니메이션

부트스트랩에서 제공한 spinners 컴포넌트를 사용합니다.

MovieList.vue의 template과 script부분 추가내용입니다.

loading이 true면 spinners실행하고 false면 실행 안 합니다.

맨 왼쪽은 movie.js의 state부분입니다. 페이지 열자마자 당연히 로딩 애니메이션이 없어야 하며 false를 지정해줍니다.

 

가운데는 searchMovies함수 실행되면 만약에 loading이 true면 하단 로직 실행 안 하겠다는 것입니다.

이게 사용자가 결과 나오기 전에 여러번 검색을 방지할 수 있습니다.

로직 실행 되면 loading이 true를 반환해야 애니매이션 효과 보일 수 있습니다.

 

오른쪽은 try이던 catch이던 loaing을 false를 바꿔준다는 겁니다.

즉, 검색 결과가 나오던, 에러 메세지가 나오던 로딩 애니메이션이 false되서 로딩이 없어지는 겁니다.

 

Footer

<template>
  <footer>
    <Logo />
    <a 
      href="https:/github.com/Skye7095"
      target="_blank">
      (c){{ new Date().getFullYear() }} SKYE
    </a>
  </footer>
</template>

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

export default {
  components: {
    Logo
  }
}
</script>

<style lang="scss" scoped>
footer {
  padding: 70px 0;
  text-align: center;
  opacity: .3;
  .logo {
    display: block;
    margin-bottom: 4px;
  }
}
</style>

components폴더 안에 Footer.vue를 만듭니다.

footer는 전에 만들었던 logo도 불러서 같이 사용할 것이며 하단 년도도 자동갱신할 수 있겠끔 만들었습니다.

주의해야할 게 기존에 만든 logo는 a태그로 inline속성을 가지고 있습니다. 여기서는 block속성으로 변경했습니다.

 

Footer는 Header와 마찬가지 모든 페이지에서 다 노출해야 함으로 App.vue에 Footer를 추가합니다.