afterEach, Vue Slot

영화 상세 모달 구현

1. 영화 아이템을 클릭 시 => 현재 라우트 경로에 ?movieId='해당 영화 아이디값'를 추가.
2. 스토어의 mutations를 이용해서 영화 상세 모달이 보여지도록 설정
3. 영화 상세 모달 컴포넌트에서 created 훅이 실행되고, 현재 라우트에 있는 movieId값을 받아서 api를 호출
4. api 호출 결과에서 에러가 발생했을 경우 => 이전의 페이지로 이동하도록 로직을 구성
5. ** http://localhost:8080/browse?movieId=278 라는 경로로 이동했을 경우, 영화 상세 모달 컴포넌트가 나오도록 설정하기 위해서 전역 afterEach 훅을 사용했다.
   : afterEach훅은 네비게이션이 완료되고 실행되는 훅이기 때문에, 현재 라우트 경로에 접근할 수 있고, 라우트에 movieId값이 있으면 영화 상세 모달이 노출되도록 SET_IS_DETAIL_MODAL(true)를 실행했다.

1. 전역 afterEach 훅

: 네비게이션이 완료되고 호출!, 여기서는 쿼리스트링 값을 읽어와야 하므로 여기서 코드를 작성해야한다.

2. 라우트가 변경될때마다 검사해서 영화 상세 모달 띄우기

// router/index.js
router.afterEach((to, from) => {
    setPrevRoute(from);

    // 라우트에 movieId 쿼리가 있으면, 영화 상세 모달 노출
    if (to.query.movieId) {
		// 1. 
        store.commit("movie/SET_IS_DETAIL_MODAL", true);
    }
});

1. 'movie/SET_IS_DETAIL_MODAL'에서 movie는 해당 mutations가 속한 모듈 이름이다.

3. 영화 상세 모달 에러 처리

• api 요청 메소드

async fetchMovie() {
  try {
	console.log("[fetchMovie in moviedetailModal]");
	this.isLoading = true;
	await this.FETCH_SELECTED_MOVIE(this.movieId);
  } catch (error) {
	// 여기서 에러 핸들링!!
	this.onError(error);
  } finally {
	console.log("finally");
	this.isLoading = false;
  }
},

• 4. 에러 핸들링 메소드

onError(error) {
  // 이전 라우트 경로를 받아온다.
  const prevRoute = getPrevRoute();
  
  // axios의 에러 response 객체
  const { response } = error;
  
  // response의 status 코드
  const resStatus = response.status;
  console.log("[resStatus in movieDetailModal] status : ", resStatus);

  this.SET_IS_DETAIL_MODAL(false);

  if (prevRoute) {
	this.$router.push(prevRoute);
  } else {
	this.$router.push("/browse");
  }
}

response.status 코드에 따라서 분기처리를 하고싶었지만, 그냥 에러가 발생했을 경우, 모달 컴포넌트를 제거하고 이전 경로로 이동하도록 로직을 구성했다.
만약 이전 라우트경로가 없을 경우 '/browse'로 이동하도록 설정했다.

Hover 카드 컴포넌트 만들기

1. 시나리오

1. 호버 카드 컴포넌트를 만든다.

2. 호버 카드안에 슬롯을 통해 원하는 엘리먼트를 넣는다.

3. MovieSlider안에 호버 카드 컴포넌트를 하나 둔다.

4. movieItem에 hover이벤트 혹은 mouseOver 이벤트가 발생할 경우 해당 movieItem의 offset을 적용해서 위치를 잡고 호버 카드 컴포넌트를 띄운다.

5. 호버 카드에 영화 id값을 적용하고, selectedMovie 데이터를 스토어를 통해서 호출한다.

6. 컴포넌트 구조, 호버 카드 (껍데기) > 영화 상세 아이템 (내용물)

2. Vue Slot 사용하기

: https://kr.vuejs.org/v2/guide/components-slots.html

• 감쌀 컴포넌트 (여기서는 HoverCard)

<template>
  <div class="hoverCard">
    <slot>HoverCard 컴포넌트입니다.</slot>
  </div>
</template>

<slot></slot>안에 정의된 내용은 아무런 컨텐트도 전달되지 않았을 때 기본적으로 렌더링 될 내용

• HoverCard를 사용해서 slot내에 내용을 넣을 컴포넌트

<template>
  <HoverCard>
    <div>MovieCardItem 컴포넌트입니다.</div>
  </HoverCard>
</template>

<div>MovieCardItem 컴포넌트입니다.</div> 이 부분이 HoverCard의 <slot></slot>을 대체한다.

3. CSS box-shadow

: 박스 그림자는 요소에서의 수평수직 거리(오프셋), 흐릿함과 확산 정도, 색상으로 이루어집니다.