2023-10-18 본 캠프 10일차 / 29일차 TIL (carousel 제작)

2023-10-18 본 캠프 10일차 / 29일차 TIL

내일배움캠프 : 개인과제 발제 - 영화 정보 사이트

 

어제부로 자바스크립트 종합반 강의를 완강 하였으며, 금일부터는 개인과제가 주어졌다.

과제를 하면서 사용한 주요 기능과 오류 위주로 TIL을 작성하려고 한다.

 

 

사용한 주요 기능

캐러쉘 (carousel)

완성된 캐러쉘

최초에는 캐러쉘 API인 Swiper API를 사용하려고 하였지만, 원하는 데이터 처리를 하는데 어려움을 겪어서 직접 만들기로 하였다. 

 

기본 캐러쉘 구조는 다음과 같다.

 

<div class="main-info__carousel">
	<div class="main-info__carousel-Items" id="carousel-item-container">
		<div class="main-info__carousel-Item">Item1</div>
		<div class="main-info__carousel-Item">Item2</div>
		<div class="main-info__carousel-Item">Item3</div>
	</div>

	<div class="carousel-button-prev">
		<img src="./iconImage/left_carousel.svg" />
	</div>
	<div class="carousel-button-next">
		<img src="./iconImage/right_carousel.svg" />
	</div>
</div>

크게 아이템과 버튼 영역으로 나뉜다.

 

각 아이템은 부모 div의 display:flex 속성으로 가로로 한줄 처리가 된다.

또한 부모 div에서는 position:relative 속성으로 현재 위치를 기반으로 위치를 제어할 수 있게된다.

.main-info__carousel-Items{
    display: flex;
    position: relative;
    transition: all 0.5s;
    right: 0rem;
}

 

carousel의 최상위 div에서는 일정한 크기를 지정하고 넘치는 요소를 가리기 위해서 overflow:hidden 속성을 부여한다.

.main-info__carousel {
    position: relative;
    width: 35rem;
    height: 45rem;
    z-index: 0;
    overflow: hidden;
}

캐러쉘을 제어하기위한 이전, 다음 버튼을 구성해야한다.

캐러쉘 내부에서 클릭이 이루어지기 때문에 position:absoute를 사용하였다.

 

.carousel-button-prev{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    top: 0;
    bottom: 0;
    left: 0;
    width: 10rem;
    cursor: pointer;
}

.carousel-button-next{
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    top: 0;
    bottom: 0;
    right: 0;
    width: 10rem;
    cursor: pointer;
}

구조에 대한 준비는 완료 되었으며 주요 JS 로직은 다음과 같다.

// carousel Prev, Next 버튼 클릭 시 이벤트 처리
const carouselBtnEvent = function (value) {
  // 다음버튼을 눌렀을 때
  if (value === "next") {
    if (
      !$carouselContainer.style.right ||
      $carouselContainer.style.right === "0rem"
    ) {
      $carouselContainer.style.right = "35rem";
      infoTextRender(posterClosure("next"));
      return;
    } else if (
      (getMoviesData.length - 1) * 35 ===
      parseInt($carouselContainer.style.right.replace("rem", ""))
    ) {
      $carouselContainer.style.right = "0rem";
      infoTextRender(posterClosure("firstIndex"));
      return;
    } else {
      const next =
        parseInt($carouselContainer.style.right.replace("rem", "")) + 35;
      $carouselContainer.style.right = `${next}rem`;
      infoTextRender(posterClosure("next"));
      return;
    }
  }
  // 이전 버튼을 눌렀을 때
  else if (value === "prev") {
    if (
      !$carouselContainer.style.right ||
      $carouselContainer.style.right === "0rem"
    ) {
      $carouselContainer.style.right = `${(getMoviesData.length - 1) * 35}rem`;
      infoTextRender(posterClosure("lastIndex"));
      return;
    } else {
      const next =
        parseInt($carouselContainer.style.right.replace("rem", "")) - 35;
      $carouselContainer.style.right = `${next}rem`;
      infoTextRender(posterClosure("prev"));
      return;
    }
  }
};

이전버튼을 클릭했을때와 다음버튼을 클릭했을 때로 경우를 나누었다.

다음버튼을 클릭했을 때는 기존에 지정한 만큼 right속성을 변경하였다.

 

경우의 수는 다음과 같다

1. 마지막인덱스에서 다음버튼을 클릭했을 때 첫 인덱스로 돌아오기

2. 다음버튼을 클릭했을 때 지정한 크기만큼 right 속성 누적해서 더하기

 

이전 버튼도 동일하다.

1. 첫번째 인덱스에서 이전버튼 클릭 시 마지막 인덱스로 이동

2. 이전 버튼을 클릭했을 때 지정한 크기만큼 right 속성 누적해서 빼기

캐러쉘의 경우에는 추후에도 사용가능한 부분이기 때문에 다른 라이브러리 활용보다는 현재 만든 커스텀 캐러쉘을 활용할 예정이다.