1. 캐러셀이란 ?

메인 페이지에서 마케팅 정보를 보여주는 방법으로, 유저가 스크롤을 내리지 않고도 볼 수 있는 정보의 양을 극대화하기 위해 사용됨

// styled-component 
const Conatiner = styled.div`
     width : 700px; // 이미지 크기와 똑같게 설정
     overflow : hidden; // 스크롤바가 안보이게 한다
`
const SliderContainer = styled.div`
     width : 100%;
     display : flex;
`

function Slider() {
  const totalSlides = 5; // 몇개의 슬라이드가 있는지를 작성
  const [currentSlide,setCurrentSlide] = useState(0);
  const slideRef = useRef();
  

  const nextSlide = () => {
    slideRef.current.style.transition = 'all 0.3s ease-in-out'; // 부드럽게 움직임
    
    if(currentSlide >= totalSlides -1){
      setCurrentSlide(0); 
      slideRef.current.style.transform = 'translateX(0%)';
      // 슬라이드 마지막의 다음은 슬라이드 첫번째로 돌아감
    }
    else {
      setCurrentSlide(currentSlide + 1);
      slideRef.current.style.transform = `translate(-${(currentSlide+1)*700}px)`
      // 슬라이드를 한칸씩 이동하는데 그 한칸의 크기는 이미지의 크기(700px)만큼 이동한다.
    }
  }

   useEffect(() => {
     setTimeout(nextSlide,5000); // 5초에 한번씩 슬라이드가 이동
      
   },[currentSlide])

   return (
     <Container>
       <SliderContainer ref={slideRef}>
         <img src='이미지 주소'>
         <img src='이미지 주소'>
         <img src='이미지 주소'>
         <img src='이미지 주소'>
         <img src='이미지 주소'>
       </SliderContainer>
     </Container> 
   )
   
}