feat: 캐러셀 완성

src/pages/main/components/carousel/Carousel.styled.ts

@@ -1 +1,30 @@
 import styled from "styled-components";
+
+export const CarouselWarpper = styled.div`
+  width: 100%;
+  overflow: hidden;
+`;
+
+export const CarouselLayout = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+`;
+
+export const CarouselContainer = styled.ul`
+  display: flex;
+  width: 100%;
+`;
+
+export const CarouselItem = styled.li`
+  flex-shrink: 0;
+  width: 100%;
+
+  list-style: none;
+
+  img {
+    width: 100%;
+    height: auto;
+  }
+`;

src/pages/main/components/carousel/Carousel.tsx

@@ -1,5 +1,7 @@
-import carouselImg from "../../../../assets/images/banner_roll.png";
+import { useState, useEffect, useRef } from "react";
+import * as S from "./Carousel.styled";
 
+import carouselImg from "../../../../assets/images/banner_roll.png";
 interface PromotionProps {
   promotionId: number;
   promotionPhoto: string;
@@ -10,10 +12,82 @@ interface PromotionComponentProps {
   promotionList: PromotionProps[];
 }
 
+// 서버에서 이미지 url 받아오기
 const ImgList = [carouselImg, carouselImg, carouselImg, carouselImg, carouselImg];
 
 const Carousel = (promotionList: PromotionComponentProps) => {
-  return <div></div>;
+  const carouselList = ImgList;
+  const [currIndex, setCurrIndex] = useState(1);
+  const [currList, setCurrList] = useState<string[]>();
+
+  const carouselRef = useRef<HTMLUListElement>(null);
+
+  // 인덱스 번호 변경
+  const moveToNthSlide = (index: number) => {
+    setTimeout(() => {
+      setCurrIndex(index);
+      if (carouselRef.current !== null) {
+        carouselRef.current.style.transition = "";
+      }
+    }, 500);
+  };
+
+  // 슬라이드 이동할 때 무한 + 어색하지 않도록 처음과 끝 반복
+  useEffect(() => {
+    if (carouselList.length !== 0) {
+      const startData = carouselList[0];
+      const endData = carouselList[carouselList.length - 1];
+      const newList = [endData, ...carouselList, startData];
+
+      setCurrList(newList);
+    }
+  }, [carouselList]);
+
+  // idx 변경되면 위치 이동
+  useEffect(() => {
+    if (carouselRef.current !== null) {
+      carouselRef.current.style.transform = `translateX(-${currIndex}00%)`;
+    }
+  }, [currIndex]);
+
+  // 5초마다 타이머 실행 -> 5초에 한 번씩 idx 변경
+  useEffect(() => {
+    const time = setTimeout(() => {
+      const newIndex = currIndex + 1;
+
+      if (newIndex === carouselList.length + 1) {
+        moveToNthSlide(1);
+      } else if (newIndex === 0) {
+        moveToNthSlide(carouselList.length);
+      }
+
+      setCurrIndex((prev) => prev + 1);
+      if (carouselRef.current !== null) {
+        carouselRef.current.style.transition = "all 0.5s ease-in-out";
+      }
+    }, 5000);
+    return () => {
+      clearInterval(time);
+    };
+  }, [currIndex]);
+
+  return (
+    <S.CarouselWarpper>
+      <S.CarouselLayout>
+        <S.CarouselContainer ref={carouselRef}>
+          {currList?.map((image, idx) => {
+            const key = `${image}-${idx}`;
+
+            return (
+              <S.CarouselItem key={key}>
+                <img src={image} alt="carousel-img" />
+              </S.CarouselItem>
+            );
+          })}
+        </S.CarouselContainer>
+      </S.CarouselLayout>
+    </S.CarouselWarpper>
+  );
 };
 
 export default Carousel;

src/pages/main/components/performance/Performance.tsx

@@ -40,7 +40,7 @@ const Performance = ({ genre, performanceList }: PerformanceComponentProps) => {
     <S.PerformanceWrapper>
       <S.PerformanceLayout>
         {data1.map((item) => (
-          <PerformnaceCard {...item} />
+          <PerformnaceCard key={item.performanceId} {...item} />
         ))}
       </S.PerformanceLayout>
       <Spacing marginBottom="1.5" />
@@ -50,7 +50,7 @@ const Performance = ({ genre, performanceList }: PerformanceComponentProps) => {
       <Spacing marginBottom="3.2" />
       <S.PerformanceLayout>
         {data2.map((item) => (
-          <PerformnaceCard {...item} />
+          <PerformnaceCard key={item.performanceId} {...item} />
         ))}
       </S.PerformanceLayout>
       <Spacing marginBottom="1.6" />