캐러셀 슬라이드 구현 (issue#57)

frontend/src/components/carousel/Carousel.styled.ts

@@ -0,0 +1,64 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+  width: 100rem;
+  margin: 0 auto;
+`;
+
+export const SlideWrapper = styled.div`
+  width: 100%;
+  overflow: hidden;
+  position: relative;
+`;
+
+interface SlideTrackProps {
+  currentIndex: number;
+  isSliding: boolean;
+}
+
+export const SlideTrack = styled.ul<SlideTrackProps>`
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  transform-style: preserve-3d;
+  transition: ${({ isSliding }) => (isSliding ? 'transform 400ms ease-in-out' : 'none')};
+  transform: ${({ currentIndex }) => `translateX(-${currentIndex * 100}%)`};
+  padding: 0;
+  margin: 0;
+  list-style: none;
+`;
+
+export const Slide = styled.li`
+  flex: 1 0 100%;
+  position: relative;
+  width: 100%;
+  transform-style: preserve-3d;
+`;
+
+export const Button = styled.button`
+  margin: 5px;
+  padding: 10px;
+  border: none;
+  background-color: var(--primary-400);
+  color: white;
+  cursor: pointer;
+  position: absolute;
+  border-radius: 0.5rem;
+  bottom: 50%;
+  &:hover {
+    background-color: var(--primary-300);
+  }
+`;
+
+export const PreviousButton = styled(Button)`
+  left: 3rem;
+`;
+
+export const NextButton = styled(Button)`
+  right: 3rem;
+`;

frontend/src/components/carousel/Carousel.tsx

@@ -0,0 +1,25 @@
+import useCarousel from '@/hooks/useCarousel';
+import type { PropsWithChildren } from 'react';
+import * as S from './Carousel.styled';
+
+export default function Carousel({ children }: PropsWithChildren) {
+  const { carouselItems, trackRef, currentIndex, isSliding, handleNextSlide, handlePreviousSlide } =
+    useCarousel({ children });
+
+  return (
+    <S.Container>
+      <S.SlideWrapper>
+        <S.SlideTrack ref={trackRef} currentIndex={currentIndex} isSliding={isSliding}>
+          {carouselItems.map((item, index) => (
+            <S.Slide key={`original-${index}`}>{item}</S.Slide>
+          ))}
+          {carouselItems.map((item, index) => (
+            <S.Slide key={`clone-${index}`}>{item}</S.Slide>
+          ))}
+        </S.SlideTrack>
+      </S.SlideWrapper>
+      <S.PreviousButton onClick={handlePreviousSlide}>이전</S.PreviousButton>
+      <S.NextButton onClick={handleNextSlide}>다음</S.NextButton>
+    </S.Container>
+  );
+}

frontend/src/hooks/useCarousel.ts

@@ -0,0 +1,54 @@
+import type { PropsWithChildren } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
+
+const useCarousel = ({ children }: PropsWithChildren) => {
+  const carouselItems = React.Children.toArray(children);
+  const carouselItemLength = carouselItems.length;
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [isSliding, setIsSliding] = useState(false);
+  const trackRef = useRef<HTMLUListElement>(null);
+
+  const handleTransitionEnd = () => {
+    if (currentIndex === carouselItemLength + 1) {
+      setCurrentIndex(1);
+    } else if (currentIndex === 0) {
+      setCurrentIndex(carouselItemLength);
+    }
+    setIsSliding(false);
+  };
+
+  useEffect(() => {
+    const track = trackRef.current;
+    if (track) {
+      track.addEventListener('transitionend', handleTransitionEnd);
+      return () => {
+        track.removeEventListener('transitionend', handleTransitionEnd);
+      };
+    }
+  }, [currentIndex, carouselItemLength]);
+
+  const handleNextSlide = () => {
+    if (!isSliding) {
+      setIsSliding(true);
+      setCurrentIndex((prevIndex) => prevIndex + 1);
+    }
+  };
+
+  const handlePreviousSlide = () => {
+    if (!isSliding) {
+      setIsSliding(true);
+      setCurrentIndex((prevIndex) => prevIndex - 1);
+    }
+  };
+
+  return {
+    carouselItems,
+    trackRef,
+    currentIndex,
+    isSliding,
+    handleNextSlide,
+    handlePreviousSlide,
+  };
+};
+
+export default useCarousel;

frontend/src/pages/MissionListPage.tsx

@@ -1,11 +1,61 @@
 import MissionItem from '@/components/missionList/MissionItem';
 import * as S from '@/components/missionList/MissionList.styled';
 import { missionMocks } from '@/components/missionList/missionMocks';
+import Carousel from '@/components/carousel/Carousel';
 
 export default function MissionListPage() {
   return (
     <S.MissionListContainer>
       <S.MissionListTitle>미션 풀고 리뷰 받고, Devel Up!</S.MissionListTitle>
+      <Carousel>
+        {/**
+         * 캐러셀 테스트 용으로 만들어본 이미지들입니다. 추후 수정 예정
+         */}
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100%',
+          }}
+        >
+          <img
+            src="https://hatrabbits.com/wp-content/uploads/2017/01/random.jpg"
+            width={'100%'}
+            height={'100%'}
+          />
+        </div>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+
+            height: '100%',
+          }}
+        >
+          <img
+            src="https://cdn.pixabay.com/photo/2016/07/07/16/46/dice-1502706_640.jpg"
+            width={'100%'}
+            height={'100%'}
+          />
+        </div>
+
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            height: '100%',
+          }}
+        >
+          <img
+            src="https://cdn.pixabay.com/photo/2015/03/17/02/01/cubes-677092_1280.png"
+            width={'100%'}
+            height={'100%'}
+          />
+        </div>
+      </Carousel>
       <S.MissionList>
         {missionMocks.map((mission) => (
           <MissionItem key={mission.id} mission={mission} />